/* =====================================================================
   v105-tech-borders.css  (claude-v105-1)  [2026-07-27]
   BORDURES "TECHNIQUES" (HUD sci-fi) façon références : crochets de coins
   nets + repères d'arête + cadre or fin, généralisés aux boutons / cartes /
   panneaux / en-têtes. Chargée EN DERNIER (après v104).
   100% STATIQUE + additive. Les crochets sont posés sur un pseudo LIBRE de
   chaque surface (::before OU ::after selon la carte des pseudos existants),
   transparent + pointer-events:none → n'écrase aucun fond, ne casse aucun
   sheen/glow existant. Aucune animation → compatible mode fluidité.
   ===================================================================== */

/* ---- crochets de coins réutilisables (var globale) ---- */
:root {
  --hudc: rgba(255, 210, 130, 0.9);
  --mx-hud:
    linear-gradient(var(--hudc), var(--hudc)) top left     / 14px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top left     / 2px 14px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top right    / 14px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top right    / 2px 14px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom left  / 14px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom left  / 2px 14px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom right / 14px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom right / 2px 14px no-repeat;
  /* version + repères d'arête (petits ticks au milieu haut/bas) pour les grands cadres */
  --mx-hud-ticks:
    linear-gradient(var(--hudc), var(--hudc)) top left     / 16px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top left     / 2px 16px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top right    / 16px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top right    / 2px 16px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom left  / 16px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom left  / 2px 16px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom right / 2px 16px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top center   / 2px 8px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom center/ 2px 8px no-repeat;
}

/* =====================================================================
   1) CROCHETS sur les BOUTONS primaires (::before LIBRE — sheen sur ::after)
   ===================================================================== */
.mode-btn, .buy-btn, .action-btn, .mx-aui-mode { position: relative; }
.mode-btn::before, .buy-btn::before, .action-btn::before, .mx-aui-mode::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .55;
  filter: drop-shadow(0 0 2px rgba(255, 190, 70, 0.5));
}

/* =====================================================================
   2) CROCHETS + TICKS sur les CARTES de menu (::before libre sur ces divs
   générés inline — ils n'ont pas de pseudo).
   ===================================================================== */
#saga-grid > div,
#mx-citadel button[onclick*="MX_startChapter"], #mx-citadel button[onclick*="MX_showPackGate"],
#quest-list > div,
#training-tiers > div,
#coopb-chap-grid button[id^="coopb-chap-"],
#mx-go-shop [style*="grid-template-columns"] > div {
  position: relative;
}
#saga-grid > div::before,
#mx-citadel button[onclick*="MX_startChapter"]::before, #mx-citadel button[onclick*="MX_showPackGate"]::before,
#quest-list > div::before,
#training-tiers > div::before,
#coopb-chap-grid button[id^="coopb-chap-"]::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .5;
}

/* =====================================================================
   3) CROCHETS + TICKS sur les CADRES (::after libre) : panneau stats accueil,
   cartes de stat, en-têtes de section.
   ===================================================================== */
.player-stats-panel, .stat-card, .section-luxe-header { position: relative; }
.player-stats-panel::after, .section-luxe-header::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 3;
  background: var(--mx-hud-ticks); opacity: .5;
  filter: drop-shadow(0 0 2px rgba(255, 190, 70, 0.45));
}
.stat-card::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 2;
  background: var(--mx-hud); opacity: .4;
}

/* Repères d'arête ajoutés aux modales (crochets déjà posés par v104 en ::before) */
#mx-modes-popup .card::after, .counter-modal-card::after,
#mx-energy-enter-confirm .eec-card::after {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--hudc), var(--hudc)) top center   / 2px 9px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom center/ 2px 9px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) left center   / 9px 2px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) right center  / 9px 2px no-repeat;
  opacity: .55;
}

/* =====================================================================
   4) CADRE OR NET (border mieux faite) — remplace les bords blancs fades par
   une ligne dorée franche. On ne touche QUE la couleur du bord (sûr : ne
   change ni box-shadow ni radius ni pseudo).
   ===================================================================== */
.nav-btn:not([style*="gradient"]),
.mode-btn, .buy-btn, .action-btn, .mx-aui-mode,
.equip-slot, .market-item, .gem-pack, .stat-card, .mode-card, .invp-card,
#market-screen .grid-3 > div,
.player-stats-panel, .section-luxe-header {
  border-color: rgba(255, 205, 120, 0.28) !important;
}

/* =====================================================================
   5) LIGNE TECH double sur les petites cartes de grille (sans pseudo/brackets
   pour éviter l'encombrement) : un liseré interne net = "double cadre" HUD.
   ===================================================================== */
.equip-slot, .market-item, .invp-card, #market-screen .grid-3 > div {
  position: relative;
}
.equip-slot::after, .market-item::after, .invp-card::after {
  content: ""; position: absolute; inset: 3px; border-radius: 9px;
  border: 1px solid rgba(255, 205, 120, 0.12); pointer-events: none; z-index: 1;
}