/* ============================================================
   home.css — Accueil HOME v4 (porté de design-prototypes/p2-home).
   Tout est scopé sous .home-v4 pour ne pas toucher au reste de l'app.
   ============================================================ */
/* page d'accueil : fond themable (défaut = crème ; cf. thèmes Apparence) */
body.home-page { background: var(--app-bg); }

/* écrans portés des prototypes : ils gèrent leurs propres marges (18px) ->
   on retire le padding de .sec (sinon double espace gauche/droite) + largeur téléphone */
#sec-stats, #sec-defis, #sec-reglages { padding: 0; max-width: 430px; }
.home-v4 { font-family: var(--fb); color: var(--ink); display: flex; flex-direction: column; min-height: 100%; }
.home-v4 .body-scroll { flex: 1; }

/* sticker date */
.home-v4 .date-sticker-wrap { padding: 14px 4px 0; }
.home-v4 .date-sticker { display: inline-flex; transform: rotate(-3deg); position: relative; }
.home-v4 .date-sticker::before { content: ''; position: absolute; top: 4px; left: 4px; right: -4px; bottom: -4px; background: var(--ink); }
.home-v4 .date-sticker .body { position: relative; padding: 6px 12px; border: 3px solid var(--ink); background: #5BD8E5; display: flex; align-items: center; gap: 6px; }
.home-v4 .date-sticker .ic { width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-v4 .date-sticker .ic img { width: 100%; height: 100%; display: block; }
.home-v4 .date-sticker .label { font-family: var(--fd); font-size: 13px; color: var(--paper); letter-spacing: 2px; }
.home-v4 .date-sticker .dot { width: 6px; height: 6px; background: #5BE885; }
.home-v4 .date-sticker .weekend { font-weight: 700; color: var(--paper); font-size: 9px; letter-spacing: 1.5px; }

/* bienvenue */
.home-v4 .bienvenue { padding: 14px 4px 4px; display: flex; align-items: flex-start; gap: 10px; }
.home-v4 .bienvenue .meta { flex: 1; min-width: 0; }
.home-v4 .bienvenue .lbl { font-weight: 700; color: color-mix(in srgb, var(--ink) 50%, transparent); font-size: 11px; letter-spacing: 3px; }
.home-v4 .bienvenue .name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.home-v4 .bienvenue .name { font-family: var(--fd); font-size: 52px; line-height: 54px; letter-spacing: -1px; word-break: break-word; }
.home-v4 .winrate-card { margin-top: 6px; transform: rotate(8deg); position: relative; flex-shrink: 0; }
.home-v4 .winrate-card::before { content: ''; position: absolute; top: 4px; left: 4px; right: -4px; bottom: -4px; background: var(--ink); }
.home-v4 .winrate-card .body { position: relative; padding: 8px 12px; border: 3px solid var(--ink); background: var(--paper); text-align: center; }
.home-v4 .winrate-card .lbl { font-weight: 800; color: var(--ink); font-size: 9px; letter-spacing: 2px; }
/* carte blanche même la nuit -> on force le texte en foncé (sinon .val héritait le blanc on-dark = invisible) */
.home-v4 .winrate-card .val { font-family: var(--fd); font-size: 26px; line-height: 28px; color: var(--ink); }

/* pastille de RANG (accueil) — emoji + nom + niveau, ouvre l'écran Rangs */
.home-v4 .rank-pill { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 5px 9px; cursor: pointer; font: inherit; }
.home-v4 .rank-pill:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.home-v4 .rank-pill .ic { width: 22px; height: 22px; flex-shrink: 0; border: 2px solid var(--ink); background: #FFD600; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.home-v4 .rank-pill .ic img { width: 16px; height: 16px; }
.home-v4 .rank-pill .nm { font-family: var(--fd); font-size: 14px; letter-spacing: 1px; line-height: 1; }
.home-v4 .rank-pill .lv { font-family: var(--fb); font-weight: 700; font-size: 9px; letter-spacing: 1px; background: var(--ink); color: var(--paper); padding: 2px 6px; }
.home-v4 .rank-pill .go { font-family: var(--fd); font-size: 15px; opacity: 0.5; margin-left: 1px; }

/* divider */
.home-v4 .divider { margin: 22px 4px 0; display: flex; align-items: center; gap: 10px; }
.home-v4 .divider .line { height: 3px; background: var(--ink); }
.home-v4 .divider .left { width: 32px; flex: 0 0 32px; }
.home-v4 .divider .right { flex: 1; }
.home-v4 .divider .text { font-family: var(--fd); font-size: 14px; letter-spacing: 3px; }
.home-v4 .divider .voir { position: relative; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; margin-left: 4px; }
.home-v4 .divider .voir:active .body { transform: translate(1px, 1px); }
.home-v4 .divider .voir::before { content: ''; position: absolute; top: 2px; left: 2px; right: -2px; bottom: -2px; background: var(--ink); }
.home-v4 .divider .voir .body { position: relative; padding: 3px 8px; border: 2px solid var(--ink); background: var(--paper); font-family: var(--fd); font-size: 10px; letter-spacing: 1.5px; }

/* 2 cards créer / rejoindre */
.home-v4 .cta-row { padding: 14px 4px 0; display: flex; gap: 12px; }
.home-v4 .cta-card { flex: 1; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.home-v4 .cta-card::before { content: ''; position: absolute; top: 7px; left: 7px; right: -7px; bottom: -7px; background: var(--ink); }
.home-v4 .cta-card .body { position: relative; height: 200px; border: 4px solid var(--ink); padding: 14px; overflow: hidden; }
.home-v4 .cta-card.create .body { background: #0048D9; }
.home-v4 .cta-card.join .body { background: #FFD600; }
.home-v4 .cta-card:active .body { transform: translate(2px, 2px); }
.home-v4 .cta-card .ghost { position: absolute; width: 130px; height: 130px; opacity: 0.18; pointer-events: none; top: -10px; right: -20px; }
.home-v4 .cta-card .ghost img { width: 100%; height: 100%; }
.home-v4 .icon-box-cta { position: relative; }
.home-v4 .icon-box-cta::before { content: ''; position: absolute; top: 3px; left: 3px; width: 42px; height: 42px; }
.home-v4 .cta-card.create .icon-box-cta::before { background: var(--ink); }
.home-v4 .cta-card.join .icon-box-cta::before { background: var(--paper); }
.home-v4 .icon-box-cta .inner { position: relative; width: 42px; height: 42px; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.home-v4 .cta-card.create .icon-box-cta .inner { background: var(--paper); }
.home-v4 .cta-card.join .icon-box-cta .inner { background: var(--ink); }
.home-v4 .icon-box-cta .inner img { width: 32px; height: 32px; display: block; }
.home-v4 .cta-card .title-bottom { position: absolute; bottom: 12px; left: 14px; right: 14px; }
.home-v4 .cta-card .title-bottom .main { font-family: var(--fd); font-size: 28px; letter-spacing: 1px; line-height: 30px; }
.home-v4 .cta-card .title-bottom .sub { margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.home-v4 .cta-card.create .title-bottom .main { color: var(--paper); }
.home-v4 .cta-card.create .title-bottom .sub { color: rgba(255,254,247,0.85); }
.home-v4 .cta-card.join .title-bottom .main { color: var(--ink); }
.home-v4 .cta-card.join .title-bottom .sub { color: color-mix(in srgb, var(--ink) 80%, transparent); }

/* event banner (conditionnel) */
.home-v4 .event-banner { margin: 16px 4px 0; position: relative; cursor: pointer; }
.home-v4 .event-banner::before { content: ''; position: absolute; top: 6px; left: 6px; right: -6px; bottom: -6px; background: var(--ink); }
.home-v4 .event-banner .body { position: relative; border: 4px solid #FF5252; background: #FFE5E5; padding: 12px; display: flex; align-items: center; gap: 12px; }
.home-v4 .event-banner .emoji-box { width: 50px; height: 50px; border: 3px solid var(--ink); background: #FF5252; overflow: hidden; flex-shrink: 0; transform: rotate(-3deg); }
.home-v4 .event-banner .emoji-box img { width: 100%; height: 100%; display: block; }
.home-v4 .event-banner .meta { flex: 1; min-width: 0; }
.home-v4 .event-banner .live-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; background: #FF5252; color: var(--paper); border: 2px solid var(--ink); font-family: var(--fd); font-size: 9px; letter-spacing: 1px; box-shadow: 2px 2px 0 var(--ink); }
.home-v4 .event-banner .live-tag .dot { width: 5px; height: 5px; background: var(--paper); border-radius: 50%; animation: hv-blink 1s ease-in-out infinite; }
@keyframes hv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.home-v4 .event-banner .title { font-family: var(--fd); font-size: 15px; letter-spacing: 0.5px; line-height: 15px; margin-top: 4px; }
.home-v4 .event-banner .sub { font-weight: 700; font-size: 10px; color: color-mix(in srgb, var(--ink) 65%, transparent); margin-top: 2px; }
.home-v4 .event-banner .arrow { font-family: var(--fd); font-size: 22px; }

/* parties récentes — scroll horizontal */
/* pull-to-refresh perso : le shell (header/footer fixes) désactive le PTR natif,
   on le recrée sur .home-wrap (tirer vers le bas tout en haut -> recharge). */
.ptr { height: 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); transition: height .2s ease; }
.ptr .ico { font-family: var(--fd); font-size: 26px; line-height: 1; padding-bottom: 8px; transition: transform .2s; }
.ptr.ready .ico { transform: rotate(180deg); color: var(--magenta); }
.ptr.refreshing { height: 54px; }
.ptr.refreshing .ico { animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

/* scroll HORIZONTAL seulement (overflow-y:hidden, sinon l'axe vertical passe en auto
   et la ligne capture le scroll vertical de la page) + indicateurs masqués */
.home-v4 .recent-row { padding: 12px 8px 10px; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; }
.home-v4 .recent-row::-webkit-scrollbar { display: none; }
.home-v4 .recent-card { flex: 0 0 140px; position: relative; }
.home-v4 .recent-card::before { content: ''; position: absolute; top: 5px; left: 5px; right: -5px; bottom: -5px; background: var(--ink); }
.home-v4 .recent-card .body { position: relative; height: 156px; border: 3px solid var(--ink); background: var(--paper); padding: 11px; display: flex; flex-direction: column; }
.home-v4 .recent-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.home-v4 .recent-card .icon-mini { width: 34px; height: 34px; border: 2.5px solid var(--ink); background: var(--paper); overflow: hidden; flex-shrink: 0; }
.home-v4 .recent-card .icon-mini img { width: 100%; height: 100%; display: block; }
/* pastille RÉSULTAT : vert = gagné, rouge = perdu (seule touche de couleur) */
.home-v4 .recent-card .result { font-family: var(--fd); font-size: 9px; letter-spacing: 1px; padding: 3px 7px; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.home-v4 .recent-card .result.win { background: #5BE885; color: var(--ink); }
.home-v4 .recent-card .result.lose { background: #FF5252; color: var(--paper); }
.home-v4 .recent-card .result.practice { background: #C9C9C9; color: var(--ink); font-size: 8px; }   /* partie vs bots = entraînement (non comptée) */
.home-v4 .recent-card .mode { margin-top: 11px; font-weight: 700; font-size: 9px; letter-spacing: 1.5px; opacity: 0.55; }
.home-v4 .recent-card .score { display: flex; align-items: baseline; gap: 3px; margin-top: 2px; }
.home-v4 .recent-card .score .v { font-family: 'Anton', sans-serif; font-size: 32px; line-height: 32px; }
.home-v4 .recent-card .score .u { font-weight: 700; font-size: 9px; letter-spacing: 1.5px; opacity: 0.6; }
.home-v4 .recent-card .sub { margin-top: auto; font-weight: 700; font-size: 8.5px; letter-spacing: 1px; opacity: 0.55; }
.home-v4 .recent-card.r1 { transform: rotate(-1deg); }
.home-v4 .recent-card.r2 { transform: rotate(1.5deg); }
.home-v4 .recent-card.r3 { transform: rotate(-0.5deg); }
.home-v4 .recent-empty { padding: 14px 4px; font-weight: 700; font-size: 12px; color: color-mix(in srgb, var(--ink) 55.00000000000001%, transparent); }

/* 3 stats mini */
.home-v4 .stats-row { padding: 8px 4px 18px; display: flex; gap: 10px; }
.home-v4 .stat-mini { flex: 1; position: relative; }
.home-v4 .stat-mini::before { content: ''; position: absolute; top: 5px; left: 5px; right: -5px; bottom: -5px; background: var(--ink); }
.home-v4 .stat-mini .body { position: relative; border: 3px solid var(--ink); padding: 10px 9px; display: flex; align-items: center; gap: 8px; text-align: left; }
.home-v4 .stat-mini .ic { width: 24px; height: 24px; flex-shrink: 0; display: block; }
.home-v4 .stat-mini .ic img { width: 100%; height: 100%; }
.home-v4 .stat-mini .txt { min-width: 0; }
.home-v4 .stat-mini .val { font-family: var(--fd); font-size: 24px; line-height: 24px; }
.home-v4 .stat-mini .lbl { font-family: var(--fd); font-size: 8.5px; letter-spacing: 1px; opacity: 0.6; }
.home-v4 .stat-mini.parties .body { background: var(--paper); }
.home-v4 .stat-mini.wins .body { background: #5BE885; }
.home-v4 .stat-mini.xp .body { background: #FF2E93; }
.home-v4 .stat-mini.xp .val, .home-v4 .stat-mini.xp .lbl { color: var(--paper); }

/* mini-pastille XP dans la barre du haut */
.home-v4-xp { position: relative; display: inline-flex; }
.home-v4-xp::before { content: ''; position: absolute; top: 3px; left: 3px; right: -3px; bottom: -3px; background: var(--ink); }
.home-v4-xp .body { position: relative; padding: 4px 8px; border: 2.5px solid var(--ink); background: #FFD600; display: flex; align-items: center; gap: 4px; font-family: var(--fd); font-size: 12px; }
.home-v4-xp .body .ic { width: 14px; height: 14px; }
.home-v4-xp .body .ic img { width: 100%; height: 100%; }

/* NB : l'ancien bloc « DÉFIS » (.defi-list / .defi-card .di/.dm/.dr…) a été retiré.
   Ces classes n'étaient plus utilisées dans le markup et, n'étant pas scopées
   sous .home-v4, le générique « .defi-card { display:flex } » écrasait les cartes
   de l'écran Défis (#sec-defis .defi-card) → corps rétréci + gros cadre noir. */

/* ============================================================
   FOND ANIMÉ DE L'ACCUEIL (canvas) — ciel/particules selon l'heure
   ============================================================ */
#sec-accueil { position: relative; }
.hv-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.home-v4 { position: relative; z-index: 1; }
/* NB : header (.topbar sticky z40) et footer (.bottom-nav fixed z60) sont déjà
   au-dessus du canvas (z0) — ne PAS toucher leur position ici (sinon plus fixes). */
/* NUIT : SEUL le texte LIBRE passe en clair (les cartes gardent leur texte ink,
   sinon texte blanc sur carte blanche = invisible). + ombre portée sur le nom. */
.home-v4.on-dark .bienvenue .name { color: var(--paper); text-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.home-v4.on-dark .bienvenue .lbl { color: color-mix(in srgb, var(--paper) 62%, transparent); }
.home-v4.on-dark .divider .text { color: var(--paper); }
.home-v4.on-dark .divider .line { background: var(--paper); }
/* les cartes gardent leurs ombres ink : sur la nuit, on renforce le contraste
   de l'ombre pour qu'on la "sente" (halo sombre + net). */
.home-v4.on-dark .winrate-card::before,
.home-v4.on-dark .cta-card::before,
.home-v4.on-dark .stat-mini::before,
.home-v4.on-dark .recent-card::before,
.home-v4.on-dark .date-sticker::before { background: #000; box-shadow: 0 0 0 2px rgba(255,255,255,.10); }
.home-v4.on-dark .rank-pill { box-shadow: 3px 3px 0 #000, 0 0 0 1px rgba(255,255,255,.12); }
/* la carte WIN RATE reste blanche la nuit -> son label ne doit PAS hériter du blanc de .bienvenue .lbl (sinon invisible) */
.home-v4.on-dark .winrate-card .lbl, .home-v4.on-dark .winrate-card .val { color: var(--ink); }

/* ENCORE CHAUD : fond = couleur du MODE de jeu (entraînement = neutre) */
.home-v4 .recent-card.ondk .mode,
.home-v4 .recent-card.ondk .score .v,
.home-v4 .recent-card.ondk .score .u,
.home-v4 .recent-card.ondk .sub { color: var(--paper); }
.home-v4 .recent-card.ondk .mode, .home-v4 .recent-card.ondk .sub { opacity: .82; }

/* ============================================================
   ÉCRAN RÉCAP DE PARTIE (overlay ouvert au clic sur une carte "ENCORE CHAUD"
   ou une ligne d'historique). Neo-brutalist, réutilise le langage du jeu.
   ============================================================ */
.recent-card.rc-clickable, .hrow.rc-clickable { cursor: pointer; }
.recent-card.rc-clickable:active { transform: translateY(1px); }
.rc-overlay { position: fixed; inset: 0; z-index: 330; background: var(--paper); display: none; }
.rc-overlay.show { display: block; }
.rc-overlay .rc-screen { display: flex; flex-direction: column; height: 100%; max-width: 560px; margin: 0 auto; }
.rc-overlay .rc-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 3px solid var(--ink); flex-shrink: 0; }
.rc-overlay .rc-back { width: 36px; height: 36px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); font-family: var(--fd); font-size: 22px; line-height: 30px; text-align: center; cursor: pointer; }
.rc-overlay .rc-title { font-family: var(--fd); font-size: 17px; letter-spacing: 1px; }
.rc-overlay .rc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.rc-overlay .rc-hero { position: relative; overflow: hidden; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 18px 16px; text-align: center; background: var(--paper); }
.rc-overlay .rc-hero.duel { background: #E63946; color: var(--paper); }
.rc-overlay .rc-hero::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 40%, rgba(0,0,0,.06) 0 10deg, transparent 10deg 20deg); }
.rc-overlay .rc-hero > * { position: relative; }
.rc-overlay .rc-mode { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fd); font-size: 13px; letter-spacing: 1px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 3px 12px; }
.rc-overlay .rc-mode img { width: 22px; height: 22px; display: block; }
.rc-overlay .rc-verdict { font-family: var(--fd); font-size: 40px; line-height: 1; letter-spacing: 1px; margin: 12px 0 6px; -webkit-text-stroke: 1.5px var(--ink); color: var(--yellow); text-shadow: 3px 3px 0 var(--ink); }
.rc-overlay .rc-pts { font-family: 'Anton', sans-serif; font-size: 46px; line-height: 1; }
.rc-overlay .rc-pts small { font-size: 18px; opacity: .7; margin-left: 4px; }
.rc-overlay .rc-when { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 11px; margin-top: 8px; opacity: .75; }
.rc-overlay .rc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rc-overlay .rc-tile { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-align: center; padding: 11px 4px; background: var(--paper); }
.rc-overlay .rc-tile .v { font-family: var(--fd); font-size: 22px; line-height: 1; }
.rc-overlay .rc-tile .l { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 9px; letter-spacing: .5px; margin-top: 5px; opacity: .65; }
.rc-overlay .rc-tile.hl { background: var(--yellow); }
.rc-overlay .rc-h { display: inline-block; font-family: var(--fd); font-size: 14px; letter-spacing: 1px; padding: 5px 11px; border: 3px solid var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1deg); margin-bottom: 12px; }
/* DÉFI DU JOUR : objectif atteint/manqué + bonnes/ratées */
.rc-overlay .rc-obj { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px; }
.rc-overlay .rc-obj.ok { background: #5BE885; }
.rc-overlay .rc-obj.ko { background: #FFD600; }
.rc-overlay .rc-obj-lbl { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px; line-height: 1.3; color: var(--ink); }
.rc-overlay .rc-obj-badge { flex-shrink: 0; font-family: var(--fd); font-size: 13px; letter-spacing: .5px; padding: 4px 9px; border: 2.5px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.rc-overlay .rc-answers { display: flex; gap: 10px; margin-top: 10px; }
.rc-overlay .rc-ans { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 10px 6px; }
.rc-overlay .rc-ans.good { background: #5BE885; }
.rc-overlay .rc-ans.bad { background: #FF5252; }
.rc-overlay .rc-ans .n { font-family: 'Anton', sans-serif; font-size: 30px; line-height: 1; color: var(--ink); }
.rc-overlay .rc-ans.bad .n { color: var(--paper); }
.rc-overlay .rc-ans .l { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 9px; letter-spacing: 1px; color: var(--ink); }
.rc-overlay .rc-ans.bad .l { color: var(--paper); }
/* récap PAR ÉQUIPE : score des 2 équipes côte à côte */
.rc-overlay .rc-tteams { display: flex; align-items: stretch; gap: 10px; }
.rc-overlay .rc-tteam { flex: 1; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 10px 8px; text-align: center; background: var(--paper); }
.rc-overlay .rc-tteam.win { background: #FFF6D6; }
.rc-overlay .rc-tteam.mine { outline: 3px solid var(--yellow); outline-offset: 2px; }
.rc-overlay .rc-tteam-nm { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 10px; letter-spacing: .5px; }
.rc-overlay .rc-tteam.red .rc-tteam-nm { color: #E63946; }
.rc-overlay .rc-tteam.blue .rc-tteam-nm { color: #4D7CFF; }
.rc-overlay .rc-tteam-sc { font-family: 'Anton', sans-serif; font-size: 30px; line-height: 1; margin-top: 4px; }
.rc-overlay .rc-tteam-u { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 8px; letter-spacing: 1px; opacity: .55; }
.rc-overlay .rc-tvs { align-self: center; font-family: 'Anton', sans-serif; font-size: 16px; }
.rc-overlay .rc-acc { display: flex; align-items: center; gap: 14px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); padding: 14px; }
.rc-overlay .rc-acc-big { font-family: var(--fd); font-size: 34px; line-height: 1; flex-shrink: 0; }
.rc-overlay .rc-acc-r { flex: 1; }
.rc-overlay .rc-bar { height: 18px; border: 3px solid var(--ink); background: var(--paper); overflow: hidden; }
.rc-overlay .rc-bar > span { display: block; height: 100%; background: var(--green, #5BE885); border-right: 3px solid var(--ink); }
.rc-overlay .rc-acc-lbl { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 11px; margin-top: 6px; opacity: .7; }
.rc-overlay .rc-cats { display: flex; flex-direction: column; gap: 10px; }
.rc-overlay .rc-cat { display: flex; align-items: center; gap: 10px; }
.rc-overlay .rc-cat-nm { font-family: var(--fd); font-size: 12px; letter-spacing: .5px; width: 92px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-overlay .rc-cat-bar { flex: 1; height: 14px; border: 2.5px solid var(--ink); background: var(--paper); overflow: hidden; }
.rc-overlay .rc-cat-bar > span { display: block; height: 100%; }
.rc-overlay .rc-cat-bar > span.good { background: var(--green, #5BE885); }
.rc-overlay .rc-cat-bar > span.mid { background: var(--yellow); }
.rc-overlay .rc-cat-bar > span.bad { background: #FF9F45; }
.rc-overlay .rc-cat-n { font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 11px; width: 34px; text-align: right; flex-shrink: 0; }
.rc-overlay .rc-tag { font-family: var(--fd); font-size: 9px; letter-spacing: .5px; border: 2px solid var(--ink); padding: 1px 6px; flex-shrink: 0; }
.rc-overlay .rc-tag.fort { background: var(--green, #5BE885); }
.rc-overlay .rc-tag.faible { background: #FF9F45; }
.rc-overlay .rc-vs { display: flex; align-items: center; justify-content: center; gap: 12px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); padding: 12px; }
.rc-overlay .rc-vs .p { text-align: center; flex: 1; }
.rc-overlay .rc-vs .p .nm { font-family: var(--fd); font-size: 13px; }
.rc-overlay .rc-vs .p .sc { font-family: var(--fd); font-size: 22px; line-height: 1; }
.rc-overlay .rc-vs .p.win .sc { color: #1a9c4c; }
.rc-overlay .rc-vs .vs { font-family: var(--fd); font-size: 16px; }
.rc-overlay .rc-rounds { display: flex; flex-direction: column; gap: 8px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--paper); padding: 11px 13px; }
.rc-overlay .rc-rrow { display: flex; align-items: center; gap: 10px; }
.rc-overlay .rc-rlbl { font-family: var(--fd); font-size: 12px; width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-overlay .rc-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.rc-overlay .rc-dot { width: 15px; height: 15px; border: 2.5px solid var(--ink); border-radius: 50%; background: transparent; }
.rc-overlay .rc-dot.on { background: var(--green, #5BE885); }
.rc-overlay .rc-foot { flex-shrink: 0; display: flex; gap: 10px; padding: 12px 16px 16px; border-top: 3px solid var(--ink); }
.rc-overlay .rc-foot .btn { flex: 1; }

/* état vide du récap (parties d'avant l'enrichissement) */
.rc-overlay .rc-empty { display:flex; align-items:center; gap:14px; border:3px dashed rgba(10,10,10,.32); background:var(--paper); padding:16px 16px; margin-top:2px; }
.rc-overlay .rc-empty-ic { font-size:30px; flex-shrink:0; }
.rc-overlay .rc-empty-tx { font-family:var(--fb); font-weight:600; font-size:12px; line-height:1.5; color:rgba(10,10,10,.7); }
.rc-overlay .rc-empty-tx b { color:var(--ink); }

/* récap : manche par manche en carrés (vert marqué / rouge raté), comme l'écran de fin */
.rc-overlay .rc-sqs { display:flex; gap:7px; flex-wrap:wrap; }
.rc-overlay .rc-sq { width:19px; height:19px; border:2.5px solid var(--ink); box-shadow:2px 2px 0 var(--ink); background:#E63946; }
.rc-overlay .rc-sq.w { background:var(--green,#5BE885); }

/* récap : les sections ne doivent JAMAIS être écrasées (sinon le hero se fait rogner) */
.rc-overlay .rc-body > * { flex-shrink: 0; }

/* récap : CLASSEMENT final (autres joueurs) pour les modes non-duel */
.rc-overlay .rc-board { display:flex; flex-direction:column; gap:8px; }
.rc-overlay .rc-brow { display:flex; align-items:center; gap:10px; border:3px solid var(--ink); box-shadow:3px 3px 0 var(--ink); background:var(--paper); padding:8px 10px; }
.rc-overlay .rc-brow.me { background:var(--yellow); }
.rc-overlay .rc-brk { font-family:var(--fd); font-size:16px; width:22px; text-align:center; flex-shrink:0; }
.rc-overlay .rc-bav { width:34px; height:34px; border:2.5px solid var(--ink); overflow:hidden; flex-shrink:0; background:var(--paper); }
.rc-overlay .rc-bav > *, .rc-overlay .rc-bav img { width:100% !important; height:100% !important; display:block; border:none !important; box-shadow:none !important; }
.rc-overlay .rc-bnm { flex:1; min-width:0; font-family:var(--fd); font-size:14px; letter-spacing:.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rc-overlay .rc-bsc { font-family:var(--fd); font-size:18px; flex-shrink:0; }

/* MIX DU JOUR — bannière accueil : MÊME design que l'écran Défis (.ddj), alignée sur les marges (4px) */
.home-v4 .ddj-home { position: relative; margin: 16px 4px 0; cursor: pointer; transform: rotate(1deg); -webkit-tap-highlight-color: transparent; }
.home-v4 .ddj-home::before { content: ''; position: absolute; top: 6px; left: 6px; right: -6px; bottom: -6px; background: var(--ink); }
.home-v4.on-dark .ddj-home::before { background: #000; box-shadow: 0 0 0 2px rgba(255,255,255,.10); }
.home-v4 .ddj-home .bd { position: relative; border: 4px solid var(--ink); background: #9D4EDD; color: #fff; padding: 13px; display: flex; align-items: center; gap: 12px; transition: transform .12s ease; }
.home-v4 .ddj-home:active .bd { transform: translate(4px, 4px); }
.home-v4 .ddj-home .em { width: 52px; height: 52px; flex-shrink: 0; border: 3px solid var(--ink); background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-6deg); }
.home-v4 .ddj-home .em img { width: 36px; height: 36px; }
.home-v4 .ddj-home .tx { flex: 1; min-width: 0; }
.home-v4 .ddj-home .nm { font-family: var(--fd); font-size: 20px; line-height: 20px; letter-spacing: .5px; }
.home-v4 .ddj-home .d { font-family: var(--fb); font-weight: 700; font-size: 11px; margin-top: 4px; line-height: 1.3; color: rgba(255,255,255,.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-v4 .ddj-home .go { flex-shrink: 0; align-self: stretch; display: flex; align-items: center; padding: 0 12px; border: 3px solid var(--ink); background: #FFD600; color: #0A0A0A; font-family: var(--fd); font-size: 13px; letter-spacing: .5px; box-shadow: 3px 3px 0 var(--ink); }
.home-v4 .ddj-home.done .bd { background: #2F9E6B; cursor: default; }
.home-v4 .ddj-home.done .go { background: #5BE885; }
.home-v4 .ddj-home.done:active .bd { transform: none; }