/* ===================================================
   KURO ARCANA — Passe de combat « First Blood » (passe.js)
   Classes préfixées .ps-* ; variables :root de style.css.
   =================================================== */

.ps-contenu {
  max-width: 1200px;
  margin: 0 auto;
}

/* ---------- RÉSUMÉ ---------- */
.ps-resume {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border: 2px solid var(--or-pale);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--noir-teinte-rouge), rgba(75, 0, 130, 0.5));
  box-shadow: 0 0 20px var(--glow-violet);
}

.ps-niveau {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
  font-family: 'Cinzel', serif;
  color: var(--or-dore);
}

.ps-niveau-label { font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--or-pale); }
.ps-niveau-valeur { font-size: 2.6rem; font-weight: 700; line-height: 1; text-shadow: 0 0 14px var(--glow-or); }
.ps-niveau-max { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }

.ps-xp-ligne {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #fff;
}

.ps-jauge {
  height: 14px;
  overflow: hidden;
  border: 1px solid var(--or-pale);
  border-radius: 999px;
  background: rgba(10, 5, 5, 0.85);
}

.ps-jauge-remplie {
  height: 100%;
  background: linear-gradient(90deg, var(--rouge-crimson), var(--or-dore));
  box-shadow: 0 0 10px var(--glow-or);
  transition: width var(--transition-smooth);
}

.ps-xp-jour {
  margin: 8px 0 0;
  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

.ps-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-bouton {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--or-pale);
  border-radius: 10px;
  background: rgba(10, 5, 5, 0.8);
  color: var(--or-lumineux);
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.ps-bouton:focus-visible,
.ps-recuperer:focus-visible,
.ps-choix-item:focus-visible,
.ps-piste:focus-visible {
  outline: 2px solid var(--or-dore);
  outline-offset: 2px;
}

.ps-bouton:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.ps-bouton-premium {
  border-color: var(--or-dore);
  background: linear-gradient(135deg, var(--rouge-sang), var(--violet-profond));
  color: var(--or-dore);
  box-shadow: 0 0 12px var(--glow-or);
}

.ps-bouton-tout {
  border-color: var(--rouge-crimson);
  background: linear-gradient(135deg, rgba(220, 20, 60, 0.35), rgba(107, 0, 128, 0.25));
}

.ps-bouton-secondaire {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.ps-premium-actif {
  padding: 10px 16px;
  border: 1px solid var(--or-dore);
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-align: center;
  color: var(--or-dore);
}

.ps-message {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--or-dore);
  border-radius: 6px;
  background: rgba(26, 10, 10, 0.75);
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #fff;
}

.ps-message[hidden] { display: none; }

/* ---------- PISTE ---------- */
.ps-piste-cadre {
  position: relative;
  display: flex;
  gap: 8px;
  margin: 22px 0;
}

.ps-piste-legende {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--or-pale);
}

.ps-piste-legende span {
  display: flex;
  align-items: center;
  height: 120px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.ps-piste {
  display: flex;
  gap: 8px;
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  padding: 4px 4px 14px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--or-pale) transparent;
}

.ps-colonne {
  display: flex;
  flex: 0 0 120px;
  flex-direction: column;
  gap: 8px;
  scroll-snap-align: center;
}

.ps-colonne-num {
  padding: 4px 0;
  border-bottom: 2px solid rgba(218, 165, 32, 0.25);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
}

.ps-colonne-atteinte .ps-colonne-num { border-color: var(--or-pale); color: var(--or-pale); }
.ps-colonne-actuelle .ps-colonne-num { border-color: var(--or-dore); color: var(--or-dore); text-shadow: 0 0 8px var(--glow-or); }

.ps-case {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 120px;
  padding: 8px 6px;
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: 10px;
  background: rgba(26, 10, 10, 0.8);
  text-align: center;
}

.ps-case-premium {
  border-color: rgba(153, 50, 204, 0.5);
  background: linear-gradient(180deg, rgba(75, 0, 130, 0.45), rgba(26, 10, 10, 0.85));
}

.ps-case-icone { font-size: 1.5rem; }

.ps-case-texte {
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  line-height: 1.2;
  color: #fff;
}

.ps-case-etat {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--or-dore);
}

.ps-case-avenir { opacity: 0.55; }
.ps-case-verrouillee { opacity: 0.6; filter: grayscale(0.5); }
.ps-case-recuperee { opacity: 0.5; }
.ps-case-vide { opacity: 0.25; }

/* Récompenses récupérables : elles brillent */
.ps-case-recuperable {
  border-color: var(--or-dore);
  box-shadow: 0 0 14px var(--glow-or);
  animation: ps-brille 1.8s ease-in-out infinite;
}

@keyframes ps-brille {
  0%, 100% { box-shadow: 0 0 8px var(--glow-or); }
  50% { box-shadow: 0 0 20px var(--glow-or), 0 0 28px var(--glow-rouge); }
}

.ps-recuperer {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--or-dore);
  border-radius: 8px;
  background: var(--rouge-sang);
  color: var(--or-dore);
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.ps-colonne-bonus .ps-case { height: 248px; }

/* ---------- INVENTAIRE ---------- */
.ps-titre {
  margin: 10px 0 12px;
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: var(--or-dore);
}

.ps-inventaire-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ps-inventaire-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ps-anime, var(--or-pale));
  border-radius: 12px;
  background: rgba(26, 10, 10, 0.8);
  box-shadow: 0 0 10px var(--ps-anime, var(--glow-or));
}

.ps-inventaire-icone { font-size: 1.6rem; }
.ps-inventaire-nom { flex: 1; font-family: 'Poppins', sans-serif; color: #fff; }

.ps-vide,
.ps-note,
.ps-boutique-texte {
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 255, 255, 0.75);
}

.ps-note { font-size: 0.8rem; }

.ps-boutique {
  max-width: 620px;
  margin: 30px auto;
  padding: 24px 20px;
  border: 1px solid var(--or-pale);
  border-radius: 14px;
  background: rgba(26, 10, 10, 0.7);
  text-align: center;
}

/* Couleurs par univers (inventaire et ouverture des packs spéciaux ; global : or) */
.ps-anime-naruto { --ps-anime: #FF8F00; }
.ps-anime-jujutsu-kaisen { --ps-anime: #5C6BC0; }
.ps-anime-demon-slayer { --ps-anime: #26A69A; }
.ps-anime-one-piece { --ps-anime: #E53935; }
.ps-anime-global { --ps-anime: #FFD700; }

#booster-modal[data-booster-theme] {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ps-anime) 35%, transparent), rgba(0, 0, 0, 0.92) 70%);
}

#booster-modal[data-booster-theme="naruto"] { --ps-anime: #FF8F00; }
#booster-modal[data-booster-theme="jujutsu-kaisen"] { --ps-anime: #5C6BC0; }
#booster-modal[data-booster-theme="demon-slayer"] { --ps-anime: #26A69A; }
#booster-modal[data-booster-theme="one-piece"] { --ps-anime: #E53935; }
#booster-modal[data-booster-theme="global"] { --ps-anime: #FFD700; }

#booster-modal[data-booster-theme="naruto"] .booster-anim-paquet { filter: hue-rotate(60deg) saturate(1.3) drop-shadow(0 0 18px #FF8F00); }
#booster-modal[data-booster-theme="jujutsu-kaisen"] .booster-anim-paquet { filter: hue-rotate(220deg) drop-shadow(0 0 18px #5C6BC0); }
#booster-modal[data-booster-theme="demon-slayer"] .booster-anim-paquet { filter: hue-rotate(150deg) drop-shadow(0 0 18px #26A69A); }
#booster-modal[data-booster-theme="one-piece"] .booster-anim-paquet { filter: hue-rotate(20deg) saturate(1.4) drop-shadow(0 0 18px #E53935); }

#booster-modal[data-booster-theme] .booster-annonce-compteur {
  border-color: var(--ps-anime);
  box-shadow: 0 0 14px var(--ps-anime);
}

/* ---------- FENÊTRES ---------- */
.ps-calque {
  position: fixed;
  inset: 0;
  z-index: 9400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.8);
}

.ps-calque[hidden] { display: none; }

.ps-calque-boite {
  width: min(640px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 24px 20px 20px;
  border: 2px solid var(--or-pale);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--noir-fonce), var(--noir-teinte-rouge) 55%, rgba(75, 0, 130, 0.5));
  box-shadow: 0 0 30px var(--glow-violet);
  text-align: center;
}

.ps-calque-titre {
  margin: 0 0 8px;
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  color: var(--or-dore);
}

.ps-calque-texte {
  margin: 0 0 16px;
  font-family: 'Raleway', sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.ps-calque-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.ps-choix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.ps-choix-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 4px;
  border: 1px solid var(--or-pale);
  border-radius: 10px;
  background: rgba(26, 10, 10, 0.8);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
}

.ps-choix-item:hover:not(:disabled) {
  border-color: var(--or-dore);
  box-shadow: 0 0 14px var(--glow-or);
}

.ps-choix-item:disabled { cursor: not-allowed; opacity: 0.45; }
.ps-choix-item small { color: rgba(255, 255, 255, 0.6); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .ps-resume {
    grid-template-columns: auto 1fr;
    padding: 16px;
  }
  .ps-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .ps-resume { gap: 14px; }
  .ps-niveau-valeur { font-size: 2.1rem; }
  .ps-colonne { flex-basis: 96px; }
  .ps-case { height: 108px; }
  .ps-piste-legende span { height: 108px; }
  .ps-colonne-bonus .ps-case { height: 224px; }
  .ps-choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-calque-actions .ps-bouton { flex: 1 1 100%; }
}

/* ---------- MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion: reduce) {
  .ps-case-recuperable { animation: none; }
  .ps-jauge-remplie { transition: none; }
  .ps-piste { scroll-snap-type: none; }
}