/* ============================================================
   HISTORIQUE — écran dédié, scopé #sec-historique
   Liste de toutes les parties : couleur = mode, pastille = résultat
   ============================================================ */
#sec-historique.sec { padding: 0 0 16px; }
#sec-historique * { box-sizing: border-box; }
#sec-historique { font-family: var(--fb); }

/* Filtre par mode — chips brutalist défilables */
#sec-historique .hfilter { display: flex; gap: 8px; overflow-x: auto; padding: 12px 18px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#sec-historique .hfilter::-webkit-scrollbar { display: none; }
#sec-historique .hf { flex: 0 0 auto; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 7px 12px; font-family: var(--fd); font-size: 12px; letter-spacing: .5px; color: var(--ink); cursor: pointer; white-space: nowrap; }
#sec-historique .hf.on { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--magenta, #FF2E93); }   /* noir -> ombre COLORÉE (jamais noir sur noir) */
#sec-historique .hf:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }

/* ---- sous-header retour ---- */
#sec-historique .subhead { display:flex; align-items:center; gap:12px; padding:14px 16px 12px; border-bottom:3px solid var(--ink); margin-bottom:8px; }
#sec-historique .subhead .back { width:38px; height:38px; flex-shrink:0; border:3px solid var(--ink); background:#FFD600; box-shadow:3px 3px 0 var(--ink); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-size:20px; cursor:pointer; color:var(--ink); }
#sec-historique .subhead .back:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
#sec-historique .subhead .ttl { font-family:var(--fd); font-size:24px; letter-spacing:1.5px; }
#sec-historique .subhead .cnt { margin-left:auto; font-family:var(--fd); font-size:11px; letter-spacing:1px; border:2.5px solid var(--ink); background:#FF2E93; color:var(--paper); padding:3px 8px; box-shadow:2px 2px 0 var(--ink); }

/* ---- liste ---- */
#sec-historique .hlist { padding:4px 16px 0; display:flex; flex-direction:column; gap:11px; }
#sec-historique .hrow { position:relative; }
#sec-historique .hrow::before { content:''; position:absolute; top:4px; left:4px; right:-4px; bottom:-4px; background:var(--ink); }
#sec-historique .hrow .bd { position:relative; border:3px solid var(--ink); background:var(--paper); padding:11px 12px; display:flex; align-items:center; gap:12px; }
#sec-historique .hrow .em { width:46px; height:46px; flex-shrink:0; border:3px solid var(--ink); background:var(--paper); display:flex; align-items:center; justify-content:center; transform:rotate(-3deg); box-shadow:3px 3px 0 var(--ink); }
#sec-historique .hrow .em img { width:32px; height:32px; }
#sec-historique .hrow .mid { flex:1; min-width:0; }
#sec-historique .hrow .mid .mode { font-family:var(--fd); font-size:17px; letter-spacing:.5px; line-height:17px; }
#sec-historique .hrow .mid .when { font-family:var(--fb); font-weight:600; font-size:9.5px; letter-spacing:.5px; opacity:.7; margin-top:3px; }
#sec-historique .hrow .right { flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
#sec-historique .hrow .result { font-family:var(--fd); font-size:10px; letter-spacing:1px; padding:3px 8px; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); }
#sec-historique .hrow .result.win { background:#5BE885; color:var(--ink); }
#sec-historique .hrow .result.lose { background:#FF5252; color:var(--paper); }
#sec-historique .hrow .pts { font-family:var(--fb); font-size:13px; letter-spacing:.5px; display:flex; align-items:baseline; gap:3px; }
#sec-historique .hrow .pts .v { font-family:'Anton',sans-serif; font-weight:400; font-size:20px; }
#sec-historique .hrow .pts .u { font-weight:600; font-size:9px; opacity:.65; }

/* rangées blanches : la seule couleur est la pastille résultat (vert/rouge),
   l'emoji indique le mode joué. */

/* ---- état vide ---- */
#sec-historique .empty { margin:24px 16px; position:relative; transform:rotate(-1deg); }
#sec-historique .empty::before { content:''; position:absolute; top:7px; left:7px; right:-7px; bottom:-7px; background:var(--ink); }
#sec-historique .empty .bd { position:relative; border:4px solid var(--ink); background:#FFD600; padding:24px 18px; text-align:center; }
#sec-historique .empty .em { width:80px; height:80px; display:inline-block; } #sec-historique .empty .em img { width:100%; height:100%; }
#sec-historique .empty .title { font-family:var(--fd); font-size:26px; line-height:28px; letter-spacing:1px; margin-top:8px; }
#sec-historique .empty .sub { font-family:var(--fb); font-weight:700; font-size:11px; line-height:16px; margin-top:8px; color: color-mix(in srgb, var(--ink) 75%, transparent); }