/* ============================================================
   v99-arena-ui.css  (claude-arenaui-1)  [ARENA-UI 2026-06-12]
   ------------------------------------------------------------
   REFONTE VISUELLE demandée par le user :
   - écran d'ARÈNE (#pvp2-screen, classes .pvp2-* de main-patches.css)
     → cartes joueurs premium, barres de vie épaisses arrondies,
     boutons d'exercice élégants (fini le vert plat), quit discret.
   - hover/press des cartes de mode (.mx-aui-mode, menus arène+coop)
   - grille d'exercices du COOP (#coopb-ex-grid)
   Chargé APRÈS main-patches.css → les !important écrasent les
   styles inline/legacy. Zéro changement de logique.
   ============================================================ */

/* ── Cartes de mode des menus (arène + coop) ── */
.mx-aui-mode:hover { transform: translateY(-2px) !important; border-color: rgba(255,255,255,0.35) !important; }
.mx-aui-mode:active { transform: scale(0.985) !important; }

/* ── ÉCRAN D'ARÈNE ── */
/* [2026-07-06 demande user] le fond d'arène est AUSSI présent pendant le combat d'arène.
   Image + voile sombre (cartes de combat lisibles) + les vignettes rouge/cyan par-dessus. */
#pvp2-screen {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,80,80,0.12), transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(78,205,196,0.08), transparent 55%),
    linear-gradient(rgba(6,8,16,0.60), rgba(6,8,16,0.72)),
    url('../icone/icone_fond_ecran_arene.png') !important;
  background-size: auto, auto, cover, cover !important;
  background-position: center, center, center, center !important;
  background-repeat: no-repeat !important;
  background-color: #060509 !important;
}
#pvp2-screen .pvp2-header { padding: 4px 2px 10px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; margin-bottom: 14px !important; }
#pvp2-screen .pvp2-title {
  font-family: Cinzel, serif !important;
  letter-spacing: 0.06em !important;
  color: #ffd9d9 !important;
  text-shadow: 0 0 18px rgba(255,107,107,0.45) !important;
}

/* cartes joueurs */
#pvp2-screen .pvp2-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(0,0,0,0.5)) !important;
  border-radius: 16px !important;
  padding: 14px 12px !important;
  border-width: 1.5px !important;
}
#pvp2-screen .pvp2-card.me {
  border-color: rgba(78,205,196,0.7) !important;
  box-shadow: 0 0 24px rgba(78,205,196,0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#pvp2-screen .pvp2-card.opp {
  border-color: rgba(255,107,107,0.7) !important;
  box-shadow: 0 0 24px rgba(255,107,107,0.18), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
#pvp2-screen .pvp2-avatar {
  width: 64px !important; height: 64px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.55) !important;
}
#pvp2-screen .pvp2-card.me .pvp2-avatar { border-color: rgba(78,205,196,0.6) !important; }
#pvp2-screen .pvp2-card.opp .pvp2-avatar { border-color: rgba(255,107,107,0.6) !important; }
#pvp2-screen .pvp2-name { font-weight: 800 !important; font-size: 0.95em !important; letter-spacing: 0.02em !important; }
#pvp2-screen .pvp2-elo { color: #8a93a8 !important; font-size: 0.66em !important; font-weight: 700 !important; }
#pvp2-screen .pvp2-vs {
  font-family: Cinzel, serif !important;
  color: #ffd700 !important;
  text-shadow: 0 0 16px rgba(255,215,0,0.5) !important;
  font-weight: 900 !important;
}

/* barres de vie */
#pvp2-screen .pvp2-hpbar {
  height: 16px !important;
  border-radius: 9px !important;
  background: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  overflow: hidden !important;
  position: relative !important;
}
#pvp2-screen .pvp2-hpfill {
  border-radius: 9px !important;
  background: linear-gradient(90deg, #2e9e96, #4ecdc4, #8ef0e8) !important;
  box-shadow: 0 0 10px rgba(78,205,196,0.45) !important;
  transition: width .35s cubic-bezier(.2,.7,.3,1) !important;
}
#pvp2-screen .pvp2-card.opp .pvp2-hpfill {
  background: linear-gradient(90deg, #b02a24, #ff5050, #ff9a8a) !important;
  box-shadow: 0 0 10px rgba(255,80,80,0.45) !important;
}
#pvp2-screen .pvp2-hpfill.low {
  background: linear-gradient(90deg, #8a1410, #ff3b30) !important;
  box-shadow: 0 0 12px rgba(255,60,48,0.6) !important;
}
#pvp2-screen .pvp2-hptxt { font-size: 0.62em !important; font-weight: 800 !important; text-shadow: 0 1px 3px #000 !important; }

/* boutons d'exercice — fini le vert plat */
#pvp2-screen .pvp2-actions { gap: 10px !important; margin-top: 14px !important; }
#pvp2-screen .pvp2-ex-btn {
  padding: 14px 10px !important;
  background: linear-gradient(160deg, rgba(78,205,196,0.14), rgba(10,14,20,0.9)) !important;
  border: 1.5px solid rgba(78,205,196,0.5) !important;
  border-radius: 13px !important;
  color: #d9fffb !important;
  font-weight: 900 !important;
  letter-spacing: 0.03em !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: transform .12s, border-color .12s, box-shadow .12s !important;
}
#pvp2-screen .pvp2-ex-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(78,205,196,0.9) !important;
  box-shadow: 0 6px 20px rgba(78,205,196,0.25) !important;
}
#pvp2-screen .pvp2-ex-btn:active { transform: scale(0.97) !important; }

/* bouton abandonner : discret, plus de gros bloc rouge */
#pvp2-screen .pvp2-quit {
  background: rgba(255,80,80,0.07) !important;
  border: 1px solid rgba(255,80,80,0.3) !important;
  border-radius: 12px !important;
  color: #ff8090 !important;
  font-weight: 800 !important;
  padding: 11px !important;
}
#pvp2-screen .pvp2-quit:hover { background: rgba(255,80,80,0.14) !important; }

/* indicateur connexion + météo + timer */
#pvp2-screen .pvp2-conn.ok { color: #7adb8a !important; text-shadow: 0 0 8px rgba(122,219,138,0.7) !important; }
#pvp2-screen .pvp2-meteo-bar, #pvp2-screen .pvp2-timer {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
}

/* overlay de recherche d'adversaire */
#pvp2-search > div, #pvp2-search .pvp2-search-box {
  background: rgba(6,5,10,0.82) !important;
  border: 1px solid rgba(255,107,107,0.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6) !important;
}

/* ── MENU COOP réel (#coopb-menu de COOP-BATTLE) ── */
#coopb-menu > div {
  background: linear-gradient(165deg, #0d160c, #070d06) !important;
  border: 1px solid rgba(170,255,0,0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px rgba(170,255,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
#coopb-menu select#coopb-chapter {
  padding: 11px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(170,255,0,0.35) !important;
  background: rgba(0,0,0,0.5) !important;
  font-family: inherit !important;
}
#coopb-friends > div {
  background: linear-gradient(135deg, rgba(170,255,0,0.07), rgba(255,255,255,0.015)) !important;
  border: 1.5px solid rgba(170,255,0,0.3) !important;
  border-radius: 13px !important;
  padding: 10px !important;
  transition: border-color .12s !important;
}
#coopb-friends > div:hover { border-color: rgba(170,255,0,0.7) !important; }
#coopb-friends img { border: 2px solid rgba(170,255,0,0.4) !important; }
#coopb-friends button {
  background: linear-gradient(160deg, rgba(170,255,0,0.18), rgba(8,12,5,0.9)) !important;
  border: 1.5px solid rgba(170,255,0,0.55) !important;
  border-radius: 11px !important;
  color: #d9ffb0 !important;
  font-weight: 900 !important;
  transition: transform .12s, border-color .12s !important;
}
#coopb-friends button:hover { transform: translateY(-1px) !important; border-color: rgba(170,255,0,0.95) !important; }

/* ── COOP : grille d'exercices + bouton quitter (mêmes codes) ── */
#coopb-ex-grid button {
  background: linear-gradient(160deg, rgba(170,255,0,0.12), rgba(8,12,5,0.92)) !important;
  border: 1.5px solid rgba(170,255,0,0.45) !important;
  border-radius: 13px !important;
  color: #eaffd9 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  transition: transform .12s, border-color .12s !important;
}
#coopb-ex-grid button:hover { transform: translateY(-2px) !important; border-color: rgba(170,255,0,0.85) !important; }
#coopb-ex-grid button:active { transform: scale(0.97) !important; }