/* =====================================================================
   NAV-BAR.CSS — Barre de navigation du bas (style RPG / gacha moderne)
   Inspirations : Langrisser Mobile, Dragon Travelers, Genshin Impact

   Structure HTML attendue (dans index.html) :
     <nav class="bottom-nav">
       <svg class="nav-defs">...</svg>              -> (avant la nav) dégradés partagés des icônes
       <div class="nav-center-glow"></div>          -> lueur violette derrière le centre
       <div class="nav-stars"></div>                -> étoiles du fond (remplies par main.js)
       <div class="nav-streak"></div>               -> éclat qui glisse sur le trait
       <button class="nav-item">                    -> bouton latéral (losange)
         <div class="nav-diamond"><svg class="nav-icon"></svg></div>
         <span class="nav-label"></span>
         <span class="nav-badge" hidden></span>       -> pastille de notification
       </button>
       <button class="nav-item nav-home active">    -> bouton central (médaillon)
         <div class="nav-rune-ring"><svg></svg></div> -> anneau de runes qui tourne
         <div class="nav-circle-wrapper"><svg class="nav-icon-large"></svg></div>
         <div class="nav-plaque">Lobby</div>
       </button>
     </nav>

   💡 Pour ajuster la taille des éléments, modifie uniquement les
      variables juste en dessous (section 1) : tout le reste s'adapte.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. CONTENEUR DE LA BARRE + VARIABLES DE RÉGLAGE
   --------------------------------------------------------------------- */
.bottom-nav {
  /* --- Variables de taille (à modifier pour ajuster le rendu) --- */
  --nav-h: 96px;          /* hauteur de la bande sombre                     */
  --nav-diamond: 52px;    /* côté des losanges (avant rotation de 45°)      */
  --nav-medal: 128px;     /* diamètre du médaillon central                  */
  --nav-lift: 22px;       /* de combien le médaillon monte au-dessus du trait */

  /* --- Transparence du fond de la barre (0 = invisible, 1 = opaque) --- */
  --nav-bg-top: 0.42;     /* opacité en haut de la barre (près du trait)   */
  --nav-bg-bottom: 0.8;   /* opacité en bas de la barre (sous les libellés) */

  /* --- Variables de couleur --- */
  /* Ces couleurs sont reliées à la charte graphique définie dans le :root de main.css
     (si tu changes --gold, --purple-bright... là-bas, la barre suit automatiquement) */
  --nav-gold: var(--gold, #d8a83e);               /* or principal (anneaux, bordures)   */
  --nav-gold-light: var(--gold-light, #ffe18a);   /* or clair (texte actif, reflets)    */
  --nav-violet: var(--purple-bright, #9c5ac5);    /* violet magique (lueurs)            */
  --nav-deep: var(--void, #090811);               /* fond très sombre de la barre       */
  --nav-ice: #b9c8ff;                             /* bleu glacé (bordures des losanges) */

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nav-h);
  z-index: 50;

  /* 5 colonnes égales : les boutons sont donc placés à 10%, 30%, 50%, 70%, 90%
     de la largeur, le bouton Lobby est parfaitement centré */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;

  /* Fond bleu nuit translucide : on devine le décor derrière (opacités réglables plus haut) */
  background: linear-gradient(180deg,
    rgba(14, 10, 42, var(--nav-bg-top)) 0%,
    rgba(9, 8, 17, var(--nav-bg-bottom)) 100%);

  /* Léger flou du décor derrière la barre (effet verre dépoli). Mets 0 pour le désactiver */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);

  /* Ombre vers le HAUT : assombrit doucement le décor au-dessus de la barre */
  box-shadow: 0 -26px 44px rgba(4, 3, 12, 0.55);

  user-select: none;
}

/* Trait d'énergie lumineux tout en haut de la barre (sur lequel reposent les losanges) */
.bottom-nav::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  /* Dégradé horizontal : transparent aux bords, bleu-violet, blanc au centre */
  background: linear-gradient(90deg,
    transparent 0%,
    #5f6cf0 14%,
    var(--nav-ice) 50%,
    #5f6cf0 86%,
    transparent 100%);
  /* Halo autour du trait */
  box-shadow: 0 0 10px rgba(120, 130, 255, 0.75), 0 0 26px rgba(120, 90, 255, 0.35);
  pointer-events: none;
}

/* Fine ligne décorative en bas de la barre (sous les libellés) */
.bottom-nav::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 150, 255, 0.4), transparent);
  pointer-events: none;
}

/* Lueur violette diffuse derrière le médaillon central */
.nav-center-glow {
  position: absolute;
  left: 50%;
  top: -150px;
  width: 380px;
  height: 280px;
  margin-left: -190px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(140, 80, 255, 0.45) 0%,
    rgba(140, 80, 255, 0.15) 40%,
    transparent 70%);
  pointer-events: none; /* ne bloque pas les clics */
}


/* ---------------------------------------------------------------------
   2. BOUTONS LATÉRAUX (Classement, Inventaire, Boutique, Tirage)
   --------------------------------------------------------------------- */
.nav-item {
  position: relative;
  justify-self: center;        /* centré dans sa colonne de la grille */
  width: 140px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--cream, #f5ead5);
  -webkit-tap-highlight-color: transparent; /* pas de flash bleu au tap mobile */
}

/* On retire le contour par défaut (on gère le focus clavier plus bas) */
.nav-item:focus {
  outline: none;
}

/* Éclat blanc sur le trait d'énergie, juste derrière chaque losange */
.nav-item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 170px;
  height: 2px;
  margin-left: -85px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(160, 170, 255, 0.9);
  opacity: 0.75;
  pointer-events: none;
}

/* --- Le losange (cadre du bouton) ---
   Un carré tourné de 45°, centré exactement sur le trait d'énergie.
   Le top négatif = moitié de sa taille, donc son centre tombe sur le trait. */
.nav-diamond {
  position: absolute;
  top: calc(var(--nav-diamond) / -2);
  left: 50%;
  width: var(--nav-diamond);
  height: var(--nav-diamond);
  margin-left: calc(var(--nav-diamond) / -2);
  transform: rotate(45deg);

  /* Cristal bleu-violet sombre avec une source de lumière en haut */
  background: radial-gradient(circle at 50% 35%, #34288a 0%, #17114a 55%, #0a0724 100%);
  border: 2px solid rgba(190, 205, 255, 0.85);

  /* Superposition d'anneaux : écart sombre, filet clair, halo bleu, lueur interne */
  box-shadow:
    0 0 0 4px rgba(12, 9, 36, 0.85),
    0 0 0 5px rgba(150, 170, 255, 0.45),
    0 0 18px 4px rgba(100, 110, 255, 0.5),
    inset 0 0 14px rgba(120, 110, 255, 0.5);

  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

/* Deuxième cadre fin, à l'intérieur du losange (effet "double bordure") */
.nav-diamond::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(190, 205, 255, 0.4);
  pointer-events: none;
}

/* Reflet glossy en haut à gauche (effet verre / cristal) */
.nav-diamond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 45%);
  pointer-events: none;
}

/* L'icône : on annule la rotation du losange pour qu'elle reste droite */
.nav-icon {
  position: relative;
  z-index: 1;                  /* au-dessus des reflets */
  display: block;
  width: 38px;                 /* taille de l'icône SVG */
  height: 38px;
  transform: rotate(-45deg);   /* annule la rotation du losange */
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

/* Contour sombre commun à toutes les icônes SVG (couleur --void de la charte) */
.nav-icon .ol,
.nav-icon-large .ol {
  stroke: var(--void, #090811);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Sprite SVG caché : il contient uniquement les dégradés partagés (or, banane, étoile) */
.nav-defs {
  position: absolute;          /* important : sinon il occuperait une case de la grille */
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Le libellé (Classement, Inventaire...) sous le losange */
.nav-label {
  position: absolute;
  left: 50%;
  /* placé juste sous la pointe basse du losange (diagonale ≈ 0.71 × côté) */
  top: calc(var(--nav-diamond) * 0.71 + 12px);
  transform: translateX(-50%);
  font-family: "Cinzel", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--cream, #f5ead5);
  white-space: nowrap;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95);
  transition: color 0.2s ease;
}

/* Petit soulignement doré sous le libellé (visible seulement quand actif) */
.nav-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--nav-gold-light), transparent);
  transition: width 0.25s ease;
}

/* --- Survol : le losange monte légèrement et prend une lueur dorée --- */
.nav-item:hover .nav-diamond {
  /* translateY AVANT rotate : le déplacement se fait bien vers le haut de l'écran */
  transform: translateY(-4px) rotate(45deg);
  border-color: var(--nav-gold-light);
  box-shadow:
    0 0 0 4px rgba(12, 9, 36, 0.85),
    0 0 0 5px rgba(216, 168, 62, 0.6),
    0 0 20px 5px rgba(216, 168, 62, 0.4),
    inset 0 0 14px rgba(255, 225, 138, 0.3);
}

.nav-item:hover .nav-label {
  color: var(--nav-gold-light);
}

/* --- Clic : petit effet d'enfoncement --- */
.nav-item:active .nav-diamond {
  transform: translateY(0) rotate(45deg) scale(0.94);
}

/* --- Focus clavier (touche Tab) : anneau doré visible pour l'accessibilité --- */
.nav-item:focus-visible .nav-diamond {
  outline: 2px solid var(--nav-gold-light);
  outline-offset: 6px;
}

/* --- État ACTIF (page en cours) : cristal doré/violet + soulignement --- */
.nav-item.active .nav-diamond {
  border-color: var(--nav-gold-light);
  background: radial-gradient(circle at 50% 35%, #5a3aa8 0%, #2a1560 55%, #120833 100%);
  box-shadow:
    0 0 0 4px rgba(12, 9, 36, 0.85),
    0 0 0 5px rgba(216, 168, 62, 0.75),
    0 0 22px 6px rgba(216, 168, 62, 0.45),
    inset 0 0 16px rgba(255, 225, 138, 0.35);
}

.nav-item.active .nav-label {
  color: var(--nav-gold-light);
}

.nav-item.active .nav-label::after {
  width: 38px;
}


/* ---------------------------------------------------------------------
   3. BOUTON CENTRAL "LOBBY" (médaillon boussole)
   --------------------------------------------------------------------- */
.nav-item.nav-home {
  width: 220px;
}

/* --- Étoile-boussole dorée derrière le médaillon (4 pointes fines) ---
   Une forme en étoile obtenue avec clip-path, plus grande que le médaillon
   pour que les pointes dépassent tout autour. */
.nav-item.nav-home::before {
  --star: calc(var(--nav-medal) * 1.6);       /* taille de l'étoile */
  top: calc(var(--nav-lift) * -1 - var(--star) / 2);
  left: 50%;
  width: var(--star);
  height: var(--star);
  margin-left: calc(var(--star) / -2);
  background: linear-gradient(180deg, #fff1b8 0%, var(--nav-gold) 50%, #fff1b8 100%);
  box-shadow: none;
  opacity: 0.9;
  /* Étoile à 4 branches : haut, droite, bas, gauche */
  clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
}

/* --- "Ailes" violettes lumineuses de part et d'autre du médaillon ---
   Une seule bande large avec un clip-path qui dessine les deux ailes :
   pointes fines sur le trait, courbes qui montent vers l'anneau. */
.nav-item.nav-home::after {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(var(--nav-medal) * 3.6);
  height: calc(var(--nav-medal) * 0.47);
  margin-left: calc(var(--nav-medal) * -1.8);
  top: calc(var(--nav-medal) * -0.235);       /* centrée verticalement sur le trait */
  /* Dégradé : transparent à la pointe -> violet -> or près de l'anneau */
  background: linear-gradient(90deg,
    rgba(180, 160, 255, 0) 0%,
    rgba(190, 170, 255, 0.95) 8%,
    rgba(150, 110, 255, 0.85) 30%,
    rgba(255, 225, 138, 0.9) 36%,
    rgba(255, 225, 138, 0.9) 64%,
    rgba(150, 110, 255, 0.85) 70%,
    rgba(190, 170, 255, 0.95) 92%,
    rgba(180, 160, 255, 0) 100%);
  /* Points : pointe gauche -> arête haute -> anneau -> arête basse -> retour
     (la partie centrale est cachée derrière le médaillon) */
  clip-path: polygon(
    0% 50%, 10% 44%, 20% 36%, 28% 26%, 35% 14%,
    65% 14%, 72% 26%, 80% 36%, 90% 44%, 100% 50%,
    89% 55%, 78% 48%, 69% 38%, 63% 28%,
    37% 28%, 31% 38%, 22% 48%, 11% 55%);
  pointer-events: none;
}

/* --- Le médaillon (grand cercle) --- */
.nav-circle-wrapper {
  position: absolute;
  left: 50%;
  top: calc(var(--nav-medal) / -2 - var(--nav-lift));
  width: var(--nav-medal);
  height: var(--nav-medal);
  margin-left: calc(var(--nav-medal) / -2);
  border-radius: 50%;
  z-index: 5;                                  /* au-dessus de l'étoile et des ailes */

  display: flex;
  align-items: center;
  justify-content: center;

  /* Intérieur violet profond, plus clair en haut */
  background: radial-gradient(circle at 50% 35%, #5a2a9a 0%, #2c1259 45%, #100626 100%);

  /* Anneaux successifs : or épais, espace sombre, filet or, halo violet, lueur interne */
  box-shadow:
    0 0 0 3px #e2b555,
    0 0 0 6px #140a2a,
    0 0 0 7px rgba(226, 181, 85, 0.75),
    0 0 30px 8px rgba(150, 90, 255, 0.55),
    inset 0 0 25px rgba(160, 100, 255, 0.55);

  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease;
}

/* Anneau intérieur fin (deuxième cercle doré à l'intérieur) */
.nav-circle-wrapper::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 225, 138, 0.6);
  border-radius: 50%;
  pointer-events: none;
}

/* Reflet lumineux en haut du médaillon */
.nav-circle-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.18), transparent 45%);
  pointer-events: none;
}

/* La grande icône banane au centre du médaillon */
.nav-icon-large {
  position: relative;
  z-index: 1;                                  /* au-dessus des reflets */
  display: block;
  width: 78px;                                 /* taille de la banane SVG */
  height: 78px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
}

/* La banane est un peu plus épaisse que les autres icônes */
.nav-icon-large .ol {
  stroke-width: 2;
}

/* --- La plaque "Lobby" (bannière hexagonale sous le médaillon) --- */
.nav-plaque {
  position: absolute;
  left: 50%;
  /* chevauche légèrement le bas du médaillon */
  top: calc(var(--nav-medal) / 2 - var(--nav-lift) - 2px);
  transform: translateX(-50%);
  z-index: 10;                                 /* au-dessus du médaillon */
  min-width: 104px;
  padding: 3px 20px;
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffe9b0;
  white-space: nowrap;
  background: linear-gradient(180deg, var(--purple, #5b2b78) 0%, #241048 100%);
  border: 1px solid var(--nav-gold);
  box-shadow: inset 0 0 0 1px rgba(255, 225, 138, 0.35);
  /* Bords gauche/droit en pointe (forme de bannière) */
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
}

/* --- Interactions du bouton central --- */
.nav-item.nav-home:hover .nav-circle-wrapper {
  transform: scale(1.05);
}

.nav-item.nav-home:active .nav-circle-wrapper {
  transform: scale(0.96);
}

.nav-item.nav-home:focus-visible .nav-circle-wrapper {
  outline: 2px solid var(--nav-gold-light);
  outline-offset: 10px;
}

/* --- Lobby ACTIF : l'étoile pulse doucement pour attirer l'œil --- */
.nav-item.nav-home.active::before {
  animation: nav-star-pulse 3s ease-in-out infinite;
}

@keyframes nav-star-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* --- Lobby INACTIF (on est sur une autre page) : le médaillon s'éteint un peu --- */
.nav-item.nav-home:not(.active) .nav-circle-wrapper {
  filter: saturate(0.65) brightness(0.8);
}

.nav-item.nav-home:not(.active)::before {
  opacity: 0.45;
}

.nav-item.nav-home:not(.active)::after {
  opacity: 0.5;
}


/* ---------------------------------------------------------------------
   3b. PASTILLES DE NOTIFICATION (rouges, sur les boutons latéraux)
   Pilotées en JS avec : setNavBadge('gacha-view', 1)  (voir main.js)
   --------------------------------------------------------------------- */
.nav-badge {
  position: absolute;
  top: -31px;                        /* en haut à droite du losange */
  left: calc(50% + 13px);
  z-index: 6;                        /* au-dessus du losange */
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font: 700 11px/1 "Montserrat", sans-serif;
  color: #fff;
  /* Rouge de la charte (--red), bordure or clair */
  background: radial-gradient(circle at 35% 30%, #e85a6e 0%, var(--red, #c23c50) 60%, #8c2233 100%);
  border: 1.5px solid var(--nav-gold-light);
  box-shadow: 0 0 8px rgba(194, 60, 80, 0.8), 0 2px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none;              /* ne bloque pas le clic sur le bouton */
}

/* L'attribut hidden doit vraiment cacher la pastille (display:flex l'aurait écrasé) */
.nav-badge[hidden] {
  display: none;
}

/* Variante "simple point" (sans chiffre) */
.nav-badge.is-dot {
  min-width: 12px;
  width: 12px;
  height: 12px;
  padding: 0;
}


/* ---------------------------------------------------------------------
   3c. EFFETS "VIVANTS" (animations)
   --------------------------------------------------------------------- */

/* --- Éclat lumineux qui glisse sur le trait vers le bouton sélectionné ---
   Sa position (left) est mise à jour en JS à chaque clic (voir main.js) */
.nav-streak {
  position: absolute;
  top: -2px;
  left: 0;
  width: 180px;
  height: 4px;
  margin-left: -90px;                /* centré sur sa position "left" */
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    #fff 0%,
    rgba(185, 200, 255, 0.9) 25%,
    transparent 70%);
  box-shadow: 0 0 12px 2px rgba(150, 160, 255, 0.8);
  transition: left 0.5s cubic-bezier(0.45, 0, 0.2, 1);   /* glissement fluide */
  pointer-events: none;
}

/* --- Anneau de runes qui tourne lentement autour du médaillon --- */
.nav-rune-ring {
  --ring: calc(var(--nav-medal) * 1.28);                 /* diamètre de l'anneau */
  position: absolute;
  left: 50%;
  top: calc(var(--nav-lift) * -1 - var(--ring) / 2);     /* centré sur le médaillon */
  width: var(--ring);
  height: var(--ring);
  margin-left: calc(var(--ring) / -2);
  opacity: 0.9;
  pointer-events: none;
}

.nav-rune-ring svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Cercle de petits points dorés */
.nav-rune-ring .ring-dots {
  fill: none;
  stroke: var(--nav-gold-light);
  stroke-opacity: 0.85;
  stroke-width: 0.7;
  stroke-dasharray: 0.7 2.3;
}

/* Cercle segmenté violet */
.nav-rune-ring .ring-seg {
  fill: none;
  stroke: var(--nav-violet);
  stroke-opacity: 0.95;
  stroke-width: 0.8;
  stroke-dasharray: 9 4 2 4;
}

/* Petits losanges dorés répartis sur l'anneau */
.nav-rune-ring .ring-gem {
  fill: var(--nav-gold-light);
  fill-opacity: 1;
}

/* L'anneau tourne seulement quand le Lobby est actif (1 tour = 48 secondes) */
.nav-item.nav-home.active .nav-rune-ring {
  animation: nav-ring-spin 48s linear infinite;
}

@keyframes nav-ring-spin {
  to { transform: rotate(360deg); }
}

/* Lobby inactif : l'anneau devient discret */
.nav-item.nav-home:not(.active) .nav-rune-ring {
  opacity: 0.35;
}

/* --- La banane du médaillon flotte doucement --- */
.nav-item.nav-home.active .nav-icon-large {
  animation: nav-banana-float 3.4s ease-in-out infinite;
}

@keyframes nav-banana-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}

/* --- Petit "pop" du losange quand on le sélectionne --- */
.nav-item.active .nav-diamond {
  animation: nav-pop 0.45s ease-out;
}

@keyframes nav-pop {
  0%   { transform: rotate(45deg) scale(0.85); }
  60%  { transform: rotate(45deg) scale(1.12); }
  100% { transform: rotate(45deg) scale(1); }
}

/* --- Bouton TIRAGE "premium" : aura dorée qui pulse + étoile qui scintille --- */
.nav-item[data-target="gacha-view"]::after {
  content: "";
  position: absolute;
  top: -38px;                        /* centrée sur le losange (76px / 2) */
  left: 50%;
  width: 76px;
  height: 76px;
  margin-left: -38px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 225, 138, 0.42) 0%,
    rgba(216, 168, 62, 0.15) 45%,
    transparent 70%);
  z-index: -1;                       /* derrière le losange */
  animation: nav-aura 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes nav-aura {
  0%, 100% { transform: scale(0.85); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 1; }
}

.nav-item[data-target="gacha-view"] .nav-icon {
  animation: nav-twinkle 2.6s ease-in-out infinite;
}

@keyframes nav-twinkle {
  0%, 100% { transform: rotate(-45deg) scale(1); }
  50%      { transform: rotate(-45deg) scale(1.12); }
}


/* ---------------------------------------------------------------------
   3d. ÉTOILES DANS LE FOND DE LA BARRE
   Les étoiles sont créées en JS (voir createNavStars dans main.js) :
   chacune reçoit sa position, sa taille, sa durée et son retard au hasard,
   ce qui donne un scintillement naturel et jamais synchronisé.
   --------------------------------------------------------------------- */
.nav-stars {
  position: absolute;
  inset: 0;                /* occupe toute la barre */
  overflow: hidden;        /* les étoiles ne dépassent pas de la barre */
  pointer-events: none;    /* ne bloque aucun clic */
}

/* Une étoile = un petit point lumineux qui scintille */
.nav-star {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.7);
  opacity: 0.2;
  /* --d = durée, --delay = retard (négatif = déjà en cours au chargement) */
  animation: nav-dust-twinkle var(--d, 3s) ease-in-out var(--delay, 0s) infinite;
}

/* Variantes de couleur (charte : blanc, bleu glacé, or clair, violet magique) */
.nav-star--ice {
  background: var(--nav-ice);
  box-shadow: 0 0 6px 1px rgba(185, 200, 255, 0.75);
}

.nav-star--gold {
  background: var(--nav-gold-light);
  box-shadow: 0 0 7px 1px rgba(255, 225, 138, 0.75);
}

.nav-star--violet {
  background: #d9b8ff;
  box-shadow: 0 0 7px 1px rgba(156, 90, 197, 0.85);
}

/* Variante "étincelle" : vraie étoile à 4 branches, plus grosse, qui tourne doucement */
.nav-star--sparkle {
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(135deg, #fff, var(--nav-gold-light));
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: nav-dust-sparkle var(--d, 4s) ease-in-out var(--delay, 0s) infinite;
}

/* Scintillement : l'étoile s'éteint puis brille en grossissant légèrement */
@keyframes nav-dust-twinkle {
  0%, 100% { opacity: 0.12; transform: scale(0.6); }
  50%      { opacity: 1;    transform: scale(1.2); }
}

/* Étincelle : même principe + une petite rotation */
@keyframes nav-dust-sparkle {
  0%, 100% { opacity: 0;   transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 0.95; transform: scale(1) rotate(45deg); }
}


/* ---------------------------------------------------------------------
   4. RESPONSIVE (écrans étroits : on réduit toutes les tailles)
   --------------------------------------------------------------------- */
@media (max-width: 820px) {
  .bottom-nav {
    --nav-h: 82px;
    --nav-diamond: 42px;
    --nav-medal: 100px;
    --nav-lift: 16px;
  }

  .nav-item {
    width: 84px;
  }

  .nav-item.nav-home {
    width: 130px;
  }

  .nav-icon {
    width: 31px;
    height: 31px;
  }

  .nav-icon-large {
    width: 60px;
    height: 60px;
  }

  .nav-badge {
    top: -26px;
    left: calc(50% + 9px);
  }

  .nav-label {
    font-size: 11px;
  }

  .nav-plaque {
    min-width: 80px;
    font-size: 12px;
    padding: 2px 14px;
  }
}


/* ---------------------------------------------------------------------
   5. ACCESSIBILITÉ : pour les personnes qui désactivent les animations
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .nav-item.nav-home.active::before,
  .nav-item.nav-home.active .nav-icon-large,
  .nav-item.nav-home.active .nav-rune-ring,
  .nav-item.active .nav-diamond,
  .nav-item[data-target="gacha-view"]::after,
  .nav-item[data-target="gacha-view"] .nav-icon {
    animation: none;
  }

  .nav-streak {
    transition: none;
  }

  /* Étoiles : on les fige à moitié allumées */
  .nav-star,
  .nav-star--sparkle {
    animation: none;
    opacity: 0.5;
  }

  .nav-diamond,
  .nav-circle-wrapper,
  .nav-label::after {
    transition: none;
  }
}