/* RUIN OF BLADES — le passe de combat, remis à neuf (18/10/2026).

   Chargée juste après css/interface.css : chaque règle commence par #passe (ou
   #passe-apercu) pour passer devant celles de style.css et d'interface.css sans
   les toucher. Dans la charte du jeu : panneaux violets, cartes crème et or,
   rubans rouges, contour presque noir (--da-contour).

     1. la tête : la saison, le palier et la barre d'XP dans un bandeau de nuit
     2. les deux voies : les étiquettes GRATUIT / PASSE, alignées sur leur rangée
     3. les paliers : la carte, la plaque du numéro, les deux récompenses
     4. l'aperçu en grand (js/passe.js → Passe.apercu)
     5. le téléphone couché */

/* les mesures d'un palier : les étiquettes des voies s'alignent dessus */
#passe .passe-voies {
  --rec-h: 112px;      /* la hauteur d'une récompense */
  --plaque-h: 30px;    /* la plaque du numéro */
  --pal-gap: 6px;      /* l'écart entre plaque et récompenses */
  --pal-pad: 8px;      /* le haut de la carte */
  --file-pad: 16px;    /* le haut de la file (la place de « Prochain ») */
  grid-template-columns: 34px 1fr; gap: 8px;
}

/* ═════════ 1. LA TÊTE ═════════ */
#passe .panneau.passe { width: min(1000px, 96vw); gap: 12px; }
#passe .passe-tete {
  align-items: center; gap: 10px 20px; padding: 10px 16px; border-radius: 14px;
  background: linear-gradient(180deg, var(--da-nuit1), var(--da-nuit3));
  border: 3px solid var(--da-contour);
  box-shadow: inset 0 0 0 1px var(--da-liseret), inset 0 2px 0 rgba(255,255,255,.08), 0 3px 0 rgba(0,0,0,.35);
}
#passe .passe-tete .sur { display: block; font-size: .78rem; letter-spacing: .16em; color: var(--da-o2); text-shadow: 0 1px 0 var(--da-contour); }
#passe .passe-grand { font-size: 1.45rem; line-height: 1; text-shadow: var(--da-texte-contour); }
#passe .passe-progres { flex: 1 1 260px; max-width: 470px; align-items: stretch; gap: 5px; }
#passe .passe-progres > b { align-self: flex-end; font-size: 1.15rem; color: #fff; text-shadow: var(--da-texte-contour); }
#passe .passe-progres > small { align-self: flex-end; text-align: right; color: #e6dcf6; font-weight: 700; }
#passe .passe-progres .profil-xp.grande {
  width: 100%; height: 16px; border-radius: 999px; overflow: hidden;
  background: #120826; border: 2px solid var(--da-contour); box-shadow: inset 0 2px 3px rgba(0,0,0,.6), 0 0 0 1px rgba(255,207,58,.3);
}
#passe #passe-barre {
  min-width: 6px; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0 30%, rgba(255,255,255,0) 32%), linear-gradient(90deg, var(--da-o3), var(--da-o2) 70%, var(--da-o1));
  box-shadow: 0 0 10px rgba(255,207,58,.55);
}

/* ═════════ 2. LES DEUX VOIES ═════════
   Les étiquettes avaient la hauteur de leur texte, posées au jugé : le mot touchait
   les bords. Chacune a maintenant la hauteur de sa rangée de récompenses, le mot
   centré dedans avec une marge ; l'espace des lettres est compensé de l'autre côté. */
#passe .voie-etiquettes {
  justify-content: flex-start; gap: var(--pal-gap);
  padding: calc(var(--file-pad) + 3px + var(--pal-pad) + var(--plaque-h) + var(--pal-gap)) 0 0;
}
#passe .voie-etiquettes span {
  box-sizing: border-box; height: var(--rec-h); width: 100%; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0; padding-inline-start: .16em;           /* (l'espace après la dernière lettre, rendu au début) */
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--gras); font-weight: 900; font-size: .95rem; line-height: 1; letter-spacing: .16em; white-space: nowrap;
  border-radius: 10px; border: 2px solid var(--da-contour); overflow: hidden;
}
#passe .voie-etiquettes .gratuit {
  background: linear-gradient(270deg, #fffaf0, var(--cr-creme) 60%, var(--cr-creme2)); color: var(--cr-encre);
  box-shadow: inset -2px 0 0 rgba(255,255,255,.8), 0 -3px 0 var(--da-contour);
}
#passe .voie-etiquettes .payant {
  background: linear-gradient(270deg, var(--da-o1), var(--da-o2) 55%, var(--da-o3)); color: #3a2300;
  box-shadow: inset -2px 0 0 rgba(255,255,255,.7), 0 -3px 0 var(--da-contour);
}

/* ═════════ 3. LES PALIERS ═════════ */
#passe .paliers {
  gap: 10px; padding: var(--file-pad) 6px 12px; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--da-o3) rgba(0,0,0,.3);
}
#passe .paliers::-webkit-scrollbar { height: 8px; }
#passe .paliers::-webkit-scrollbar-track { background: rgba(0,0,0,.3); border-radius: 999px; }
#passe .paliers::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--da-o2), var(--da-o3)); border-radius: 999px; }

/* la carte d'un palier : crème, contour sombre, une tranche dessous */
#passe .palier {
  flex: none; width: 122px; box-sizing: border-box; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--pal-gap);
  padding: var(--pal-pad) 7px 8px; border-radius: 14px;
  background: linear-gradient(180deg, #fdf5de, #e8d6a8);
  border: 3px solid var(--da-contour);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.8), inset 0 -4px 0 rgba(122,90,46,.35), 0 4px 0 var(--da-contour), 0 8px 14px rgba(0,0,0,.3);
}
#passe .palier.verrou { background: linear-gradient(180deg, #ece0c2, #d3c094); }
#passe .palier.gagne { background: linear-gradient(180deg, #fff6cc, #f2d27c); border-color: var(--da-contour); box-shadow: inset 0 2px 0 rgba(255,255,255,.85), inset 0 -4px 0 rgba(154,82,0,.35), 0 4px 0 var(--da-contour), 0 8px 14px rgba(0,0,0,.3); }
#passe .palier.prochain {
  border-color: var(--da-contour);
  box-shadow: 0 0 0 3px var(--da-o2), 0 0 22px rgba(255,207,58,.55), inset 0 2px 0 rgba(255,255,255,.8), 0 5px 0 var(--da-contour);
}
#passe .palier .etiquette {
  top: -12px; padding: 3px 10px; font-size: .7rem; letter-spacing: .14em; line-height: 1;
  background: var(--da-reflet), linear-gradient(180deg, var(--da-r1), var(--da-r2) 55%, var(--da-r3));
  border: 2px solid var(--da-contour); color: #fff; text-shadow: var(--da-texte-contour);
  box-shadow: 0 2px 0 var(--da-contour);
}

/* LA PLAQUE DU NUMÉRO (18/10/2026) : fini le rond vert au chiffre brun. Une plaque
   de gemme violette (pas encore atteint), d'or (atteint) ou rouge (le prochain),
   le chiffre blanc bordé de noir, comme les boutons du jeu. */
#passe .palier > b {
  box-sizing: border-box; min-width: 44px; width: auto; height: var(--plaque-h); padding: 0 10px 2px; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  border-radius: 9px; border: 2px solid var(--da-contour);
  background: var(--da-reflet), linear-gradient(180deg, var(--da-v1), var(--da-v2) 55%, var(--da-v3));
  box-shadow: inset 0 -3px 0 var(--da-v-tranche), 0 2px 0 var(--da-contour);
  font-family: var(--gras); font-weight: 900; font-size: 1.2rem; letter-spacing: .02em; line-height: 1;
  color: #fff; text-shadow: var(--da-texte-contour);
}
#passe .palier.gagne > b {
  background: var(--da-reflet), linear-gradient(180deg, var(--da-o1), var(--da-o2) 50%, var(--da-o3));
  box-shadow: inset 0 -3px 0 var(--da-o-tranche), 0 2px 0 var(--da-contour); color: #fff;
}
#passe .palier.prochain > b {
  background: var(--da-reflet), linear-gradient(180deg, var(--da-r1), var(--da-r2) 50%, var(--da-r3));
  box-shadow: inset 0 -3px 0 var(--da-r-tranche), 0 2px 0 var(--da-contour);
}
/* (le « Prochain » est déjà sur la plaque rouge : on le pose au-dessus de la carte) */
#passe .palier.prochain > .etiquette { top: -15px; }

/* une récompense : une case qu'on touche pour la voir en grand */
#passe .palier .recompense {
  box-sizing: border-box; height: var(--rec-h); width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  padding: 7px 4px 5px; border-radius: 10px; cursor: pointer; outline: none;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
#passe .palier .recompense.gratuit { background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.25)); border: 2px solid rgba(63,42,18,.4); box-shadow: inset 0 -2px 0 rgba(63,42,18,.15); }
#passe .palier .recompense.payant { background: linear-gradient(180deg, #ffe9a0, #f2bd4c); border: 2px solid #8a4a00; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(138,74,0,.35); }
@media (hover: hover) { #passe .palier .recompense:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 4px 0 rgba(13,7,24,.35); } }
#passe .palier .recompense:active { transform: translateY(1px); }
#passe .palier .recompense:focus-visible { box-shadow: 0 0 0 3px var(--da-o2), 0 0 0 5px var(--da-contour); }

/* la vitrine de la récompense : la couleur de sa rareté (comme les cartes de la boutique) */
#passe .palier .recompense canvas {
  width: 60px; height: 60px; flex: none; image-rendering: pixelated; border-radius: 9px;
  border: 2px solid var(--da-contour); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
  background: radial-gradient(ellipse at 50% 38%, #f2e4bf, #b39a66 75%);
}
#passe .palier .recompense.rare canvas { background: radial-gradient(ellipse at 50% 38%, #c4e2ff, #3a7ed8 80%); }
#passe .palier .recompense.epique canvas { background: radial-gradient(ellipse at 50% 38%, #ecc6ff, #8a3ad8 80%); }
#passe .palier .recompense.legendaire canvas { background: radial-gradient(ellipse at 50% 38%, #fff6c0, #f0a020 80%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 0 10px rgba(255,190,40,.7); }
/* pas encore atteint : les couleurs restent (on doit avoir envie), juste un peu éteintes */
#passe .palier .recompense.verrou canvas, #passe .palier.verrou .recompense.verrou canvas { filter: saturate(.7) brightness(.9); }
#passe .palier .recompense span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  max-width: 100%; text-align: center; font-family: var(--corps); font-weight: 800; font-size: .7rem; line-height: 1.18;
  color: var(--cr-encre);
}
#passe .palier .recompense.verrou span { color: #5a4226; }

/* les pastilles du coin : ✓ (à toi), cadenas (pas encore), étoile (réservé au passe) */
#passe .palier .recompense.gagne::after,
#passe .palier .recompense .verrou-icone {
  content: ""; position: absolute; top: -7px; right: -7px; z-index: 2; box-sizing: border-box;
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--da-contour);
  box-shadow: 0 2px 0 var(--da-contour); font-size: 0; opacity: 1;
}
#passe .palier .recompense.gagne::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4 6.6 11.4 12.6 4.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat,
              linear-gradient(180deg, var(--da-g1), var(--da-g2) 50%, var(--da-g3));
}
#passe .palier .recompense .verrou-icone.cadenas {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 7V5.3a2.8 2.8 0 0 1 5.6 0V7' fill='none' stroke='%23e8e0f4' stroke-width='1.8'/%3E%3Crect x='3.6' y='6.8' width='8.8' height='6.6' rx='1.4' fill='%23e8e0f4'/%3E%3Crect x='7.3' y='8.8' width='1.4' height='2.6' rx='.7' fill='%234a2690'/%3E%3C/svg%3E") center / 13px no-repeat,
              linear-gradient(180deg, var(--da-v2), var(--da-v3));
}
#passe .palier .recompense .verrou-icone.etoile {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m8 1.8 1.8 3.9 4.2.4-3.2 2.9.9 4.2L8 11.1l-3.7 2.1.9-4.2L2 6.1l4.2-.4Z' fill='%23fff8c0' stroke='%236a3e00' stroke-width='1'/%3E%3C/svg%3E") center / 14px no-repeat,
              linear-gradient(180deg, var(--da-r1), var(--da-r2) 55%, var(--da-r3));
}

/* ═════════ 4. L'APERÇU EN GRAND ═════════ */
#passe-apercu { z-index: 26; background: rgba(8, 4, 20, .62); }
#passe-apercu .panneau.apercu-passe { width: min(640px, 92vw); gap: 12px; align-items: stretch; text-align: left; }
#passe-apercu .apercu-corps { display: flex; align-items: center; gap: 20px; }
#passe-apercu .apercu-vitrine {
  --v1: #f6e8c4; --v2: #a88c58;
  position: relative; flex: none; width: 220px; height: 220px; box-sizing: border-box; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding-top: 18px;
  border-radius: 16px; border: 3px solid var(--da-contour);
  background: radial-gradient(ellipse at 50% 45%, var(--v1), var(--v2) 78%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -6px 0 rgba(0,0,0,.18), 0 5px 0 var(--da-contour), 0 10px 22px rgba(0,0,0,.4);
}
#passe-apercu .rare .apercu-vitrine { --v1: #cfe8ff; --v2: #2d6fc8; }
#passe-apercu .epique .apercu-vitrine { --v1: #f0d0ff; --v2: #7a2cc8; }
#passe-apercu .legendaire .apercu-vitrine { --v1: #fff8cc; --v2: #e08a10; }
#passe-apercu .legendaire .apercu-vitrine::before {
  content: ''; position: absolute; inset: -40%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255,255,255,.5) 25%, transparent 30% 70%, rgba(255,255,255,.4) 75%, transparent 80%);
  animation: cr-tourne 6s linear infinite;
}
#passe-apercu .apercu-vitrine canvas { position: relative; width: 180px; height: 180px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
#passe-apercu .verrou .apercu-vitrine canvas { filter: saturate(.8) drop-shadow(0 4px 0 rgba(0,0,0,.25)); }
/* le ruban de la rareté, en haut de la vitrine */
#passe-apercu .apercu-ruban {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1; padding: 4px 0 3px; text-align: center;
  font-family: var(--gras); font-weight: 900; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
  color: #fff; text-shadow: var(--da-texte-contour); background: rgba(13,7,24,.45); border-bottom: 2px solid var(--da-contour);
}
#passe-apercu .apercu-infos { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#passe-apercu #apercu-type { font-family: var(--gras); font-weight: 900; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--da-o2); text-shadow: 0 1px 0 var(--da-contour); }
#passe-apercu #apercu-nom { font-family: var(--gras); font-weight: 900; font-size: 2rem; line-height: 1; letter-spacing: .03em; color: #fff; text-shadow: var(--da-texte-contour); overflow-wrap: anywhere; }
#passe-apercu #apercu-desc { margin: 2px 0 0; font-family: var(--corps); font-size: .86rem; line-height: 1.4; color: #efe6d4; }
#passe-apercu .apercu-puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
#passe-apercu .apercu-puces span {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px 4px; border-radius: 999px; line-height: 1;
  font-family: var(--gras); font-weight: 900; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  border: 2px solid var(--da-contour); box-shadow: 0 2px 0 var(--da-contour);
}
#passe-apercu .apercu-voie.gratuit { background: linear-gradient(180deg, #fffaf0, var(--cr-creme2)); color: var(--cr-encre); }
#passe-apercu .apercu-voie.payant { background: linear-gradient(180deg, var(--da-o1), var(--da-o2) 55%, var(--da-o3)); color: #3a2300; }
#passe-apercu .apercu-etat.gagne { background: linear-gradient(180deg, var(--da-g1), var(--da-g2) 55%, var(--da-g3)); color: #fff; text-shadow: var(--da-texte-contour); }
#passe-apercu .apercu-etat.verrou { background: linear-gradient(180deg, var(--da-v1), var(--da-v2) 55%, var(--da-v3)); color: #fff; text-shadow: var(--da-texte-contour); }
#passe-apercu .apercu-etat.passe { background: linear-gradient(180deg, var(--da-r1), var(--da-r2) 55%, var(--da-r3)); color: #fff; text-shadow: var(--da-texte-contour); }
#passe-apercu .apercu-aide { font-family: var(--corps); font-weight: 700; font-size: .8rem; line-height: 1.35; color: #d8cdee; }
#passe-apercu .apercu-aide:empty { display: none; }
#passe-apercu #btn-apercu-fermer { margin-top: 6px; padding: 10px 26px; position: static; box-shadow: 0 5px 0 #3a4250, inset 0 2px 0 rgba(255,255,255,.7); }

/* ═════════ 5. LE TÉLÉPHONE COUCHÉ ═════════ */
@media (max-height: 600px) {
  /* tout doit tenir sans défiler : une ligne de nom par récompense (le nom entier est dans l'aperçu) */
  #passe .passe-voies { --rec-h: 70px; --plaque-h: 24px; --pal-gap: 4px; --pal-pad: 6px; --file-pad: 13px; grid-template-columns: 28px 1fr; gap: 6px; }
  #passe .panneau.passe { gap: 7px; }
  #passe .paliers { padding-bottom: 8px; }
  /* la tête sur deux lignes basses : le nom à gauche ; le palier, la barre et l'XP à droite */
  #passe .passe-tete { padding: 5px 12px; flex-wrap: nowrap; gap: 16px; }
  #passe .passe-grand { font-size: 1.1rem; }
  #passe .passe-tete .sur { font-size: .66rem; }
  #passe .passe-progres { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 3px; max-width: none; }
  #passe .passe-progres > b { font-size: .95rem; align-self: center; }
  #passe .passe-progres .profil-xp.grande { flex: 1 1 120px; width: auto; height: 12px; }
  #passe .passe-progres > small { flex-basis: 100%; line-height: 1.1; }
  #passe .voie-etiquettes span { font-size: .78rem; padding: 5px 0; padding-inline-start: .16em; border-radius: 8px; }
  #passe .palier { width: 100px; padding-left: 5px; padding-right: 5px; border-radius: 12px; }
  #passe .palier > b { min-width: 36px; font-size: 1rem; border-radius: 7px; }
  #passe .palier .recompense { padding: 5px 3px 3px; gap: 3px; }
  #passe .palier .recompense canvas { width: 42px; height: 42px; border-radius: 7px; }
  #passe .palier .recompense span { display: block; font-size: .62rem; white-space: nowrap; text-overflow: ellipsis; }
  /* le ruban du titre et le pied : moins hauts */
  #passe .panneau.passe { padding-top: 10px; padding-bottom: 8px; }
  #passe .panneau.passe > h2 { font-size: 1.1rem; padding-top: 5px; padding-bottom: 5px; }
  #passe .voile > .panneau > .passe-pied, #passe .panneau.passe > .passe-pied { padding: 4px 0; }
  #passe .passe-pied button.gros { padding-top: 6px; padding-bottom: 6px; font-size: .95rem; }
  #passe .palier .recompense.gagne::after, #passe .palier .recompense .verrou-icone { width: 19px; height: 19px; top: -6px; right: -6px; background-size: 11px, auto; }

  #passe-apercu .panneau.apercu-passe { width: min(600px, 92vw); gap: 8px; }
  #passe-apercu .apercu-corps { gap: 14px; }
  #passe-apercu .apercu-vitrine { width: 168px; height: 168px; padding-top: 14px; }
  #passe-apercu .apercu-vitrine canvas { width: 136px; height: 136px; }
  #passe-apercu .apercu-ruban { font-size: .72rem; }
  #passe-apercu #apercu-nom { font-size: 1.5rem; }
  #passe-apercu #apercu-desc { font-size: .76rem; line-height: 1.3; }
  #passe-apercu .apercu-puces span { font-size: .72rem; padding: 4px 9px 3px; }
  #passe-apercu .apercu-aide { font-size: .72rem; }
  #passe-apercu #btn-apercu-fermer { padding: 7px 20px; margin-top: 2px; }
}