/* reSCORE — Comparateur de duels F1 ([f1_duel]) */
.rs-duel{
  --line:#e7ebf0; --ink:#0f172a; --ink-soft:#475569; --muted:#94a3b8;
  --accent:#003082; --green:#16a34a; --red:#e2574c;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);
}
.rs-duel *{ box-sizing:border-box }

/* ── Header sombre (homogène avec le bandeau des autres pages F1) ──
   recherche + 3 premiers + chips des pilotes sélectionnés. */
.rs-duel__toolbar{
  /* isolation:isolate enferme le menu déroulant (rs-duel__menu) dans CE contexte
     d'empilement : aucun z-index interne (toolrow, chips) ne peut donc dépasser
     les cartes, qui sont un bloc frère postérieur. On élève tout le toolbar à
     z-index:11 — au-dessus du contenu des cartes ET des flèches de nav (z-index:10)
     — pour que les suggestions de recherche passent devant. */
  position:relative; isolation:isolate; z-index:11;
  border-radius:var(--rs-radius, 18px);
  padding:clamp(15px,2.6vw,22px) clamp(16px,3vw,26px);
  color:#fff; box-shadow:0 14px 36px -18px rgba(0,0,0,.5);
  background:
    radial-gradient(90% 140% at 12% -15%, rgba(225,6,0,.52) 0, transparent 55%),
    linear-gradient(120deg, var(--rs-ink,#141210) 0%, var(--rs-ink-2,#1d1a17) 70%, #14100f 100%);
  display:flex; flex-direction:column; gap:14px; margin-bottom:14px;
}
.rs-duel__toolbar::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 11px);
  -webkit-mask-image:radial-gradient(80% 95% at 18% 30%, #000 18%, transparent 100%);
          mask-image:radial-gradient(80% 95% at 18% 30%, #000 18%, transparent 100%);
}
/* z-index:1 : passe au-dessus de la texture .rs-duel__toolbar::after (z-index:0),
   à l'intérieur du contexte d'empilement du toolbar. */
.rs-duel__toolrow{ position:relative; z-index:2; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rs-duel__picker{ position:relative; flex:1 1 220px; max-width:360px; }
.rs-duel__field{ display:block; }
.rs-duel__search{
  width:100%; height:44px; padding:0 14px; border-radius:11px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10); color:#fff;
  font-size:14px; outline:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.rs-duel__search:focus{ border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.16); box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.rs-duel__search::placeholder{ color:rgba(255,255,255,.55); }

.rs-duel__menu{
  position:absolute; top:50px; left:0; right:0; z-index:30; max-height:320px; overflow-y:auto;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  box-shadow:0 12px 32px -12px rgba(15,23,42,.28); padding:6px;
}
.rs-duel__opt{
  display:flex; align-items:center; gap:10px; width:100%; padding:7px 9px; border-radius:8px;
  cursor:pointer; border:0; background:none; text-align:left; font-size:13.5px; color:var(--ink);
}
.rs-duel__opt:hover, .rs-duel__opt.is-active{ background:#f1f5f9; }
.rs-duel__opt img, .rs-duel__opt .ph{
  width:30px; height:40px; object-fit:cover; object-position:top center;
  border-radius:5px; background:linear-gradient(180deg,#e9edf2,#d6dde6); flex:0 0 auto;
}
.rs-duel__opt .nm{ font-weight:600; line-height:1.1; }
.rs-duel__opt .yr{ color:var(--muted); font-size:11px; }
.rs-duel__menu--empty{ padding:14px; color:var(--muted); font-size:13px; text-align:center; }

/* bouton Reset (= défaut, tous les pilotes classés) dans le header sombre */
.rs-duel__reset{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  height:44px; padding:0 14px; border-radius:11px; font-size:13px; font-weight:700;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:rgba(255,255,255,.85);
  transition:background .15s, color .15s, border-color .15s;
}
.rs-duel__reset:hover{ background:rgba(255,255,255,.16); }
.rs-duel__reset.is-active{ background:rgba(255,255,255,.92); color:#11151a; border-color:transparent; }
.rs-duel__reset.is-active:hover{ background:#fff; }
/* l'attribut [hidden] doit l'emporter sur display:inline-flex (Reset masqué hors sélection) */
.rs-duel__reset[hidden]{ display:none; }

/* Sélecteur de période « De [année] à [année] » (à droite du toolrow) */
.rs-duel__period{ flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:8px; }
.rs-duel__period-lbl{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:rgba(255,255,255,.7); }
.rs-duel__period select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  height:38px; padding:0 28px 0 11px; border-radius:10px;
  border:1px solid rgba(255,255,255,.2); background-color:rgba(255,255,255,.08); color:#fff;
  font:inherit; font-size:13px; font-weight:700; line-height:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:12px;
  transition:border-color .15s, background-color .15s;
}
.rs-duel__period select:hover{ background-color:rgba(255,255,255,.14); }
.rs-duel__period select:focus{ outline:none; border-color:rgba(255,255,255,.45); }
.rs-duel__period option{ color:#11151a; } /* liste native sur fond clair */
@media (max-width:680px){
  .rs-duel__period{ margin-left:0; }
}

/* options de vue (au-dessus des cartes) : onglets métriques · légende */
.rs-duel__viewopts{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 2px 10px; }
.rs-duel__metrics{ display:inline-flex; gap:4px; background:#eef1f5; border:1px solid var(--line); border-radius:10px; padding:3px; }
.rs-duel__metric{
  border:0; background:none; cursor:pointer; padding:7px 13px; border-radius:8px;
  font-size:12.5px; font-weight:700; color:var(--muted); transition:background .15s, color .15s;
}
.rs-duel__metric.is-active{ background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(15,23,42,.12); }

/* légende : caption discrète */
.rs-duel__legend{ display:flex; gap:16px; font-size:11.5px; color:var(--ink-soft); }
.rs-duel__legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px; vertical-align:-1px; }
.rs-duel__legend .g{ background:var(--green) } .rs-duel__legend .r{ background:var(--red) }
.rs-duel__legend .y{ background:var(--draw,#f2bd3a) }

/* ── Bouton « 3 premiers » + chips (sur header sombre) ── */
.rs-duel__top3{
  flex:0 0 auto; position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px;
  cursor:pointer; height:44px; padding:0 16px; border-radius:11px; font-size:13px; font-weight:700;
  border:1px solid var(--rs-f1,#e10600); background:var(--rs-f1,#e10600); color:#fff;
  transition:opacity .15s, background .15s, border-color .15s;
}
.rs-duel__top3::before{ content:"★"; font-size:11px; }
/* grisé (translucide) quand les 3 premiers ne sont pas tous présents → cliquable = reset */
.rs-duel__top3:not(.is-active){ background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.2); }
.rs-duel__top3:hover{ opacity:.9; }

.rs-duel__chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; }
.rs-duel__chips:empty{ display:none; }
.rs-duel__chip{
  display:inline-flex; align-items:center; gap:7px; padding:5px 9px 5px 6px; border-radius:999px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.2); color:#fff;
  font-size:12.5px; font-weight:600;
}
.rs-duel__chip img, .rs-duel__chip .ph{ width:22px; height:22px; border-radius:50%; object-fit:cover; object-position:top center; background:rgba(255,255,255,.2); }
.rs-duel__chip button{
  border:0; background:none; cursor:pointer; color:rgba(255,255,255,.6); font-size:15px; line-height:1;
  padding:0 2px; border-radius:50%;
}
.rs-duel__chip button:hover{ color:#fff; }

/* zone d'actions sous les cartes (Partager la sélection) */
.rs-duel__actions{ display:flex; justify-content:center; margin:14px 0 4px; }
.rs-duel__actions:has(.rs-duel__sharesel:disabled){ opacity:1; }

/* ── Viewport + scroll horizontal ── */
.rs-duel__viewport{ position:relative; }
.rs-duel__track{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding:4px 2px 12px; scrollbar-width:thin;
}
.rs-duel__track::-webkit-scrollbar{ height:8px; }
.rs-duel__track::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }
.rs-duel__card{
  /* Largeur volontairement < pleine largeur mobile : laisse dépasser un bord
     de la carte suivante pour signaler qu'on peut défiler vers la droite. */
  flex:0 0 auto; width:min(480px, 82vw); scroll-snap-align:start; position:relative;
}
/* bouton « Partager cette carte » : coin BAS-droit de la carte (en haut il
   recouvrait l'en-tête de tri de la colonne de droite). */
.rs-duel__share{
  position:absolute; bottom:12px; right:12px; z-index:4;
  width:34px; height:34px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -4px rgba(15,23,42,.35); transition:transform .12s, background .12s;
}
.rs-duel__share:hover{ background:#fff; transform:scale(1.08); }
.rs-duel__share:disabled{ opacity:.5; cursor:default; }

/* bouton « Partager la sélection » (barre) */
.rs-duel__sharesel{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:0 14px; height:44px; border-radius:11px; font-size:13.5px; font-weight:700;
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  transition:opacity .15s;
}
.rs-duel__sharesel:hover{ opacity:.9; }
.rs-duel__sharesel:disabled{ background:#eef2f7; color:var(--muted); border-color:var(--line); cursor:default; }
.rs-duel__card .rs-tmm{ height:100%; }
.rs-duel__card--loading{
  min-height:280px; border:1px solid var(--line); border-radius:18px; background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13px;
}
.rs-duel__spinner{
  width:26px; height:26px; border:3px solid #e2e8f0; border-top-color:var(--accent);
  border-radius:50%; animation:rs-duel-spin .8s linear infinite; margin-right:10px;
}
@keyframes rs-duel-spin{ to{ transform:rotate(360deg) } }

/* ── Flèches ── */
.rs-duel__arrow{
  position:absolute; top:calc(50% - 8px); transform:translateY(-50%); z-index:10;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -6px rgba(15,23,42,.35); transition:transform .12s, background .12s;
}
.rs-duel__arrow:hover{ background:#f8fafc; transform:translateY(-50%) scale(1.06); }
.rs-duel__arrow--prev{ left:-6px; } .rs-duel__arrow--next{ right:-6px; }
.rs-duel__arrow[hidden]{ display:none; }

/* ── États ── */
.rs-duel__empty{
  border:1px dashed var(--line); border-radius:14px; padding:34px 20px; text-align:center;
  color:var(--ink-soft); font-size:14px; background:#fafbfc;
}
.rs-duel__foot{ margin-top:12px; font-size:11px; color:var(--muted); }

/* Gutter latéral en mobile sur les blocs pleine largeur du duel — aligné sur le
   reste des pages (#fbs-app / .rs-tournament = 14px). Sans ça, ces blocs collent
   aux bords car .rs-front passe pleine largeur sous 760px. */
@media (max-width:768px){
  .rs-duel__viewopts,
  .rs-duel__viewport,
  .rs-duel__actions,
  .rs-duel__foot{ padding-inline:14px; }
}

@media (max-width:680px){
  .rs-duel__picker{ max-width:none; flex:1 1 100%; }
  .rs-duel__spacer{ display:none; }
  .rs-duel__sharesel{ flex:1 1 100%; justify-content:center; }
  .rs-duel__legend{ justify-content:flex-start; }
  .rs-duel__arrow{ display:none !important; } /* swipe seul sur mobile */
}
@media (prefers-reduced-motion:reduce){
  .rs-duel__track{ scroll-behavior:auto; }
  .rs-duel__spinner{ animation-duration:1.6s; }
}