/* =====================================================================
   v104-detail.css  (claude-v104-1)  [2026-07-27]
   Passe "plus détaillé" façon références (cadres ornés HUD, crochets de
   coins, glow multi-couches, médaillons). Chargée EN DERNIER (après v103).
   100% STATIQUE + additive (box-shadow / ::before ornemental transparent /
   background-gradient corner brackets). Aucune animation -> compatible mode
   fluidité. Ne touche pas les fonds existants (les crochets sont des
   pseudo-éléments transparents par-dessus, pointer-events:none).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) CROCHETS DE COINS ORNÉS (HUD) sur les cartes/modales majeures.
   Un seul ::before dessine 4 L-brackets (8 dégradés). Or par défaut ;
   la carte de rang utilise sa couleur de rang (--rank-c posée inline).
   --------------------------------------------------------------------- */
.mx-rank-card, #mx-modes-popup .card, .counter-modal-card,
#mx-energy-enter-confirm .eec-card, .mxpk-gate-card, .mxpk-info-card {
  position: relative;
}
.mx-rank-card::before, #mx-modes-popup .card::before, .counter-modal-card::before,
#mx-energy-enter-confirm .eec-card::before, .mxpk-gate-card::before, .mxpk-info-card::before {
  content: ""; position: absolute; inset: 9px; border-radius: 16px;
  pointer-events: none; z-index: 4;
  --cbx: #ffd27a;
  background:
    linear-gradient(var(--cbx), var(--cbx)) top left    / 20px 2px no-repeat,
    linear-gradient(var(--cbx), var(--cbx)) top left    / 2px 20px no-repeat,
    linear-gradient(var(--cbx), var(--cbx)) top right   / 20px 2px no-repeat,
    linear-gradient(var(--cbx), var(--cbx)) top right   / 2px 20px no-repeat,
    linear-gradient(var(--cbx), var(--cbx)) bottom left / 20px 2px no-repeat,
    linear-gradient(var(--cbx), var(--cbx)) bottom left / 2px 20px no-repeat,
    linear-gradient(var(--cbx), var(--cbx)) bottom right/ 20px 2px no-repeat,
    linear-gradient(var(--cbx), var(--cbx)) bottom right/ 2px 20px no-repeat;
  opacity: .8;
  filter: drop-shadow(0 0 3px rgba(255, 190, 70, 0.55));
}
.mx-rank-card::before { --cbx: var(--rank-c, #ffd27a); }

/* ---------------------------------------------------------------------
   2) FRAMES RICHES (double liseré + glow interne) sur les grandes surfaces
   pour le look "panneau ornementé" des références.
   --------------------------------------------------------------------- */
#mx-modes-popup .card, .counter-modal-card,
#mx-energy-enter-confirm .eec-card {
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 120, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 34px rgba(0, 0, 0, 0.45),
    0 0 46px rgba(255, 180, 60, 0.12),
    0 26px 70px rgba(0, 0, 0, 0.75) !important;
  border: 1px solid rgba(255, 205, 110, 0.34) !important;
}

/* Panneau de stats de l'accueil (le "héros" de l'écran) — cadre premium. */
.player-stats-panel, #player-stats-panel {
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 120, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 34px rgba(255, 180, 60, 0.10),
    0 14px 40px rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(255, 205, 110, 0.20) !important;
}

/* En-tête de section : fine ligne ornementée sous le médaillon (détail). */
.section-luxe-header { position: relative; }

/* ---------------------------------------------------------------------
   3) CARTES DE MODE (popup Change Mode) — accent gauche coloré + relief
   (façon "liste d'options premium" de la référence).
   --------------------------------------------------------------------- */
#mx-modes-popup .mode-item {
  border-left: 3px solid rgba(255, 205, 110, 0.5) !important;
  padding-left: 12px !important;
}
#mx-modes-popup .mode-item::after {
  content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-right: 2px solid rgba(255, 205, 110, 0.55);
  border-top: 2px solid rgba(255, 205, 110, 0.55); rotate: 45deg; opacity: .6;
  pointer-events: none;
}
#mx-modes-popup .mode-item { position: relative; }

/* ---------------------------------------------------------------------
   4) SÉPARATEURS / DÉTAILS FINS — petit losange doré sur les titres de
   modale majeurs (rappel du "◆" des références).
   --------------------------------------------------------------------- */
.counter-modal-card > *:first-child, #mx-modes-popup .card h2 {
  position: relative;
}