/* styles/theme/pinboard/modal-end.css
 * ══════════════════════════════════════════════════════════════════
 * Skin pinboard des écrans de fin :
 *   - .daily-end   : fin de Daily Challenge (ui/daily.js)
 *   - .arcade-end  : fin de run arcade     (ui/arcade.js)
 *
 * Adopte la même DA que la modal multi (modal.css) : papier crème,
 * plaque RATP bleue pour le titre, typo Barlow Semi Condensed, tampon
 * encré pour le verdict, lignes carnet bleues pour les listes, boutons
 * industriels .dip-btn pour les CTA.
 *
 * Scoping : `body:has(.view.pinboard-theme.active)` — les overlays
 * sont attachés à body (pas dans une view), mais on les skinne UNIQUEMENT
 * quand la view active est en mode pinboard.
 *
 * Max 300 L.
 * ══════════════════════════════════════════════════════════════════ */

body:has(.view.pinboard-theme.active){
  --me-paper:       #fbf7ec;
  --me-paper-edge:  rgba(60,55,45,.2);
  --me-ink:         #1a1b1c;
  --me-tile-blue:   #003f7a;
  --me-tile-grout:  rgba(245,241,230,.38);
  --me-stamp-green: #1f5f2a;
  --me-stamp-red:   #8a2020;
  --me-line:        rgba(40,70,150,.22);
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active){
  --me-paper:       #26292e;
  --me-paper-edge:  rgba(255,255,255,.12);
  --me-ink:         #e9eaee;
  --me-stamp-green: #3fb55a;
  --me-stamp-red:   #d9533f;
  --me-line:        rgba(110,140,210,.24);
}

/* ============================================================
   BACKDROP COMMUN
   ============================================================ */
body:has(.view.pinboard-theme.active) .daily-end,
body:has(.view.pinboard-theme.active) .arcade-end{
  background:rgba(10,12,16,.58);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ============================================================
   DAILY-END — modal papier
   ============================================================ */
body:has(.view.pinboard-theme.active) .daily-modal{
  background:var(--me-paper);
  border:1.5px solid var(--me-paper-edge);
  border-radius:3px;
  padding:24px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 24px 48px -16px rgba(0,0,0,.5),
    0 4px 8px rgba(0,0,0,.2);
  color:var(--me-ink);
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
}

/* Header : eyebrow date + titre plaque RATP */
body:has(.view.pinboard-theme.active) .daily-head{
  align-items:flex-start;
  border-bottom:1px dashed var(--me-paper-edge);
  padding-bottom:14px;
}
body:has(.view.pinboard-theme.active) .daily-badge{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:2.5px;
  color:var(--me-tile-blue);
  opacity:.9;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .daily-badge{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .daily-title{
  --tile-w: 28px; --tile-h: 14px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:800;
  font-size:22px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#f8f6f0;
  padding:8px 16px;
  display:inline-block;
  background-color:var(--me-tile-blue);
  background-image:
    repeating-linear-gradient(0deg,
      var(--me-tile-grout) 0 1px,
      rgba(255,255,255,.08) 1px 2px,
      transparent 2px var(--tile-h)),
    repeating-linear-gradient(90deg,
      var(--me-tile-grout) 0 1px,
      transparent 1px var(--tile-w));
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.35),
    inset 0 -2px 6px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.08),
    0 3px 6px rgba(0,0,0,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  margin-top:8px;
  align-self:flex-start;
}

/* Stats : tuiles papier */
body:has(.view.pinboard-theme.active) .daily-stat{
  background:color-mix(in srgb, var(--me-paper) 85%, rgba(0,0,0,.06));
  border:1px dashed var(--me-paper-edge);
  border-radius:2px;
  padding:12px 14px;
}
body:has(.view.pinboard-theme.active) .daily-stat-lead{
  border-color:var(--me-tile-blue);
  background:color-mix(in srgb, var(--me-tile-blue) 8%, var(--me-paper));
}
body:has(.view.pinboard-theme.active) .daily-stat-k{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue);
  opacity:.85;
  font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .daily-stat-k{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .daily-stat-v{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-ink);
  font-weight:800;
}
body:has(.view.pinboard-theme.active) .daily-stat-v.ok{
  color:var(--me-stamp-green);
}
body:has(.view.pinboard-theme.active) .daily-stat-v-time{
  /* Dot-matrix ambre — cohérence avec le chrono in-game */
  color:#d96b2b;
  text-shadow:none;
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
}

/* Bloc submit : champ input style plaque papier + bouton dip-btn vert */
body:has(.view.pinboard-theme.active) .daily-submit-wrap{
  background:transparent;
  border:1px dashed var(--me-paper-edge);
  border-radius:2px;
  padding:12px 14px;
}
body:has(.view.pinboard-theme.active) .daily-pseudo-label{
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:2px;
  color:var(--me-tile-blue);
  opacity:.9;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .daily-pseudo-label{
  color:#6ea8ff;
}
body:has(.view.pinboard-theme.active) .daily-pseudo-row input{
  background:#fff;
  border:1px solid var(--me-paper-edge);
  color:var(--me-ink);
  border-radius:2px;
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06);
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .daily-pseudo-row input{
  background:#1a1d22;
  color:#e9eaee;
}
body:has(.view.pinboard-theme.active) .daily-pseudo-row input:focus{
  border-color:var(--me-tile-blue);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.06), 0 0 0 2px rgba(0,63,122,.18);
}

/* Rang info : ruban style tampon */
body:has(.view.pinboard-theme.active) .daily-rank-info{
  background:color-mix(in srgb, var(--me-stamp-green) 10%, var(--me-paper));
  border:1.5px solid var(--me-stamp-green);
  color:var(--me-stamp-green);
  border-radius:2px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:600;
  letter-spacing:.04em;
}
body:has(.view.pinboard-theme.active) .daily-rank-info b{
  font-weight:800;
  font-size:1.2em;
}

/* Leaderboard — carnet RATP */
body:has(.view.pinboard-theme.active) .daily-lb-title{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue);
  opacity:.9;
  letter-spacing:2.5px;
  font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .daily-lb-title{
  color:#6ea8ff;
}
body:has(.view.pinboard-theme.active) .daily-lb{
  background:var(--me-paper);
  border:1px solid var(--me-paper-edge);
  border-radius:2px;
}
body:has(.view.pinboard-theme.active) .daily-lb-header{
  background:color-mix(in srgb, var(--me-paper) 80%, rgba(0,0,0,.08));
  border-bottom:1px solid var(--me-line);
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue);
  opacity:.85;
  font-weight:700;
  letter-spacing:2px;
}
body:has(.view.pinboard-theme.active) .daily-lb-row{
  border-top:1px dashed var(--me-line);
  color:var(--me-ink);
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
}
body:has(.view.pinboard-theme.active) .daily-lb-row.me{
  background:color-mix(in srgb, #eab308 18%, var(--me-paper));
  font-weight:800;
  color:var(--me-ink);
}
body:has(.view.pinboard-theme.active) .daily-lb-row.first .dlb-rank{
  color:#c18b27; font-weight:900;
}
body:has(.view.pinboard-theme.active) .dlb-delta.ok{ color:var(--me-stamp-green); }

/* Actions (Quitter) — dip-btn ghost bleu */
body:has(.view.pinboard-theme.active) .daily-actions{ justify-content:center; }
body:has(.view.pinboard-theme.active) .daily-btn{
  background:transparent;
  border:1.5px solid var(--me-paper-edge);
  color:var(--me-ink);
  border-radius:2px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  padding:10px 22px;
}
body:has(.view.pinboard-theme.active) .daily-btn:hover:not(:disabled){
  background:rgba(0,0,0,.04);
  border-color:var(--me-tile-blue);
  color:var(--me-tile-blue);
}
body:has(.view.pinboard-theme.active) .daily-btn-primary{
  background:var(--me-tile-blue);
  color:#f8f6f0;
  border-color:var(--me-tile-blue);
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.3),
    inset 0 -2px 4px rgba(0,0,0,.25),
    0 3px 6px rgba(0,0,0,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
body:has(.view.pinboard-theme.active) .daily-btn-primary:hover:not(:disabled){
  filter:brightness(1.08);
  color:#fff;
}

body:has(.view.pinboard-theme.active) .daily-err{
  background:rgba(194,62,62,.08);
  border:1px solid #c23e3e;
  color:#c23e3e;
  border-radius:2px;
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
}

/* ============================================================
   ARCADE-END — même skin
   ============================================================ */
body:has(.view.pinboard-theme.active) .arcade-end-card{
  background:var(--me-paper);
  border:1.5px solid var(--me-paper-edge);
  border-radius:3px;
  color:var(--me-ink);
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 24px 48px -16px rgba(0,0,0,.5),
    0 4px 8px rgba(0,0,0,.2);
}

/* Badge GAME OVER / RUN TERMINÉ = tampon encré rond */
body:has(.view.pinboard-theme.active) .arcade-end-badge{
  align-self:flex-start;
  background:transparent;
  color:var(--me-stamp-red);
  border:2px solid var(--me-stamp-red);
  border-radius:2px;
  padding:4px 14px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:800;
  letter-spacing:3px;
  font-size:11px;
  transform:rotate(-2deg);
}
body:has(.view.pinboard-theme.active) .arcade-end-badge[data-variant="ok"]{
  color:var(--me-stamp-green);
  border-color:var(--me-stamp-green);
  background:transparent;
}

body:has(.view.pinboard-theme.active) .arcade-end-title{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-ink);
  font-weight:800;
  letter-spacing:.01em;
}

/* Stats arcade — mêmes tuiles papier que daily */
body:has(.view.pinboard-theme.active) .arcade-stat{
  background:color-mix(in srgb, var(--me-paper) 85%, rgba(0,0,0,.06));
  border:1px dashed var(--me-paper-edge);
  border-radius:2px;
}
body:has(.view.pinboard-theme.active) .arcade-stat-k{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue);
  opacity:.85;
  font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .arcade-stat-k{
  color:#6ea8ff;
}
body:has(.view.pinboard-theme.active) .arcade-stat-v{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-ink);
  font-weight:800;
  letter-spacing:normal;
}
body:has(.view.pinboard-theme.active) .arcade-stat.ok .arcade-stat-v{
  color:var(--me-stamp-green);
}

/* Percentile ring skinné */
body:has(.view.pinboard-theme.active) .arcade-end-percentile{
  background:color-mix(in srgb, var(--me-tile-blue) 6%, var(--me-paper));
  border:1.5px solid var(--me-tile-blue);
  border-radius:2px;
}
body:has(.view.pinboard-theme.active) .perc-ring{
  background:conic-gradient(
    var(--me-tile-blue) calc(var(--perc) * 1%),
    color-mix(in srgb, var(--me-paper) 70%, rgba(0,0,0,.2)) 0
  );
}
body:has(.view.pinboard-theme.active) .perc-ring::before{
  background:var(--me-paper);
}
body:has(.view.pinboard-theme.active) .perc-n{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-ink);
}
body:has(.view.pinboard-theme.active) .perc-pct{ color:var(--me-ink); opacity:.6; }
body:has(.view.pinboard-theme.active) .perc-label{ color:var(--me-ink); }
body:has(.view.pinboard-theme.active) .perc-label b{ color:var(--me-tile-blue); }
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .perc-label b{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .perc-sub{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-ink); opacity:.55;
}

/* Liste manches — style carnet avec lignes bleues */
body:has(.view.pinboard-theme.active) .arcade-end-rounds{
  border-top:1px solid var(--me-paper-edge);
}
body:has(.view.pinboard-theme.active) .rounds-title{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue);
  opacity:.9;
  letter-spacing:2.5px;
  font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .rounds-title{
  color:#6ea8ff;
}
body:has(.view.pinboard-theme.active) .round-row{
  background:transparent;
  border:1px dashed var(--me-paper-edge);
  border-radius:2px;
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  color:var(--me-ink);
}
body:has(.view.pinboard-theme.active) .rr-idx{
  color:var(--me-tile-blue);
  opacity:.9;
  font-weight:700;
}
body:has(.view.pinboard-theme.active) .rr-delta.ok{ color:var(--me-stamp-green); font-weight:800; }
body:has(.view.pinboard-theme.active) .rr-delta.ko{ color:var(--me-stamp-red); }
body:has(.view.pinboard-theme.active) .rr-time{ color:var(--me-ink); opacity:.75; }
body:has(.view.pinboard-theme.active) .rr-errors{ color:var(--me-ink); opacity:.6; }

/* Actions arcade — bouton Rejouer style plaque bleue, Quitter style ghost */
body:has(.view.pinboard-theme.active) .arcade-end-actions .btn{
  background:transparent;
  border:1.5px solid var(--me-paper-edge);
  color:var(--me-ink);
  border-radius:2px;
  font-family:'Barlow Semi Condensed',sans-serif;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
  padding:10px 22px;
}
body:has(.view.pinboard-theme.active) .arcade-end-actions .btn:hover{
  background:rgba(0,0,0,.04);
  border-color:var(--me-tile-blue);
  color:var(--me-tile-blue);
}
body:has(.view.pinboard-theme.active) .arcade-end-actions .btn.primary{
  background:var(--me-tile-blue);
  color:#f8f6f0;
  border-color:var(--me-tile-blue);
  box-shadow:
    inset 0 0 0 2px #f8f6f0,
    inset 0 0 0 3px rgba(0,0,0,.3),
    inset 0 -2px 4px rgba(0,0,0,.25),
    0 3px 6px rgba(0,0,0,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}
body:has(.view.pinboard-theme.active) .arcade-end-actions .btn.primary:hover{
  filter:brightness(1.08); color:#fff;
}

/* ============================================================
   ÉLÉMENTS COMPÉTITIFS (refonte fiches) — skin pinboard.
   Sans ça, hero score / leaderboard / rang gardent le teal off-brand
   du thème dark de base (arcade.css/daily.css).
   ============================================================ */

/* --- ARCADE : hero score (chiffre LED ambre, pas de teal) --- */
body:has(.view.pinboard-theme.active) .ae-hero-num{
  color:#d96b2b;                               /* ambre CRT cohérent in-game */
  font-family:'Share Tech Mono','JetBrains Mono',monospace;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .ae-hero-num{
  color:#e8a23a; text-shadow:0 0 14px rgba(232,162,58,.3);
}
body:has(.view.pinboard-theme.active) .ae-hero-unit{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue); opacity:.75;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .ae-hero-unit{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .ae-hero-rank{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-ink); opacity:.85; letter-spacing:.06em;
}
body:has(.view.pinboard-theme.active) .ae-hero-rank b{ color:var(--me-ink); }
body:has(.view.pinboard-theme.active) .ae-hero-rank-tot{ opacity:.6; }
body:has(.view.pinboard-theme.active) .ae-hero-perc{ color:var(--me-stamp-green); }

/* --- ARCADE : mini-leaderboard carnet RATP --- */
body:has(.view.pinboard-theme.active) .ae-lb-title{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue); opacity:.9;
  letter-spacing:2.5px; font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .ae-lb-title{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .ae-lb-head{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue); opacity:.8; font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .ae-lb-head{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .ae-lb-row{
  background:color-mix(in srgb, var(--me-paper) 85%, rgba(0,0,0,.05));
  border:1px dashed var(--me-paper-edge);
  border-radius:2px;
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  color:var(--me-ink);
}
body:has(.view.pinboard-theme.active) .ae-lb-row.first{
  border-color:color-mix(in srgb, #c18b27 60%, var(--me-paper-edge));
}
body:has(.view.pinboard-theme.active) .ae-lb-row.first .ae-lb-rank{
  color:#c18b27; font-weight:900;
}
body:has(.view.pinboard-theme.active) .ae-lb-row.me{
  background:color-mix(in srgb, #eab308 18%, var(--me-paper));
  border-color:#c18b27;
  font-weight:700; color:var(--me-ink);
}
body:has(.view.pinboard-theme.active) .ae-lb-rank{ color:var(--me-ink); opacity:.6; }
body:has(.view.pinboard-theme.active) .ae-lb-pseudo{ color:var(--me-ink); }
body:has(.view.pinboard-theme.active) .ae-lb-rounds,
body:has(.view.pinboard-theme.active) .ae-lb-time{ color:var(--me-ink); opacity:.7; }
body:has(.view.pinboard-theme.active) .ae-lb-score{ color:var(--me-ink); font-weight:800; }
body:has(.view.pinboard-theme.active) .ae-lb-score.ok{ color:var(--me-stamp-green); }

/* --- DAILY : rang en hero (ruban tampon vert, comme l'ancien rank-info) --- */
body:has(.view.pinboard-theme.active) .daily-rank-hero{
  background:color-mix(in srgb, var(--me-stamp-green) 8%, var(--me-paper));
  border:1.5px solid var(--me-stamp-green);
  border-radius:2px;
  font-family:'Barlow Semi Condensed',sans-serif;
}
body:has(.view.pinboard-theme.active) .drh-rank-k{
  color:var(--me-tile-blue); opacity:.85; font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .drh-rank-k{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .drh-rank-v{ color:var(--me-ink); font-weight:800; }
body:has(.view.pinboard-theme.active) .drh-rank-tot{ color:var(--me-ink); opacity:.55; }
body:has(.view.pinboard-theme.active) .drh-gap{ color:var(--me-ink); }
body:has(.view.pinboard-theme.active) .drh-gap b{ color:var(--me-stamp-green); }
body:has(.view.pinboard-theme.active) .drh-gap-lead{ color:var(--me-stamp-green); font-weight:800; }

/* --- DAILY : détail des trajets (carnet papier) --- */
body:has(.view.pinboard-theme.active) .daily-rounds{
  background:transparent;
  border:1px dashed var(--me-paper-edge);
  border-radius:2px;
}
body:has(.view.pinboard-theme.active) .daily-rounds-title{
  font-family:'Barlow Semi Condensed',sans-serif;
  color:var(--me-tile-blue); opacity:.9;
  letter-spacing:2.5px; font-weight:700;
}
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .daily-rounds-title{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .daily-round-row{
  font-family:'Barlow','Barlow Semi Condensed',sans-serif;
  color:var(--me-ink);
}
body:has(.view.pinboard-theme.active) .daily-round-row.perfect{ color:var(--me-stamp-green); }
body:has(.view.pinboard-theme.active) .drr-idx{ color:var(--me-tile-blue); opacity:.9; font-weight:700; }
html[data-theme="dark"] body:has(.view.pinboard-theme.active) .drr-idx{ color:#6ea8ff; }
body:has(.view.pinboard-theme.active) .drr-time{ color:var(--me-ink); opacity:.7; }