/* ============================================================
   PvP Enchants v2 — design sombre repoli
   Deux modes :
   - .pvpe-page  : plein écran (template autonome, thème court-circuité)
   - .pvpe-full  : full-bleed en mode shortcode embarqué dans un thème
   ============================================================ */

:root {
  --pvpe-bg: #0d0c11;
  --pvpe-bg2: #111015;
  --pvpe-card: #17151d;
  --pvpe-card2: #1d1a25;
  --pvpe-line: #2a2733;
  --pvpe-ink: #eceaf2;
  --pvpe-dim: #8f8a9e;
  --pvpe-acc: #a855f7;
  --pvpe-acc-soft: rgba(168, 85, 247, .14);
  --pvpe-s: #ffe34d;
  --pvpe-a: #ff9d2f;
  --pvpe-c: #ff5168;
  --pvpe-ok: #39d98a;
}

/* ---------- Mode plein écran (template autonome) ---------- */
body.pvpe-standalone {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(168, 85, 247, .10), transparent 60%),
    radial-gradient(900px 450px at 90% 0%, rgba(80, 60, 200, .08), transparent 55%),
    var(--pvpe-bg);
  background-attachment: fixed;
}
.pvpe-page {
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 36px);
  background: transparent !important;
  border-radius: 0 !important;
}

/* ---------- Mode shortcode : full-bleed dans un thème ---------- */
.pvpe-full {
  width: 100vw; max-width: none;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  border-radius: 0;
  padding: 28px max(24px, calc((100vw - 1440px) / 2));
}

/* ---------- Base ---------- */
.pvpe {
  /* alias courts utilisés dans les styles inline du JS */
  --dim: var(--pvpe-dim);
  --ok: var(--pvpe-ok);
  --acc: var(--pvpe-acc);
  --line: var(--pvpe-line);
  --c: var(--pvpe-c);
  background: var(--pvpe-bg2);
  color: var(--pvpe-ink);
  border-radius: 14px;
  padding: 22px;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.pvpe * { box-sizing: border-box }
.pvpe h2 { font-size: 15px; margin: 0 0 12px; font-weight: 700; color: var(--pvpe-ink) }
.pvpe h3 {
  font-size: 12px; margin: 18px 0 8px; color: var(--pvpe-dim);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.pvpe p { margin: 0 0 10px }
.pvpe a { color: var(--pvpe-acc) }

/* ---------- En-tête de l'app ---------- */
.pvpe .head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.pvpe .head .logo {
  font-size: clamp(19px, 2.4vw, 24px); font-weight: 800; letter-spacing: -.01em;
  background: linear-gradient(90deg, #c084fc, var(--pvpe-acc) 55%, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pvpe .head .sub { color: var(--pvpe-dim); font-size: 12.5px }

/* ---------- Contrôles ---------- */
.pvpe button {
  font: inherit; cursor: pointer; border-radius: 9px;
  border: 1px solid var(--pvpe-line);
  background: var(--pvpe-card); color: var(--pvpe-ink);
  padding: 7px 14px;
  transition: border-color .15s, background .15s, transform .06s;
}
.pvpe button:hover { border-color: var(--pvpe-acc) }
.pvpe button:active { transform: translateY(1px) }
.pvpe button.on, .pvpe button.primary {
  border-color: var(--pvpe-acc);
  background: var(--pvpe-acc-soft);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, .35);
}
.pvpe button.primary:hover { background: rgba(168, 85, 247, .24) }
.pvpe input, .pvpe select {
  font: inherit; background: var(--pvpe-card);
  border: 1px solid var(--pvpe-line); color: var(--pvpe-ink);
  border-radius: 9px; padding: 7px 10px; width: 100%;
  transition: border-color .15s;
}
.pvpe input:focus, .pvpe select:focus {
  outline: none; border-color: var(--pvpe-acc);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .18);
}
.pvpe input::placeholder { color: var(--pvpe-dim) }

/* ---------- Navigation principale (sticky) ---------- */
.pvpe .nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 0 -6px 18px; padding: 10px 6px 12px;
  background: linear-gradient(var(--pvpe-bg) 82%, transparent);
  border-bottom: 1px solid var(--pvpe-line);
}
body:not(.pvpe-standalone) .pvpe .nav { background: linear-gradient(var(--pvpe-bg2) 82%, transparent) }
body.admin-bar .pvpe .nav { top: 32px }
@media (max-width: 782px) { body.admin-bar .pvpe .nav { top: 46px } }

/* ---------- Puces slots ---------- */
.pvpe .slots { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px }
.pvpe .slots button { padding: 5px 11px; font-size: 12.5px }

/* ---------- Layout ---------- */
.pvpe .cols {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(320px, 7fr);
  gap: 18px; align-items: start;
}
@media (max-width: 860px) { .pvpe .cols { grid-template-columns: 1fr } }
.pvpe .card {
  background: var(--pvpe-card);
  border: 1px solid var(--pvpe-line);
  border-radius: 14px; padding: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px rgba(0, 0, 0, .25);
}

/* ---------- Bibliothèque d'enchants ---------- */
.pvpe .lib {
  max-height: min(64vh, 640px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: var(--pvpe-line) transparent;
}
.pvpe .lib::-webkit-scrollbar { width: 8px }
.pvpe .lib::-webkit-scrollbar-track { background: transparent }
.pvpe .lib::-webkit-scrollbar-thumb { background: var(--pvpe-line); border-radius: 8px }
.pvpe .lib::-webkit-scrollbar-thumb:hover { background: #3a3648 }

.pvpe .e {
  border: 1px solid var(--pvpe-line); border-radius: 10px;
  padding: 9px 11px; cursor: pointer; background: var(--pvpe-card2);
  transition: border-color .12s, background .12s;
}
.pvpe .e:hover { border-color: var(--pvpe-acc) }
.pvpe .e.sel { border-color: var(--pvpe-acc); background: var(--pvpe-acc-soft) }
.pvpe .e .top { display: flex; gap: 8px; align-items: baseline }
.pvpe .e .nm { font-weight: 700 }
.pvpe .e .lv { color: var(--pvpe-dim); font-size: 11.5px }
.pvpe .e .fx { color: var(--pvpe-dim); font-size: 12px; margin-top: 3px }

.pvpe .g {
  font-size: 10px; font-weight: 800; border-radius: 5px;
  padding: 1px 6px; margin-left: auto; flex-shrink: 0;
}
.pvpe .gS { color: #15071f; background: var(--pvpe-s) }
.pvpe .gA { color: #1f1206; background: var(--pvpe-a) }
.pvpe .gC { color: #fff;    background: var(--pvpe-c) }

.pvpe .filters { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap }
.pvpe .filters input { flex: 1; min-width: 150px }
.pvpe .count { color: var(--pvpe-dim); font-size: 11.5px; margin: -4px 0 8px }

/* ---------- Build courant ---------- */
.pvpe .pick {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--pvpe-line); padding: 6px 0; font-size: 13px;
}
.pvpe .pick:last-child { border-bottom: 0 }
.pvpe .pick .x { color: var(--pvpe-dim); cursor: pointer; background: none; border: 0; padding: 0 4px }
.pvpe .pick .x:hover { color: var(--pvpe-c) }
.pvpe .cap { color: var(--pvpe-dim); font-size: 12px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap }
.pvpe .vbtns { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px }
.pvpe .vbtns button { font-size: 12px; padding: 5px 10px }
.pvpe .ideal li { margin: 3px 0 }
.pvpe .ideal ol { margin: 6px 0 12px; padding-left: 22px }
.pvpe .hunt { color: var(--pvpe-s); font-size: 11px }

/* ---------- Compositions ---------- */
.pvpe .comps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
.pvpe .comp h4 { margin: 0 0 6px; font-size: 13.5px }
.pvpe .comp .tag { font-size: 11px; color: var(--pvpe-dim); font-weight: 400 }
.pvpe .comp ol { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px }
.pvpe .comp li { margin: 2px 0 }

/* ---------- Builds communauté ---------- */
.pvpe .bcard { display: flex; flex-direction: column; gap: 6px }
.pvpe .bhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap }
.pvpe .bhead .who { color: var(--pvpe-dim); font-size: 11.5px; margin-left: auto }
.pvpe .blist { font-size: 12.5px; color: var(--pvpe-dim) }
.pvpe .like { display: inline-flex; gap: 6px; align-items: center; font-size: 13px }
.pvpe .like.liked { border-color: var(--pvpe-ok); color: var(--pvpe-ok); cursor: default }
.pvpe .form .row { display: grid; grid-template-columns: 1fr 90px 34px; gap: 6px; margin-bottom: 6px }
.pvpe .form .meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px }
@media (max-width: 600px) { .pvpe .form .meta { grid-template-columns: 1fr } }
.pvpe .msg { padding: 9px 12px; border-radius: 9px; font-size: 13px; margin: 8px 0 }
.pvpe .msg.ok  { border: 1px solid var(--pvpe-ok); color: var(--pvpe-ok);  background: rgba(57, 217, 138, .07) }
.pvpe .msg.err { border: 1px solid var(--pvpe-c);  color: var(--pvpe-c);   background: rgba(255, 81, 104, .07) }
.pvpe .hp { position: absolute; left: -9999px }

/* ---------- Verdict évaluateur ---------- */
.pvpe .verdict {
  text-align: center; border-radius: 12px; padding: 16px;
  margin-bottom: 12px; border: 1px solid var(--pvpe-line);
}
.pvpe .verdict.G { border-color: var(--pvpe-ok); color: var(--pvpe-ok); background: rgba(57, 217, 138, .06) }
.pvpe .verdict.R { border-color: var(--pvpe-a);  color: var(--pvpe-a);  background: rgba(255, 157, 47, .06) }
.pvpe .verdict.J { border-color: var(--pvpe-c);  color: var(--pvpe-c);  background: rgba(255, 81, 104, .06) }
.pvpe .bd {
  display: flex; justify-content: space-between; font-size: 12.5px;
  padding: 4px 0; border-bottom: 1px solid var(--pvpe-line);
}
.pvpe .bd:last-child { border-bottom: 0 }

/* ---------- Méta ---------- */
.pvpe .meta-page { max-width: 780px }
.pvpe .meta-page ul { padding-left: 20px }
.pvpe .meta-page li { margin: 6px 0 }
.pvpe .k { color: var(--pvpe-acc); font-weight: 700 }

/* ---------- Boutons du planificateur (vider / proposer) ---------- */
.pvpe .planbtns { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 4px }
.pvpe .planbtns button { font-size: 12px }
.pvpe button.danger { color: var(--pvpe-c) }
.pvpe button.danger:hover { border-color: var(--pvpe-c); background: rgba(255, 81, 104, .08) }

/* ---------- Modal de proposition de build ---------- */
.pvpe-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(8, 7, 12, .72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; margin: 0 !important; border-radius: 0 !important;
}
.pvpe-overlay .pvpe-modal {
  max-width: 580px; width: 100%; max-height: 85vh; overflow: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.pvpe .recap { margin: 2px 0 14px }
.pvpe .recap-stats {
  font-size: 13px; color: var(--pvpe-ink);
  border: 1px solid var(--pvpe-line); border-radius: 9px;
  background: var(--pvpe-acc-soft); padding: 8px 12px; margin-bottom: 10px;
}
.pvpe .recap-stats b { color: var(--pvpe-acc) }
.pvpe .recap-item {
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--pvpe-line); padding: 7px 0; font-size: 12.5px;
}
.pvpe .recap-item:last-child { border-bottom: 0 }
.pvpe .recap-item .tag { font-size: 11px; color: var(--pvpe-dim); font-weight: 400 }
.pvpe .recap-item > span { color: var(--pvpe-dim) }
.pvpe .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px }

/* ---------- Builds multi-items dans la liste commu ---------- */
.pvpe .blist .bslot { color: var(--pvpe-ink); font-weight: 700 }

/* ---------- Badge build complet ---------- */
.pvpe .bhead .tag.full {
  color: var(--pvpe-ok); border: 1px solid rgba(57, 217, 138, .4);
  border-radius: 999px; padding: 1px 8px; background: rgba(57, 217, 138, .07);
}

/* ---------- Indicateur build complet dans la modal ---------- */
.pvpe .recap-full {
  font-size: 12.5px; color: var(--pvpe-dim);
  border: 1px dashed var(--pvpe-line); border-radius: 9px;
  padding: 8px 12px; margin-bottom: 10px;
}
.pvpe .recap-full.ok {
  color: var(--pvpe-ok); border: 1px solid rgba(57, 217, 138, .4);
  background: rgba(57, 217, 138, .06);
}