/* =================================================================
   GTA CHEAT V1 — COMPOSANTS HUD
   Éléments inspirés des interfaces de jeu : étoiles de recherche,
   barres vie/armure, compteur d'argent, mini-carte, bannières mission.
   ================================================================= */

/* ---- Étoiles de recherche (wanted level) --------------------- */
.wanted { display:inline-flex; align-items:center; gap:3px; }
.wanted svg { width:16px; height:16px; color: var(--steel-2); transition: color .25s var(--ease), filter .25s var(--ease); }
.wanted svg.on { color: var(--accent-3); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-3) 70%, transparent)); }
/* version interactive (notation) */
.wanted--rate svg { cursor:pointer; }
.wanted--rate:hover svg { color: var(--steel-2); }
.wanted--rate svg:hover, .wanted--rate svg:hover ~ svg { color: var(--steel-2); }
.wanted--rate:hover svg { color: var(--accent-3); }
.wanted--rate svg:hover ~ svg { color: var(--steel-2); filter:none; }

/* ---- Barres vie / armure ------------------------------------- */
.hud-bars { display:grid; gap:.5rem; max-width:280px; }
.hud-meter { display:flex; align-items:center; gap:.6rem; }
.hud-meter__icon { width:18px; height:18px; flex:0 0 auto; }
.hud-meter__icon.health { color:#ff5b6e; }
.hud-meter__icon.armor  { color: var(--accent-2); }
.hud-meter__track {
  --val: 80%;
  flex:1; height:10px; border-radius:3px;
  background:
    repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--bg) 60%, transparent) 13px 15px),
    var(--steel);
  position:relative; overflow:hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 30%, transparent);
}
.hud-meter__fill { position:absolute; inset:0 auto 0 0; width: var(--val); border-radius:3px; }
.hud-meter.health .hud-meter__fill { background: linear-gradient(90deg,#ff8b5b,#ff5b6e); }
.hud-meter.armor  .hud-meter__fill { background: linear-gradient(90deg,#7fe7ea,var(--accent-2)); }

/* ---- Compteur d'argent (style cash GTA) ---------------------- */
.cash {
  display:inline-flex; align-items:center; gap:.35em;
  font-family: var(--font-display); letter-spacing:.5px;
  color: var(--money-clr); text-shadow: 0 1px 0 rgba(0,0,0,.5);
  font-size: 1.1rem; line-height:1;
}
.cash::before { content:"$"; opacity:.85; }
.cash--lg { font-size: clamp(1.6rem,3vw,2.4rem); }

/* ---- Mini-carte / radar -------------------------------------- */
.radar {
  width: 120px; height:120px; border-radius:50%;
  border:3px solid var(--steel-2); position:relative; overflow:hidden; flex:0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 70%),
    var(--night);
  box-shadow: var(--shadow-1), inset 0 0 18px rgba(0,0,0,.6);
}
.radar::before { /* grille */
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent-2) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 18%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
}
.radar::after { /* balayage */
  content:""; position:absolute; inset:0;
  background: conic-gradient(from 0deg, transparent 0 300deg, color-mix(in srgb, var(--accent-2) 45%, transparent) 360deg);
  animation: radar-sweep 3.4s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.radar .blip { position:absolute; width:9px; height:9px; border-radius:50%; transform: translate(-50%,-50%); box-shadow:0 0 8px currentColor; }
.radar .blip.pink  { color:var(--accent);   background:currentColor; left:64%; top:38%; }
.radar .blip.cyan  { color:var(--accent-2); background:currentColor; left:34%; top:60%; }
.radar .blip.money { color:var(--money-clr);background:currentColor; left:55%; top:70%; }
@media (prefers-reduced-motion: reduce){ .radar::after{ animation:none; } }

/* ---- Bannière « Mission » (titres de section) ---------------- */
.mission-banner { text-align:center; margin-bottom: clamp(28px,5vw,56px); }
.mission-banner .kicker { justify-content:center; }
.mission-banner h2 { margin-top:.5rem; }
.mission-banner p { margin-inline:auto; color:var(--text-muted); }

/* Bandeau « passed / wasted » réutilisable */
.banner-flash {
  font-family: var(--font-display); text-transform:uppercase; letter-spacing:2px;
  font-size: clamp(1.4rem,3vw,2.2rem); text-align:center;
  padding:.5em 1em; border-radius: var(--radius-sm); position:relative; overflow:hidden;
}
.banner-flash--passed { color:#bff7c4; background: linear-gradient(180deg, color-mix(in srgb,var(--money-clr) 28%,transparent), transparent); border:1px solid color-mix(in srgb,var(--money-clr) 45%,transparent); }
.banner-flash--wasted { color:#ffd0d6; background: linear-gradient(180deg, color-mix(in srgb,#ff5b6e 28%,transparent), transparent); border:1px solid color-mix(in srgb,#ff5b6e 45%,transparent); }

/* ---- Tuiles « ambiance / jeu » (4 piliers) ------------------- */
.pillar { padding:1.5rem 1.4rem 1.6rem; border-radius: var(--radius); border:1px solid var(--border); position:relative; overflow:hidden; background: var(--surface); }
.pillar__bar { position:absolute; inset:0 auto 0 0; width:4px; }
.pillar--sa    .pillar__bar { background: linear-gradient(var(--grove), var(--gold)); }
.pillar--iv    .pillar__bar { background: linear-gradient(#5b6b7d, #2b3543); }
.pillar--v     .pillar__bar { background: linear-gradient(var(--v-blue), var(--v-green), var(--v-orange)); }
.pillar--vice  .pillar__bar { background: linear-gradient(var(--vice-cyan), var(--vice-pink), var(--sunset)); }
.pillar__ico { width:40px; height:40px; margin-bottom:.9rem; }
.pillar--sa   .pillar__ico { color: var(--gold); }
.pillar--iv   .pillar__ico { color: var(--ash); }
.pillar--v    .pillar__ico { color: var(--v-blue); }
.pillar--vice .pillar__ico { color: var(--vice-pink); }
.pillar h3 { font-size:1.15rem; margin-bottom:.4rem; }
.pillar p { color: var(--text-muted); font-size:.94rem; margin:0; }
.pillar small { display:block; margin-top:.9rem; font-family:var(--font-ui); text-transform:uppercase; letter-spacing:1.5px; font-size:.68rem; color:var(--text-muted); }

/* ---- Notification type « message mission » ------------------- */
.toast {
  position:fixed; left:50%; bottom:26px; transform: translateX(-50%) translateY(140%);
  z-index: 9500; max-width: 92vw;
  display:flex; align-items:center; gap:.8rem;
  background: color-mix(in srgb, var(--night) 92%, transparent);
  border:1px solid var(--border-2); border-left:4px solid var(--accent);
  padding:.85rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  font-family: var(--font-ui); letter-spacing:.4px;
  transition: transform .4s var(--ease);
}
.toast.show { transform: translateX(-50%) translateY(0); }
.toast svg { width:22px; height:22px; color: var(--accent); flex:0 0 auto; }
.toast strong { display:block; color:var(--heading); text-transform:uppercase; letter-spacing:1px; font-size:.85rem; }
.toast span { color: var(--text-muted); font-size:.85rem; }

/* ---- Statistiques HUD ---------------------------------------- */
.stat { text-align:center; padding:1.2rem; }
.stat__num { display:block; font-family:var(--font-display); font-size: clamp(2rem,4vw,3.2rem); line-height:1; background:linear-gradient(180deg,var(--heading),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat__label { display:block; font-family:var(--font-ui); text-transform:uppercase; letter-spacing:2px; font-size:.74rem; color:var(--text-muted); margin-top:.4rem; }

/* ---- Roue d'armes (indice décoratif) ------------------------- */
.weapon-wheel { width:46px; height:46px; border-radius:50%; border:2px solid var(--border-2); position:relative; }
.weapon-wheel::before,.weapon-wheel::after { content:""; position:absolute; inset:8px; border-radius:50%; border-top:2px solid var(--accent); border-right:2px solid var(--accent-2); transform: rotate(0deg); }
.weapon-wheel::after { inset:3px; border-color: transparent; border-bottom:2px solid var(--accent-3); }