/* ==================================================================
   nav.css, la navigation.

   Pensée pour le téléphone d'abord, parce que c'est là qu'on ouvre un
   booster : dans le métro, d'une main.

   Deux dispositions, une seule structure HTML :

   · **sur mobile**, une barre d'onglets en bas, à portée du pouce, avec
     des pictogrammes et un libellé court. C'est la convention de toutes
     les applications, et le haut de l'écran est rendu à ce qui compte :
     le solde et les clés ;
   · **à partir de la tablette**, les onglets remontent au centre de la
     barre du haut, comme avant.

   Ce qui a été corrigé au passage : les onglets, le portefeuille et le
   nom tenaient sur une seule ligne. À six onglets et trois pastilles,
   la ligne débordait de l'écran et les boutons devenaient inatteignables.
   ================================================================== */

/* ------------------------------ la barre du haut ------------------------------ */

.topbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  padding-top: max(8px, env(safe-area-inset-top));
}

/* Sur un telephone, le nom ecrit prend la place des cles : le seul logo
   suffit a dire ou l'on est, et il ramene a l'accueil comme avant. */
.brand { flex: 0 0 auto; }
.brand-name { display: none; }

/* Les onglets du haut n'existent qu'à partir de la tablette. */
.tabs { display: none; }

/* Le même pictogramme en haut et en bas. Sur un écran large, huit
   libellés alignés forment un mur de texte où l'œil ne se repère plus ;
   avec l'icône, chaque onglet a une silhouette, et on y revient sans
   lire. Le libellé n'apparaît que quand la place le permet. */
.tabs .tab svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Le portefeuille passe à droite et se resserre. */
.wallet {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  min-width: 0;
  overflow: hidden;
}
.wallet-sep { display: none; }
.wallet-stat { display: none; }

.keys, .dbz {
  flex: 0 0 auto;
  padding: 5px 9px;
  font-size: 12.5px;
  gap: 5px;
}
.keys span, .dbz span { font-size: 10.5px; }
@media (max-width: 759px) {
  .keys .keys-next, .dbz span { display: none; }
  .wallet { gap: 5px; }
}

/* ------------------------ la barre d'onglets du bas ------------------------ */

/* Sa hauteur est un jeton, pas un nombre magique : le bas de page, le
   lecteur et les messages s'y appuient. Avant, la page gardait 82 px de
   marge alors que la barre en mesurait plus de 90 avec l'indicateur
   d'accueil des iPhone, et la fin de chaque page passait dessous. */
:root { --tabbar-h: 62px; }

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  height: var(--dock);
  padding: 6px 6px var(--safe-b);
  border-top: 1px solid var(--line-2);
  background: rgba(9, 9, 16, .96);
  backdrop-filter: blur(18px);
}

.tabbar .tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: calc(var(--tabbar-h) - 12px);
  padding: 0 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.tabbar .tab svg {
  width: 23px; height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tabbar .tab svg { transition: transform .35s var(--ease-back); }
/* l'onglet actif : pas de pastille, juste l'icône qui s'allume, son
   aplat qui se remplit, et le repère lumineux en haut */
.tabbar .tab.is-active { color: #fff; background: none; box-shadow: none; text-shadow: none; }
.tabbar .tab.is-active svg { color: #d9c6ff; transform: translateY(-1px); filter: drop-shadow(0 0 6px rgba(190, 140, 255, .55)); }
.tabbar .tab:active svg { transform: scale(.9); }

/* Les pictogrammes sont en deux tons : un trait, et un aplat léger qui
   se remplit sur l'onglet actif. Une variable, parce que les formes
   vivent dans le sprite (<use>) et n'héritent que de ça. */
.tab svg .tf { fill: currentColor; fill-opacity: var(--tf, .1); }
.tab { --tf: .1; }
.tab.is-active { --tf: .32; }
.tabs .tab.is-active { --tf: .28; }

/* le repère qui glisse d'un onglet à l'autre */
.tab-ink {
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #ff7ad9, #a78bfa);
  box-shadow: 0 0 10px rgba(200, 130, 255, .8);
  opacity: 0;
  transition: transform .45s var(--ease-out), opacity .2s;
  pointer-events: none;
}
/* la pastille « quelque chose à récupérer » sur l'onglet Succès */
.tab-dot {
  position: absolute;
  top: 6px; left: calc(50% + 8px);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3d71;
  box-shadow: 0 0 0 2px rgba(9, 9, 16, .96), 0 0 10px rgba(255, 61, 113, .8);
}

/* De la place sous le contenu, sinon la barre recouvre la fin de page. */
main { padding-bottom: calc(var(--dock) + 28px); }
body.has-player main { padding-bottom: calc(var(--dock) + 104px); }

/* ------------------------------ le contenu ------------------------------ */

.view { padding-left: 14px; padding-right: 14px; }

/* L'ecran d'ouverture est une colonne : le rail en haut, le presentoir
   au milieu qui s'etire, le nom et les boutons en bas. Rien ne deborde,
   donc rien ne defile. */
#view-open.is-active {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  padding-top: 4px;
}
#view-open .browse { flex: 0 0 auto; margin-bottom: 0; gap: 8px; }

/* ------------------------------ tablette ------------------------------ */

@media (min-width: 760px) {
  .topbar {
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    padding: 10px 18px;
  }
  .brand-name { display: inline; font-size: 17px; }

  .tabs {
    display: flex;
    justify-self: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .26);
  }

  :root { --tabbar-h: 0px; }
  .tabbar { display: none; }
  main { padding-bottom: 32px; }

  .wallet-sep { display: block; }
  .wallet-stat { display: inline; }
  .keys, .dbz { padding: 5px 12px; font-size: 13px; }

  .view { padding-left: 24px; padding-right: 24px; }
  #view-open.is-active { gap: 14px; }
}

/* Entre 760 et 1180 pixels, huit onglets avec leur libelle ne tiennent
   pas a cote du portefeuille : on garde le pictogramme seul, et le nom
   reste accessible au survol comme au lecteur d'ecran. */
@media (min-width: 760px) and (max-width: 1439px) {
  .tabs .tab { padding: 8px 11px; }
  .tabs .tab span { display: none; }
}

@media (min-width: 1440px) {
  .tabs .tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; }
}
/* le profil est déjà au bout de la barre, sous l'avatar */
.tabs .tab[data-view="profil"] { display: none; }
.tabs { min-width: 0; }

/* Le portefeuille tenait sur deux lignes des que le compte passait a
   quatre chiffres, et poussait la barre du haut vers le bas. */
.wallet-stat { white-space: nowrap; }

/* ------------------------------ ordinateur ------------------------------ */

@media (min-width: 1100px) {
  .view { padding-left: 32px; padding-right: 32px; }
}

/* Les fenêtres modales doivent rester au-dessus de la barre du bas, et
   ne pas passer sous l'encoche. */
.dbzp, .haul, .detail, .stage, .tour { z-index: 9000; }
.dbzp-box, .haul-panel {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ---------------------- le choix du booster, centre ----------------------

   La rangee des familles etait poussee a gauche par le champ de
   recherche pose a sa droite : le bloc paraissait de travers alors que
   chaque element, pris seul, etait bien place. Une grille en trois
   colonnes egales remet la rangee au milieu de l'ecran et laisse la
   recherche flotter dans la colonne de droite.
   ---------------------------------------------------------------------- */

.browse-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  justify-items: center;
}

/* Centre tant que la rangee tient, alignee a gauche des qu'elle deborde.
   `justify-content: center` seul ne convient pas : sur un conteneur qui
   defile, il rend le premier element inatteignable, on ne peut plus
   remonter jusqu'a lui. Une boite qui s'ajuste a son contenu et se
   centre par ses marges donne le meme resultat sans ce defaut. */
.fam-bar {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: flex-start;
}
.fam-bar::-webkit-scrollbar { display: none; }
/* Pas d'accrochage ici : centrer l'element accroche decalait la rangee
   des l'ouverture, et « Tout », qui est pourtant le choix actif, se
   retrouvait coupe contre le bord gauche. */
.fam { flex: 0 0 auto; }

.coll-find { width: 100%; max-width: 420px; }
.coll-find input { width: 100%; }

/* Meme principe pour le rail des collections. */
.rail { justify-content: flex-start; }
.rail-wrap { display: flex; justify-content: center; }
.rail { max-width: 100%; }

@media (min-width: 760px) {
  .browse-top {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .browse-top .fam-bar { grid-column: 2; }
  .browse-top .coll-find { grid-column: 3; justify-self: end; width: 200px; }
}

/* ------------------- le presentoir sur un telephone -------------------

   Le sachet se sert de ce qui reste, il n'impose plus sa hauteur : le
   bouton « Ouvrir » finit toujours au meme endroit, sous le pouce.
   --------------------------------------------------------------------- */

@media (max-width: 759px) {
  .shop { gap: 10px; }
  .shop-name { font-size: 19px; }
  .shop-tag { display: none; }
  .shop-progress { width: min(300px, 86vw); }
  .coll { width: 128px; padding: 7px 10px 8px; }
  .coll-ico { width: 26px; height: 26px; font-size: 13px; }
  .coll-name { font-size: 12.5px; }
  .fam { padding: 6px 12px; font-size: 12px; }
}

/* Ecran bas, un telephone couche par exemple. On sacrifie la jauge
   d'avancement, qui est une information, jamais un bouton : les volumes
   restent la, sur une seule ligne qui defile. */
@media (max-height: 680px) {
  .shop-progress { display: none; }
  .shop-tag { display: none; }
  .shop-vols {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .shop-vols::-webkit-scrollbar { display: none; }
  .vol { flex: 0 0 auto; padding: 5px 11px; }
}

/* l'onglet voisin arrive du côté où l'on a glissé */
.view.is-active.from-right { animation: view-from-right .32s var(--ease-out) both; }
.view.is-active.from-left  { animation: view-from-left .32s var(--ease-out) both; }
@keyframes view-from-right { from { opacity: 0; transform: translate3d(48px, 0, 0); } }
@keyframes view-from-left  { from { opacity: 0; transform: translate3d(-48px, 0, 0); } }

/* Le petit menu de l'avatar, sur téléphone : profil, boutique, aide. */
.top-menu {
  position: fixed;
  top: calc(max(8px, env(safe-area-inset-top)) + 52px);
  right: 10px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 6px;
  border: 2px solid rgba(20, 14, 51, .95);
  border-radius: 16px;
  background: linear-gradient(180deg, #2a2160, #17123a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 40px -12px #000;
  animation: top-menu-in .18s var(--ease-out);
}
.top-menu[hidden] { display: none; }
@keyframes top-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.top-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.top-menu button:hover, .top-menu button:active { background: rgba(255, 255, 255, .08); }
.top-menu svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  color: #cbb6ff;
}
.top-menu svg .tf { fill: currentColor; fill-opacity: .18; }
/* un repère sur l'avatar : il y a un menu derrière */
@media (max-width: 759px) {
  .top-av { position: relative; }
  .top-av::after {
    content: "";
    position: absolute;
    right: -3px; bottom: -3px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #1b1540 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 9px no-repeat;
    box-shadow: 0 0 0 2px rgba(10, 6, 26, .95);
  }
}
.top-av.is-premium { box-shadow: 0 0 0 2px #1b1540, 0 0 0 4px #ffc93a, 0 0 14px rgba(255, 200, 80, .7); }