/* =====================================================================
   v107-tech-borders-zones.css  (claude-v107-1)  [2026-07-27]
   BORDURES HUD PARTOUT + VARIÉTÉ (couleurs ET formes différentes par zone).
   Chargée EN DERNIER (après v106). 100% STATIQUE + additive.
   Sélecteurs + pseudo LIBRE + couleur thème vérifiés par cartographie
   (wf_20f911a9-e8c). Aucun sheen/glow existant écrasé.

   PRINCIPE :
   1) §A  --hudc posé PAR ZONE → recolore automatiquement TOUS les crochets/
      ticks de v105/v106 (ils utilisent var(--hudc)) → variété de COULEUR.
   2) §B..§H  formes distinctes + nouvelle couverture via pseudos LIBRES :
      crochets fins / crochets ÉPAIS (citadelle) / double-rail / ticks
      scanner (grands panneaux) / pointillé runique (saga).
   Tous : pointer-events:none, inset POSITIF (compatible overflow:hidden),
   z-index positif, pas d'animation (compatible mode fluidité).
   ===================================================================== */

:root {
  --hudc: rgba(255, 210, 130, 0.9); /* défaut or (les zones l'écrasent) */
  --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;
  --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;
  /* crochets ÉPAIS (plaques d'angle renforcées) — citadelle */
  --mx-hud-big:
    linear-gradient(var(--hudc), var(--hudc)) top left     / 22px 3px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top left     / 3px 22px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top right    / 22px 3px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) top right    / 3px 22px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom left  / 22px 3px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom left  / 3px 22px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom right / 22px 3px no-repeat,
    linear-gradient(var(--hudc), var(--hudc)) bottom right / 3px 22px no-repeat;
}

/* =====================================================================
   §A — COULEUR PAR ZONE (recolore tous les crochets/ticks var(--hudc)
   déjà posés par v105/v106, + ceux ajoutés plus bas).
   ===================================================================== */
#mx-citadel            { --hudc: rgba(201, 124, 255, 0.90); }  /* violet */
#game-screen           { --hudc: rgba(255, 80, 80, 0.90); }    /* rouge combat */
#combat-vs-screen      { --hudc: rgba(255, 136, 60, 0.90); }   /* orange braise */
#training-screen       { --hudc: rgba(122, 219, 138, 0.90); }  /* vert training */
#guild-screen          { --hudc: rgba(255, 205, 70, 0.90); }   /* or héraldique */
#quests-screen         { --hudc: rgba(255, 160, 45, 0.90); }   /* ambre */
#portal-screen         { --hudc: rgba(255, 107, 208, 0.90); }  /* magenta saga */
#mx-saga-diff, #mx-saga-gate, #saga-loot-info-modal { --hudc: rgba(255, 92, 225, 0.90); }
#boss-du-mois-card     { --hudc: rgba(255, 60, 90, 0.90); }    /* rouge sang */
#pvp2-menu-modal, #pvp2-screen, #pvp2-friends-modal { --hudc: rgba(78, 205, 196, 0.90); } /* cyan arène */
#coopb-menu, #coopb-screen { --hudc: rgba(170, 255, 0, 0.85); } /* vert coop */
#profile-screen        { --hudc: rgba(129, 236, 255, 0.90); }  /* bleu acier */
#welcome-screen        { --hudc: rgba(129, 236, 255, 0.85); }
#settings-modal        { --hudc: rgba(129, 236, 255, 0.90); }
#mx-wmap-vp            { --hudc: rgba(255, 210, 74, 0.90); }   /* or carte */
#friends-screen        { --hudc: rgba(159, 176, 255, 0.90); }  /* bleu social */
#chat-screen           { --hudc: rgba(129, 236, 255, 0.90); }
#mx-mailbox-modal      { --hudc: rgba(255, 216, 74, 0.90); }   /* or */
#gift-modal            { --hudc: rgba(255, 215, 0, 0.90); }
#mx-dq-panel           { --hudc: rgba(122, 219, 138, 0.90); }  /* vert quêtes du jour */
/* popups transverses : cyan (leurs crochets v104=--cbx, ticks v105=--hudc) */
#mx-modes-popup .card, .counter-modal-card, #mx-energy-enter-confirm .eec-card {
  --cbx: rgba(129, 236, 255, 0.85) !important; --hudc: rgba(129, 236, 255, 0.85);
}

/* helper double-rail interne (couleur = zone via --hudc, dim par opacity) */
/* helper appliqué inline dans chaque bloc pour rester lisible */

/* =====================================================================
   §B — CITADELLE (crochets ÉPAIS violets en ::after ; ::before = v105).
   Boutons de chapitre + verrous pack.
   ===================================================================== */
#mx-citadel button[onclick*="MX_startChapter"]::after,
#mx-citadel button[onclick*="MX_showPackGate"]::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 3;
  background: var(--mx-hud-big); opacity: .42;
}
/* boutons Accueil/Fermer + Forteresse + popups citadelle : crochets fins violets */
#mx-citadel button[onclick*="showScreen('welcome')"],
#mx-citadel button[onclick*="showScreen('dungeons')"],
#mx-chapboss-popup .cb-card, #mx-reward-choice .mx-rc-chest,
#mx-completion-chest > div { position: relative; }
#mx-citadel button[onclick*="showScreen('welcome')"]::before,
#mx-citadel button[onclick*="showScreen('dungeons')"]::before {
  content: ""; position: absolute; inset: 3px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .5;
}
#mx-chapboss-popup .cb-card::before, #mx-reward-choice .mx-rc-chest::before,
#mx-completion-chest > div::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 4;
  background: var(--mx-hud); opacity: .55;
}

/* =====================================================================
   §C — COMBAT (rouge/orange). VS = ticks scanner + rail ; HUD PV = crochets.
   #battle-arena INTOUCHABLE (ses 2 pseudos sont pris).
   ===================================================================== */
#combat-vs-screen::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 16;
  background: var(--mx-hud-ticks); opacity: .5;
}
#combat-vs-screen::after {
  content: ""; position: absolute; inset: 4px; border-radius: 12px;
  border: 1px solid var(--hudc); opacity: .22; pointer-events: none; z-index: 16;
}
#mx-combat-hud { position: relative; }
#mx-combat-hud::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .42;
}

/* =====================================================================
   §D — SAGA / PORTAIL (magenta). Cartes saga = pointillé RUNIQUE en ::after
   (::before = crochets v105 recolorés magenta). Modales saga = crochets.
   ===================================================================== */
#saga-grid > div::after {
  content: ""; position: absolute; inset: 6px; border-radius: 10px;
  border: 1.5px dashed var(--hudc); opacity: .38; pointer-events: none; z-index: 2;
}
#mx-saga-diff > div, #mx-saga-diff button[data-lv], #mx-saga-gate > div,
#saga-loot-info-modal > div, #boss-du-mois-card > div { position: relative; }
#mx-saga-diff > div::before, #mx-saga-gate > div::before,
#saga-loot-info-modal > div::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 4;
  background: var(--mx-hud); opacity: .5;
}
#mx-saga-diff button[data-lv]::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .5;
}
#mx-saga-gate .mx-sgx-row { position: relative; }
#mx-saga-gate .mx-sgx-row::after {
  content: ""; position: absolute; inset: 3px; border-radius: 8px;
  border: 1px solid var(--hudc); opacity: .2; pointer-events: none; z-index: 1;
}
/* BOSS DU MOIS : crochets ÉPAIS rouge sang */
#boss-du-mois-card > div::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 4;
  background: var(--mx-hud-big); opacity: .45;
}

/* =====================================================================
   §E — ARÈNE PvP (cyan / adversaire rouge) + COOP (vert).
   ===================================================================== */
#pvp2-menu-modal > div, #pvp2-friends-modal > div, #pvp2-friends-list > div,
#pvp2-screen .pvp2-card, #pvp2-screen .pvp2-ex-btn, #pvp2-result .result-card,
#coopb-menu > div, #coopb-friends > div, #coopb-ex-grid button { position: relative; }
/* cartes joueur : moi cyan, adversaire rouge */
#pvp2-screen .pvp2-card.opp { --hudc: rgba(255, 107, 107, 0.9); }
#pvp2-screen .pvp2-card::before,
#pvp2-result .result-card::before,
#pvp2-menu-modal > div::before, #pvp2-friends-modal > div::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 4;
  background: var(--mx-hud); opacity: .5;
}
/* cartes de mode arène (.mx-aui-mode) : ::before = crochets v105 (cyan) ; on ajoute un rail */
.mx-aui-mode::after {
  content: ""; position: absolute; inset: 4px; border-radius: 10px;
  border: 1px solid var(--hudc); opacity: .25; pointer-events: none; z-index: 2;
}
/* boutons d'exercice arène + coop : crochets fins */
#pvp2-screen .pvp2-ex-btn::before, #coopb-ex-grid button::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .45;
}
/* menu coop + lignes ami + rangées : rail vert */
#coopb-menu > div::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .5;
}
#coopb-friends > div::after, #pvp2-friends-list > div::after {
  content: ""; position: absolute; inset: 3px; border-radius: 8px;
  border: 1px solid var(--hudc); opacity: .2; pointer-events: none; z-index: 1;
}
/* cartes de chapitre coop : ::before = crochets v105 (vert) ; on ajoute un rail */
#coopb-chap-grid button[id^="coopb-chap-"]::after {
  content: ""; position: absolute; inset: 4px; border-radius: 9px;
  border: 1px solid var(--hudc); opacity: .22; pointer-events: none; z-index: 1;
}

/* =====================================================================
   §F — GUILDE (or). Bandeau = ticks ; onglets/cartes/panneaux = crochets/rail.
   ===================================================================== */
#guild-content .mx-guild-banner { position: relative; }
#guild-content .mx-guild-banner::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 3;
  background: var(--mx-hud-ticks); opacity: .45;
}
#guild-content .mx-guild-tabs, #guild-content button[onclick*="MX_showCreateGuildModalFB"],
#guild-content button[onclick*="MX_browseGuilds"],
#mx-go-shop [style*="grid-template-columns"] > div,
#mx-guild-tabbody [data-mx-avatar-uid],
#mx-go-boosts > div[style*="border-radius:12px"],
#mx-guild-requests > div,
#mx-guild-tabbody [style*="grid-template-columns:repeat(3,1fr)"] > div { position: relative; }
/* cartes du marché de guilde + boutons créer/explorer : crochets or */
#mx-go-shop [style*="grid-template-columns"] > div::before,
#guild-content button[onclick*="MX_showCreateGuildModalFB"]::before,
#guild-content button[onclick*="MX_browseGuilds"]::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .45;
}
/* lignes de membre / demandes / boosts / stat-cards guilde : rail or */
#mx-guild-tabbody [data-mx-avatar-uid]::after,
#mx-go-boosts > div[style*="border-radius:12px"]::after,
#mx-guild-requests > div::after,
#mx-guild-tabbody [style*="grid-template-columns:repeat(3,1fr)"] > div::after {
  content: ""; position: absolute; inset: 3px; border-radius: 8px;
  border: 1px solid var(--hudc); opacity: .2; pointer-events: none; z-index: 1;
}

/* =====================================================================
   §G — QUÊTES (ambre). Cartes de quête = rail (::before = v105).
   Bannière/pastilles/panneau du jour = crochets/rail.
   ===================================================================== */
#quest-list > div::after {
  content: ""; position: absolute; inset: 4px; border-radius: 9px;
  border: 1px solid var(--hudc); opacity: .22; pointer-events: none; z-index: 1;
}
#quest-progress-banner, #quest-rank-progress > div, #mx-dq-panel > div, #mx-dq-body > div { position: relative; }
#quest-progress-banner::before, #mx-dq-panel > div::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 3;
  background: var(--mx-hud-ticks); opacity: .45;
}
#quest-rank-progress > div::after, #mx-dq-body > div::after {
  content: ""; position: absolute; inset: 3px; border-radius: 8px;
  border: 1px solid var(--hudc); opacity: .22; pointer-events: none; z-index: 1;
}

/* =====================================================================
   §H — PROFIL / RÉGLAGES / CARTE / SOCIAL (bleu acier / or).
   ===================================================================== */
/* PROFIL : héros = crochets ; panneau stats + cartes = crochets/ticks */
#profile-screen .pf-hero, #mx-stats-panel,
#mx-stats-panel div[style*="grid-template-columns"] > div,
#mx-titles-entry-btn, #mx-ach-entry-btn, #profile-avatar-frame { position: relative; }
#profile-screen .pf-hero::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 2;
  background: var(--mx-hud); opacity: .42;
}
#mx-stats-panel::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none; z-index: 2;
  background: var(--mx-hud-ticks); opacity: .4;
}
#mx-stats-panel div[style*="grid-template-columns"] > div::before,
#mx-titles-entry-btn::before, #mx-ach-entry-btn::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 2;
  background: var(--mx-hud); opacity: .4;
}
#profile-avatar-frame::after {
  content: ""; position: absolute; inset: 2px; border-radius: 12px;
  border: 1px solid var(--hudc); opacity: .3; pointer-events: none; z-index: 3;
}
/* RÉGLAGES : carte = ticks ; onglets/actions = crochets ; lignes = rail */
#settings-modal .mx-set-card, #settings-modal .mx-set-tab,
#settings-modal .mx-set-action, #settings-modal .mx-set-row { position: relative; }
#settings-modal .mx-set-card::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 2;
  background: var(--mx-hud-ticks); opacity: .4;
}
#settings-modal .mx-set-action::before {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 2;
  background: var(--mx-hud); opacity: .38;
}
#settings-modal .mx-set-row::after {
  content: ""; position: absolute; inset: 3px; border-radius: 8px;
  border: 1px solid var(--hudc); opacity: .16; pointer-events: none; z-index: 0;
}
/* CARTE DU MONDE : cadre HUD autour du viewport UNIQUEMENT (PAS les zones .mx-wmap-hot) */
#mx-wmap-vp { position: relative; }
#mx-wmap-vp::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 6;
  background: var(--mx-hud-ticks); opacity: .5;
}
/* SOCIAL : cartes ami / mailbox / cadeau */
#friends-content > div[style*="border-radius:12px"][style*="flex-wrap:wrap"],
#mx-mailbox-modal .mb-card, #mx-mailbox-modal .mb-msg, #gift-modal > div { position: relative; }
#friends-content > div[style*="border-radius:12px"][style*="flex-wrap:wrap"]::before,
#gift-modal > div::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 3;
  background: var(--mx-hud); opacity: .42;
}
#mx-mailbox-modal .mb-card::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none; z-index: 3;
  background: var(--mx-hud-ticks); opacity: .45;
}
#mx-mailbox-modal .mb-msg::after {
  content: ""; position: absolute; inset: 3px; border-radius: 8px;
  border: 1px solid var(--hudc); opacity: .2; pointer-events: none; z-index: 0;
}

/* =====================================================================
   §I — BOUTONS D'EXERCICE DE COMBAT (POMPES / SQUATS / ABDOS / TRACTIONS…).
   .exercise-btn a ses 2 pseudos pris (main.css : ::before=brillance haute,
   ::after=balayage hover) + overflow:hidden → aucun pseudo libre.
   On RÉÉCRIT ::before (spécificité #id .classe ::before = supérieure à
   main.css) pour porter LA MÊME brillance + des crochets HUD (couleur = zone
   via --hudc : rouge en combat). ::after (balayage) NON touché. inset 3px =
   à l'abri des coins arrondis (border-radius 12px) et de l'overflow:hidden.
   Couvre TOUS les combats (normal/citadelle/donjon/saga/perso) car ils
   partagent #exercise-buttons .exercise-btn.
   ===================================================================== */
#exercise-buttons .exercise-btn::before {
  content: ""; position: absolute; inset: 3px; top: 3px; left: 3px; right: 3px;
  height: auto; bottom: 3px; border-radius: 10px; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.07), transparent 55%),
    var(--mx-hud);
  opacity: 1;
}
/* liseré interne net assorti à la zone */
#exercise-buttons .exercise-btn {
  border-color: var(--hudc) !important;
}