/* =====================================================================
   RESOURCES.CSS — Ressources du joueur + boutons d'action (haut à droite)
   3 ressources du jeu : Points Bananes, Tickets, Banane Dorée
   3 boutons : Courrier, Notifications, Paramètres

   Structure HTML attendue (dans index.html) :
     <div class="resources">
       <div class="resource" data-resource="bananaPoints">
         <div class="resource-frame"></div>          -> le panneau (bordure or + fond)
         <span class="resource-icon"><svg/></span>   -> médaillon rond avec l'icône
         <div class="resource-text">
           <span class="resource-label">…</span>     -> nom de la ressource
           <span class="resource-value">…</span>     -> quantité
         </div>
         <button class="resource-plus">+</button>    -> (optionnel) mène à la boutique
       </div>
     </div>
     <div class="hud-actions"> … boutons losanges … </div>

   Les valeurs se changent en JS avec setResources({...}) — voir js/resources.js.
   Les couleurs viennent de la charte (variables du :root de main.css).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. CONTENEUR DES RESSOURCES
   --------------------------------------------------------------------- */
.resources {
  margin-left: auto;        /* pousse le bloc tout à droite du header */
  display: flex;
  align-items: center;
  gap: 22px;                /* espace entre deux ressources (le médaillon dépasse à gauche) */
  padding-left: 10px;
}


/* ---------------------------------------------------------------------
   2. UNE RESSOURCE (pastille)
   --------------------------------------------------------------------- */
.resource {
  /* Couleurs propres à chaque ressource (surchargées plus bas via data-resource) */
  --res-accent: var(--gold-light, #ffe18a);   /* couleur du liseré, du nom et de l'anneau */
  --res-glow: rgba(216, 168, 62, 0.45);       /* couleur de la lueur */

  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  min-width: 168px;
  padding: 0 10px 0 52px;   /* 52px à gauche = place pour le médaillon d'icône */
}

/* Le panneau : dégradé or clipé en pointe à droite, + fond sombre par-dessus */
.resource-frame {
  position: absolute;
  left: 18px;               /* commence sous le médaillon (qui le recouvre) */
  right: 0;
  top: 5px;
  bottom: 5px;
  background: linear-gradient(90deg,
    var(--res-accent) 0%,
    var(--gold, #d8a83e) 60%,
    var(--purple-bright, #9c5ac5) 100%);
  /* Bord droit en pointe (même langage que la carte joueur et la nav) */
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

/* Fond translucide posé 1.5px à l'intérieur : ce qui dépasse = la bordure */
.resource-frame::before {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: linear-gradient(90deg, rgba(9, 7, 22, 0.9), rgba(20, 12, 44, 0.78));
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
}

/* Reflet glossy sur la moitié haute */
.resource-frame::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 50%);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%);
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   3. LE MÉDAILLON D'ICÔNE (rond, qui dépasse du panneau)
   --------------------------------------------------------------------- */
.resource-icon {
  position: absolute;
  left: -4px;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-top: -24px;        /* centré verticalement */
  z-index: 2;               /* au-dessus du panneau */
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #4a2a8a 0%, #1c1046 60%, #0c0722 100%);
  /* Anneaux : couleur de la ressource, espace sombre, puis lueur */
  box-shadow:
    0 0 0 2px var(--res-accent),
    0 0 0 4px #0b0818,
    0 0 14px 3px var(--res-glow),
    inset 0 0 10px rgba(160, 100, 255, 0.4);
}

/* L'icône SVG dans le médaillon */
.res-icon {
  display: block;
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
  overflow: visible;
}

/* Contour sombre commun aux icônes (couleur --void de la charte) */
.res-icon .ol {
  stroke: var(--void, #090811);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}


/* ---------------------------------------------------------------------
   4. LE TEXTE (nom + quantité)
   --------------------------------------------------------------------- */
.resource-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
}

/* Nom de la ressource : petites capitales espacées */
.resource-label {
  font-size: 9px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--res-accent);
  white-space: nowrap;
}

/* Quantité : gros chiffres, bien lisibles */
.resource-value {
  font-size: 15px;
  font-weight: 800;
  line-height: 17px;
  color: var(--cream, #f5ead5);
  font-variant-numeric: tabular-nums;   /* chiffres de même largeur : pas de "saut" quand ça change */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Petit "pop" doré quand la valeur augmente (classe ajoutée par resources.js) */
.resource.is-bump .resource-value {
  animation: res-bump 0.55s ease-out;
}

@keyframes res-bump {
  0%   { transform: scale(1);    color: var(--cream, #f5ead5); }
  35%  { transform: scale(1.22); color: var(--gold-light, #ffe18a); text-shadow: 0 0 10px rgba(255, 225, 138, 0.9); }
  100% { transform: scale(1);    color: var(--cream, #f5ead5); }
}


/* ---------------------------------------------------------------------
   5. LE BOUTON "+" (mène à la boutique)
   --------------------------------------------------------------------- */
.resource-plus {
  position: relative;
  z-index: 1;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: auto;        /* collé à droite de la pastille */
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: #2a1a00;
  background: linear-gradient(180deg, #fff1b8 0%, var(--gold, #d8a83e) 60%, #a8741f 100%);
  box-shadow: 0 0 0 1px var(--void, #090811), 0 0 8px rgba(216, 168, 62, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.resource-plus:hover {
  transform: scale(1.14);
  box-shadow: 0 0 0 1px var(--void, #090811), 0 0 12px rgba(255, 225, 138, 0.9);
}

.resource-plus:active {
  transform: scale(0.92);
}

/* Avec un "+", on garde un peu moins de marge à droite (la pointe du panneau) */
.resource:has(.resource-plus) {
  padding-right: 16px;
}

/* Sans "+", on laisse plus de place à la pointe du panneau */
.resource:not(:has(.resource-plus)) {
  padding-right: 22px;
}


/* ---------------------------------------------------------------------
   6. UNE COULEUR PAR RESSOURCE
   --------------------------------------------------------------------- */
.resource[data-resource="bananaPoints"] {   /* Points Bananes : jaune banane */
  --res-accent: var(--banana, #f5cf4c);
  --res-glow: rgba(245, 207, 76, 0.4);
}

.resource[data-resource="tickets"] {        /* Tickets : violet magique */
  --res-accent: #c9a0ff;
  --res-glow: rgba(156, 90, 197, 0.6);
}

.resource[data-resource="goldenBanana"] {   /* Banane Dorée : or éclatant (ressource premium) */
  --res-accent: var(--gold-light, #ffe18a);
  --res-glow: rgba(255, 225, 138, 0.6);
}

/* Fond du médaillon plus chaud (brun doré) pour la distinguer des Points Bananes */
.resource[data-resource="goldenBanana"] .resource-icon {
  background: radial-gradient(circle at 50% 35%, #8a5a1c 0%, #3a2408 60%, #150d04 100%);
}

/* La ressource premium respire doucement : son médaillon pulse */
.resource[data-resource="goldenBanana"] .resource-icon {
  animation: res-golden-pulse 2.8s ease-in-out infinite;
}

@keyframes res-golden-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--res-accent), 0 0 0 4px #0b0818, 0 0 12px 2px rgba(255, 225, 138, 0.35), inset 0 0 10px rgba(160, 100, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 2px var(--res-accent), 0 0 0 4px #0b0818, 0 0 22px 6px rgba(255, 225, 138, 0.75), inset 0 0 14px rgba(255, 225, 138, 0.35);
  }
}


/* ---------------------------------------------------------------------
   7. BOUTONS D'ACTION (Courrier, Notifications, Paramètres)
   Petits losanges, comme dans la barre de navigation
   --------------------------------------------------------------------- */
.hud-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
}

.round-action {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}

/* Le losange : un carré tourné de 45° */
.ra-diamond {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  transform: rotate(45deg);
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, #34288a 0%, #17114a 55%, #0a0724 100%);
  border: 1.5px solid rgba(190, 205, 255, 0.8);
  box-shadow:
    0 0 0 3px rgba(12, 9, 36, 0.85),
    0 0 0 4px rgba(150, 170, 255, 0.4),
    0 0 12px rgba(100, 110, 255, 0.45),
    inset 0 0 8px rgba(120, 110, 255, 0.45);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

/* L'icône garde sa position droite (on annule la rotation du losange) */
.ra-diamond svg {
  width: 17px;
  height: 17px;
  transform: rotate(-45deg);
  fill: var(--gold-light, #ffe18a);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

/* Survol : le losange monte et devient doré */
.round-action:hover .ra-diamond {
  transform: translateY(-3px) rotate(45deg);
  border-color: var(--gold-light, #ffe18a);
  box-shadow:
    0 0 0 3px rgba(12, 9, 36, 0.85),
    0 0 0 4px rgba(216, 168, 62, 0.6),
    0 0 16px 3px rgba(216, 168, 62, 0.45),
    inset 0 0 8px rgba(255, 225, 138, 0.3);
}

.round-action:active .ra-diamond {
  transform: translateY(0) rotate(45deg) scale(0.92);
}

/* Focus clavier (touche Tab) */
.round-action:focus-visible .ra-diamond {
  outline: 2px solid var(--gold-light, #ffe18a);
  outline-offset: 5px;
}

/* Petit point rouge de notification (en haut à droite du losange) */
.notification i {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e85a6e 0%, var(--red, #c23c50) 60%, #8c2233 100%);
  border: 1.5px solid var(--gold-light, #ffe18a);
  box-shadow: 0 0 6px rgba(194, 60, 80, 0.85);
}


/* ---------------------------------------------------------------------
   8. ACCESSIBILITÉ : pas d'animation si la personne les a désactivées
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .resource[data-resource="goldenBanana"] .resource-icon,
  .resource.is-bump .resource-value {
    animation: none;
  }

  .ra-diamond,
  .resource-plus {
    transition: none;
  }
}