/* ==========================================================================
   Le Juste Prix — la manche du jour
   --------------------------------------------------------------------------
   Rappel valable dans tout ce fichier : chaque classe à laquelle on donne un
   `display:` doit aussi avoir sa règle `[hidden] { display: none }`. Une règle
   d'auteur bat la règle `[hidden]` du navigateur, et l'élément resterait visible —
   ici ça montrerait les trois écrans du jeu en même temps.
   ========================================================================== */

.jp-hero-note {
  margin-top: 10px; font-size: 12.5px; line-height: 1.7;
  color: var(--text-dim, #a7adb5);
}
.jp-hero-note b { color: var(--text, #e8eaed); }

/* ---------- l'accueil ---------- */
.jp-intro { margin-bottom: 24px; }
.jp-intro[hidden] { display: none; }
.jp-intro-card {
  position: relative; padding: 26px 24px; border-radius: 16px; text-align: center;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255,196,0,.10), transparent 58%),
    #101318;
  border: 1px solid var(--border, #262b31);
}
.jp-intro-badge {
  display: inline-block; margin-bottom: 12px; padding: 5px 14px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  background: rgba(255,196,0,.14); border: 1px solid rgba(255,196,0,.35); color: #ffc400;
}
.jp-intro-card h2 { margin: 0 0 10px; font-size: 22px; }
.jp-intro-card > p {
  max-width: 620px; margin: 0 auto 18px; font-size: 13.5px; line-height: 1.7;
  color: var(--text-dim, #a7adb5);
}
.jp-intro-steps {
  list-style: none; max-width: 460px; margin: 0 auto 20px; padding: 0;
  display: grid; gap: 8px; text-align: left;
}
.jp-intro-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px; border-radius: 10px; font-size: 13px;
  background: #1a1e24; border: 1px solid var(--border, #262b31);
}
.jp-intro-steps span {
  flex: 0 0 40px; font-size: 11.5px; font-weight: 800; color: #ffc400;
}
.jp-intro-steps i {
  margin-left: auto; font-style: normal; font-size: 11.5px;
  color: var(--text-dim, #a7adb5);
}
.jp-start-btn { padding: 13px 34px; font-size: 15px; }

/* ---------- la manche ---------- */
/* La manche est posée sur un vrai panneau. Sans lui, le fond du site — une image de
   skins très chargée — passait à travers les cartes et le nom des armes devenait
   difficile à lire. C'est une question de jouabilité, pas de décoration : on demande au
   joueur de comparer deux armes, il faut qu'il les voie. */
.jp-round {
  margin-bottom: 24px; padding: 18px 20px; border-radius: 16px;
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.jp-round[hidden] { display: none; }
.jp-round-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 9px;
}
.jp-progress {
  position: relative; flex: 1 1 200px; height: 22px; border-radius: 999px; overflow: hidden;
  background: #0d1014; border: 1px solid var(--border, #262b31);
}
.jp-progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #ff8a00, #ffc400);
  transition: width .35s ease;
}
.jp-progress-label {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.jp-score-chip {
  flex: 0 0 auto; padding: 5px 13px; border-radius: 999px; font-size: 12px;
  background: #1a1e24; border: 1px solid var(--border, #262b31);
}
.jp-score-chip b { color: #ffc400; }

.jp-timer {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 2px;
  font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 52px; justify-content: flex-end;
}
.jp-timer i { font-style: normal; font-size: 11px; color: var(--text-dim, #a7adb5); }
.jp-timer.is-urgent { color: #ff5f5f; animation: jp-pulse .9s ease-in-out infinite; }
@keyframes jp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .jp-timer.is-urgent { animation: none; } }

.jp-timer-bar {
  height: 4px; margin-bottom: 20px; border-radius: 999px; overflow: hidden;
  background: #0d1014;
}
.jp-timer-bar-fill {
  height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ffc400, #ff5f5f);
  transition: width 1s linear;
}

.jp-consigne {
  margin: 0 0 18px; font-size: 18px; text-align: center;
}

/* ---------- les cartes d'armes ---------- */
.jp-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; border-radius: 14px; cursor: pointer; color: inherit;
  font: inherit; text-align: center;
  background: linear-gradient(180deg, #1b1f25, #12151a);
  border: 1px solid color-mix(in srgb, var(--rarity-color, #8847ff) 45%, transparent);
  box-shadow: inset 0 -34px 38px -32px var(--rarity-color, #8847ff);
  transition: transform .14s ease, border-color .14s ease;
}
.jp-card:hover:not(:disabled):not(.jp-card-static) {
  transform: translateY(-3px);
  border-color: var(--rarity-color, #8847ff);
}
.jp-card:disabled { cursor: default; opacity: .75; }
.jp-card.jp-card-static { cursor: default; }
.jp-card .item-thumb { width: 100%; max-width: 190px; height: 110px; }
.jp-card-name { font-size: 13.5px; font-weight: 700; line-height: 1.4; }

.jp-duel {
  display: grid; align-items: stretch; gap: 12px;
  grid-template-columns: 1fr auto 1fr;
}
.jp-vs {
  align-self: center; font-size: 15px; font-weight: 900; letter-spacing: 1px;
  color: var(--text-dim, #a7adb5);
}
.jp-single { display: grid; place-items: center; margin-bottom: 18px; }
.jp-single .jp-card { width: min(340px, 100%); }

.jp-options { display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.jp-option {
  padding: 13px 16px; border-radius: 11px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: inherit; text-align: left;
  background: #1a1e24; border: 1px solid var(--border, #262b31);
  transition: border-color .14s ease, background .14s ease;
}
.jp-option:hover:not(:disabled) { border-color: #ffc400; background: #23282f; }
.jp-option:disabled { cursor: default; opacity: .7; }

.jp-order { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.jp-order-card { position: relative; }
.jp-order-badge {
  position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  background: #ffc400; color: #14171b; opacity: 0; transform: scale(.6);
  transition: opacity .18s ease, transform .18s ease;
}
.jp-order-card.is-picked { border-color: #ffc400; }
.jp-order-card.is-picked .jp-order-badge { opacity: 1; transform: scale(1); }
.jp-order-hint {
  margin-top: 13px; text-align: center; font-size: 12.5px;
  color: var(--text-dim, #a7adb5);
}
.jp-order-reset {
  display: block; margin: 10px auto 0; padding: 6px 14px; border-radius: 999px;
  font: inherit; font-size: 12px; cursor: pointer; color: var(--text-dim, #a7adb5);
  background: transparent; border: 1px solid var(--border, #262b31);
}
.jp-order-reset[hidden] { display: none; }

.jp-estimate { max-width: 460px; margin: 0 auto; text-align: center; }
.jp-estimate-hint { font-size: 13px; margin-bottom: 14px; color: var(--text-dim, #a7adb5); }
.jp-estimate-hint b { color: var(--text, #e8eaed); }
.jp-estimate-row { display: flex; gap: 9px; }
.jp-estimate-input {
  flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 11px;
  background: #0d1014; border: 1px solid var(--border, #262b31);
  color: inherit; font-size: 17px; font-weight: 700; text-align: center;
}
.jp-estimate-input:focus { outline: none; border-color: #ffc400; }
.jp-estimate-note { margin-top: 9px; font-size: 11.5px; color: var(--text-dim, #a7adb5); }

/* ---------- la correction ---------- */
.jp-verdict {
  margin-top: 20px; padding: 16px; border-radius: 14px; text-align: center;
  background: #101318; border: 1px solid var(--border, #262b31);
}
.jp-verdict[hidden] { display: none; }
.jp-verdict.is-good { border-color: rgba(60,200,120,.45); background: linear-gradient(180deg, rgba(60,200,120,.10), rgba(0,0,0,0)), #101318; }
.jp-verdict.is-bad  { border-color: rgba(235,75,75,.42);  background: linear-gradient(180deg, rgba(235,75,75,.10), rgba(0,0,0,0)), #101318; }
.jp-verdict-head { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.jp-verdict-icon { margin-right: 6px; }
.jp-verdict.is-good .jp-verdict-icon { color: #4ade80; }
.jp-verdict.is-bad  .jp-verdict-icon { color: #ff5f5f; }
.jp-verdict-detail { max-width: 460px; margin: 0 auto 14px; display: grid; gap: 5px; }
.jp-answer-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-radius: 9px; font-size: 12.5px; text-align: left;
  background: #1a1e24;
}
.jp-answer-line.is-right { background: linear-gradient(90deg, rgba(255,196,0,.18), rgba(255,196,0,.06)), #1a1e24; }
.jp-answer-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jp-answer-line b { flex: 0 0 auto; color: #ffc400; }
.jp-answer-range { font-size: 11.5px; color: var(--text-dim, #a7adb5); }

.jp-error {
  margin-top: 12px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: rgba(235,75,75,.12); border: 1px solid rgba(235,75,75,.35); color: #ff9b9b;
}
.jp-error[hidden] { display: none; }

/* ---------- le bilan ---------- */
.jp-recap { margin-bottom: 24px; }
.jp-recap[hidden] { display: none; }
.jp-recap-card {
  padding: 26px 22px; border-radius: 16px; text-align: center;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255,196,0,.13), transparent 58%),
    #101318;
  border: 1px solid rgba(255,196,0,.32);
}
.jp-recap-score { font-size: 46px; font-weight: 900; line-height: 1; }
.jp-recap-score b { color: #ffc400; }
.jp-recap-score span { font-size: 22px; color: var(--text-dim, #a7adb5); }
.jp-recap-title { margin: 8px 0 18px; font-size: 16px; }
.jp-recap-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 18px; }
.jp-dot {
  width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800;
  background: #1a1e24; border: 1px solid var(--border, #262b31);
}
.jp-dot.is-ok   { background: rgba(60,200,120,.18); border-color: rgba(60,200,120,.5); color: #7ef0aa; }
.jp-dot.is-ko   { background: rgba(235,75,75,.15);  border-color: rgba(235,75,75,.42); color: #ff9b9b; }
.jp-dot.is-late { background: rgba(255,138,0,.15);  border-color: rgba(255,138,0,.45); color: #ffc06a; }
.jp-recap-gains { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 16px; }
.jp-gain {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 999px; font-size: 13px;
  background: #1a1e24; border: 1px solid var(--border, #262b31);
}
.jp-gain b { color: #ffc400; }
.jp-gain-rare { border-color: rgba(255,196,0,.45); }
.jp-gain-time { color: var(--text-dim, #a7adb5); font-size: 12px; }
.jp-recap-next { font-size: 12.5px; color: var(--text-dim, #a7adb5); }

/* ---------- le classement ---------- */
.jp-board { margin-bottom: 24px; }
.jp-week-tag {
  margin-left: 8px; font-size: 11px; font-weight: 600;
  color: var(--text-dim, #a7adb5);
}
.jp-board-list { display: grid; gap: 8px; }
.jp-board-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 13px; border-radius: 12px;
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.jp-board-row.is-me { border-color: rgba(255,196,0,.45); background: rgba(255,196,0,.06); }
.jp-board-rank {
  flex: 0 0 26px; text-align: center; font-size: 14px; font-weight: 800;
  color: var(--text-dim, #a7adb5);
}
/* Le visage : la silhouette dessous, la photo par-dessus, même case pour les deux —
   rien ne bouge quand une photo ne charge pas. */
.jp-board-face { flex: 0 0 32px; width: 32px; height: 32px; }
.jp-board-face .jp-face-inner {
  position: relative; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(140deg, #2c323a, #191d22);
  border: 1px solid var(--border, #262b31); color: var(--text-dim, #a7adb5);
}
.jp-board-face .jp-face-inner svg { width: 17px; height: 17px; }
.jp-board-face .jp-face-inner img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.jp-board-main { flex: 1 1 auto; min-width: 0; }
.jp-board-name {
  font-size: 13.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jp-board-name i { font-weight: 400; font-size: 11.5px; color: var(--text-dim, #a7adb5); }
.jp-board-sub { margin-top: 2px; font-size: 11px; color: var(--text-dim, #a7adb5); }
.jp-board-points { flex: 0 0 auto; text-align: right; }
.jp-board-points b { font-size: 16px; color: #ffc400; }
.jp-board-points span { display: block; font-size: 10px; color: var(--text-dim, #a7adb5); }
.jp-board-note { margin-top: 11px; font-size: 12px; line-height: 1.6; color: var(--text-dim, #a7adb5); }
.jp-board-note b { color: var(--text, #e8eaed); }

.jp-empty {
  padding: 18px; border-radius: 12px; text-align: center; font-size: 13px;
  color: var(--text-dim, #a7adb5);
  background: var(--panel, #14171b); border: 1px dashed var(--border, #262b31);
}

/* ---------- le palmarès ---------- */
.jp-palmares { margin-bottom: 24px; }
.jp-palmares-list { display: grid; gap: 7px; }
.jp-palmares-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: 10px; font-size: 12.5px;
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.jp-palmares-week { font-weight: 800; flex: 0 0 auto; }
.jp-palmares-name { flex: 1 1 auto; }
.jp-palmares-score { color: var(--text-dim, #a7adb5); }
.jp-palmares-prize { display: inline-flex; align-items: center; gap: 4px; color: #ffc400; }

/* ---------- les règles ---------- */
.jp-rules-list {
  margin: 0; padding: 15px 15px 15px 32px; border-radius: 14px;
  display: grid; gap: 8px; font-size: 12.5px; line-height: 1.6;
  color: var(--text-dim, #a7adb5);
  background: var(--panel, #14171b); border: 1px solid var(--border, #262b31);
}
.jp-rules-list b { color: var(--text, #e8eaed); }

/* ---------- téléphone ---------- */
@media (max-width: 620px) {
  .jp-consigne { font-size: 16px; }
  /* Le duel passe en colonne : deux cartes côte à côte sur 390 px rendaient les
     visuels illisibles. */
  .jp-duel { grid-template-columns: 1fr; }
  .jp-vs { justify-self: center; padding: 2px 0; }
  .jp-card .item-thumb { height: 92px; }
  .jp-order { grid-template-columns: 1fr 1fr; }
  .jp-order .jp-card-name { font-size: 12px; }
  .jp-order .item-thumb { height: 70px; }
  .jp-recap-score { font-size: 38px; }
  .jp-round-head { gap: 9px; }
  .jp-progress { flex: 1 1 120px; }
}