/* L'ecran « Choisis ta raquette » (maquette de Frederic du 18/09, kit bleu).
   Il vient apres le choix des personnages. A gauche la raquette en grand sur
   son socle, son nom et ses trois jauges ; a droite la grille, avec ses
   filtres ; en bas a droite le bouton qui equipe et passe aux arenes.

   Tout se mesure en hauteur d'ecran (vh) : la page garde ses proportions de
   l'ordinateur au telephone couche, comme l'affiche du chargement. */

#raquettes.screen { display: block; padding: 0; overflow: hidden; }

.rq-page {
  position: absolute; inset: 0;
  background: url('../assets/ui/raquettes/fond.webp') center / cover no-repeat, #081640;
  font-family: 'Montserrat', var(--font);
  color: #fff;
  --lettrage: 'Lilita One', 'Arial Rounded MT Bold', 'Segoe UI Black', var(--font);
}

.rq-titre {
  position: absolute; top: 6vh; left: 42vw; width: 52vw;
  margin: 0; text-align: center;
  font-family: var(--lettrage); font-weight: 400; font-size: 5.4vh; line-height: 1;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: #fff; text-shadow: 0 0.5vh 0 #0a1a4a, 0 0 2vh rgba(80, 190, 255, 0.5);
}

/* ---- La fiche, a gauche ---- */
.rq-fiche { position: absolute; left: 3vw; top: 13vh; width: 34vw; text-align: center; }
/* La vitrine tient une hauteur fixe : la raquette flotte a l'interieur et ne
   passe donc jamais par-dessus son nom (Frederic, 18/09 : « ne coupe pas la
   raquette par le texte »). */
.rq-vitrine { position: relative; height: 40vh; margin: 0 auto; }
.rq-grande, .rq-3d {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; margin: 0 auto;
  object-fit: contain;
}
.rq-grande {
  filter: drop-shadow(0 2vh 2.5vh rgba(0, 0, 0, 0.55));
  animation: rq-flotte 3.4s ease-in-out infinite;
}
/* La 3D, elle, ne flotte pas : elle tourne, et le doigt la prend. */
.rq-3d { touch-action: none; cursor: grab; }
/* 20 % plus grande (Frederic, 19/09 : « agrandis la raquette 3D de 20 % »).
   Le cadre grandit VERS LE HAUT seulement : son bas ne bouge pas, la raquette
   ne passe donc toujours pas sur son nom. La camera cadre la raquette sur la
   hauteur du cadre (js/ui/vitrine-raquette.js) : 20 % de cadre, 20 % de
   raquette. */
.rq-grande, .rq-3d { top: -20%; left: -10%; width: 120%; height: 120%; }
.rq-3d:active { cursor: grabbing; }
/* `display: block` ci-dessus l'emporterait sur l'attribut `hidden` : sans
   cette ligne on voyait les DEUX raquettes l'une sur l'autre (Frederic,
   18/09 : « elles sont en double »). */
.rq-grande[hidden], .rq-3d[hidden] { display: none; }
@keyframes rq-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2vh); } }
.rq-socle {
  width: 22vw; height: 4vh; margin: -1vh auto 1.5vh;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(90, 200, 255, 0.55), rgba(20, 70, 180, 0.15) 65%, transparent 72%);
}
.rq-nom {
  margin: 0; font-family: var(--lettrage); font-weight: 400; font-size: 4.4vh; line-height: 1;
  text-transform: uppercase; color: #fff; text-shadow: 0 0.4vh 0 #0a1a4a;
}
.rq-collection {
  margin: 0.6vh 0 2.4vh; font-size: 1.9vh; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #d6efff; text-shadow: 0 0.2vh 0 #0a1a4a;
}

.rq-jauges {
  margin: 0 auto; width: 30vw;
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: 1.1vh 1vw;
  /* Une plaque sombre sous les jauges : sans elle, libelles et barres se
     fondaient dans le socle eclaire, bleu sur bleu (Frederic, 19/09). */
  padding: 1.4vh 1.4vw;
  border-radius: 1.6vh;
  background: rgba(3, 10, 34, 0.82);
  box-shadow: 0 0 0 0.25vh rgba(255, 255, 255, 0.12), 0 1vh 2.4vh rgba(0, 0, 0, 0.45);
}
.rq-jauge { display: contents; }
.rq-jauge dt {
  grid-column: 1; text-align: left; font-size: 1.9vh; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  text-shadow: 0 0.2vh 0 #000;
}
.rq-jauge dd { grid-column: 2; margin: 0; display: flex; align-items: center; gap: 1vw; }
.rq-barre {
  flex: 1; height: 1.6vh; border-radius: 99vh;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 0.2vh rgba(255, 255, 255, 0.28);
  overflow: hidden;
}
.rq-barre i { display: block; height: 100%; width: 0; border-radius: 99vh; transition: width 0.25s ease; }
.rq-barre.puissance i { background: linear-gradient(90deg, #ff9a3c, #ff5f2e); }
/* L'effet en violet-rose : le bleu d'avant disparaissait dans le decor bleu. */
.rq-barre.effet i { background: linear-gradient(90deg, #ff8ad8, #b24dff); }
.rq-barre.controle i { background: linear-gradient(90deg, #ffe97a, #f5b301); }
.rq-jauge b { min-width: 3.4vh; font-size: 2vh; font-weight: 800; color: #fff; text-shadow: 0 0.2vh 0 #000; }

/* ---- A droite : les onglets par type, puis la bande ----
   Frederic, 19/09 : « faire comme les joueurs, car il va y avoir de plus en
   plus de raquettes, et laisser le menu par type », puis « garder les memes
   fleches que sur l'ecran de selection des personnages, la meme typo et le
   meme type de bouton, et centrer la bande ». Tout reprend donc l'ecran des
   personnages au telephone (css/mobile.css, .st-cartes, .st-carte,
   .st-fleche, .st-points, .st-jaune) : memes images de fleches, meme police
   Lilita One, meme bouton jaune, et la bande a la MEME PLACE (42 a 94 % de la
   largeur). La grille a colonnes fixes etait au bout : a quatre colonnes, la
   quinzieme raquette faisait passer une quatrieme rangee sous le bouton. */
.rq-panneau { position: absolute; left: 42vw; width: 52vw; top: 15vh; }
.rq-filtres { display: flex; gap: 1vw; margin-bottom: 1vh; }
.rq-filtre {
  flex: 1; padding: 1.1vh 0; border-radius: 99vh;
  border: 0.3vh solid rgba(110, 215, 255, 0.7); background: rgba(6, 22, 70, 0.9);
  color: #cfe3ff; font-size: 1.9vh; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer;
}
.rq-filtre.actif { background: linear-gradient(180deg, #46b4ff, #1666e8); color: #fff; }

/* Une rangee qui defile par pages de quatre (scroll-snap), comme les persos. */
.rq-rangee { position: relative; }
.rq-grille {
  display: flex; gap: 1.8vw;
  height: 42vh; padding: 2vh 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rq-grille::-webkit-scrollbar { display: none; }
.rq-carte {
  flex: 0 0 calc((100% - 3 * 1.8vw) / 4);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  border: 0.55vh solid #3b82e6; border-radius: 2.2vh;
  color: #fff; background: linear-gradient(160deg, #1d56c4, #0a1f5e);
  cursor: pointer;
}
.rq-carte img {
  flex: 1; min-height: 0; width: 100%; box-sizing: border-box;
  padding: 1.4vh 0.6vw; object-fit: contain;
}
.rq-carte span {
  padding: 1vh 0.4vw;
  font-family: var(--lettrage); font-size: 3.4vh; font-weight: 400;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #061340;
}
.rq-carte.choisie {
  border-color: #b8ecff;
  box-shadow: 0 0 1.6vh 0.6vh #2f9dff, inset 0 0 0 0.5vh #2f9dff;
}
/* Les fleches : les images rondes de l'ecran des personnages, de chaque cote,
   seulement s'il reste des raquettes a faire defiler de ce cote. */
.rq-fleche {
  position: absolute; top: calc(50% - 5vh); z-index: 1;
  width: 10vh; height: 10vh; padding: 0; border: 0; cursor: pointer;
  background: center / contain no-repeat;
  filter: drop-shadow(0 0.6vh 0.8vh rgba(0, 0, 0, 0.5));
}
.rq-fleche[hidden] { display: none; }
.rq-fleche-g { left: calc(-1vw - 10vh); background-image: url('../assets/ui/selection/rond-precedent.webp?v=1'); }
.rq-fleche-d { right: calc(-1vw - 10vh); background-image: url('../assets/ui/selection/rond-suivant.webp?v=1'); }
/* Les points de page, sous la bande. */
.rq-points { display: flex; justify-content: center; gap: 1.4vw; margin-top: 0.4vh; }
.rq-points button {
  width: 2.6vh; height: 2.6vh; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.35); cursor: pointer;
}
.rq-points button.actif { background: #fff; }

/* ---- Les deux boutons ----
   Au-dessus de la vitrine agrandie : sa toile prend le doigt, elle ne doit
   pas passer sur le retour.

   ⛔ LA MEME FLECHE QUE PARTOUT AILLEURS (Frederic, 25/09 : « sur l'ecran de
   selection des raquettes il y a un bouton BACK au lieu des fleches retour
   comme sur les autres ecrans »). C'etait la pastille « RETOUR » ecrite en
   toutes lettres, seule de son espece : les ecrans de profil portent le rond
   `rond-retour.webp` a la meme place (.pf-retour, css/profil.css), l'ecran
   des personnages sa fleche ronde. Un ecran qui dit la meme chose avec un
   autre dessin se lit comme un autre geste. */
.rq-retour {
  z-index: 2;
  position: absolute; top: 4vh; left: 3vw; width: 10vh; height: 10vh;
  padding: 0; border: 0; cursor: pointer;
  background: url('../assets/ui/selection/rond-retour.webp?v=1') center / contain no-repeat;
}
/* Le bouton jaune de l'ecran des personnages (.st-jaune / .st-valider). */
.rq-valider {
  z-index: 2;
  position: absolute; right: 3vw; bottom: 5vh; width: 42vw; height: 17vh;
  display: flex; align-items: center; justify-content: center; gap: 2vw;
  padding: 0; border: 0; cursor: pointer;
  /* Taille et style herites, comme la-bas (le « font: inherit » de
     .st-cadre button l'emporte sur .st-jaune) : du Lilita droit a 16 px,
     mesure le 19/09. */
  font-family: var(--lettrage); font-weight: 400; font-style: normal; font-size: inherit; line-height: 1;
  text-transform: uppercase; color: #2a1300;
  background: url('../assets/ui/selection/bouton-jaune.webp?v=1') center / 100% 100% no-repeat;
}
.rq-valider svg { width: 5.5vh; }
.rq-valider:active { transform: translateY(0.6vh); }

/* ---- Ecran large mais court (telephone couche) : on resserre ---- */
@media (min-aspect-ratio: 16/10) {
  .rq-vitrine { height: 36vh; }
  .rq-titre { font-size: 4.6vh; }
}

/* ---- Ecran debout : tout s'empile, la fiche au-dessus de la grille ----
   Le jeu se joue couche, mais la page doit rester lisible le temps qu'on
   tourne le telephone. */
@media (max-aspect-ratio: 1/1) {
  /* La meme reduction que .pf-retour sur les ecrans de profil. */
  .rq-retour { width: 6vh; height: 6vh; }
  .rq-titre { position: static; width: auto; padding: 9vh 4vw 0; font-size: 3.4vh; }
  .rq-fiche { position: static; width: auto; margin: 2vh auto 0; }
  .rq-vitrine { height: 26vh; }
  .rq-socle { width: 52vw; }
  .rq-nom { font-size: 3.4vh; }
  .rq-jauges { width: 78vw; }
  .rq-panneau { position: static; width: auto; margin: 2.5vh 4vw 12vh; }
  .rq-filtres { flex-wrap: wrap; }
  .rq-filtre { flex: 1 1 40%; font-size: 1.7vh; }
  .rq-panneau { margin-left: 16vw; margin-right: 16vw; }
  .rq-grille { height: 24vh; }
  .rq-fleche { width: 6vh; height: 6vh; top: calc(50% - 3vh); }
  .rq-fleche-g { left: calc(-1vw - 6vh); }
  .rq-fleche-d { right: calc(-1vw - 6vh); }
  .rq-carte span { font-size: 2vh; }
  .rq-valider { right: 50%; transform: translateX(50%); bottom: 3vh; width: 80vw; height: 10vh; }
  .rq-valider:active { transform: translateX(50%) translateY(0.6vh); }
}