/* La notification des nouveautes (js/ui/nouveautes.js).

   La pastille se pose en HAUT A GAUCHE de l'accueil, le seul coin libre :
   le profil tient le haut a droite, la langue et Options le bas a gauche,
   l'aide et les classements le bas a droite. Meme gabarit que la pastille
   du profil (hauteur max(5,4vh, 30px), coins ronds, fond bleu nuit), le
   lisere jaune en plus : elle se voit sans crier, et elle disparait des
   qu'on l'a lue. Sur un telephone en paysage (390 px de haut), le mot
   s'efface et il ne reste que la cloche et le compte.

   Le panneau suit le standard des panneaux (css/panneaux.css) : le cadre,
   le titre et le bouton viennent de la ; seule la liste est d'ici. */

.acc-nouveautes {
  position: absolute !important;
  top: max(2.2vh, 8px, env(safe-area-inset-top));
  left: var(--marge-g);
  display: flex !important;
  align-items: center;
  gap: 0.9vh;
  height: max(5.4vh, 30px);
  padding: 0 1.5vh !important;
  border: 2px solid #ffd23f !important;
  border-radius: 99px;
  background: linear-gradient(180deg, #0a2f96, #061a5a) !important;
  box-shadow: 0 0 1.2vh rgba(255, 210, 63, 0.45);
  font: 700 max(2vh, 12px)/1 'Montserrat', system-ui, sans-serif !important;
  color: #ffe9a8 !important;
  white-space: nowrap;
  /* ⛔ ELLE CLIGNOTE TANT QU'ELLE N'EST PAS LUE (Frederic, 20/09 : « et
     surtout mets que ca clignote »). Une lueur qui respire plutot qu'un
     allumage brutal : on la voit du coin de l'oeil sans qu'elle happe le
     regard pendant qu'on lit le menu. Elle s'eteint pour de bon des qu'on
     a ouvert le panneau — c'est le bouton entier qui disparait. */
  animation: nv-lueur 1.5s ease-in-out infinite;
}
@keyframes nv-lueur {
  0%, 100% {
    box-shadow: 0 0 1.2vh rgba(255, 210, 63, 0.45);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 2.8vh rgba(255, 210, 63, 0.95);
    filter: brightness(1.18);
  }
}
.acc-nouveautes[hidden] { display: none !important; }
.acc-nouveautes .nv-cloche {
  width: max(2.8vh, 16px);
  height: max(2.8vh, 16px);
  color: #ffd23f;
  /* La cloche sonne, puis se tait, puis resonne : toutes les quatre
     secondes, une secousse courte. */
  animation: nv-sonne 4s ease-in-out infinite;
  transform-origin: 50% 12%;
}
@keyframes nv-sonne {
  0%, 62%, 100% { rotate: 0deg; }
  68% { rotate: 14deg; }
  74% { rotate: -12deg; }
  80% { rotate: 8deg; }
  86% { rotate: -5deg; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-nouveautes,
  .acc-nouveautes .nv-cloche,
  .acc-nouveautes .nv-compte { animation: none; }
}
.acc-nouveautes .nv-compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max(2.4vh, 16px);
  height: max(2.4vh, 16px);
  padding: 0 0.5vh;
  border-radius: 99px;
  background: #ff3b30;
  box-shadow: 0 0 0.8vh rgba(255, 59, 48, 0.6);
  color: #fff;
  font-size: max(1.6vh, 10px);
  line-height: 1;
  /* Le compte, lui, clignote vraiment : c'est le point rouge qu'on
     remarque, meme quand on regarde ailleurs. */
  animation: nv-clignote 1.5s ease-in-out infinite;
}
@keyframes nv-clignote {
  0%, 100% { opacity: 1; transform: scale(1); }
  45% { opacity: 0.35; transform: scale(0.88); }
}
/* Telephone a l'horizontale (meme fenetre que css/mobile.css) : la cloche
   et le compte suffisent, le mot prendrait la place des joueurs. La date
   du code passe alors en haut a gauche (css/mobile.css) : la pastille se
   pose DESSOUS, le badge de build doit rester lisible. */
@media (max-height: 500px) and (orientation: landscape) {
  .acc-nouveautes {
    top: 17px;
    gap: 0.6vh;
    padding: 0 1.1vh !important;
  }
  .acc-nouveautes .nv-mot { display: none; }
}

/* ---- Le panneau ---- */
.nv-voile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(4, 10, 30, 0.82);
}
.nv-voile.ouverte { display: flex; }

/* Un panneau, pas un ecran : la date et le titre sur la MEME ligne, une
   ligne de texte dessous. Cinq nouveautes tiennent sans defiler sur un
   ordinateur comme sur un telephone en paysage ; au-dela, la liste
   defile toute seule et le bouton reste en vue. */
.nv-panneau {
  display: flex;
  flex-direction: column;
  width: min(calc(var(--u) * 118), 94vw);
  max-height: 100%;
  min-height: 0;
  padding-top: calc(var(--u) * 3.2);
  padding-bottom: calc(var(--u) * 3.2);
  text-align: left;
}
.nv-panneau .pp-titre { margin-bottom: calc(var(--u) * 1); font-size: calc(var(--u) * 7); text-align: center; }
.nv-sous-titre {
  margin: 0 0 calc(var(--u) * 2);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.8);
  color: #9fd0ff;
  text-align: center;
}

.nv-liste {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
}
.nv-item {
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2);
  background: rgba(6, 16, 52, 0.62);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.3) rgba(120, 175, 255, 0.45);
}
.nv-entete {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.4);
  margin: 0 0 calc(var(--u) * 0.4);
}
.nv-date {
  flex: none;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.4);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #6fb6ff;
}
.nv-titre-item {
  font-family: var(--lettrage);
  font-weight: 400;
  font-size: calc(var(--u) * 3.4);
  line-height: 1.1;
  color: #ffd83a;
}
.nv-texte {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: calc(var(--u) * 2.7);
  line-height: 1.3;
  color: #e7f1ff;
}

.nv-pied { flex: 0 0 auto; margin-top: calc(var(--u) * 2.2); }
.nv-panneau .pp-bouton { height: calc(var(--u) * 8); font-size: calc(var(--u) * 3.4); padding: 0 calc(var(--u) * 3.6); }