/* ============================================================
   duel.css — pages viewer Duel (famille POMMU, indigo)
   Préfixes : dxg- (hub), dxp- (partie), dxm- (affinités)
   ============================================================ */

.dxg { padding-bottom: var(--space-12); }

/* ----- sections ----- */
.dxg-section { margin-bottom: var(--space-10, 40px); }
.dxg-section__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.dxg-section__title { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 3px; color: var(--gold); }
.dxg-section__line { flex: 1; height: 1px; background: var(--border); }
.dxg-section__meta { font-size: .72rem; color: var(--muted-2); }
.dxg-kicker { font-family: 'Bebas Neue', sans-serif; font-size: 1rem; letter-spacing: 3px; color: var(--gold); margin: 0 0 var(--space-2); }

.dxg-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px); padding: var(--space-5, 20px) var(--space-6, 24px);
}
.dxg-box--empty { text-align: center; }
.dxg-big { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.5rem; margin: 0 0 var(--space-2); }
.dxg-sub { font-size: .82rem; color: var(--muted-2); line-height: 1.6; margin: 0 0 var(--space-2); }
.dxg-note { font-size: .74rem; color: var(--muted); line-height: 1.6; margin-top: var(--space-3); }

/* ----- boutons ----- */
.dxg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 1rem;
  padding: 10px 20px; border-radius: var(--radius-md, 10px);
  border: 1px solid rgba(124, 131, 255, .4); background: transparent; color: var(--text);
  cursor: pointer; text-decoration: none; transition: var(--transition, .2s ease);
}
.dxg-btn:hover { border-color: #7c83ff; color: #fff; }
.dxg-btn--primary { background: #7c83ff; border-color: #7c83ff; color: #0d0f33; }
.dxg-btn--primary:hover { background: var(--gold); border-color: var(--gold); color: #0d0f33; }
.dxg-btn--sm { padding: 7px 14px; font-size: .9rem; }
.dxg-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ----- tournoi de la semaine ----- */
.dxg-weekly { display: flex; gap: var(--space-6); align-items: center; justify-content: space-between; flex-wrap: wrap; border-color: rgba(124, 131, 255, .35); }
.dxg-weekly__cta { flex-shrink: 0; }

/* ----- decks ----- */
.dxg-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.dxg-deck { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
.dxg-deck__title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.1rem; margin: 0; }
.dxg-deck__desc { font-size: .76rem; color: var(--muted-2); margin: 0; line-height: 1.5; }
.dxg-deck__meta { font-size: .7rem; color: var(--muted); margin: 0; }
.dxg-deck__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* ----- formulaire de proposition ----- */
.dxg-form { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.dxg-input {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
  color: var(--text); font-family: inherit; font-size: .85rem; padding: 10px 14px; min-width: 0;
}
.dxg-input:focus { outline: none; border-color: #7c83ff; }
#dxg-p-name { flex: 1 1 220px; }
.dxg-msg { flex-basis: 100%; font-size: .78rem; min-height: 1em; }
.dxg-msg--ok { color: var(--green, #3cffb4); }
.dxg-msg--err { color: var(--red, #ff3c6e); }

.dxg-mine { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.dxg-mine li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: .82rem; }
.dxg-mine em { font-style: normal; color: var(--muted); margin-left: 8px; font-size: .72rem; }
.dxg-chip { font-size: .68rem; padding: 3px 10px; border-radius: 999px; white-space: nowrap; align-self: center; }
.dxg-chip--pending { background: rgba(255, 209, 102, .14); color: var(--gold); }
.dxg-chip--approved { background: rgba(60, 255, 180, .12); color: #3cffb4; }
.dxg-chip--rejected { background: rgba(255, 60, 110, .12); color: #ff3c6e; }

.dxg-pill { font-size: .72rem; padding: 5px 14px; border-radius: 999px; background: rgba(124, 131, 255, .16); color: var(--gold); }

/* ============================================================
   Partie (duel)
   ============================================================ */
.dxp-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.dxp-round { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.2rem; }
.dxp-dots { display: flex; gap: 8px; margin-bottom: var(--space-6); }
.dxp-dots i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.dxp-dots i.done { background: #7c83ff; }
.dxp-dots i.current { background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 209, 102, .22); }

.dxp-arena { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.dxp-vs { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; letter-spacing: 3px; color: var(--gold); }
.dxp-card {
  display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden;
  background: var(--surface-2); border: 2px solid var(--border); border-radius: var(--radius-lg, 14px);
  color: var(--text); font-family: inherit; cursor: pointer; text-align: center;
  transition: border-color .15s ease, transform .15s ease;
}
.dxp-card:hover, .dxp-card:focus-visible { border-color: #7c83ff; transform: translateY(-3px); outline: none; }
.dxp-card:active { transform: scale(.985); }
.dxp-card__img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
.dxp-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dxp-card__ph { font-family: 'Inter', sans-serif; font-weight: 900; font-style: italic; font-size: 5rem; color: rgba(124, 131, 255, .22); line-height: 1; }
.dxp-card__name { padding: var(--space-4); font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.15; word-break: break-word; }
.dxp-hint { text-align: center; }

/* ----- fin de tournoi ----- */
.dxp-champ { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--space-8, 32px); border-color: rgba(255, 209, 102, .4); }
.dxp-champ__card { width: min(280px, 70vw); background: var(--surface-2); border: 2px solid var(--gold); border-radius: var(--radius-lg, 14px); overflow: hidden; }
.dxp-champ__card .dxp-card__name { padding: var(--space-3); }

.dxp-pick__round { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; color: var(--gold); margin: var(--space-4) 0 var(--space-1); }
.dxp-pick { display: flex; gap: var(--space-2); align-items: baseline; padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: .84rem; flex-wrap: wrap; }
.dxp-pick span { color: var(--muted); font-size: .72rem; }
.dxp-pick em { font-style: normal; color: var(--muted-2); }
.dxp-again { margin-top: var(--space-8, 32px); }

/* ----- affinités ----- */
.dxm-row { display: grid; grid-template-columns: minmax(90px, 1.1fr) 3fr auto auto; gap: var(--space-4); align-items: center; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 10px); margin-bottom: var(--space-2); }
.dxm-row--ref { border-color: rgba(255, 209, 102, .45); }
.dxm-name { font-weight: 500; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dxm-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.dxm-bar b { display: block; height: 100%; background: #7c83ff; }
.dxm-pct { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--gold); min-width: 3.2ch; text-align: right; }
.dxm-common { font-size: .68rem; color: var(--muted); min-width: 7ch; text-align: right; }
.dxm-wait { grid-column: 2 / -1; font-size: .78rem; color: var(--muted-2); }

@media (max-width: 720px) {
  .dxp-arena { grid-template-columns: 1fr; }
  .dxp-vs { text-align: center; font-size: 1.8rem; }
  .dxp-card { flex-direction: row; align-items: stretch; }
  .dxp-card__img { aspect-ratio: auto; width: 38%; flex-shrink: 0; }
  .dxp-card__name { flex: 1; display: flex; align-items: center; justify-content: center; }
  .dxm-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .dxm-bar { grid-column: 1 / -1; order: 3; }
  .dxm-common { display: none; }
  .dxg-weekly { flex-direction: column; align-items: flex-start; }
}