/* PLOUF ! L'accueil « Dojo », l'écran Choix et les écrans qui mènent au Tatami (js/accueil.js ;
   comptes/lot-c/SPEC-LOT-C.md §2.3 et §2.4 ; dev/QUATRE.md §2.3).
   Chargée après css/style.css, dont elle reprend l'unité (1rem = 1 % de la largeur d'un écran 16:9, plancher de 8 px),
   l'encre, le crème et le lettrage .tt. Chaque règle vise .s-accueil, .s-choix, .s-parcours ou l'un de leurs enfants
   (.acc-*, .choix-*, .pc-*), sauf le voile et le badge du compte, qui suivent l'écran affiché, et la légende des
   touches que la sélection des personnages gagne avec ce lot (.sel-k, .sel-pause).
   Tailles vérifiées par dev/test-ui.html (debord=1) pour l'accueil et Choix, et par dev/test_accueil.py pour le
   parcours, en 1280 × 720, 640 × 360 et 390 × 844. */

/* Le voile de l'écran titre couvre aussi Choix (§2.4 : opacité 1, comme sur l'accueil), et les écrans du parcours, que
   js/accueil.js montre par-dessus l'écran 'none' du jeu en veille. */
#ui[data-screen="choix"] .veil, #ui:has(.s-parcours.is-on) .veil { opacity: 1; }

/* Boutons de ces écrans : de vrais <button>, sans le style du navigateur. :where() garde cette remise à zéro sous
   les classes des boutons, qui la surchargent. */
:where(.s-accueil, .s-choix, .s-parcours) button {
  margin: 0; font: inherit; color: inherit; text-align: center; background: none; border: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
/* Un bouton inactif (comptes en file://, Dojo absent de la page) : gris, sans relief, et la raison est écrite dessous. */
.s-accueil .inactif, .s-choix .inactif, .s-parcours .inactif { filter: grayscale(1); opacity: .7; }
.s-accueil .acc-btn.inactif {
  background: #d9d3e3; color: rgba(38, 17, 90, .55); border-style: dashed; box-shadow: 0 .25rem 0 rgba(38, 17, 90, .55);
}
/* Le lien grisé : texte gris et souligné en pointillés, comme le bord du bouton grisé. Le gris seul ne suffisait pas sur
   un lien blanc (grayscale ne change rien au blanc). */
.s-accueil .acc-lien.inactif {
  color: #b3abc4; text-decoration: underline dashed; text-decoration-thickness: .08em; opacity: 1;
  text-shadow: 0 .14rem 0 rgba(23, 10, 58, .9);
}
#ui .s-accueil .inactif.cliquable, #ui .s-choix .inactif.cliquable, #ui .s-parcours .inactif.cliquable { cursor: not-allowed; }

/* ---------- Accueil ---------- */
/* Le logo en haut, les boutons en bas : le milieu de l'écran reste à la vitrine des personnages, comme sur l'ancien
   titre. */
.s-accueil.is-on { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2.2rem 1rem 2.4rem; }
/* Le haut laisse la place au bond des lettres (logoHop, 0,19 em vers le haut) et à leur contour blanc. */
.acc-logo-wrap { display: flex; justify-content: center; padding-top: 2.4rem; }
/* « Dojo » : quatre lettres, le logo grandit d'un tiers par rapport à « Dojo Party » (10,5 rem). À 14 rem, il fait
   environ 45 rem de large avec son contour et son inclinaison : il tient dans les 80 rem d'une fenêtre de 640 × 360.
   Sur un écran plus étroit que haut, le rem plafonne à 8 px et la largeur tombe sous 50 rem : la taille suit alors la
   largeur. */
.acc-logo { font-size: min(14rem, 23vw); line-height: 1.05; --tilt: -5deg; }
/* Les deux boutons côte à côte, le lien et les messages dessous. */
.acc-menu { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; max-width: 100%; }
.acc-boutons { display: flex; justify-content: center; align-items: center; gap: 2.2rem; max-width: 100%; }
.acc-btn {
  position: relative; min-width: 27rem; max-width: 100%; padding: .7rem 2.4rem .95rem; border-radius: 2rem;
  border: .38rem solid var(--ink); box-shadow: 0 .55rem 0 var(--ink), 0 1.2rem 2rem rgba(23, 10, 58, .3);
  background: linear-gradient(180deg, #fffdf6, var(--cream) 62%, #ffeccd); color: var(--ink);
  font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; font-size: 2.6rem; line-height: 1.1; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transform: rotate(var(--tilt, 0deg)); animation: popIn .6s .25s both;
}
.acc-compte { --tilt: -1.2deg; }
/* « Continuer : <pseudo> » (js/accueil.js) : le pseudo, jusqu'à 16 signes (js/compte.js), n'est jamais coupé par des
   points de suspension. Il est un peu plus petit que « Continuer : », et passe entier à la ligne quand la place manque ;
   un pseudo plus large que le bouton se couperait dans le mot plutôt que de déborder (dev/test-ui.html vérifie qu'un
   pseudo de 16 signes n'en arrive pas là, aux trois tailles). */
.acc-btn.avec-pseudo { white-space: normal; overflow: visible; text-overflow: clip; max-width: min(46rem, 100%); }
.acc-pseudo { display: inline-block; max-width: 100%; font-size: .8em; overflow-wrap: anywhere; }
.acc-invite { --tilt: 1deg; animation-delay: .35s; }
/* La surbrillance : le même jaune que la carte choisie des menus, et un anneau. Pas de bond : popIn, tenu après la fin
   de l'apparition (both), fixe transform, comme sur l'écran du mode du Tatami (.mode-card.cur). Un transform posé ici
   ne se verrait pas. */
.acc-btn.sel {
  background: linear-gradient(180deg, #fff3a0, var(--yellow) 55%, #ffb21e);
  box-shadow: 0 .55rem 0 var(--ink), 0 0 0 .5rem #fff, 0 1.2rem 2.2rem rgba(23, 10, 58, .35);
}
.acc-lien {
  padding: .35rem 1.2rem .5rem; border-radius: 1.2rem; font-size: 1.75rem; font-weight: 600; color: #fff;
  text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .2em;
  text-shadow: 0 .14rem 0 rgba(23, 10, 58, .75); white-space: nowrap; animation: popIn .6s .45s both;
}
.acc-lien.sel { background: rgba(23, 10, 58, .78); color: #ffe666; box-shadow: 0 0 0 .3rem #ffe666; }
.acc-raison, .acc-msg {
  max-width: min(46rem, 100%); padding: .45rem 1.3rem .55rem; border-radius: 1.2rem; background: rgba(23, 10, 58, .78);
  font-size: 1.3rem; line-height: 1.25; text-align: center; text-wrap: balance;
}
.acc-msg { color: #ffe666; font-size: 1.5rem; animation: popIn .4s both; }
.acc-raison.off, .acc-msg.off, .acc-tactile.off { display: none; }
.acc-tactile {
  max-width: calc(100% - 2rem);
  padding: .4rem 1.3rem .5rem; border-radius: 1.2rem; background: var(--cream); color: var(--ink);
  border: .26rem solid var(--ink); box-shadow: 0 .3rem 0 var(--ink); font-size: 1.4rem; text-align: center;
}

/* ---------- Choix ---------- */
/* Deux blocs côte à côte : le Dojo à gauche, la liste des jeux à droite. 34 + 3 + 28 = 65 rem : ils tiennent dans les
   80 rem d'une fenêtre de 640 × 360. Sur un écran plus haut que large, ils passent l'un sous l'autre. */
.s-choix.is-on { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4rem; padding: 5rem 1rem 1.5rem; }
.choix-blocs { display: flex; align-items: center; justify-content: center; gap: 3rem; max-width: 100%; }
.choix-carte {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  border: .4rem solid var(--ink); border-radius: 2.6rem; color: var(--ink);
  box-shadow: 0 .7rem 0 var(--ink), 0 1.8rem 2.6rem rgba(23, 10, 58, .38);
  transform: rotate(var(--tilt, 0deg)); animation: popIn .65s .12s both;
}
/* L'anneau jaune de la carte choisie, comme sur l'écran du mode (.mode-ring). C'est lui seul qui la désigne : popIn,
   tenu après la fin de l'apparition (both), fixe transform, et un bond de la carte choisie ne se verrait pas. */
.choix-carte::after {
  content: ''; position: absolute; inset: -1rem; border: .6rem solid var(--yellow); border-radius: 3.4rem;
  opacity: 0; transform: scale(.92); transition: opacity .12s linear, transform .3s var(--boing); pointer-events: none;
}
.choix-carte.sel::after { opacity: 1; transform: scale(1); }
.choix-dojo {
  --tilt: -1.5deg; width: 34rem; min-height: 20rem; padding: 2.6rem 2rem 2.4rem; color: #fff;
  background: linear-gradient(180deg, #a880ff 0%, var(--violet) 48%, var(--violet-deep) 100%);
}
/* Le toit du dojo (un dessin de js/accueil.js), posé à cheval sur le haut de la carte. */
.choix-dojo-toit { position: absolute; left: 50%; top: -5.8rem; width: 26rem; height: 7.28rem; margin-left: -13rem; }
.choix-dojo-toit svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .35rem 0 var(--ink)); }
.choix-dojo .choix-nom { font-size: 3.4rem; text-align: center; white-space: normal; text-wrap: balance; }
.choix-dojo .choix-ligne { font-size: 1.6rem; text-align: center; text-shadow: 0 .12rem 0 rgba(23, 10, 58, .6); text-wrap: balance; }
.choix-raison { font-size: 1.2rem; opacity: .9; text-wrap: balance; }
.choix-jeux { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.choix-jeux-titre { font-size: 2.6rem; --tilt: -2deg; transform: rotate(var(--tilt)); animation: popIn .6s both; }
.choix-liste { display: flex; flex-direction: column; gap: 1.6rem; }
.choix-jeu {
  --tilt: 1.4deg; width: 28rem; padding: 2rem 1.6rem 1.8rem;
  background: linear-gradient(180deg, #fffdf6, var(--cream) 62%, #ffeccd);
}
.choix-jeu .choix-nom { font-size: 4.4rem; color: var(--cream); }
/* Le sous-titre du jeu sur un ruban rose, comme l'ancien écran titre (.ribbon). */
.choix-jeu .choix-ligne {
  padding: .3rem 1.4rem .45rem; border: .3rem solid var(--ink); border-radius: 1.2rem; color: #fff;
  background: linear-gradient(180deg, #ff86bf 0%, var(--pink) 50%, var(--pink-deep) 100%); box-shadow: 0 .35rem 0 var(--ink);
  font-family: 'Titan One', 'Fredoka', sans-serif; font-weight: 400; font-size: 1.7rem; letter-spacing: .02em;
  -webkit-text-stroke: .16em var(--ink); paint-order: stroke fill; white-space: nowrap;
}
.choix-joueurs { margin-top: .3rem; font-size: 1.7rem; color: var(--violet); -webkit-text-stroke-width: .13em; }
.choix-aide {
  padding: .6rem 2.2rem .7rem; border-radius: 1.6rem; background: rgba(23, 10, 58, .8); border: .28rem solid var(--ink);
  font-size: 1.5rem; text-align: center; max-width: calc(100% - 2rem); text-wrap: balance; animation: popIn .6s .4s both;
}

/* Le badge du compte (js/ui-compte.js, css/compte.css) passe de l'écran titre à Choix : l'accueil porte ses propres
   boutons de compte. Sur un écran titre sans js/accueil.js (dev/test-compte.html), il reste où il était. */
#ui[data-screen="choix"] .compte-badge { display: flex; }
#ui[data-screen="title"]:has(.s-accueil) .compte-badge { display: none; }
/* Sur Choix, le badge se choisit aussi au clavier et à la manette (js/accueil.js) : la surbrillance des cartes, un bond
   et l'anneau jaune. */
#ui[data-screen="choix"] .compte-badge.sel {
  transform: translateY(-.25rem) scale(1.06); box-shadow: 0 .38rem 0 var(--ink), 0 0 0 .45rem var(--yellow);
}

/* ---------- Parcours du Tatami : « Comment on joue ? », « À combien ? », « Chacun pour soi ou en équipes ? » ---------- */
/* Le nom du jeu, la question, une rangée de cartes, l'aide et le Retour, comme l'écran du mode du Tatami dont ils
   prennent la place (css/style.css, .mode-*). Le haut laisse passer le Retour : le nom du jeu commence sous lui. Trois
   cartes de 24 rem et deux espaces de 2,2 rem font 76,4 rem : elles tiennent dans les 80 rem d'une fenêtre de
   640 × 360. Sur un écran plus haut que large, les cartes passent en colonne (plus bas). */
.s-parcours.is-on {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem;
  padding: 2.8rem 1rem 1.4rem;
}
.pc-tete { display: flex; flex-direction: column; align-items: center; gap: .15rem; max-width: 100%; }
.pc-jeu { font-size: 1.9rem; color: var(--cream); --tilt: -2deg; transform: rotate(var(--tilt)); animation: popIn .5s both; }
.pc-titre {
  max-width: 100%; font-size: 4.2rem; text-align: center; text-transform: uppercase; white-space: normal; text-wrap: balance;
  --tilt: -1.5deg; transform: rotate(var(--tilt)); animation: popIn .6s both;
}
.pc-equipes .pc-titre { font-size: 3.4rem; }
.pc-cartes { display: flex; justify-content: center; align-items: stretch; gap: 2.2rem; max-width: 100%; }
.pc-carte {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .55rem;
  width: 24rem; padding: 1.7rem 1.1rem 1.5rem; color: var(--ink);
  border: .4rem solid var(--ink); border-radius: 2.6rem; background: linear-gradient(180deg, #fffdf6, var(--cream) 62%, #ffeccd);
  box-shadow: 0 .7rem 0 var(--ink), 0 1.8rem 2.6rem rgba(23, 10, 58, .38);
  --tilt: -1.4deg; transform: rotate(var(--tilt)); animation: popIn .65s .12s both;
}
.pc-carte:nth-child(2n) { --tilt: 1.4deg; animation-delay: .18s; }
.pc-carte:nth-child(3n) { --tilt: -1deg; animation-delay: .24s; }
/* L'anneau jaune de la carte choisie, comme sur l'écran du mode (.mode-ring) et sur Choix. C'est lui seul qui la
   désigne : popIn, tenu après la fin de l'apparition (both), fixe transform, et un bond ne se verrait pas. Il n'y a
   d'ailleurs pas sa place : en 1280 × 720, un rem à peine sépare le haut des cartes du titre. */
.pc-carte::after {
  content: ''; position: absolute; inset: -1rem; border: .6rem solid var(--yellow); border-radius: 3.4rem;
  opacity: 0; transform: scale(.92); transition: opacity .12s linear, transform .3s var(--boing); pointer-events: none;
}
.pc-carte.sel::after { opacity: 1; transform: scale(1); }
.pc-maniere, .pc-formule { width: 29rem; }
.pc-nom { font-size: 3rem; text-align: center; white-space: normal; text-wrap: balance; }
.pc-ligne { font-size: 1.45rem; line-height: 1.2; text-align: center; text-wrap: balance; }
.pc-suite { font-size: 1.25rem; opacity: .8; }
.pc-embleme { display: block; width: 11rem; height: 6.4rem; }
.pc-embleme svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .3rem 0 rgba(38, 17, 90, .35)); }
/* Pastilles des joueurs : J1 à J4 à leur couleur pour chacun pour soi ; pour les équipes, deux paires blanches, sans
   étiquette ni couleur de joueur. En 2 contre 2 chaque joueur garde sa couleur (dev/QUATRE.md §1.5), et la composition
   se choisit à l'écran suivant. */
.pc-pastilles { display: flex; justify-content: center; gap: .5rem; }
.pc-pastille {
  display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; padding-bottom: .1rem;
  background: var(--pc); border: .3rem solid var(--ink); box-shadow: 0 .3rem 0 var(--ink);
  font-family: 'Titan One', sans-serif; font-weight: 400; font-size: 1.35rem; color: #fff; -webkit-text-stroke: .06em var(--ink);
}
.pc-pastille.pc-neutre { --pc: #fff; }
.pc-camps .pc-pastille:nth-child(2) { margin-right: 1.6rem; }
/* « À combien ? » : sous le nombre, une ligne par siège de la carte, avec ses touches (P.Game.touches()). */
.pc-nombre .pc-nom { font-size: 3.2rem; }
.pc-sieges { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; width: 100%; margin-top: .2rem; }
.pc-siege-bloc { display: flex; flex-direction: column; gap: .05rem; }
.pc-siege { display: flex; align-items: center; gap: .45rem; }
.pc-qui {
  flex: none; padding: 0 .45rem .14rem; border-radius: .7rem; background: var(--pc); border: .2rem solid var(--ink);
  font-size: 1.15rem; -webkit-text-stroke-width: .18em; text-shadow: none;
}
.pc-caps { display: flex; align-items: center; gap: .2rem; }
.pc-caps + .pc-caps { margin-left: .35rem; }
.pc-kc { min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem .05rem; font-size: 1.1rem; margin-bottom: .3rem; }
.pc-alt { padding-left: 3.1rem; font-size: 1rem; line-height: 1.1; text-align: left; opacity: .78; text-wrap: balance; }
.pc-manette { font-size: 1.35rem; }
.pc-aide {
  padding: .55rem 2.2rem .65rem; border-radius: 1.6rem; background: rgba(23, 10, 58, .8); border: .28rem solid var(--ink);
  font-size: 1.5rem; text-align: center; max-width: calc(100% - 2rem); text-wrap: balance; animation: popIn .6s .4s both;
}

/* ---------- Sélection des personnages ---------- */
/* L'accueil n'enseigne plus aucune touche (SPEC-LOT-C §1.3 et §2.7) : la légende de chaque joueur les donne toutes, avec
   leur nom dessous, et la touche de pause ferme la rangée (js/ui.js, buildSelect). Ces règles vivent ici et non près de
   .sel-legend dans css/style.css, que le lot du Tatami à quatre réécrit en même temps : la fusion des deux lots n'a pas
   à trancher entre deux versions des mêmes lignes. Trois joueurs tiennent sur une rangée en 1280 × 720 ; au-delà, la
   rangée passe à la ligne au lieu de sortir de l'écran. */
.sel-help-keys { flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: 2rem; row-gap: .5rem; }
.sel-legend { align-items: flex-start; gap: .6rem; }
.sel-legend .who { margin-top: .15rem; }
.sel-pause { display: flex; align-items: flex-start; font-size: 1.25rem; }
.sel-k { display: flex; flex-direction: column; align-items: center; }
.sel-k-caps { display: flex; align-items: center; gap: .25rem; }
.sel-k-nom { margin-top: -.1rem; font-size: 1rem; line-height: 1; opacity: .85; white-space: nowrap; }

/* Écran plus haut que large (téléphone) : les deux blocs de Choix l'un sous l'autre, et le logo rapetisse avec la
   largeur. Le jeu ne s'y pilote pas au doigt, la ligne .acc-tactile le dit. */
@media (max-aspect-ratio: 1/1) {
  .acc-menu { width: min(40rem, 100%); }
  .acc-boutons { flex-direction: column; gap: 1.3rem; width: 100%; }
  .acc-btn { min-width: 0; width: 100%; font-size: 2.4rem; }
  .choix-blocs { flex-direction: column; gap: 3.4rem; padding-top: 5rem; }
  .choix-dojo { width: min(34rem, calc(100vw - 4rem)); min-height: 0; }
  .choix-jeu { width: min(28rem, calc(100vw - 4rem)); }
  /* Parcours : les cartes en colonne, Haut et Bas les parcourent (Gauche et Droite aussi, js/accueil.js). */
  .pc-cartes { flex-direction: column; align-items: center; gap: 2rem; }
  .pc-carte, .pc-maniere, .pc-formule { width: min(29rem, calc(100vw - 4rem)); }
  .pc-titre { font-size: 3.6rem; }
  .pc-equipes .pc-titre { font-size: 3.2rem; }
}