/* ============================================================
   PALMARÈS — style.css (v0.1)
   DA : musée du football. Ivoire, encre, or, vert bouteille.
   Typo : Playfair Display (titres) + Inter (corps).
   Mobile-first, colonne centrale 540px.
   ============================================================ */

:root {
  --ivory: #f6f1e7;
  /* AAA : les « panneaux » remplacent le papier — sombre profond, or ciselé */
  --paper: rgba(10, 25, 17, 0.86);
  --panel-solid: #0b1a12;
  --ink: #f2ecdd;
  --ink-soft: #b9c8bd;
  --gold: #d4ab2a;
  --gold-deep: #a9861a;
  --gold-ink: #8a6d12;
  --gold-pale: #e8d48b;
  --green: #123b2a;
  --green-deep: #0d2b1e;
  --red: #c23a52;
  --line: rgba(212, 171, 42, 0.24);
  --edge: rgba(212, 171, 42, 0.45);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --radius: 12px;
  --cut: 16px;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;

  /* ---- Jetons d'état, de surface et de voile ----------------------------
     Ces valeurs étaient écrites en dur dans une quarantaine de règles non
     scopées : le vert bouteille du foot ressortait donc en basket et en
     ninja. Elles sont déclinées une seule fois par mode (blocs sport-*),
     au lieu d'empiler des surcharges règle par règle.
     Les valeurs ci-dessous sont EXACTEMENT celles du foot d'aujourd'hui. */
  --text-mute: #cfdcd2;                     /* textes secondaires (tagline, notes) */
  --surface-hover: rgba(18, 40, 28, 0.9);   /* survol des cartes de choix */
  --field-bg: rgba(6, 16, 11, 0.65);        /* champs de saisie et selects */
  --field-bg-strong: rgba(6, 16, 11, 0.75);
  --chrome-bg: rgba(8, 20, 14, 0.85);       /* chrome flottant (FAB retour) */
  --chrome-panel: rgba(8, 20, 14, 0.94);    /* entête de carrière */
  --panel-hi: rgba(10, 25, 17, 0.8);        /* panneau de fin de carrière */
  --panel-lo: rgba(7, 15, 10, 0.94);
  --score-hi: rgba(24, 20, 6, 0.95);        /* moment-clé + score de fin */
  --score-lo: rgba(10, 25, 17, 0.92);
  --quote-bg: rgba(13, 43, 30, 0.65);       /* citation « regret » */
  --veil-modal: rgba(13, 43, 30, 0.75);
  --veil-share: rgba(5, 11, 8, 0.9);
  --veil-hi: rgba(18, 59, 42, 0.97);        /* révélation + recap plein écran */
  --veil-lo: rgba(4, 12, 8, 0.995);
  --burst: rgba(201, 162, 39, 0.3);         /* éclat de la révélation gagnante */
  --cine-hi: rgba(10, 20, 14, 0.975);       /* cinématiques */
  --cine-lo: rgba(4, 8, 6, 0.995);
  --pos: #7fd6a4;                           /* positif : gains, quêtes faites */
  --pos-soft: #8fdcae;
  --pos-bg: rgba(46, 125, 79, 0.22);
  --pos-edge: rgba(127, 214, 164, 0.4);
  --pos-line: #4dab77;
  --pos-deep: #2e7d4f;
  --pos-glow: rgba(46, 125, 79, 0.55);
  --neg: #f08c9d;                           /* négatif : pertes, échecs */
  --neg-soft: #f4a3b1;
  --taunt: #e8b4bf;                         /* provocation du rival */
  --taunt-line: rgba(224, 90, 122, 0.5);
  --info: #9fcede;                          /* bandeau de mi-saison */
  --info-bg: rgba(63, 120, 145, 0.16);
  --info-edge: rgba(159, 206, 222, 0.45);
  --on-gold-soft: rgba(13, 43, 30, 0.95);   /* texte secondaire SUR un fond or */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--green-deep);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: hidden;
}
/* Fond FOOT : nuit de stade — faisceaux de projecteurs, tribunes en silhouette */
body::before {
  content: "";
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -2;
  background: #081711 url("../assets/img/bg-foot.svg?i=2") center bottom / cover no-repeat;
}
/* Grain très léger : casse l'aplat sans se voir */
body::after {
  content: "";
  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;
  pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
}

/* ---------- Écrans ---------- */
.screen {
  display: none;
  max-width: 540px;
  margin: 0 auto;
  padding: 22px 18px calc(40px + env(safe-area-inset-bottom));
  min-height: 100vh;
}
.screen.active { display: block; animation: fadeIn 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
/* L'animation s'appelait fadeIn mais ne fondait pas : l'écran glissait juste. */
@keyframes fadeIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

.hidden { display: none !important; }

/* ---------- Accueil ---------- */
.home-hero { text-align: center; padding: 40px 0 26px; }
.laurel { color: var(--gold); font-size: 30px; margin-bottom: 6px; }
.brand-emblem { width: 56px; height: 56px; border-radius: 15px; filter: drop-shadow(0 4px 14px rgba(212, 171, 42, 0.35)); }
.wordmark { display: flex; flex-direction: column; align-items: center; color: var(--ivory); }
.wm-top {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans, Inter, sans-serif);
  font-weight: 700;
  font-size: clamp(13px, 2.6vw, 17px);
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* compense le tracking du dernier caractère */
  color: var(--gold);
  text-transform: uppercase;
}
.wm-top::before, .wm-top::after {
  content: "";
  width: clamp(26px, 6vw, 54px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.wm-top::after { background: linear-gradient(90deg, var(--gold), transparent); }
.wm-main {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(46px, 12vw, 84px);
  line-height: 1;
  letter-spacing: 0.02em;
  margin-top: 2px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 14px 44px rgba(212, 171, 42, 0.22);
  text-wrap: balance;
}
.wordmark::after {
  content: "";
  display: block;
  width: 120px; height: 3px;
  margin: 10px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Tokenisé : la tagline était en gris-vert foot, donc lilas/vert dans les autres modes */
.tagline { color: var(--text-mute); font-size: 15.5px; margin-top: 14px; }
.tagline em { color: var(--gold-pale); font-style: italic; font-family: var(--serif); font-size: 17px; }

.home-actions { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 22px; }

/* ---------- Sélecteur de sport ---------- */
.sport-tabs { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.sport-tab {
  display: inline-block; text-decoration: none;
  background: rgba(246, 241, 231, 0.08); color: var(--ink-soft);
  border: 1px solid rgba(246, 241, 231, 0.22); border-radius: 999px;
  padding: 10px 20px; font-weight: 800; font-size: 13.5px; letter-spacing: 0.04em;
}
.sport-tab.on {
  background: rgba(212, 171, 42, 0.2); color: var(--gold-pale);
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(212, 171, 42, 0.25);
}
.sport-tab:hover { color: var(--ivory); }
.sport-tab.locked { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); position: relative; }
.sport-tab.locked:hover { color: var(--ink-soft); }
.sport-soon { font-size: 0.82em; font-weight: 700; opacity: 0.85; margin-left: 3px; }

.home-card {
  background: var(--paper);
  backdrop-filter: blur(10px);
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  /* clip-path rogne box-shadow → l'ombre passe par filter pour épouser le biseau */
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
  padding: 56px 22px 24px;
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid var(--edge);
}
.card-ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  text-align: left;
  background: linear-gradient(90deg, rgba(212, 171, 42, 0.2), rgba(212, 171, 42, 0.02) 70%);
  color: var(--gold-pale);
  font-family: var(--serif);
  font-weight: 700; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 12px 20px 11px 26px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-ribbon::before { content: "◆ "; color: var(--gold); font-size: 10px; vertical-align: 2px; }
@media (max-width: 430px) {
  .card-ribbon { font-size: 12px; letter-spacing: 0.14em; padding-left: 20px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.chip {
  background: rgba(246, 241, 231, 0.07); border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600;
}
.daily-status { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 14px; }
.daily-hero { height: 94px; border-radius: 10px; background-size: cover; background-position: center; box-shadow: inset 0 -40px 50px rgba(0, 0, 0, 0.55), inset 0 0 0 1px var(--line); margin-bottom: 12px; }

.home-footer { text-align: center; color: var(--text-mute); font-size: 12px; margin-top: 26px; }

/* ---------- Rangée méta (profil/boutique/badges/panthéon) ---------- */
.meta-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
.meta-btn {
  background: rgba(246, 241, 231, 0.1); color: var(--ivory);
  border: 1px solid rgba(246, 241, 231, 0.25); border-radius: 12px;
  padding: 10px 6px; min-height: 46px; font-family: var(--sans); font-weight: 700; font-size: 12.5px;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer;
  transition: background-color 0.18s ease-out, border-color 0.18s ease-out, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Ces cinq boutons n'avaient AUCUN retour au survol ni au clic. */
@media (hover: hover) and (pointer: fine) {
  .meta-btn:hover { background: rgba(246, 241, 231, 0.16); border-color: var(--gold); transform: translateY(-1px); }
}
.meta-btn:active { transform: scale(0.98); }
body.sport-naruto .meta-btn:hover { background: #fff; border-color: var(--gold); }
.nj-nuit body.sport-naruto .meta-btn:hover { background: #332b22; border-color: var(--gold); }
.meta-btn .mb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mobile : disposition « tab bar » — icône au-dessus, nom lisible en dessous.
   Cinq colonnes de 70 px forçaient des libellés à 9,5 px : on passe à deux
   rangées (3 + 2), ce qui laisse la place d'écrire les noms en 12 px. */
@media (max-width: 480px) {
  .meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
  .meta-btn { flex: 1 1 calc(33.333% - 6px); flex-direction: column; gap: 3px; padding: 9px 4px; font-size: 19px; min-height: 58px; }
  .meta-btn .mb-l { font-size: 12px; font-weight: 700; line-height: 1.1; text-align: center; white-space: normal; letter-spacing: 0; }
}
.meta-btn:hover { background: rgba(246, 241, 231, 0.2); }
.avatar-mini { width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; object-fit: cover; border: 1px solid var(--gold); }

/* Bandeaux par mode : seule la teinte du losange change */
.card-ribbon.rb-brown::before { color: #d8a35c; }
.card-ribbon.rb-dark::before { color: var(--pos); } /* losange vert foot → jeton positif du mode */
.card-ribbon.rb-gold::before { color: var(--gold); }
.daily-card .card-ribbon::before { color: #f08c9d; }
.btn-dark { background: rgba(246, 241, 231, 0.08); color: var(--ivory); border: 1px solid rgba(246, 241, 231, 0.25); }

/* Quêtes */
.quests-list { list-style: none; text-align: left; margin-bottom: 10px; }
.quests-list li { padding: 8px 2px; font-size: 14px; border-bottom: 1px dashed rgba(246, 241, 231, 0.12); display: flex; justify-content: space-between; gap: 8px; }
.quests-list li:last-child { border-bottom: none; }
.quests-list li em { font-style: normal; color: var(--gold-pale); font-weight: 800; font-size: 12.5px; }
/* Quête faite : jeton positif du mode (le vert menthe ressortait en basket/ninja) */
.quests-list li.done { color: var(--pos); text-decoration: line-through; text-decoration-color: currentColor; text-decoration-color: color-mix(in srgb, var(--pos) 50%, transparent); }
.quest-earned { text-align: center; color: var(--gold-pale); font-weight: 800; font-size: 14px; margin-top: 14px; }

/* Histoire */
.story-item {
  padding: 13px; margin-bottom: 10px;
  background: rgba(246, 241, 231, 0.05);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.story-item:last-child { margin-bottom: 2px; }
.story-item .btn { font-size: 12.5px; white-space: normal; line-height: 1.35; text-transform: none; letter-spacing: 0.02em; }
.story-name { font-size: 15.5px; margin-bottom: 2px; }
.story-name strong { font-family: var(--serif); }
.story-goal { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 9px; font-weight: 600; }

/* Duel */
.duel-banner { border: 2px solid var(--gold); }

/* Entre amis : Duel + Ligue regroupés en 2 colonnes (compact, rien de masqué) */
.friends-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-items: end; }
.fm-col { display: flex; flex-direction: column; gap: 10px; }
.fm-col .daily-status { flex: 1; margin-bottom: 0; }
@media (max-width: 380px) { .friends-grid { grid-template-columns: 1fr; } }

/* Boutique */
.shop-note { color: var(--text-mute); text-align: center; font-size: 13.5px; margin-bottom: 14px; line-height: 1.55; }
.shop-hint { color: var(--gold-pale); background: rgba(212, 171, 42, 0.1); background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-weight: 600; }
.perk-item {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px;
  background: var(--paper); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 15px; margin-bottom: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.perk-item .btn { grid-column: 1 / -1; margin-top: 8px; }
.perk-item.owned { border-color: var(--gold); }
.btn-slim { width: auto; padding: 9px 14px; font-size: 12px; min-height: 44px; }


/* Badges (collection) */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.badge-cell {
  background: var(--paper); border: 1px solid rgba(246, 241, 231, 0.14);
  border-radius: 10px; padding: 14px 10px; text-align: center;
  display: flex; flex-direction: column; gap: 4px; opacity: 0.66;
}
.badge-cell.got { opacity: 1; border-color: var(--gold); box-shadow: 0 4px 16px rgba(201, 162, 39, 0.25); box-shadow: 0 4px 16px color-mix(in srgb, var(--gold) 25%, transparent); }
.badge-ic { font-size: 26px; }
.badge-cell strong { font-size: 13.5px; font-family: var(--serif); }
.badge-cell small { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }

/* Panthéon */
.pantheon-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 9px;
}
.pantheon-item.top { border: 2px solid var(--gold); box-shadow: 0 6px 20px rgba(201, 162, 39, 0.3); box-shadow: 0 6px 20px color-mix(in srgb, var(--gold) 30%, transparent); }
.pt-rank { font-weight: 900; font-family: var(--serif); color: var(--gold-pale); min-width: 34px; text-align: center; }
.pantheon-item .cc-body { flex: 1; }
.pt-score { font-family: var(--serif); font-weight: 900; font-size: 20px; color: var(--gold); }
.pantheon-item.pt-click { cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.pantheon-item.pt-click:hover, .pantheon-item.pt-click:focus-visible { border-color: var(--gold); transform: translateY(-1px); }
.pt-go { color: var(--gold-pale); font-size: 20px; font-weight: 900; opacity: 0.7; }
.pt-filters { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.pt-filters select {
  flex: 1; min-width: 130px; min-height: 44px;
  background: var(--field-bg); color: var(--ivory);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 8px; font-family: var(--sans); font-size: 13px;
}
.pt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.season-table { min-width: 460px; }
/* Mobile : chaque saison devient une petite carte « libellé : valeur » (fini le scroll latéral) */
@media (max-width: 560px) {
  .pt-table-wrap { overflow-x: visible; }
  .season-table { min-width: 0; width: 100%; }
  .season-table thead { display: none; }
  .season-table, .season-table tbody, .season-table tr, .season-table td { display: block; width: 100%; }
  .season-table tr { border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; margin-bottom: 8px; }
  .season-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border: none; font-size: 13px; white-space: normal; text-align: right; }
  .season-table td::before { content: attr(data-l); color: var(--ink-soft); font-weight: 700; text-align: left; }
  .season-table td.st-club { max-width: none; }
  .season-table td.st-tro { justify-content: flex-end; }
  .season-table td.st-tro::before { margin-right: auto; }
}
.season-table th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.05em;
  color: var(--ink-soft); font-weight: 800; padding: 4px;
  border-bottom: 1px solid rgba(246, 241, 231, 0.25);
}
.season-table td { white-space: nowrap; font-size: 13.5px; padding: 6px 4px; }
.season-table td:last-child { text-align: left; font-size: 14px; }
.season-table .st-club { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.season-table .st-tro span { margin-right: 2px; }

/* Profil */
.profile-block { text-align: center; }
.avatar-wrap { margin-bottom: 10px; }
.avatar-big { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); display: inline-block; }
.avatar-emoji { font-size: 44px; line-height: 78px; background: rgba(246, 241, 231, 0.1); text-align: center; }
.preset-row { display: flex; gap: 6px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.preset-btn { font-size: 20px; background: rgba(246, 241, 231, 0.08); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 44px; min-height: 44px; cursor: pointer; }
.preset-btn:hover { border-color: var(--gold); }
.name-input {
  width: 100%; margin-top: 6px;
  border: 1px solid rgba(246, 241, 231, 0.25); border-radius: 10px;
  padding: 12px; font-family: var(--sans); font-size: 15px; text-align: center;
  /* Le champ de saisie était noir-verdâtre dans tous les modes */
  background: var(--field-bg); color: var(--ivory);
}
.name-input::placeholder { color: rgba(242, 236, 221, 0.55); }
/* Autofill Chrome : garder le thème sombre (sinon fond blanc au milieu du panneau) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--panel-solid) inset;
  -webkit-text-fill-color: var(--ivory);
  caret-color: var(--ivory);
  transition: background-color 9999s ease-in-out 0s;
}
.profile-block .btn-slim { margin: 0 auto; }
.name-create {
  font-family: var(--serif); font-size: 21px; font-weight: 700;
  padding: 16px 12px; margin-bottom: 4px;
  background: var(--field-bg-strong); border: 2px solid var(--gold);
}
#btn-name-random { align-self: center; width: auto; }

/* Verdicts duel / histoire */
.mode-verdict { text-align: center; font-weight: 700; font-size: 15px; }
.mode-verdict p { margin-bottom: 10px; }
.mode-verdict .btn-slim { margin: 0 auto; }
.verdict-win { border: 2px solid var(--pos-deep); } /* vert foot en dur → jeton positif */
.verdict-lose { border: 2px solid var(--red); }

.flag {
  width: 1.3em; height: auto;
  border-radius: 2px;
  vertical-align: -0.18em;
  box-shadow: 0 0 0 1px rgba(28, 26, 22, 0.12);
}
.flag-lg { width: 30px; border-radius: 3px; }
.cc-icon .flag-lg { display: block; }
.end-name .flag { width: 1.05em; vertical-align: -0.08em; }

.lang-toggle {
  position: fixed; top: 14px; right: 14px; z-index: 50;
  background: rgba(246, 241, 231, 0.12); color: var(--ivory);
  border: 1px solid rgba(246, 241, 231, 0.3);
  border-radius: 999px; padding: 11px 17px; min-height: 44px;
  font-family: var(--sans); font-weight: 800; font-size: 13px; letter-spacing: 0.08em;
  cursor: pointer; backdrop-filter: blur(6px);
}
/* Pas de bascule de langue pendant une partie (collision header sticky mobile) */
body:has(#screen-game.active) .lang-toggle { display: none; }
body[data-screen="screen-game"] .lang-toggle { display: none; }
.lang-toggle:hover { background: rgba(246, 241, 231, 0.22); }
/* Mobile : la pastille fixe passait par-dessus le bouton « Classement » dès qu'on
   défilait. Ancrée au haut du document, elle défile avec la page et ne recouvre plus rien. */
@media (max-width: 480px) {
  .lang-toggle { position: absolute; top: 10px; right: 10px; padding: 10px 14px; font-size: 12px; }
}

/* ---------- Boutons ---------- */
.btn {
  display: block; width: 100%;
  border: none; cursor: pointer;
  border-radius: 14px;
  padding: 15px 18px;
  font-family: var(--sans); font-weight: 800; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase;
  /* Décélération exponentielle : le bouton « arrive » au lieu de s'arrêter net.
     Le fond et la bordure sont transitionnés aussi (avant : bascule brutale). */
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.18s ease-out, border-color 0.18s ease-out, filter 0.18s ease-out;
}
.btn:active { transform: scale(0.985) translateY(1px); }
.btn:hover { filter: brightness(1.06); }
/* Le lift ne concerne que les vrais pointeurs : sur tactile il « colle ». */
@media (hover: hover) and (pointer: fine) {
  .btn-gold:hover, .btn-daily:hover, .btn-primary:hover { transform: translateY(-1px); }
}

.btn-primary { background: rgba(212, 171, 42, 0.13); color: var(--ivory); border: 1px solid var(--edge); box-shadow: var(--shadow); }
.btn-primary:hover { background: rgba(212, 171, 42, 0.24); }
.btn-gold {
  background: linear-gradient(160deg, #e9c64a 0%, var(--gold) 45%, var(--gold-deep) 100%);
  color: #131007; box-shadow: 0 10px 30px rgba(201, 162, 39, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 230, 150, 0.5);
}
.btn-red { background: linear-gradient(160deg, #d24a63, #a4243b); color: #fff; box-shadow: 0 10px 28px rgba(164, 36, 59, 0.4); border: 1px solid rgba(255, 170, 185, 0.35); }
/* Défi du jour : accent or fort mais distinct du CTA plein (réservé « Nouvelle carrière ») */
.btn-daily { background: rgba(212, 171, 42, 0.15); color: var(--gold-pale); border: 1.5px solid var(--gold); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
.btn-daily:hover { background: rgba(212, 171, 42, 0.26); }
.btn-ghost { background: transparent; color: rgba(246, 241, 231, 0.75); border: 1px solid rgba(246, 241, 231, 0.25); }
/* Action destructive discrète (modale danger) : rouge-fantôme, jamais dominant */
.btn-ghost-danger { background: transparent; color: #e8798d; border: 1px solid rgba(200, 58, 82, 0.5); box-shadow: none; }
.btn-ghost-danger:hover { background: rgba(194, 58, 82, 0.12); }
#screen-create .btn-ghost { margin-top: 16px; }

/* ---------- Hiérarchie : un seul bouton plein par écran ----------
   Jusqu'à 5 .btn-gold cohabitaient sur l'accueil, 3 sur l'écran de fin et 3 comme
   choix d'un moment-clé : plus rien ne se lisait comme L'action principale.
   Les boutons qui ne la portent pas passent en contour, sans toucher au HTML.
   L'action principale reste pleine : « Reprendre / Nouvelle carrière » sur l'accueil,
   « Partager » en fin de voie, et l'unique choix accentué d'un événement ordinaire.
   Volontairement NON appliqué au foot, en production, dont le rendu ne doit pas bouger. */
:is(body.sport-basket, body.sport-naruto) :is(
  #screen-home .home-card .btn-gold,
  #screen-end .end-block .btn-gold,
  .end-actions .btn-gold ~ .btn-gold,
  .perk-item .btn-gold,
  .cos-item .btn-gold,
  .offer-block .btn-gold,
  .support-tiers .btn-gold,
  .ev-options:has(.btn-choice.gold ~ .btn-choice.gold) .btn-choice.gold
) {
  background: rgba(212, 171, 42, 0.12);
  background: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--ink);
  border: 1.5px solid var(--edge);
  box-shadow: none; text-shadow: none;
}
:is(body.sport-basket, body.sport-naruto) :is(
  #screen-home .home-card .btn-gold,
  #screen-end .end-block .btn-gold,
  .end-actions .btn-gold ~ .btn-gold,
  .perk-item .btn-gold,
  .cos-item .btn-gold,
  .offer-block .btn-gold,
  .support-tiers .btn-gold,
  .ev-options:has(.btn-choice.gold ~ .btn-choice.gold) .btn-choice.gold
):hover {
  background: rgba(212, 171, 42, 0.24);
  background: color-mix(in srgb, var(--gold) 24%, transparent);
  border-color: var(--gold);
}
/* Sous-titre des choix : sur fond plein il était en encre sombre, il redevient lisible en contour */
:is(body.sport-basket, body.sport-naruto) .ev-options:has(.btn-choice.gold ~ .btn-choice.gold) .btn-choice.gold small { color: var(--gold-pale); }

/* ---------- Création ---------- */
.create-head { text-align: center; padding: 34px 0 18px; }
.create-title { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--ivory); }
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(246, 241, 231, 0.25); transition: background 0.2s; }
.dot.on { background: var(--gold); }
.create-step-n { text-align: center; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-pale); }
.create-grp-h { grid-column: 1 / -1; text-align: left; font-family: var(--serif); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-pale); opacity: 0.8; margin: 8px 2px 2px; padding-bottom: 4px; border-bottom: 1px solid rgba(246, 241, 231, 0.1); }
.create-grp-h:first-child { margin-top: 0; }

.create-list { display: flex; flex-direction: column; gap: 11px; }
.choice-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--paper); backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 10px; padding: 16px 17px;
  cursor: pointer; text-align: left;
  font-family: var(--sans);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
/* Survol de carte de choix : l'état le plus utilisé de la création — il virait au vert bouteille dans les 3 modes */
.choice-card:hover { transform: translateY(-2px); border-color: var(--gold); background: var(--surface-hover); }
.choice-card:active { transform: scale(0.985); }
.cc-icon { font-size: 27px; flex-shrink: 0; }
.cc-body { display: flex; flex-direction: column; gap: 2px; }
.cc-body strong { font-size: 15.5px; color: var(--ivory); font-family: var(--serif); letter-spacing: 0.01em; }
.cc-body small { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

/* ---------- En-tête de jeu ---------- */
.game-header {
  /* Tokenisé : l'entête de carrière restait vert bouteille hors du mode foot */
  background: var(--chrome-panel);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  border: 1px solid var(--edge);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  margin-bottom: 16px;
  position: sticky; top: 10px; z-index: 20;
}
.hd-row1 { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hd-id { display: flex; flex-direction: column; }
.hd-id strong { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ivory); }
.hd-id span { font-size: 12.5px; color: var(--ink-soft); }
.hd-right { display: flex; align-items: center; gap: 7px; }
.hd-exit {
  background: none; border: 1px solid rgba(246, 241, 231, 0.22); border-radius: 10px;
  color: var(--ink-soft); font-size: 17px; line-height: 1;
  padding: 10px 12px; cursor: pointer; min-height: 44px; min-width: 44px;
}
.hd-exit:hover { border-color: var(--gold); color: var(--ink); }
.hd-ovr {
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(160deg, rgba(212, 171, 42, 0.25), rgba(212, 171, 42, 0.06));
  color: var(--ivory);
  border-radius: 10px; padding: 5px 13px; min-width: 56px;
  border: 1px solid var(--gold);
}
.hd-ovr em { font-style: normal; font-size: 10px; letter-spacing: 0.12em; color: var(--gold-pale); }
.hd-ovr strong { font-size: 21px; font-family: var(--serif); }
.hd-row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.hd-club { font-weight: 700; font-size: 14px; }
.hd-club small { color: var(--ink-soft); font-weight: 600; margin-left: 4px; }
.hd-meta { font-size: 12.5px; color: var(--ink-soft); font-weight: 600;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; }
.hd-meta > span { white-space: nowrap; }
.trait { cursor: help; }
.hd-bars { display: flex; gap: 10px; margin-top: 9px; }
.stat { flex: 1; }
.stat span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.bar { height: 6px; background: rgba(246, 241, 231, 0.14); border-radius: 3px; overflow: hidden; margin-top: 3px; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: 3px; transform-origin: left center; transition: transform 0.5s ease; }
.hd-traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.hd-trait { font-size: 11px; font-weight: 700; color: var(--gold-pale); background: rgba(212, 171, 42, 0.14); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }

/* ---------- Cartes de jeu ---------- */
.card-zone { min-height: 320px; }
.game-card {
  background: var(--paper);
  backdrop-filter: blur(10px);
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  border: 1px solid var(--edge);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
  padding: 24px 22px;
  text-align: center;
}
.game-card.pop { animation: cardPop 0.3s ease; }
@keyframes cardPop { from { transform: translateY(14px) scale(0.98); } to { transform: none; } }
/* Carte « bonne nouvelle » : le liseré et le halo verts s'affichaient dans les 3 modes */
.game-card.good { border-color: var(--pos-line); filter: drop-shadow(0 8px 26px var(--pos-glow)); }
.game-card.bad { border-color: var(--red); filter: drop-shadow(0 8px 26px rgba(164, 36, 59, 0.5)); }
/* Moment-clé : fond et halo tokenisés — le dégradé finissait en vert foot (et en indigo pour le ninja) */
.game-card.moment {
  background: linear-gradient(165deg, var(--score-hi), var(--score-lo));
  border: 2px solid var(--gold);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 0 24px color-mix(in srgb, var(--gold) 50%, transparent)) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}

.season-tag {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-pale); background: rgba(212, 171, 42, 0.1);
  border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 15px; margin-bottom: 14px;
}
.ev-icon { font-size: 40px; margin-bottom: 10px; }
.ev-text { font-size: 16.5px; line-height: 1.6; color: var(--ink); margin-bottom: 18px; }
.game-card.moment .ev-text { font-family: var(--serif); font-size: 18px; }

.ev-options { display: flex; flex-direction: column; gap: 10px; }
.btn-choice {
  background: rgba(246, 241, 231, 0.06); color: var(--ivory);
  text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 700;
  border: 1px solid rgba(212, 171, 42, 0.4);
}
.btn-choice:hover { background: rgba(212, 171, 42, 0.16); }
.btn-choice small { display: block; font-weight: 500; font-size: 12px; color: var(--gold-pale); margin-top: 3px; }
.btn-choice.gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--green-deep); }
.btn-choice.gold small { color: var(--on-gold-soft); } /* encre verte foot sur bouton or → encre du mode */

.km-img, .meta-banner {
  height: auto; aspect-ratio: 1376 / 721; /* illustrations entières, jamais recadrées */
  border-radius: 12px;
  background-size: cover; background-position: center;
  border: 1px solid rgba(201, 162, 39, 0.5);
  margin-bottom: 14px;
}
.km-banner {
  font-family: var(--serif); font-weight: 900; font-size: 22px;
  letter-spacing: 0.08em; color: var(--gold-pale); margin-bottom: 12px;
}
.km-banner.good { color: var(--pos); }
.km-banner.bad { color: var(--neg); }
/* Bandeau distinct de l'événement de mi-saison */
.ms-banner {
  display: inline-block; font-family: var(--serif); font-weight: 900;
  /* Bandeau de mi-saison : bleu roi en dur, hors palette en basket et en ninja */
  font-size: 13px; letter-spacing: 0.14em; color: var(--info);
  border: 1px solid var(--info-edge); background: var(--info-bg);
  border-radius: 999px; padding: 5px 14px; margin-bottom: 12px;
}

/* ---------- Pastilles d'effets & OVR ---------- */
.fx-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin: -6px 0 16px; }
.fx-chip {
  font-size: 12.5px; font-weight: 800;
  border-radius: 999px; padding: 5px 12px;
  letter-spacing: 0.02em;
}
/* Puces d'effet : l'élément le plus fréquent du jeu, il était en vert menthe / rose foot partout */
.fx-chip.pos { background: var(--pos-bg); color: var(--pos-soft); border: 1px solid var(--pos-edge); }
.fx-chip.neg { background: rgba(164, 36, 59, 0.2); color: var(--neg-soft); border: 1px solid rgba(164, 36, 59, 0.4); border-color: color-mix(in srgb, var(--neg) 40%, transparent); }
.fx-chip.trait-chip { background: rgba(212, 171, 42, 0.18); color: var(--gold-pale); border: 1px solid var(--gold); }
.ovr-up, .ovr-down { font-style: normal; font-size: 12px; margin-left: 3px; vertical-align: 2px; }
.ovr-up { color: var(--pos); }
.ovr-down { color: var(--neg); }

/* ---------- Bilan de saison ---------- */
.rep-grp { margin-bottom: 14px; }
.rep-grp:last-child { margin-bottom: 4px; }
.rep-h { text-align: left; font-family: var(--serif); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-pale); opacity: 0.85; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid rgba(246, 241, 231, 0.1); }
.rep-grp .report { margin-bottom: 0; }
.report { list-style: none; text-align: left; margin-bottom: 18px; }
.report li {
  padding: 9px 4px; font-size: 14.5px;
  border-bottom: 1px dashed rgba(246, 241, 231, 0.14);
}
.report li:last-child { border-bottom: none; }
.report li.stat-line { font-weight: 700; }
/* Bon / mauvais ne doit pas reposer sur la seule teinte : les deux bruns du
   parchemin se confondent en protanopie. Un filet à gauche porte l'état. */
.report li.ok { color: var(--pos); border-left: 2px solid var(--pos); padding-left: 10px; }
.report li.ko { color: var(--neg); border-left: 2px solid var(--neg); padding-left: 10px; }
.report li.trophy {
  font-weight: 800; color: var(--gold-pale);
  background: linear-gradient(90deg, rgba(212, 171, 42, 0.2), rgba(212, 171, 42, 0.04));
  border: 1px solid var(--line);
  border-radius: 8px; padding-left: 10px;
}
.report li.trophy.big { font-size: 17px; font-family: var(--serif); }

/* ---------- Fin de carrière ---------- */
#screen-end { padding-top: 34px; }
.end-head {
  text-align: center; margin-bottom: 18px;
  padding: 24px 20px 26px;
  /* Panneau de fin tokenisé : c'est l'écran que le joueur partage, il était vert foot en ninja */
  background: radial-gradient(130% 100% at 50% 0%, var(--panel-hi), var(--panel-lo));
  border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: var(--shadow);
}
.end-sub { color: rgba(246, 241, 231, 0.82); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; margin: 8px 0 10px; }
.end-name { font-family: var(--serif); font-weight: 900; font-size: 38px; color: var(--ivory); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.end-title { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gold-pale); margin-top: 6px; }
.end-score {
  display: inline-flex; flex-direction: column; align-items: center;
  margin-top: 16px; padding: 14px 40px;
  background: linear-gradient(165deg, var(--score-hi), var(--score-lo));
  border: 2px solid var(--gold); border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
  filter: drop-shadow(0 0 26px color-mix(in srgb, var(--gold) 45%, transparent)) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}
.end-score span { font-size: 10.5px; letter-spacing: 0.18em; font-weight: 800; color: var(--gold-pale); }
.end-score strong { font-family: var(--serif); font-size: 48px; color: var(--gold); line-height: 1.1; text-shadow: 0 0 26px rgba(212, 171, 42, 0.5); }
.end-story { color: #e7ecdf; font-family: var(--serif); font-style: italic; text-align: center; font-size: 15.5px; line-height: 1.62; max-width: 640px; margin: 16px auto 22px; padding: 0 8px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75); }

.end-block {
  background: var(--paper); backdrop-filter: blur(10px);
  border-radius: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  border: 1px solid var(--edge);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.5));
  padding: 20px; margin-bottom: 16px;
}
.end-block h3 {
  font-family: var(--serif);
  font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-pale); text-align: center; margin-bottom: 13px; font-weight: 700;
}
.pal-table { width: 100%; border-collapse: collapse; }
.pal-table td { padding: 7px 4px; font-size: 14.5px; border-bottom: 1px dashed rgba(246, 241, 231, 0.14); }
.pal-table tr:last-child td { border-bottom: none; }
.pal-table td:last-child { text-align: right; font-weight: 800; font-family: var(--serif); font-size: 17px; color: var(--gold); }
.club-path { margin-top: 12px; font-size: 12.5px; color: var(--ink-soft); text-align: center; line-height: 1.6; }

.end-pct { color: var(--gold-pale); font-size: 13.5px; font-weight: 700; margin-top: 10px; }
.pal-table tr.zero td { color: rgba(242, 236, 221, 0.34); }
.pal-table tr.zero td:last-child { color: rgba(242, 236, 221, 0.3); font-weight: 600; }

.journey { list-style: none; }
.journey li { padding: 6px 4px; font-size: 14px; border-bottom: 1px dashed rgba(246, 241, 231, 0.12); }
.journey li:last-child { border-bottom: none; }
.journey li em { font-style: normal; font-weight: 800; font-family: var(--serif); color: var(--gold-pale); margin-right: 8px; }
.journey li small { color: var(--ink-soft); margin-left: 6px; }

.fo-table { width: 100%; border-collapse: collapse; text-align: center; }
.fo-table th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); padding: 4px; }
.fo-table td { padding: 7px 4px; font-size: 14.5px; border-bottom: 1px dashed rgba(246, 241, 231, 0.14); }
.fo-table td:first-child { text-align: left; color: var(--ink-soft); font-size: 13px; }
.fo-table td.win { font-weight: 800; font-family: var(--serif); font-size: 16px; color: var(--gold-pale); }
.fo-verdict { margin-top: 12px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 15.5px; color: var(--ink); }

.end-regret {
  text-align: center; color: #e9e3d4;
  font-style: italic; font-size: 14px; margin: 18px 6px 4px;
  font-family: var(--serif);
  background: var(--quote-bg); border-radius: 12px; padding: 12px 16px;
}

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.badge {
  background: rgba(212, 171, 42, 0.16); background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid var(--gold);
  color: var(--gold-pale); font-weight: 700; font-size: 13px;
  border-radius: 999px; padding: 6px 13px; cursor: help;
}
.end-actions { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }

/* ---------- Révélation « grand soir » (finales, Ballon d'Or) ---------- */
.reveal-ov {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  /* Voile de révélation tokenisé : une seule déclinaison par mode remplace 4 surcharges */
  background: radial-gradient(1100px 700px at 50% 42%, var(--veil-hi), var(--veil-lo));
  animation: rvIn 0.5s ease;
  cursor: pointer;
  transition: background 0.6s ease, opacity 0.45s ease;
}
.rv-tension {
  color: var(--gold-pale); font-family: var(--serif); font-style: italic;
  font-size: 20px; text-align: center; padding: 0 30px; line-height: 1.5;
  animation: rvPulse 1.15s ease-in-out infinite;
}
.rv-burst { display: none; text-align: center; padding: 0 24px; }
.reveal-ov.phase2 { background: radial-gradient(900px 600px at 50% 45%, var(--burst), var(--veil-lo)); }
.reveal-ov.phase2 .rv-tension { display: none; }
.reveal-ov.phase2 .rv-burst { display: block; animation: rvBurst 0.55s cubic-bezier(0.19, 1, 0.22, 1); }
.rv-burst h2 {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(36px, 9vw, 66px); line-height: 1.1;
  color: var(--gold); letter-spacing: 0.04em;
  text-shadow: 0 0 44px rgba(201, 162, 39, 0.6), 0 2px 0 rgba(0, 0, 0, 0.4);
  text-wrap: balance;
}
.rv-burst p { color: var(--ivory); margin-top: 14px; font-size: 16.5px; font-family: var(--serif); font-style: italic; }
.reveal-ov.lose.phase2 { background: radial-gradient(900px 600px at 50% 45%, rgba(164, 36, 59, 0.22), var(--veil-lo)); }
.reveal-ov.lose .rv-burst h2 { color: #e8798d; text-shadow: 0 0 34px rgba(164, 36, 59, 0.55); }
.reveal-ov.out { opacity: 0; }
@keyframes rvIn { from { transform: scale(1.02); } }
@keyframes rvPulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.035); } }
@keyframes rvBurst { from { transform: scale(0.55); } }

@media (prefers-reduced-motion: reduce) {
  .reveal-ov, .game-card.pop { animation: none; }
  .rc-bars i.run { animation: none; }
  .rv-tension { animation: none; }
  .bar i { transition: none; }
  .screen.active { animation: none; }
}

/* ---------- Aperçu de la carte de partage ---------- */
.share-ov {
  position: fixed; inset: 0; z-index: 220; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 8px calc(12px + env(safe-area-inset-bottom));
  background: var(--veil-share); backdrop-filter: blur(7px);
  opacity: 0; transition: opacity 0.3s ease;
}
.share-ov.in { opacity: 1; } .share-ov.out { opacity: 0; }
.share-inner { display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 460px; width: 100%; }
.share-img {
  width: auto; max-width: 100%; max-height: 70vh; border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65); border: 1px solid var(--edge);
  animation: shPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: zoom-in;
}
/* Zoom : un tap sur la carte l'affiche en grand (scrollable), re-tap pour revenir. */
.share-ov.big { align-items: flex-start; justify-content: flex-start; }
.share-ov.big .share-inner { max-width: none; width: auto; margin: 0 auto; }
.share-ov.big .share-img { max-width: none; max-height: none; width: min(1080px, 178vw); cursor: zoom-out; }
/* En zoom, les actions partaient hors écran : re-tap sur la carte = sortie. */
.share-ov.big :is(.share-hint, .share-actions, .share-close) { display: none; }
@keyframes shPop { from { transform: scale(0.92) translateY(10px); opacity: 0; } }
.share-hint { color: var(--gold-pale); font-size: 13.5px; font-weight: 600; text-align: center; margin: 0; }
.share-actions { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.share-actions .btn { flex: 1 1 auto; min-width: 120px; }
.share-close { background: none; border: none; color: var(--ink-soft); font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 8px 12px; }
.share-close:hover { color: var(--ivory); }
@media (prefers-reduced-motion: reduce) { .share-img { animation: none; } }

/* ---------- Modale ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--veil-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(4px);
}
.modal {
  background: var(--panel-solid); border-radius: 12px;
  border: 1px solid var(--gold);
  padding: 24px 20px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: var(--shadow);
}
.modal-icon { font-size: 34px; margin-bottom: 8px; }
.modal h3 { font-family: var(--serif); font-size: 20px; margin-bottom: 8px; }
.modal p { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 18px; }
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; padding: 12px; font-size: 13.5px; }
.modal-actions .btn-ghost { color: var(--ink-soft); border-color: var(--edge); }

/* ---------- Desktop : pleine largeur AAA ---------- */
@media (min-width: 760px) {
  .screen { max-width: 640px; padding-top: 40px; }
  .ev-text { font-size: 17.5px; }
  .wm-main { font-size: 96px; }
}
@media (min-width: 1060px) {
  /* Accueil : hub en grille 2 colonnes */
  #screen-home { max-width: 1100px; }
  /* align-items: start — sans lui, deux cartes de la même rangée s'étirent à la
     hauteur de la plus haute et laissent un grand vide sous la plus courte. */
  #screen-home.active { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-content: start; align-items: start; }
  #screen-home .home-hero, #screen-home .home-actions, #screen-home .meta-row,
  #screen-home #duel-banner, #screen-home .home-footer { grid-column: 1 / -1; }
  #screen-home .home-actions { flex-direction: row; }
  #screen-home .home-actions .btn { flex: 1; }
  #screen-home .home-card { margin-bottom: 26px; }

  /* Création : choix sur 2 colonnes */
  #screen-create { max-width: 980px; }
  #screen-create .create-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  #screen-create .create-list .name-input, #screen-create .create-list .btn { grid-column: 1 / -1; }
  #screen-create .btn-ghost { max-width: 420px; margin-left: auto; margin-right: auto; }

  /* Jeu : colonne de lecture généreuse */
  #screen-game { max-width: 760px; }
  .ev-text { max-width: 58ch; margin-left: auto; margin-right: auto; }

  /* Fin de carrière : blocs en 2 colonnes */
  #screen-end { max-width: 1100px; }
  /* align-items:start — sinon un bloc court (« LE PARCOURS » d'un ninja resté
     dans la même escouade) s'étire à la hauteur de son voisin et sonne vide. */
  #screen-end.active { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; align-content: start; align-items: start; }
  #screen-end #end-content { display: contents; }
  #screen-end .end-head, #screen-end .end-story, #screen-end .end-regret,
  #screen-end .end-actions, #screen-end .mode-verdict,
  #screen-end .record-banner, #screen-end .secret-block, #screen-end .fallen-note { grid-column: 1 / -1; }
  #screen-end .end-actions { flex-direction: row; }
  #screen-end .end-actions .btn { flex: 1; }
  #screen-end .end-block { margin-bottom: 26px; }

  /* Méta : profils/boutique plus large */
  #screen-meta { max-width: 980px; }
  #screen-meta .perk-item { max-width: 100%; }
  #meta-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-content: start; align-items: start; }
  #meta-content > * { grid-column: auto; }
  #meta-content > .shop-note, #meta-content > .meta-banner, #meta-content > .badge-grid,
  #meta-content > .shop-tabs, #meta-content > .shop-panel,
  /* Les classements sont des LISTES ordonnées : en deux colonnes, le n°2 passait
     à droite du n°1 et l'ordre devenait illisible. Pleine largeur. */
  #meta-content > .lad-tabs, #meta-content > #lad-body, #meta-content > .pt-filters,
  #meta-content > .pantheon-item, #meta-content > .empty-state,
  #meta-content > .bingo-wrap { grid-column: 1 / -1; }
  .lad-tabs { align-self: start; }
  /* Panneau boutique : items sur 2 colonnes en desktop pour ne pas gaspiller la largeur */
  .shop-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-content: start; }
  /* Tout ce qui gere sa propre grille doit tenir la largeur ENTIERE, sinon il
     se retrouve dans une colonne sur deux avec sa propre grille a l'interieur :
     les cartes tombaient au quart de la largeur et le texte sortait un mot par
     ligne, avec le bouton par-dessus. */
  .shop-panel > .shop-h3, .shop-panel > .cos-grid,
  .shop-panel > .collec-grid, .shop-panel > .shop-note { grid-column: 1 / -1; }
  .shop-panel[data-st="jt"] > div { grid-column: 1 / -1; }
  #meta-content .end-block { margin-bottom: 22px; }
}


/* Onglets boutique */
.shop-tabs { margin-bottom: 14px; }
.shop-tabs .lad-tab { font-size: 12.5px; padding: 9px 5px; }

/* ---------- Monétisation ---------- */
.shop-h3 {
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-pale); text-align: center; margin: 22px 0 12px; font-weight: 700;
}
.offer-block {
  background: var(--paper); backdrop-filter: blur(8px);
  border: 1px solid var(--gold); border-radius: 10px;
  padding: 15px; margin: 10px 0; text-align: center;
}
.offer-block strong { font-family: var(--serif); font-size: 16px; color: var(--gold-pale); display: block; margin-bottom: 5px; }
.offer-block p { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; line-height: 1.5; }
.offer-block.founder { box-shadow: 0 0 34px rgba(212, 171, 42, 0.25); }
#eur-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#eur-list .offer-block { flex: 1 1 100%; }
.joker-btn { margin: 14px auto 0; max-width: 330px; font-size: 12.5px; opacity: 1; color: var(--gold-pale); border-color: rgba(212, 171, 42, 0.4); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.joker-btn:hover { background: rgba(212, 171, 42, 0.12); background: color-mix(in srgb, var(--gold) 12%, transparent); }
#btn-ad-daily { margin: 10px auto 0; font-size: 12px; }
.quest-earned .btn-slim { margin-left: 8px; vertical-align: 1px; }
.frame-select {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: center;
  margin: 4px 0 14px; grid-column: 1 / -1;
}
.frame-select span { color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
.frame-chip {
  background: rgba(246, 241, 231, 0.07); border: 1px solid var(--line); color: var(--ivory);
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.frame-chip.on { background: rgba(212, 171, 42, 0.25); background: color-mix(in srgb, var(--gold) 25%, transparent); border-color: var(--gold); color: var(--gold-pale); }
.frame-chip:hover { border-color: var(--gold); color: var(--gold-pale); }

/* Aperçu Fondateur : le nom doré au classement */
.preview-label { font-size: 12px; color: var(--ink-soft); margin: 10px 0 6px; font-weight: 700; }
.flair-preview { margin-bottom: 12px; }
.flair-preview .pantheon-item { margin-bottom: 5px; padding: 8px 12px; }
.pantheon-item.is-founder { border-color: var(--gold); box-shadow: 0 0 22px rgba(212, 171, 42, 0.3); }
.founder-name {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(212, 171, 42, 0.55);
  letter-spacing: 0.02em;
}

/* ---------- Recap « Wrapped » ---------- */
.recap-ov {
  /* 215 : au-dessus de la cinématique (210), sous le partage (220). */
  position: fixed; inset: 0; z-index: 215;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(900px 700px at 50% 40%, var(--veil-hi), var(--veil-lo));
  cursor: pointer; padding: 60px 26px 40px;
  transition: opacity 0.4s ease;
}
.recap-ov.out { opacity: 0; }
.rc-bars {
  position: absolute; top: 18px; left: 20px; right: 20px;
  display: flex; gap: 6px;
}
.rc-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(246, 241, 231, 0.22); }
.rc-bars i.done { background: var(--gold); }
.rc-bars i.run { background: var(--gold-pale); animation: rvPulse 1.1s ease-in-out infinite; }
.rc-slide { text-align: center; max-width: 560px; }
.rc-slide.pop { animation: rvBurst 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
.rc-icon { font-size: 56px; margin-bottom: 14px; }
.rc-big {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(56px, 16vw, 110px); line-height: 1;
  color: var(--ivory);
}
.rc-big.gold { color: var(--gold); text-shadow: 0 0 46px rgba(212, 171, 42, 0.6); }
.rc-label {
  font-family: var(--serif); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-pale); font-size: 14px; margin-top: 12px;
}
.rc-sub { color: var(--ink); font-size: 17px; margin-top: 16px; line-height: 1.55; font-family: var(--serif); font-style: italic; }
.rc-skip { position: absolute; bottom: 16px; color: rgba(246, 241, 231, 0.62); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.rc-close { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid rgba(246, 241, 231, 0.3); border-radius: 999px; padding: 6px 14px; color: rgba(246, 241, 231, 0.6); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
/* Les barres du récap s'arrêtent AVANT le bouton Passer (fond transparent). */
.rc-bars { right: 118px !important; }
.rc-replay { margin: 6px auto 12px; grid-column: 1 / -1; }
.q-link { cursor: pointer; }
/* ---------- Registre du ninja ---------- */
.xp-rank { text-align: center; font-family: var(--serif); font-weight: 800; font-size: 18px;
  color: var(--gold-pale); margin: 0 0 10px; }
.xp-bar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(26, 22, 17, 0.14);
  border: 1px solid var(--line); }
.xp-bar i { display: block; height: 100%; width: 100%; transform-origin: left center; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, #ffd9a8), var(--gold));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.nj-nuit body.sport-naruto .xp-bar { background: rgba(239, 231, 213, 0.12); }
.xp-up { color: var(--gold-pale); font-weight: 700; }
.acc-rank { display: block; color: var(--gold-pale); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
/* Ces trois aptitudes décident des échanges en combat : on montre le chiffre. */
.stat-v { float: right; font-weight: 800; font-family: var(--sans); opacity: 0.9; letter-spacing: 0; }
.q-link:hover, .q-link:focus-visible { color: var(--gold-pale); text-decoration: underline; }
#btn-daily-review, #war-change { margin: 10px auto 0; }
.player-count { text-align: center; margin-top: 10px; font-family: var(--sans); font-size: 13.5px;
  font-weight: 700; letter-spacing: 0.06em; color: var(--gold-pale); }
#btn-duel-last { text-transform: none; letter-spacing: 0; }
/* ---------- Guerre des Villages ---------- */
.war-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.war-vil { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 13px;
  border-radius: 999px; border: 1px solid var(--edge); background: none; color: var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.war-vil:hover { border-color: var(--gold); background: rgba(226, 105, 14, 0.08); }
.war-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 10px; margin-top: 6px;
  border: 1px solid rgba(26, 22, 17, 0.12); font-size: 14.5px; }
.war-row.mine { border-color: var(--gold); background: rgba(226, 105, 14, 0.08); }
.war-row small { color: var(--ink-soft); font-size: 12px; }
.war-row .war-pts { margin-left: auto; font-weight: 900; font-family: var(--sans); }
.war-rank { width: 30px; text-align: center; font-weight: 800; }
.war-mine-line { margin-top: 10px; }
/* ---------- Bingo Book (écran dédié, grandes cases) ---------- */
.bingo-wrap { width: 100%; }
.bingo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; margin: 12px 0 18px; }
@media (min-width: 900px) { .bingo-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); } }
.bingo-cell { border: 1px solid var(--edge); border-radius: 14px; padding: 12px; text-align: center;
  display: flex; flex-direction: column; gap: 7px; align-items: center; background: rgba(0, 0, 0, 0.04); }
.bingo-cell strong { font-family: var(--serif); font-size: 17px; }
.bingo-cell small { color: var(--ink-soft); font-size: 13px; letter-spacing: 0.03em; }
.bingo-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 9px; }
.bingo-cell.beaten { border-color: var(--gold); }
.bingo-cell.deadly { border-color: var(--neg); }
.bingo-cell.locked { opacity: 0.75; }
.bingo-cell.locked strong { letter-spacing: 0.2em; }
.bingo-cell.locked .bingo-img { filter: brightness(0.07) grayscale(1); }
.fallen-row .pt-rank { color: var(--neg); font-weight: 700; }
.fallen-note { color: var(--neg); }
.nj-nuit body.sport-naruto .war-row { border-color: rgba(239, 231, 213, 0.16); }
.nj-nuit body.sport-naruto .bingo-cell { background: rgba(255, 255, 255, 0.05); }
/* Nuit : brightness(0.07) rendait la silhouette indiscernable du fond charbon. */
.nj-nuit body.sport-naruto .bingo-cell.locked .bingo-img { filter: brightness(0.28) grayscale(1) contrast(1.1); opacity: 0.55; }
/* Nuit : la bande d'encre des combats disparaissait (1,07:1 sur la carte nuit). */
.nj-nuit body.sport-naruto .boss-head { background: #0c0906; border: 1px solid rgba(239, 231, 213, 0.18); }
/* ---------- Secrets 秘 ---------- */
.nj-secret-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 16px); z-index: 230;
  pointer-events: none;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px;
  background: #fffaef; border: 2px solid var(--neg); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
  opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; max-width: min(430px, 92vw); }
.nj-secret-toast.in { opacity: 1; transform: translate(-50%, 0); }
/* Seul le ✕ capte les clics : le reste laisse passer les taps vers le jeu. */
.nj-secret-toast .st-x { pointer-events: auto; position: absolute; top: 6px; right: 8px;
  background: none; border: none; cursor: pointer; padding: 6px 8px; line-height: 1;
  font-size: 15px; color: var(--ink-soft); }
.nj-secret-toast .st-x:hover { color: var(--neg); }
.nj-secret-toast .st-b { padding-right: 14px; }
.nj-secret-toast .st-k { font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; font-size: 30px; font-weight: 700;
  color: #fffaef; background: var(--neg); width: 46px; height: 46px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; transform: rotate(-6deg); flex: 0 0 auto; }
.nj-secret-toast strong { display: block; font-family: var(--sans); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--neg); }
.nj-secret-toast small { color: #1a1611; font-size: 14px; line-height: 1.4; }
.nj-nuit .nj-secret-toast { background: #241f19; }
.nj-nuit .nj-secret-toast small { color: var(--ivory); }
.secret-block h3 { color: var(--neg); }
.secret-list { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.secret-item { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); padding: 7px 0; border-bottom: 1px solid rgba(26, 22, 17, 0.1); }
.secret-item strong { color: var(--neg); }
.nj-nuit .secret-item { border-bottom-color: rgba(239, 231, 213, 0.12); }
.nj-secret-toast .st-a { display: block; margin-top: 5px; font-style: normal; font-size: 12.5px; line-height: 1.45; color: #55503f; }
.nj-nuit .nj-secret-toast .st-a { color: #c9bda6; }
/* Effets d'easter eggs */
.px-dash { animation: pxDash 1.2s ease-in forwards; }
@keyframes pxDash { 30% { transform: translateX(0); } 100% { transform: translateX(120vw); } }
.wm-spin { animation: wmSpin 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes wmSpin { to { transform: rotate(360deg); } }
.px-clone { position: absolute; opacity: 0.8; animation: pxClone 1.5s ease-out forwards; transform: translateX(calc(var(--ci) * -46px)); }
@keyframes pxClone { to { opacity: 0; transform: translateX(calc(var(--ci) * -46px)) translateY(-22px); } }
/* Un filter sur <html> déplaçait tous les position:fixed (bloc englobant =
   document) : l'inversion passe par un calque en blend difference. */
html.nj-kai::before { content: ""; position: fixed; inset: 0; z-index: 999;
  background: #fff; mix-blend-mode: difference; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .px-dash, .wm-spin, .px-clone { animation: none; } html.nj-kai::before { content: none; } }

/* ---------- Sliding Doors ---------- */
.sliding-block {
  background: rgba(246, 241, 231, 0.05);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 15px; margin-bottom: 12px; text-align: left;
}
.sliding-block h4 { font-family: var(--serif); letter-spacing: 0.18em; font-size: 12.5px; color: var(--gold-pale); margin-bottom: 8px; }
.sd-line { font-size: 13.5px; color: var(--ink); margin: 5px 0; line-height: 1.5; }
.sd-line.gold { color: var(--gold-pale); font-weight: 700; }

/* ---------- Ligues privées ---------- */
.lg-code { color: var(--gold); letter-spacing: 0.18em; font-family: var(--sans); font-weight: 800; }
.lg-span { grid-column: 1 / -1; }
#lg-name, #lg-code { margin-bottom: 10px; }

#create-banner { max-width: 980px; margin: 0 auto 14px; }
#create-banner .meta-banner { margin-bottom: 0; }
.cc-img {
  display: block; height: 110px;
  background-size: cover; background-position: center 28%;
  border-radius: 9px 9px 0 0; margin: -16px -17px 12px;
  width: calc(100% + 34px);
  border-bottom: 1px solid var(--line);
}
.pos-card { flex-wrap: wrap; }
.pos-card .cc-img {
  flex: 1 1 100%;
  height: auto;
  aspect-ratio: 1376 / 721; /* ratio natif des illustrations : image entière, zéro recadrage */
  background-position: center;
}

/* ============================================================
   THÈME BASKET — « la salle US la nuit » : parquet sombre,
   orange ballon incandescent, ambre chaud. Zéro vert : le vert
   est la signature du foot.
   ============================================================ */
body.sport-basket {
  --paper: rgba(27, 13, 5, 0.88);
  --panel-solid: #1a0d05;
  --ink: #f5ead9;
  --ink-soft: #c9b39d;
  --gold: #f28b30;
  --gold-deep: #c96a1a;
  --gold-ink: #a05515;
  --gold-pale: #ffc08a;
  --green: #3a1d0c;
  --green-deep: #170b04;
  --line: rgba(242, 139, 48, 0.26);
  --edge: rgba(242, 139, 48, 0.48);
  /* Déclinaison des jetons d'état/surface : remplace une douzaine de surcharges règle par règle */
  --text-mute: #d8c2ac;
  --surface-hover: rgba(52, 26, 10, 0.9);
  --field-bg: rgba(20, 10, 4, 0.7);
  --field-bg-strong: rgba(20, 10, 4, 0.8);
  --chrome-bg: rgba(26, 15, 7, 0.85);
  --chrome-panel: rgba(26, 15, 7, 0.94);
  --panel-hi: rgba(32, 15, 6, 0.82);
  --panel-lo: rgba(16, 9, 5, 0.95);
  --score-hi: rgba(33, 16, 4, 0.95);
  --score-lo: rgba(27, 13, 5, 0.92);
  --quote-bg: rgba(45, 24, 10, 0.6);
  --veil-modal: rgba(42, 24, 10, 0.75);
  --veil-share: rgba(12, 6, 2, 0.9);
  --veil-hi: rgba(58, 29, 12, 0.97);
  --veil-lo: rgba(10, 5, 2, 0.995);
  --burst: rgba(242, 139, 48, 0.32);
  --cine-hi: rgba(30, 15, 6, 0.975);
  --cine-lo: rgba(10, 5, 2, 0.995);
  /* Positif = ambre clair (jamais de vert : c'est la signature du foot) */
  --pos: #ffb37c;
  --pos-soft: #ffc79b;
  --pos-bg: rgba(150, 80, 20, 0.24);
  --pos-edge: rgba(255, 179, 124, 0.4);
  --pos-line: #e08a3c;
  --pos-deep: #b05f18;
  --pos-glow: rgba(200, 110, 30, 0.5);
  --taunt: #f0c49a;
  --taunt-line: rgba(242, 139, 48, 0.5);
  --info: #e8b98a;
  --info-bg: rgba(150, 90, 40, 0.18);
  --info-edge: rgba(232, 185, 138, 0.45);
  --on-gold-soft: rgba(28, 13, 3, 0.95);
}
body.sport-basket::before {
  /* Fond BASKET : salle de nuit — rampe de projecteurs, réverbération sur le parquet */
  background: #150c06 url("../assets/img/bg-basket.svg?i=2") center bottom / cover no-repeat;
}
body.sport-basket .btn-gold {
  background: linear-gradient(160deg, #ffab52 0%, #f28b30 45%, #c96a1a 100%);
  border-color: rgba(255, 205, 155, 0.5);
  box-shadow: 0 10px 30px rgba(242, 139, 48, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #1c0d03;
}
body.sport-basket .card-ribbon { background: linear-gradient(90deg, rgba(242, 139, 48, 0.22), rgba(242, 139, 48, 0.02) 70%); }
body.sport-basket .season-tag { background: rgba(242, 139, 48, 0.12); color: var(--gold-pale); border-color: var(--line); }
body.sport-basket .hd-ovr { background: linear-gradient(160deg, rgba(242, 139, 48, 0.3), rgba(242, 139, 48, 0.08)); }
/* moment-clé, score de fin, panneau de fin : désormais portés par --score-* / --panel-* */
body.sport-basket .report li.trophy { background: linear-gradient(90deg, rgba(242, 139, 48, 0.22), rgba(242, 139, 48, 0.05)); border-color: var(--line); }
body.sport-basket .fx-chip.trait-chip { background: rgba(242, 139, 48, 0.2); }
body.sport-basket .wordmark::after { background: linear-gradient(90deg, transparent, #f28b30, transparent); }
body.sport-basket .laurel { color: #f28b30; }
body.sport-basket .wm-top { color: #f28b30; }
body.sport-basket .wm-top::before { background: linear-gradient(90deg, transparent, #f28b30); }
body.sport-basket .wm-top::after { background: linear-gradient(90deg, #f28b30, transparent); }
body.sport-basket .wm-main { text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 14px 44px rgba(242, 139, 48, 0.25); }
body.sport-basket .brand-emblem { filter: drop-shadow(0 4px 14px rgba(242, 139, 48, 0.4)) hue-rotate(-14deg) saturate(1.4); }
body.sport-basket .tagline em { color: var(--gold-pale); }
body.sport-basket .reveal-ov.goldwin.phase2 {
  background:
    radial-gradient(900px 600px at 50% 45%, rgba(242, 139, 48, 0.3), rgba(10, 5, 2, 0.92)),
    url("../assets/img/bk-end-gala.jpg?i=2") center / cover no-repeat;
}
body.sport-basket .meta-banner.gala { background-image: url("../assets/img/bk-end-gala.jpg?i=2"), url("../assets/img/end-gala.jpg"); }
body.sport-basket .sport-tab.on { background: rgba(242, 139, 48, 0.22); box-shadow: 0 0 22px rgba(242, 139, 48, 0.3); }
/* quêtes faites / lignes positives / bandeau « bonne nouvelle » : portés par --pos */

/* ================= THÈME NARUTO (nuit chaude · braise orange) ================= */
/* ============================================================
   THÈME NARUTO — « rouleau et sceau » : parchemin, encre, un sceau.
   Renversement complet par rapport aux deux autres modes : le papier est
   CLAIR et l'encre SOMBRE. Trois règles tiennent tout le mode :
     · le papier porte, l'encre écrit ;
     · l'ORANGE est la couleur de l'action — bouton, état actif, valeur qui monte ;
     · le ROUGE est rare — sceau, trophée, danger. S'il est partout, il ne dit rien.
   ============================================================ */
body.sport-naruto {
  --paper: rgba(247, 241, 226, 0.94);
  --panel-solid: #f7f1e2;
  --ink: #1a1611;
  --ink-soft: #4a4136;
  /* --ivory est l'encre CLAIRE globale (26 usages) : sur papier elle doit foncer. */
  --ivory: #1a1611;
  /* Accent = action. Le rouge du sceau vit dans --neg, pas ici. */
  --gold: #e2690e;
  --gold-deep: #b8520a;
  --gold-ink: #2a1000;
  --gold-pale: #7a3f0b;
  --green: #e6dcc6;
  --green-deep: #d8ccb2;
  --line: rgba(26, 22, 17, 0.2);
  --edge: rgba(26, 22, 17, 0.42);
  /* Déclinaison des jetons : tout ce qui était « verre sombre » devient papier. */
  --text-mute: #5b5245;
  --surface-hover: #fffaef;
  --field-bg: #fffaef;
  --field-bg-strong: #fffdf8;
  --chrome-bg: #1a1611;
  --chrome-panel: #1a1611;
  --panel-hi: #fffaef;
  --panel-lo: #f2ead8;
  --score-hi: #fffdf8;
  --score-lo: #f2ead8;
  --quote-bg: rgba(26, 22, 17, 0.06);
  --veil-modal: rgba(26, 22, 17, 0.62);
  --veil-share: rgba(26, 22, 17, 0.72);
  --veil-hi: rgba(239, 231, 213, 0.985);
  --veil-lo: rgba(222, 211, 188, 0.995);
  --burst: rgba(226, 105, 14, 0.28);
  --cine-hi: rgba(30, 25, 18, 0.975);
  --cine-lo: rgba(14, 11, 8, 0.995);
  /* Positif = orange sourd sur papier ; négatif = le rouge du sceau. */
  --pos: #a85410;
  --pos-soft: #8a4310;
  --pos-bg: rgba(226, 105, 14, 0.13);
  --pos-edge: rgba(226, 105, 14, 0.4);
  --pos-line: #e2690e;
  --pos-deep: #8a4310;
  --pos-glow: rgba(226, 105, 14, 0.3);
  --neg: #b02a1f;
  --neg-soft: #8e2118;
  --taunt: #8e4a2a;
  --taunt-line: rgba(176, 42, 31, 0.45);
  --info: #6d5a38;
  --info-bg: rgba(140, 105, 40, 0.12);
  --info-edge: rgba(109, 90, 56, 0.4);
  --on-gold-soft: rgba(255, 250, 239, 0.95);
  /* Jetons hérités du foot jamais recadrés : ombre charbon et rose sur parchemin. */
  --red: #b02a1f;
  --shadow: 0 10px 26px rgba(58, 42, 20, 0.18);
}
/* Panneaux verre nuit chaude, halo braise sur les bords */
/* Panneaux : des feuilles posees sur le parchemin, pas du verre sombre. */
body.sport-naruto .home-card,
body.sport-naruto .game-card,
body.sport-naruto .meta-btn,
body.sport-naruto .intro-card {
  background: #fffaef;
  border-color: rgba(26, 22, 17, 0.18);
  box-shadow: 0 1px 0 rgba(26, 22, 17, 0.1), 0 12px 26px -18px rgba(26, 22, 17, 0.7);
}
body.sport-naruto::before {
  /* Fond : parchemin. Le grain n'est pas decoratif — un aplat clair fait
     « page vide », le grain lui donne de la matiere. Aucun objet a reconnaitre :
     trois tentatives de village ont echoue parce qu'un fond est vu derriere
     l'interface et recadre, donc tout ce qui doit etre reconnu peut mal l'etre. */
  background: #efe7d5 url("../assets/img/grain-papier.svg?i=1") repeat;
  background-size: 200px 200px;
}
/* CTA signature : dégradé braise → flamme (unique à Naruto) */
/* CTA principal : de la MATIÈRE (braise chaude en haut, ocre en bas, arête de
   lumière) — l'aplat orange pur était le seul élément plat de la page. */
body.sport-naruto .btn-gold {
  background: linear-gradient(178deg, color-mix(in srgb, var(--gold) 88%, #ffd9a8) 0%, var(--gold) 52%, color-mix(in srgb, var(--gold) 84%, #7a2f00) 100%);
  color: var(--gold-ink); text-shadow: none;
  border: 1px solid rgba(26, 22, 17, 0.28);
  box-shadow: 0 10px 26px -14px rgba(184, 82, 10, 0.95), inset 0 1px 0 rgba(255, 240, 214, 0.55);
}
body.sport-naruto .btn-gold:hover { box-shadow: 0 14px 30px -14px rgba(184, 82, 10, 1), inset 0 1px 0 rgba(255, 240, 214, 0.7); }
body.sport-naruto .btn-primary {
  background: #fffaef;
  color: var(--ink);
  border: 1.5px solid rgba(26, 22, 17, 0.3);
  box-shadow: none;
}
body.sport-naruto .btn-primary:hover { background: #fff; border-color: var(--gold); }
body.sport-naruto .btn-ghost { color: var(--ink-soft); border-color: rgba(26, 22, 17, 0.24); }
body.sport-naruto .btn-daily { background: #fffaef; color: var(--gold-pale); border: 1.5px solid var(--gold); }
body.sport-naruto .card-ribbon { background: rgba(226, 105, 14, 0.12); color: var(--gold-pale); }
body.sport-naruto .season-tag { background: transparent; color: var(--text-mute); border-color: var(--line); }
/* Le sceau 完 est posé en absolu dans la carte : sans réserve à droite, il
   retombait sur la fin du titre du rapport en écran étroit. */
body.sport-naruto .game-card > .season-tag { padding-right: 56px; }
body.sport-naruto .hd-ovr { background: var(--gold); color: var(--gold-ink); }
/* moment-clé : le dégradé finissait en indigo (ancienne DA) → porté par --score-*, halo braise via le filtre commun */
body.sport-naruto .report li.trophy { background: rgba(176, 42, 31, 0.09); border-color: rgba(176, 42, 31, 0.3); color: var(--neg); }
body.sport-naruto .fx-chip.trait-chip { background: rgba(226, 105, 14, 0.14); }
/* Wordmark : filet braise, du sombre au clair */
body.sport-naruto .wordmark::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
body.sport-naruto .laurel { color: var(--gold); }
body.sport-naruto .wm-top { color: var(--text-mute); }
body.sport-naruto .wm-top::before { background: linear-gradient(90deg, transparent, rgba(26, 22, 17, 0.4)); }
body.sport-naruto .wm-top::after { background: linear-gradient(90deg, rgba(26, 22, 17, 0.4), transparent); }
/* Le wordmark était en blanc bleuté #f2f0ff : il tirait au lilas à côté de l'orange */
body.sport-naruto .wm-main { color: var(--ink); text-shadow: none; }
body.sport-naruto .brand-emblem { filter: drop-shadow(0 4px 12px rgba(26, 22, 17, 0.25)); }
/* tagline, voiles de révélation/recap, quêtes faites, lignes positives : portés par --text-mute, --veil-* et --pos */
body.sport-naruto .tagline em { color: var(--gold-pale); }
body.sport-naruto .sport-tab { background: #fffaef; color: var(--ink-soft); border-color: rgba(26, 22, 17, 0.2); }
body.sport-naruto .sport-tab.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); box-shadow: none; }
/* Pastille de rang : l'encre était un indigo #12102a hérité de l'ancienne DA */
body.sport-naruto .hd-rank { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; padding: 2px 9px; border-radius: 999px; margin-left: 9px; color: var(--gold-ink); background: var(--rc, #e2690e); box-shadow: none; text-shadow: none; }
.ev-death { margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 700; font-size: 15px; line-height: 1.5; color: #ffb3b3; background: linear-gradient(160deg, rgba(164, 36, 59, 0.28), rgba(60, 12, 20, 0.5)); border: 1px solid rgba(210, 74, 99, 0.5); }

/* ---------- Bouton retour flottant (création + écrans méta) ---------- */
.back-fab {
  display: none;
  position: fixed; top: 14px; left: 14px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  align-items: center; justify-content: center;
  /* Le cercle du FAB était vert foncé en dur : un rond vert sur toutes les pages ninja */
  background: var(--chrome-bg); color: var(--ivory);
  border: 1px solid var(--edge);
  font-size: 20px; cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.back-fab:hover { background: rgba(212, 171, 42, 0.25); background: color-mix(in srgb, var(--gold) 25%, transparent); }
/* En naruto --ivory est l'encre SOMBRE : la fleche disparaissait dans le rond.
   Rond parchemin, fleche a l'encre, filet visible. */
body.sport-naruto .back-fab {
  background: rgba(247, 241, 226, .95); color: #1a1611;
  border: 1px solid rgba(26, 22, 17, .35);
  box-shadow: 0 6px 18px rgba(26, 22, 17, .25);
}
body:has(#screen-create.active) .back-fab,
body:has(#screen-meta.active) .back-fab { display: flex; }
body[data-screen="screen-create"] .back-fab,
body[data-screen="screen-meta"] .back-fab { display: flex; }

/* Images des offres et bannière gala */
.offer-img {
  height: auto; aspect-ratio: 1376 / 721; /* image entière */
  border-radius: 8px;
  background-size: cover; background-position: center;
  border: 1px solid var(--line); margin-bottom: 10px;
}
.meta-banner.gala { background-image: url("../assets/img/end-gala.jpg"); grid-column: 1 / -1; }
/* Ninja : pas d'illustration → on masque le cadre au lieu de laisser un rectangle vide */
body.sport-naruto :is(.km-img, .offer-img, .meta-banner):not(.gala) { display: none; }
/* Mode ninja : pas de trophée de football sur le bilan de fin de voie */
body.sport-naruto .meta-banner.gala { display: none; }
.reveal-ov.goldwin.phase2 {
  background:
    radial-gradient(900px 600px at 50% 45%, rgba(201, 162, 39, 0.25), rgba(4, 12, 8, 0.9)),
    url("../assets/img/end-gala.jpg") center / cover no-repeat;
}
/* Mode ninja : aucune photo de football, on garde la lumière seule */
body.sport-naruto .reveal-ov.goldwin.phase2 {
  background: radial-gradient(900px 600px at 50% 45%, rgba(255, 138, 61, 0.28), rgba(10, 7, 5, 0.92));
}

/* ---------- Focus clavier visible (AA) ---------- */
:is(button, input, select, textarea, a, [tabindex]):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
/* État désactivé : il n'existait pas — un bouton mort restait cliquable à l'œil. */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ---------- Compte mis en avant + seconde carrière ---------- */
.acc-banner { border: 1px solid rgba(212, 171, 42, 0.45); }
.acc-glow { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 10px; transition: outline-color 0.4s; }
.choice-sub { display: block; font-size: 12.5px; font-weight: 400; opacity: 0.75; margin-top: 3px; letter-spacing: 0; text-transform: none; }

/* Flair fondateur : logo + liste des avantages du pack */
.flair-logo { width: 16px; height: 16px; border-radius: 4px; vertical-align: -3px; margin-right: 5px; }
.founder-list { list-style: none; text-align: left; margin: 10px 0 6px; }
.founder-list li { padding: 6px 0 6px 24px; position: relative; font-size: 13.5px; border-bottom: 1px dashed rgba(246, 241, 231, 0.1); }
.founder-list li:last-child { border-bottom: none; }
.founder-list li::before { content: "✦"; position: absolute; left: 4px; color: var(--gold); }

/* ---------- Héros latéraux : retirés (rendu épuré, aucun sport n'en affiche) ---------- */
.side-hero { display: none !important; }

/* Fondateur : l'or doit SE VOIR (classements, ligues, aperçu boutique) */
.founder-name { color: #ffd76a !important; font-weight: 900; letter-spacing: 0.02em; text-shadow: 0 0 12px rgba(255, 205, 80, 0.55), 0 1px 0 rgba(0, 0, 0, 0.4); }
.pantheon-item.is-founder { border: 1px solid rgba(255, 205, 80, 0.6); box-shadow: inset 0 0 16px rgba(255, 205, 80, 0.14), 0 0 10px rgba(255, 205, 80, 0.14); }

/* ---------- Amis + onglets du Classement ---------- */
.lad-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.lad-tab { flex: 1; background: rgba(246, 241, 231, 0.07); color: var(--ink-soft); border: 1px solid rgba(246, 241, 231, 0.18); border-radius: 999px; padding: 10px 8px; font-family: var(--sans); font-weight: 800; font-size: 14px; cursor: pointer; }
.lad-tab.on { background: rgba(212, 171, 42, 0.2); color: var(--gold-pale); border-color: var(--gold); }
.fr-add { display: flex; gap: 8px; margin: 6px 0 4px; align-items: stretch; }
.fr-add .name-input { flex: 1 1 auto; min-width: 0; margin: 0; }
.fr-add .btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
.fr-add-wrap { position: relative; }
.fr-sugg { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: #1b1206; border: 1px solid rgba(212, 171, 42, 0.42); border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); max-height: 320px; overflow-y: auto; }
.fr-sugg.hidden { display: none; }
.fr-sugg-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 11px 14px;
  background: none; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--ink); font-family: var(--sans); font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.fr-sugg-item:last-child { border-bottom: none; }
.fr-sugg-item:hover { background: rgba(212, 171, 42, 0.15); }
body.sport-basket .fr-sugg { border-color: rgba(242, 139, 48, 0.45); }
body.sport-basket .fr-sugg-item:hover { background: rgba(242, 139, 48, 0.16); }
.pantheon-item.is-you { border: 1px solid rgba(212, 171, 42, 0.5); background: rgba(212, 171, 42, 0.08); }
.pantheon-item { position: relative; }
.fr-del { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(246, 241, 231, 0.25); background: rgba(0, 0, 0, 0.25); color: var(--ink-soft); font-size: 16px; line-height: 1; cursor: pointer; }
.fr-del:hover { background: var(--red); color: #fff; border-color: var(--red); }
/* La marge de 30 px réservait la place du bouton × — qui n'existe que dans
   la liste Amis. Ailleurs (Monde, Pierre), le score s'aligne au bord. */
.pantheon-item:has(.fr-del) .pt-score { margin-right: 30px; }
body.sport-basket .lad-tab.on { background: rgba(242, 139, 48, 0.22); color: var(--gold-pale); border-color: #f28b30; }

/* ---------- Bandeau d'événement : traitement typographique « chapitre » ---------- */
.ev-banner {
  position: relative; height: 116px; margin: -4px -4px 15px; border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 -38px 48px rgba(0, 0, 0, 0.42);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
/* reflet d'accent en haut + grain sombre en bas ; l'accent suit le mode (il était doré en dur) */
.ev-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 0%, rgba(212, 171, 42, 0.16), transparent 62%);
  background: radial-gradient(130% 100% at 50% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%);
}
.ev-emoji {
  position: absolute; right: 12px; bottom: -10px; font-size: 76px; line-height: 1;
  opacity: 0.15; filter: grayscale(0.25); transform: rotate(-6deg);
}
.ev-emoji:has(.ic) { right: -14px; bottom: -22px; opacity: 0.2; }
.ev-cat {
  position: relative; z-index: 1; font-family: var(--serif); font-weight: 900;
  font-size: clamp(21px, 5.6vw, 30px); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-pale); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.card-zone .ev-icon { display: none; }
@media (max-width: 430px) { .ev-banner { height: 100px; } }

/* ---------- Signature de carrière ---------- */
.end-sig { margin: 4px 0 10px; }
.end-sig .sig-name {
  display: inline-block; font-family: var(--serif); font-weight: 800; font-size: 19px;
  color: var(--gold-pale); letter-spacing: 0.02em;
  padding: 5px 16px; border: 1px solid var(--edge); border-radius: 999px;
  background: rgba(212, 171, 42, 0.1); background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.end-sig .sig-move { display: block; margin-top: 7px; color: var(--ink-soft); font-style: italic; font-size: 14px; }
body.sport-basket .end-sig .sig-name { border-color: #f28b30; background: rgba(242, 139, 48, 0.12); }

/* ---------- Choix étiquetés (EGO / RISQUÉ / COLLECTIF…) ---------- */
.opt-tag { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 999px; margin-right: 9px; vertical-align: 1px; color: var(--tc); border: 1px solid var(--tc); }

/* ---------- Avatar : créateur + cosmétiques ---------- */
/* Portrait de profil : vrai cercle qui RECADRE le SVG (sinon on voit tout le buste décentré) */
.av-svg-big, .avatar-big.av-svg-big { display: inline-flex; width: 120px; height: 120px; overflow: hidden; }
.av-svg-big svg { width: 100%; height: 100%; }
.avatar-mini.av-svg { display: inline-flex; width: 22px; height: 22px; overflow: hidden; vertical-align: -6px; }
.avatar-mini.av-svg svg { width: 100%; height: 100%; }
.av-editor { margin: 12px 0 6px; text-align: left; }
.av-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(246,241,231,.1); flex-wrap: wrap; }
.av-row:last-child { border-bottom: none; }
.av-row > label { flex: 0 0 62px; font-size: 12px; font-weight: 700; color: var(--gold-pale); text-transform: uppercase; letter-spacing: .05em; }
/* gap élargi sur la rangée de pastilles : leurs zones tactiles de 44 px se
   chevaucheraient avec l'espacement d'origine. */
.sw-row, .opt-row { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; }
.sw-row { gap: 18px; align-items: center; }
/* La pastille garde ses 26 px visibles, mais la zone touchable atteint 44 px :
   16 cibles de l'éditeur d'avatar passaient sous le seuil tactile en 390 px. */
.av-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(246,241,231,.25); cursor: pointer; padding: 0; position: relative; }
.av-sw::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.av-sw.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,171,42,.35); }
.av-opt { background: rgba(246,241,231,.07); color: var(--ink); border: 1px solid rgba(246,241,231,.2); border-radius: 999px; padding: 5px 12px; min-height: 44px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.av-opt.on { background: rgba(212,171,42,.2); border-color: var(--gold); color: var(--gold-pale); }
.av-opt .kit-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.cos-grid { display: flex; flex-direction: column; gap: 9px; }
.cos-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(246,241,231,.05); border: 1px solid var(--line); border-radius: 12px; }
.cos-item.eq { border-color: var(--gold); background: rgba(212,171,42,.08); }
.cos-av { width: 46px; height: 48px; flex: 0 0 46px; display: inline-flex; border-radius: 10px; overflow: hidden; }
.cos-av svg { width: 100%; height: 100%; }
.cos-item .cc-body { flex: 1; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.rar { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; align-self: flex-start; padding: 1px 7px; border-radius: 999px; }
.rar-base { color: #9db8a9; border: 1px solid #9db8a9; }
.rar-rare { color: #5aa9e0; border: 1px solid #5aa9e0; }
.rar-epic { color: #c98bd8; border: 1px solid #c98bd8; }
.rar-legendaire { color: #e0a03a; border: 1px solid #e0a03a; }
.rar-mythique { color: #e05a7a; border: 1px solid #e05a7a; }
body.sport-basket .av-opt.on, body.sport-basket .av-sw.on { border-color: #f28b30; }

/* ---------- Rival-personnage : provocations + archétype ---------- */
/* Provocation du rival : le liseré rose restait rose dans les 3 modes */
.report li.rival-taunt { color: var(--taunt); font-style: italic; border-left: 2px solid var(--taunt-line); padding-left: 10px; }
.fo-rival-arch { text-align: center; color: var(--gold-pale); font-size: 13px; font-weight: 700; margin: -4px 0 12px; letter-spacing: .02em; }
/* (couleurs de la provocation : portées par --taunt / --taunt-line) */

/* ---------- Grands soirs cinématiques ---------- */
/* z-index 210 : .reveal-ov est aussi en 200 ; à égalité, l'ordre dépendait du DOM.
   La cinématique passe toujours au-dessus. */
.cine-ov { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .6s ease; background: radial-gradient(1200px 820px at 50% 40%, var(--cine-hi), var(--cine-lo)); }
.cine-ov.in { opacity: 1; } .cine-ov.out { opacity: 0; }
.cine-inner { max-width: 760px; padding: 0 34px; text-align: center; }
.cine-slide { font-family: var(--serif); font-size: clamp(26px, 5.2vw, 46px); font-weight: 700; line-height: 1.3; color: var(--ivory); opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); text-wrap: balance; }
.cine-slide.show { opacity: 1; transform: none; }
.cine-gold .cine-slide { color: var(--gold-pale); text-shadow: 0 0 34px rgba(212, 171, 42, 0.42); text-shadow: 0 0 34px color-mix(in srgb, var(--gold) 42%, transparent); }
.cine-tender .cine-slide { color: #e8dbca; font-style: italic; }
.cine-skip { position: fixed; bottom: 26px; right: 26px; background: rgba(255,255,255,.08); color: var(--ink-soft); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; }
.cine-skip:hover { color: var(--ivory); }
/* (fond des cinématiques : porté par --cine-hi / --cine-lo — la 1re et la dernière image du jeu étaient vertes en ninja) */
@media (prefers-reduced-motion: reduce) { .cine-slide { transition: opacity .3s; transform: none; } }

/* ---------- Quoi de neuf (patch notes) ---------- */
.news-link { background: none; border: none; color: var(--gold-pale); font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 8px; position: relative; font-family: var(--sans); }
/* Mobile : ces 3 liens ne faisaient que 25 px de haut, sous la cible tactile de 44 px */
@media (max-width: 600px) {
  .news-link { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 4px 12px; }
}
.news-link:hover { color: var(--gold); }
.news-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-left: 4px; vertical-align: 2px; box-shadow: 0 0 8px rgba(194,58,82,.8); }
.news-entry { text-align: left; }
.news-entry .news-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.news-entry h3 { text-align: left; }
.news-date { flex: 0 0 auto; font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.news-list { list-style: none; margin-top: 6px; }
.news-list li { padding: 6px 0 6px 20px; position: relative; font-size: 14px; color: var(--ink); line-height: 1.5; }
.news-list li::before { content: "✦"; position: absolute; left: 2px; color: var(--gold); font-size: 11px; top: 8px; }

/* ---------- États vides ---------- */
.empty-state { text-align: center; padding: 28px 20px 22px; }
.empty-state .es-icon { font-size: 48px; margin-bottom: 10px; filter: drop-shadow(0 4px 14px rgba(212, 171, 42, 0.3)); filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--gold) 30%, transparent)); }
.empty-state .es-title { font-family: var(--serif); font-weight: 900; font-size: 21px; color: var(--ivory); margin-bottom: 8px; }
.empty-state .es-text { color: var(--ink-soft); font-size: 14px; line-height: 1.6; max-width: 360px; margin: 0 auto 14px; }
.empty-state .btn-slim { margin: 0 auto; }

/* ---------- Soutenir le projet ---------- */
.support-link { font-weight: 800; }
.support-block { text-align: center; }
.support-block h3 { margin-bottom: 10px; }
.support-txt { color: var(--ink-soft); font-size: 14px; line-height: 1.62; text-align: left; margin-bottom: 16px; }
.support-tiers { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.support-tiers .don-btn { flex: 1 1 auto; min-width: 92px; max-width: 150px; }
.support-custom { margin: 14px 0 6px; text-align: center; }
.support-custom > span { display: block; color: var(--ink-soft); font-size: 13px; margin-bottom: 8px; }
.sc-row { display: flex; gap: 8px; justify-content: center; align-items: stretch; }
.sc-row .name-input { margin: 0; max-width: 150px; text-align: center; }
.sc-row .btn { width: auto; white-space: nowrap; }
.support-note { margin: 0; font-style: italic; }

/* ---------- Page « Comment ça marche » ---------- */
.howto-sec { text-align: left; }
.howto-sec h3 { text-align: left; margin-bottom: 8px; }
.howto-sec p { color: var(--ink-soft); font-size: 14px; line-height: 1.62; }

/* Renvoi vers le défi du jour (fin de carrière libre) */
.end-free-hint { text-align: center; color: var(--gold-pale); font-size: 13.5px; line-height: 1.55; background: rgba(212, 171, 42, 0.08); background: color-mix(in srgb, var(--gold) 8%, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 4px 2px; }

/* ---------- Record perso + CTA compte (écran de fin) ---------- */
.record-banner { text-align: center; border-color: var(--gold); }
.record-banner p { font-family: var(--serif); font-weight: 800; font-size: 16px; color: var(--gold-pale); margin: 0; }
.acc-end { text-align: center; border-color: var(--gold); }
.acc-end .btn-slim { margin: 0 auto; }

/* ---------- Carte d'intro (premier lancement) ---------- */
.intro-card { padding: 24px 22px 22px; }
.intro-card .intro-h { font-family: var(--serif); font-weight: 900; font-size: 27px; color: var(--ivory); margin-bottom: 9px; text-wrap: balance; }
.intro-card .intro-p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; }
.intro-steps { list-style: none; counter-reset: introc; text-align: left; display: flex; flex-direction: column; gap: 9px; max-width: 350px; margin: 0 auto; }
.intro-steps li { position: relative; padding-left: 32px; font-size: 13.5px; color: var(--ink); line-height: 1.45; counter-increment: introc; }
.intro-steps li::before { content: counter(introc); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; background: rgba(212, 171, 42, 0.18); background: color-mix(in srgb, var(--gold) 18%, transparent); border: 1px solid var(--gold); color: var(--gold-pale); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* ---------- Défis de carrière ---------- */
.ch-item { text-align: left; background: rgba(246,241,231,.05); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.ch-item.done { border-color: var(--gold); background: rgba(212,171,42,.07); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.ch-head { display: flex; align-items: center; gap: 9px; }
.ch-head strong { font-family: var(--serif); font-size: 17px; color: var(--ivory); flex: 1; }
.ch-icon { font-size: 22px; }
.ch-badge { font-size: 11px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .05em; }
.ch-blurb { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin: 8px 0 6px; }
.ch-reward { color: var(--gold-pale); font-size: 12.5px; font-weight: 700; margin-bottom: 10px; }
.ch-won-reward { color: var(--gold-pale); font-weight: 800; margin-top: 8px; }

/* ---------- Habillage par mode : entête et voiles plein écran ----------
   Ces 7 surcharges sont devenues inutiles : entête, modale, aperçu de partage
   et recap lisent maintenant --chrome-panel / --veil-modal / --veil-share /
   --veil-* déclinés une seule fois dans chaque bloc body.sport-*. */

/* ---------- Collection ninja : grille de pièces à obtenir ---------- */
.collec-grid { display: grid; gap: 8px; margin: 6px 0 14px; }
.collec-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px;
  opacity: 0.62; transition: opacity 0.2s, border-color 0.2s;
}
.collec-item.owned { opacity: 1; border-color: var(--edge); }
.collec-emo { font-size: 22px; width: 30px; text-align: center; flex: none; }
.collec-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.collec-body strong { font-size: 14px; }
.collec-body small { font-size: 12px; opacity: 0.72; }
.collec-hint { font-size: 11.5px; opacity: 0.6; text-align: right; flex: 0 0 auto; max-width: 42%; }
.collec-ok { color: var(--gold); font-weight: 900; font-size: 18px; flex: none; }
/* Le bouton ne doit ni s'ecraser ni passer par-dessus le texte : .btn est
   width:100% par defaut, ce qui detruisait toute la ligne. */
.collec-item .btn { width: auto; flex: 0 0 auto; white-space: nowrap; }
/* Vignette dessinee : assez grande pour se lire comme un masque, pas comme
   une emoticone. */
.collec-emo { width: 44px; }
.collec-emo svg { width: 38px; height: 38px; display: block; margin: 0 auto; }
@media (min-width: 620px) { .collec-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Emblemes de village (mode ninja) ----------
   Les villages reutilisent le composant drapeau du foot : plaque claire incluse,
   ce qui en faisait l'element le plus lumineux d'une page sombre. On les pose sur
   un disque sombre, avec un liseré braise, pour qu'ils appartiennent a la page. */
/* --gold en texte tombe a 2,98:1 sur papier : les chiffres passent en encre brulee.
   L'orange reste la couleur des SURFACES d'action, pas du texte. */
body.sport-naruto :is(.pt-score, .pal-table td:last-child, .q-rw, .streak-n) { color: var(--gold-pale); }
/* Titre de révélation : l'orange à 3:1 sur voile crème ne tenait pas. Encre brûlée. */
body.sport-naruto .rv-burst h2 { color: var(--gold-pale); text-shadow: 0 0 34px color-mix(in srgb, var(--gold) 45%, transparent), 0 1px 0 rgba(0, 0, 0, 0.2); }

body.sport-naruto .flag {
  box-shadow: none;
  border-radius: 50%;
  background: rgba(20, 15, 12, 0.9);
  outline: 1px solid rgba(255, 138, 61, 0.35);
  outline-offset: 1px;
}
body.sport-naruto .flag-lg { width: 28px; padding: 2px; }
body.sport-naruto .cc-icon .flag-lg { margin: 1px; }

/* ---------- Moment-cle : trois natures, trois lectures ----------
   Les trois choix sortaient en barres degradees identiques. Le degrade reste
   a l'option audacieuse ; le collectif se pose en contour ; le va-tout porte
   le liseré du risque. Aucun n'est desavantage, ils se lisent differemment.
   NB : la regle d aplatissement ci-dessus contient un #id dans son :is(), ce qui
   lui donne une specificite de niveau ID. On ancre donc sur #card-zone pour passer. */
:is(body.sport-basket, body.sport-naruto) #card-zone .ev-options .btn-choice.gold.km-hero {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%);
  color: var(--gold-ink);
  border: 1px solid var(--edge);
}
:is(body.sport-basket, body.sport-naruto) #card-zone .ev-options .btn-choice.gold.km-team {
  background: var(--field-bg-strong);
  color: var(--ink);
  border: 1.5px solid var(--line);
}
:is(body.sport-basket, body.sport-naruto) #card-zone .ev-options .btn-choice.gold.km-poker {
  background: var(--field-bg-strong);
  color: var(--ink);
  border: 1.5px dashed var(--neg, #c23a52);
}
:is(body.sport-basket, body.sport-naruto) #card-zone .ev-options .btn-choice.gold.km-team:hover,
:is(body.sport-basket, body.sport-naruto) #card-zone .ev-options .btn-choice.gold.km-poker:hover {
  background: var(--surface-hover);
}
:is(body.sport-basket, body.sport-naruto) #card-zone .btn-choice.km-hero .km-tag { --tc: var(--gold-ink); }
:is(body.sport-basket, body.sport-naruto) #card-zone .btn-choice.km-team .km-tag { --tc: var(--ink-soft); }
:is(body.sport-basket, body.sport-naruto) #card-zone .btn-choice.km-poker .km-tag { --tc: var(--neg, #c23a52); }

/* ---------- Pictogrammes SVG (js/icons.js) ----------
   Un seul reglage de taille par contexte, la couleur vient du texte alentour.
   `currentColor` : aucun pictogramme ne porte sa propre teinte, ce qui evitait
   les six familles chromatiques des emoji systeme. */
.ic {
  width: 1.15em; height: 1.15em;
  flex: 0 0 auto;
  vertical-align: -0.2em;
  display: inline-block;
  overflow: visible;
}
.meta-btn .ic { width: 18px; height: 18px; vertical-align: -0.28em; }
.news-link .ic { width: 16px; height: 16px; vertical-align: -0.25em; }
.hd-meta .ic { width: 15px; height: 15px; vertical-align: -0.2em; opacity: 0.9; }
/* Banniere d'evenement : le pictogramme remplace l'emoji, meme encombrement. */
/* L'emoji jouait le role d'un filigrane geant derriere le titre de categorie :
   le pictogramme reprend exactement ce role. Trait affine, sinon il pese trop
   a cette taille (1.6 sur une grille 24 donne ~6 px une fois agrandi). */
.ev-emoji .ic {
  width: 104px; height: 104px;
  vertical-align: baseline;
  stroke-width: 1.05;
  opacity: 1;
}
@media (max-width: 640px) { .ev-emoji .ic { width: 84px; height: 84px; } }

/* ---------- Sceau de categorie (mode ninja) ----------
   Un carre d'encre rouge legerement pivote, comme un sceau appose sur un
   rouleau. Il remplace l'emoji propre a chacun des 517 evenements : dix sceaux
   au lieu de 517 symboles arbitraires. */
body.sport-naruto .ev-emoji { position: static; opacity: 1; filter: none; transform: none; }
/* ---------- Habillage du parchemin (mode ninja) ----------
   Un papier uni fait vide. Trois ornements, et pas un de plus :
     · un grand kanji en filigrane, comme un tampon sous le texte ;
     · deux colonnes verticales dans les marges — c'est la ou l'ecran est libre
       sur desktop, exactement le vide que tu voyais ;
     · un filet d'encre en haut et en bas.
   Tout est en encre tres pale et derriere le contenu : on doit le SENTIR, pas le lire. */
body.sport-naruto::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(26,22,17,.28), rgba(26,22,17,0) 3px),
    linear-gradient(0deg, rgba(26,22,17,.28), rgba(26,22,17,0) 3px);
  background-repeat: no-repeat;
  background-size: 100% 3px, 100% 3px;
  background-position: top, bottom;
}
/* Ornements de marge : enso, shuriken, spirale. Ils ne remplacent pas une
   illustration — ils occupent le vide de chaque cote du contenu sur grand
   ecran. Encre tres pale, derriere tout, jamais sur le chemin d'un clic.
   Sous 1180 px il n'y a plus de marge : ils disparaissent. */
@media (min-width: 1180px) {
  body.sport-naruto::after {
    background-image:
      linear-gradient(180deg, rgba(26,22,17,.28), rgba(26,22,17,0) 3px),
      linear-gradient(0deg, rgba(26,22,17,.28), rgba(26,22,17,0) 3px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M68 22a34 34 0 1 0 12 20' fill='none' stroke='%231a1611' stroke-width='5' stroke-linecap='round' opacity='.16'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 60 40l32 10-32 10-10 32-10-32L8 50l32-10z' fill='none' stroke='%231a1611' stroke-width='4' stroke-linejoin='round' opacity='.14'/%3E%3Ccircle cx='50' cy='50' r='5' fill='none' stroke='%231a1611' stroke-width='4' opacity='.14'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50a8 8 0 1 1 8 8 18 18 0 1 1-18-18 28 28 0 1 1-28 28' fill='none' stroke='%231a1611' stroke-width='5' stroke-linecap='round' opacity='.13'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M28 16 18 84M52 10 42 78M76 20 66 88' fill='none' stroke='%231a1611' stroke-width='4' stroke-linecap='round' opacity='.11'/%3E%3C/svg%3E");
    background-size: 100% 3px, 100% 3px, 230px 230px, 170px 170px, 200px 200px, 130px 130px;
    background-position:
      top, bottom,
      left 2.5vw top 13vh,
      right 3.5vw top 17vh,
      right 5vw bottom 12vh,
      left 4vw bottom 16vh;
  }
}

/* ---------- Affrontement nomme ----------------------------------------------
   L'en-tete reste affiche pendant tout le combat : contre qui, et ou on en est.
   Bande d'encre sombre, comme l'en-tete de carriere — c'est le seul moment ou
   le parchemin cede la place. */
.boss-head {
  display: flex; align-items: center; gap: 12px;
  background: #1a1611; color: #f7f1e2;
  padding: 11px 14px; margin: -2px -2px 14px; border-radius: 12px 12px 0 0;
}
.boss-head.good { background: #16694e; }
.boss-head.bad { background: #7a1d15; }
.boss-seal {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 17px; color: #f7f1e2;
  border: 2px solid rgba(247, 241, 226, .55); border-radius: 4px; transform: rotate(-5deg);
}
.boss-id { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.boss-id strong { font-family: var(--serif); font-size: 17px; letter-spacing: .01em; }
.boss-id small { font-size: 11.5px; color: #c3b6a2; }
/* Les pastilles d'echange : gagne, perdu, pas encore joue. */
.boss-tally { flex: none; display: flex; gap: 5px; }
.boss-tally .bt { width: 9px; height: 9px; border-radius: 999px; border: 1.5px solid rgba(247, 241, 226, .5); }
.boss-tally .bt.win { background: #f0a05a; border-color: #f0a05a; }
.boss-tally .bt.lose { background: transparent; border-color: #e0685c; }

.sceau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 2.5px solid var(--neg); border-radius: 5px;
  color: var(--neg); font-size: 22px; line-height: 1; font-weight: 700;
  transform: rotate(-6deg);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
}
body.sport-naruto .ev-banner { height: auto; background: none; box-shadow: none; justify-content: flex-start; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); margin: -4px -4px 14px; border-radius: 0; }
body.sport-naruto .ev-banner::after { display: none; }
/* La catégorie est un repère, pas le sujet : c'est la SITUATION qu'on doit
   lire en premier. Elle passe en surtitre discret. */
body.sport-naruto .ev-cat { color: var(--text-mute); text-shadow: none; font-size: clamp(12px, 2.6vw, 13.5px); }
body.sport-naruto .ev-text { font-size: 17.5px; }
@media (max-width: 640px) { .sceau { width: 34px; height: 34px; flex-basis: 34px; font-size: 18px; } }

/* ---------- En-tete de carriere (mode ninja) ----------
   L'en-tete est une bande d'encre : le fond est sombre, donc TOUT ce qu'elle
   contient doit repasser en clair. Sans ca le nom du joueur etait de l'encre
   sombre sur de l'encre sombre — invisible. */
body.sport-naruto #game-header { color: #f7f1e2; }
/* La regle ne doit PAS atteindre les pastilles colorees de l'en-tete (niveau,
   rang) : elles ont leur propre fond, le creme y tombait a 2,5:1. */
body.sport-naruto #game-header :is(.hd-id, .hd-club, .hd-name, .hd-sub, strong, b, span:not(.hd-power)):not(.hd-rank):not(.hd-rank *):not(.hd-ovr):not(.hd-ovr *) { color: #f7f1e2; }
/* Les années d'après remplacent l'en-tête par un .season-tag : sans cette
   ligne il restait gris sombre sur fond d'encre (2,2:1, illisible). */
body.sport-naruto #game-header .season-tag { color: #f7f1e2; }
/* Pastilles : encre sombre, lisible sur toutes les couleurs de rang. */
body.sport-naruto #game-header .hd-ovr,
body.sport-naruto #game-header .hd-ovr * { color: var(--gold-ink); }
body.sport-naruto #game-header .hd-rank,
body.sport-naruto #game-header .hd-rank * { color: #16120d; }
body.sport-naruto #game-header .hd-club { color: #f7f1e2; }
/* Fleches de progression : --pos et --neg sont devenus SOMBRES avec le
   parchemin. Dans l'en-tete, qui lui est reste sombre, elles tombaient a
   3,4:1 et 2,2:1. Memes teintes, version claire. Le :not() exclut celles
   qui sont DANS la pastille orange : la, c'est l'encre sombre qui tient. */
body.sport-naruto #game-header .ovr-up:not(.hd-ovr *) { color: #f0a05a; }
body.sport-naruto #game-header .ovr-down:not(.hd-ovr *) { color: #e0685c; }
body.sport-naruto #game-header .hd-meta { color: #c3b6a2; }
body.sport-naruto #game-header .hd-club small,
body.sport-naruto #game-header .hd-id small { color: #c3b6a2; }
body.sport-naruto #game-header .hd-bar-l { color: #c3b6a2; }
body.sport-naruto #game-header .hd-exit { color: #f7f1e2; border-color: rgba(247, 241, 226, 0.3); background: rgba(247, 241, 226, 0.08); }
body.sport-naruto #game-header .bar i { background: var(--gold); }

/* Kanji du grade, dans la pastille : plus petit que le mot, jamais a sa place. */
body.sport-naruto .hd-rank .hd-k {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 700; font-size: 0.9em; margin-right: 5px; letter-spacing: 0;
  /* Pas d'opacite : la pastille change de couleur a chaque grade, et un kanji
     translucide sur l'orange tombait a 4,1:1. La taille suffit a le mettre
     en second plan. */
}

/* ---- Ecran de fin, mode ninja ----------------------------------------------
   Cet ecran avait garde toutes ses couleurs en dur du theme sombre : creme,
   ombres noires, filets clairs. Sur le parchemin le recit devenait invisible
   (1,3:1) et les lignes de palmares a zero disparaissaient (1,05:1). */
body.sport-naruto .end-story,
body.sport-naruto .end-regret { color: var(--ink-soft); text-shadow: none; }
body.sport-naruto .end-sub { color: var(--text-mute); }
body.sport-naruto .end-name { text-shadow: none; }
/* Le score est le chiffre que le joueur partage : il devient un bloc plein,
   comme un sceau. L'orange sur papier blanc ne tenait que 3:1. */
body.sport-naruto .end-score {
  /* Aplat, pas un degrade : sur l'extremite foncee du degrade le libelle
     « SCORE DU NINJA » ne tenait que 4:1. */
  background: #e2690e;
  border-color: #8c3d06; filter: drop-shadow(0 8px 18px rgba(26, 22, 17, .28));
}
body.sport-naruto .end-score strong { color: #2a1000; text-shadow: none; }
body.sport-naruto .end-score span { color: #2a1000; }
/* Filets : ils etaient en creme, donc absents du papier. */
body.sport-naruto .pal-table td,
body.sport-naruto .fo-table td,
body.sport-naruto .journey li { border-bottom-color: rgba(26, 22, 17, .16); }
/* Lignes a zero : grisees, mais lisibles. */
body.sport-naruto .pal-table tr.zero td,
body.sport-naruto .pal-table tr.zero td:last-child { color: rgba(26, 22, 17, .64); }

/* ============================================================================
   CORRECTIFS D'AUDIT — mode naruto (vague du 27/07)
   Chaque règle répond à un point précis de l'audit UI. Tout est scopé
   body.sport-naruto : zéro effet sur le foot et le basket.
   ========================================================================= */

/* Cinématiques : --cine-hi/lo restent SOMBRES en naruto, mais le texte avait
   pris l'encre du parchemin → 1,03:1, écrans entièrement noirs. */
body.sport-naruto :is(.cine-slide) { color: #f7f1e2; }
body.sport-naruto .cine-skip { color: #c3b6a2; }
body.sport-naruto .cine-gold .cine-slide { color: #f0a05a; }

/* Autocomplétion « ajouter un ami » : fond #1b1206 en dur + encre du mode. */
body.sport-naruto .fr-sugg { background: #fffaef; border-color: var(--edge); }
body.sport-naruto .fr-sugg-item:hover { background: rgba(226, 105, 14, .14); }

/* Ornements de marge : l'opacité 0.035 du calque de base s'appliquait toujours
   (la cascade est par propriété) → tout l'habillage était invisible. Et le
   z-index 0 l'aurait fait peindre PAR-DESSUS les cartes une fois visible. */
body.sport-naruto::after { opacity: 1; z-index: -1; }

/* Placeholders : creme a 55 % sur champ clair. */
body.sport-naruto .name-input::placeholder { color: rgba(26, 22, 17, .5); }

/* Fondateurs : le doré clair !important tombait à 1,4:1 sur les panneaux clairs. */
body.sport-naruto .founder-name { color: #a05a00 !important; text-shadow: none; }

/* Récap de fin d'année : barres et « passer » pensés pour le voile sombre. */
body.sport-naruto .rc-bars i { background: rgba(26, 22, 17, .18); }
body.sport-naruto .rc-bars i.done { background: var(--gold); }
body.sport-naruto .rc-bars i.run { background: var(--gold-pale); }
body.sport-naruto .rc-skip { color: rgba(26, 22, 17, .68); }
body.sport-naruto .rc-close { color: rgba(26, 22, 17, .66); border-color: rgba(26, 22, 17, .4); }

/* Révélation du grand soir : le fond redevient sombre en phase 2, le texte
   doit suivre ; et le rose clair de la défaite ne tenait pas sur voile clair. */
body.sport-naruto .reveal-ov.goldwin.phase2 .rv-burst p { color: #f7f1e2; }
body.sport-naruto .reveal-ov.lose .rv-burst h2 { color: var(--neg); }

/* Cadres de feedback : la règle large body.sport-naruto .game-card (0,2,1)
   battait .game-card.good/.bad/.moment (0,2,0) → plus aucun liseré. */
body.sport-naruto .game-card.good { border-color: var(--pos-line); }
body.sport-naruto .game-card.bad { border-color: var(--neg); }
body.sport-naruto .game-card.moment { border-color: var(--gold); border-width: 2px; }
body.sport-naruto .meta-btn:hover { background: #fff; }

/* Choix doré isolé : --green-deep est un beige clair en naruto → 2,3:1 sur
   le dégradé orange. Encre sombre, comme les moments-clés. */
body.sport-naruto .btn-choice.gold { color: var(--gold-ink); }
body.sport-naruto .btn-choice.gold small { color: rgba(42, 16, 0, .8); }

/* Carte de mort : voile bordeaux semi-transparent pensé pour fond sombre —
   sur la carte claire le texte rose tombait à 1,25:1. */
body.sport-naruto .ev-death {
  background: rgba(176, 42, 31, .08);
  border-color: rgba(176, 42, 31, .4);
  color: var(--neg);
}

/* Famille « bordures crème invisibles sur parchemin ». */
body.sport-naruto :is(.report li, .quests-list li, .founder-list li, .av-row,
  .season-table th, .create-grp-h, .rep-h) { border-bottom-color: rgba(26, 22, 17, .16); }
body.sport-naruto :is(.badge-cell, .lad-tab, .av-sw, .av-opt, .btn-dark, .lang-toggle) {
  border-color: rgba(26, 22, 17, .22);
}
body.sport-naruto .dot { background: rgba(26, 22, 17, .22); }
body.sport-naruto .dot.on { background: var(--gold); }

/* Raretés : pastels du thème sombre, sous AA sur papier. */
body.sport-naruto .rar-base { color: #4a6b58; border-color: #4a6b58; }
body.sport-naruto .rar-rare { color: #1f5f96; border-color: #1f5f96; }
body.sport-naruto .rar-epic { color: #7b3fa0; border-color: #7b3fa0; }
body.sport-naruto .rar-legendaire { color: #8a6d12; border-color: #8a6d12; }
body.sport-naruto .rar-mythique { color: #a8305c; border-color: #a8305c; }

/* Victoire d'échange : le vert bouteille est la signature du FOOT. */
body.sport-naruto .boss-head.good { background: #7a4a10; }

/* Vignettes de cadres (onglet Apparence) : même gabarit que la Collection. */
.cc-icon svg { width: 26px; height: 26px; display: block; margin: 0 auto; }

/* Débordements mobiles : noms longs dans les listes serrées. */
.collec-body, .boss-id { overflow-wrap: anywhere; }
#game-header .hd-id { min-width: 0; }

/* Cibles tactiles : boutons fins à ~34px sur mobile. */
@media (max-width: 600px) {
  .btn-slim { min-height: 44px; }
  .fr-del { position: relative; }
  .fr-del::after { content: ""; position: absolute; inset: -10px; }
}

/* ============================================================================
   MODE NUIT NARUTO — encre de nuit
   Bascule via la classe .nj-nuit posée sur <html> AVANT le rendu (naruto.html)
   et par le bouton 🌙. Même architecture que le parchemin : on flippe les
   jetons, puis on contre les quelques valeurs écrites en dur pour le papier.
   Palette : charbon chaud, braise orange, le rouge du sceau s'éclaircit.
   ========================================================================= */
.nj-nuit body.sport-naruto {
  --paper: rgba(28, 24, 19, 0.94);
  --panel-solid: #211c16;
  --ink: #efe7d5;
  --ink-soft: #c9bda9;
  --ivory: #efe7d5;
  --gold: #f0862a;
  --gold-deep: #c96a14;
  --gold-ink: #2a1000;
  --gold-pale: #f0a05a;
  --green: #2e2820;
  --green-deep: #3a332a;
  --line: rgba(239, 231, 213, 0.16);
  --edge: rgba(239, 231, 213, 0.34);
  --text-mute: #b3a898;
  --red: #e0685c;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  --surface-hover: #2a241d;
  --field-bg: #241f19;
  --field-bg-strong: #2a241d;
  --chrome-bg: #15110d;
  --chrome-panel: #15110d;
  --panel-hi: #2c251d;
  --panel-lo: #1d1812;
  --score-hi: #2e271e;
  --score-lo: #1d1812;
  --quote-bg: rgba(239, 231, 213, 0.07);
  --veil-modal: rgba(0, 0, 0, 0.66);
  --veil-share: rgba(0, 0, 0, 0.76);
  --veil-hi: rgba(26, 22, 17, 0.985);
  --veil-lo: rgba(13, 11, 9, 0.995);
  --burst: rgba(240, 134, 42, 0.3);
  --pos: #f0a05a;
  --pos-soft: #e2894a;
  --pos-bg: rgba(240, 134, 42, 0.14);
  --pos-edge: rgba(240, 134, 42, 0.4);
  --pos-line: #f0862a;
  --pos-deep: #c96a14;
  --pos-glow: rgba(240, 134, 42, 0.3);
  --neg: #e0685c;
  --neg-soft: #c9564c;
  --taunt: #d99a6c;
  --taunt-line: rgba(224, 104, 92, 0.45);
  --info: #c9b184;
  --info-bg: rgba(240, 180, 90, 0.1);
  --info-edge: rgba(201, 177, 132, 0.4);
}
/* Fond : charbon chaud, halo de braise en tête — plus de parchemin. */
.nj-nuit body.sport-naruto::before {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(240, 134, 42, 0.14), rgba(0, 0, 0, 0) 60%),
    #171310;
}
/* Filets haut/bas : encre → crème la nuit, à TOUTES les largeurs (le bloc
   desktop ci-dessous ré-écrase avec les ornements complets). */
.nj-nuit body.sport-naruto::after {
  background-image:
    linear-gradient(180deg, rgba(239,231,213,.3), rgba(239,231,213,0) 3px),
    linear-gradient(0deg, rgba(239,231,213,.3), rgba(239,231,213,0) 3px);
}
/* Ornements : l'encre devient crème, sinon ils disparaissent sur le charbon. */
@media (min-width: 1180px) {
  .nj-nuit body.sport-naruto::after {
    background-image:
      linear-gradient(180deg, rgba(239,231,213,.3), rgba(239,231,213,0) 3px),
      linear-gradient(0deg, rgba(239,231,213,.3), rgba(239,231,213,0) 3px),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M68 22a34 34 0 1 0 12 20' fill='none' stroke='%23efe7d5' stroke-width='5' stroke-linecap='round' opacity='.13'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 8 60 40l32 10-32 10-10 32-10-32L8 50l32-10z' fill='none' stroke='%23efe7d5' stroke-width='4' stroke-linejoin='round' opacity='.11'/%3E%3Ccircle cx='50' cy='50' r='5' fill='none' stroke='%23efe7d5' stroke-width='4' opacity='.11'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 50a8 8 0 1 1 8 8 18 18 0 1 1-18-18 28 28 0 1 1-28 28' fill='none' stroke='%23efe7d5' stroke-width='5' stroke-linecap='round' opacity='.1'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M28 16 18 84M52 10 42 78M76 20 66 88' fill='none' stroke='%23efe7d5' stroke-width='4' stroke-linecap='round' opacity='.09'/%3E%3C/svg%3E");
  }
}
/* Panneaux : feuilles sombres, filet crème. */
.nj-nuit body.sport-naruto .home-card,
.nj-nuit body.sport-naruto .game-card,
.nj-nuit body.sport-naruto .meta-btn,
.nj-nuit body.sport-naruto .intro-card {
  background: #211c16;
  border-color: rgba(239, 231, 213, 0.14);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 26px -18px rgba(0, 0, 0, 0.9);
}
.nj-nuit body.sport-naruto .meta-btn:hover { background: #2a241d; }
/* Contre-overrides des valeurs papier écrites en dur. */
.nj-nuit body.sport-naruto .fr-sugg { background: #241f19; border-color: var(--edge); }
.nj-nuit body.sport-naruto .fr-sugg-item:hover { background: rgba(240, 134, 42, 0.16); }
.nj-nuit body.sport-naruto .name-input::placeholder { color: rgba(239, 231, 213, 0.45); }
.nj-nuit body.sport-naruto .founder-name { color: #ffd76a !important; }
.nj-nuit body.sport-naruto .rc-bars i { background: rgba(239, 231, 213, 0.2); }
.nj-nuit body.sport-naruto .rc-skip { color: rgba(239, 231, 213, 0.55); }
.nj-nuit body.sport-naruto .rc-close { color: rgba(239, 231, 213, 0.6); border-color: rgba(239, 231, 213, 0.35); }
.nj-nuit body.sport-naruto :is(.report li, .quests-list li, .founder-list li, .av-row,
  .season-table th, .create-grp-h, .rep-h) { border-bottom-color: rgba(239, 231, 213, 0.14); }
.nj-nuit body.sport-naruto :is(.badge-cell, .lad-tab, .av-sw, .av-opt, .btn-dark, .lang-toggle) {
  border-color: rgba(239, 231, 213, 0.22);
}
.nj-nuit body.sport-naruto .dot { background: rgba(239, 231, 213, 0.22); }
.nj-nuit body.sport-naruto .rar-base { color: #b7c9be; border-color: #b7c9be; }
.nj-nuit body.sport-naruto .rar-rare { color: #7db8e8; border-color: #7db8e8; }
.nj-nuit body.sport-naruto .rar-epic { color: #cf9fe0; border-color: #cf9fe0; }
.nj-nuit body.sport-naruto .rar-legendaire { color: #e8c060; border-color: #e8c060; }
.nj-nuit body.sport-naruto .rar-mythique { color: #e88aa5; border-color: #e88aa5; }
.nj-nuit body.sport-naruto .ev-death {
  background: rgba(224, 104, 92, 0.12);
  border-color: rgba(224, 104, 92, 0.45);
  color: #ff9d92;
}
.nj-nuit body.sport-naruto .back-fab {
  background: rgba(33, 28, 22, 0.95); color: #efe7d5;
  border-color: rgba(239, 231, 213, 0.3);
}
/* Écran de fin : les contre-valeurs papier redeviennent nocturnes. */
.nj-nuit body.sport-naruto .pal-table tr.zero td,
.nj-nuit body.sport-naruto .pal-table tr.zero td:last-child { color: rgba(239, 231, 213, 0.45); }
.nj-nuit body.sport-naruto :is(.pal-table td, .fo-table td, .journey li) { border-bottom-color: rgba(239, 231, 213, 0.14); }
/* En-tête de jeu : il était déjà sombre, on éclaircit juste son socle. */
.nj-nuit body.sport-naruto #game-header { background: #211c16; }
/* Le sceau kanji des catégories garde son rouge, lisible sur sombre. */
.nj-nuit body.sport-naruto .sceau { color: #e0685c; border-color: #e0685c; }
/* Bouton musique : jumeau du bouton nuit, à sa gauche. Reste visible en jeu
   (on doit pouvoir couper la musique sans quitter la partie). */
.nj-snd-btn {
  position: fixed; top: 14px; right: 138px; z-index: 50;
  background: rgba(26, 22, 17, 0.08); color: var(--ivory);
  border: 1px solid rgba(26, 22, 17, 0.3);
  border-radius: 999px; padding: 11px 14px; min-height: 44px;
  font-size: 16px; cursor: pointer; line-height: 1;
}
.nj-nuit .nj-snd-btn { background: rgba(239, 231, 213, 0.1); border-color: rgba(239, 231, 213, 0.3); }
.nj-night-btn:hover, .nj-snd-btn:hover { background: rgba(26, 22, 17, 0.16); border-color: var(--gold); }
.nj-nuit .nj-night-btn:hover, .nj-nuit .nj-snd-btn:hover { background: rgba(239, 231, 213, 0.18); border-color: var(--gold); }
/* En jeu, les boutons langue/nuit disparaissent : la musique se range à leur place. */
body:has(#screen-game.active) .nj-snd-btn { right: 14px; }
body[data-screen="screen-game"] .nj-snd-btn { right: 14px; }
@media (max-width: 600px) {
  body[data-screen="screen-game"] .nj-snd-btn { top: auto; bottom: 16px; right: 14px; }
}
/* Bouton nuit : jumeau du sélecteur de langue, à sa gauche. */
.nj-night-btn {
  position: fixed; top: 14px; right: 76px; z-index: 50;
  background: rgba(26, 22, 17, 0.08); color: var(--ivory);
  border: 1px solid rgba(26, 22, 17, 0.3);
  border-radius: 999px; padding: 11px 14px; min-height: 44px;
  font-size: 16px; cursor: pointer; line-height: 1;
}
.nj-nuit .nj-night-btn { background: rgba(239, 231, 213, 0.1); border-color: rgba(239, 231, 213, 0.3); }
body:has(#screen-game.active) .nj-night-btn { display: none; }
body[data-screen="screen-game"] .nj-night-btn { display: none; }

/* Pouvoirs héréditaires / éveillés dans l'en-tête : puce au rouge de sceau,
   distincte des traits ordinaires. L'en-tête est sombre dans les deux thèmes. */
body.sport-naruto .hd-trait.hd-power {
  color: #ff9d92; border: 1px solid rgba(224, 104, 92, 0.55);
  background: rgba(176, 42, 31, 0.18);
}

/* Avertissement de la 2e défaite contre une légende : la prochaine tue. */
body.sport-naruto .boss-warn { color: var(--neg); font-weight: 700; }


/* Mode nuit : les boutons clairs du parchemin viraient creme-sur-creme. */
.nj-nuit body.sport-naruto .btn-primary {
  background: #2a241d; color: #efe7d5;
  border: 1px solid rgba(239, 231, 213, 0.28);
}
.nj-nuit body.sport-naruto .btn-primary:hover { background: #332b22; border-color: var(--gold); }
/* Le bouton « Jouer le défi » gardait son fond ivoire du jour : 2,04:1. */
.nj-nuit body.sport-naruto .btn-daily { background: #2a241d; color: #f0a05a; border-color: var(--gold); }
.nj-nuit body.sport-naruto .btn-daily:hover { background: #332b22; }
/* Célébration de promotion : le grade s'affiche comme un sceau. */
/* Intro d'étape de création (affectation ninja) */
.create-intro { text-align: center; color: var(--text-mute); margin: -2px auto 14px; max-width: 520px; font-size: 15px; grid-column: 1 / -1; }
body.sport-naruto .rk-celebrate { text-align: center; margin: 10px 0 14px; }
body.sport-naruto .rk-kanji { display: block; font-size: 64px; line-height: 1.1; color: var(--gold-deep); animation: rkPop 0.5s ease-out; }
body.sport-naruto .rk-rank { display: block; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-top: 4px; }
body.sport-naruto .tech-reveal { text-align: center; font-size: 22px; font-weight: 800; color: var(--gold-deep); margin: 8px 0; }
/* ---- Passe UI parchemin (audit) : états, ombres, rouges, or du mode ---- */
/* Le contrôle le plus cliqué du jeu : fond et liseré du MODE, pas du foot. */
body.sport-naruto .btn-choice { background: #fffaef; color: var(--ink); border-color: rgba(26, 22, 17, 0.28); }
body.sport-naruto .btn-choice:hover { background: #fff6e4; border-color: var(--gold); }
body.sport-naruto .btn-choice small { color: var(--pos-soft); }
/* Champs de saisie : un bord et un fond VISIBLES sur parchemin. */
body.sport-naruto .name-input { border-color: rgba(26, 22, 17, 0.3); background: #fffdf8; color: var(--ink); }
body.sport-naruto .name-input::placeholder { color: rgba(26, 22, 17, 0.42); }
.nj-nuit body.sport-naruto .name-input { border-color: rgba(239, 231, 213, 0.3); background: #241f19; color: var(--ivory); }
/* Aperçu de partage : lisible en jour (le voile reste sombre par design). */
body.sport-naruto .share-hint { color: #f0a05a; }
body.sport-naruto .share-close { color: #cfc2ad; }
/* Les ombres noires du thème sombre salissaient le parchemin. */
body.sport-naruto :is(.home-card, .game-card, .end-block) { filter: none; }
/* Le hanko 完 est en absolute dans la carte : le bloc englobant ne doit pas
   dépendre du backdrop-filter (fragile) — on l'ancre explicitement. */
body.sport-naruto .game-card { position: relative; }
body.sport-naruto :is(.choice-card, .perk-item) { box-shadow: 0 1px 0 rgba(26, 22, 17, 0.08), 0 10px 22px -16px rgba(58, 42, 20, 0.55); }
/* Le rouge du mode partout où le rose du foot traînait. */
body.sport-naruto .btn-red { background: linear-gradient(135deg, #c23a2c, #8e2118); color: #fff7ee; }
/* Onglets : fond visible, actif à l'or du mode, cible tactile complète. */
body.sport-naruto .lad-tab { background: #fffaef; color: var(--ink-soft); border-color: rgba(26, 22, 17, 0.22); min-height: 44px; }
body.sport-naruto .lad-tab:hover { border-color: var(--gold); }
body.sport-naruto .lad-tab.on { background: rgba(240, 134, 42, 0.16); color: var(--pos-soft); border-color: var(--gold); }
.nj-nuit body.sport-naruto .lad-tab { background: #241f19; color: var(--ink-soft); border-color: rgba(239, 231, 213, 0.22); }
.nj-nuit body.sport-naruto .lad-tab.on { background: rgba(240, 134, 42, 0.2); color: var(--gold-pale); border-color: var(--gold); }
/* Ta ligne au Panthéon + suppression d'ami : couleurs du mode, cible 44px. */
body.sport-naruto .pantheon-item.is-you { border-color: var(--gold); background: rgba(240, 134, 42, 0.1); }
body.sport-naruto .fr-del { background: rgba(26, 22, 17, 0.08); border-color: rgba(26, 22, 17, 0.3); color: var(--ink-soft); }
.fr-del::after { content: ""; position: absolute; inset: -9px; }
/* Filtres du Panthéon : selects habillés (jour + nuit) et pleine largeur
   dans la grille — ils décalaient le n°1 dans la mauvaise colonne. */
.pt-filters select { appearance: none; -webkit-appearance: none; background: #fffdf8; color: var(--ink); border: 1px solid rgba(26, 22, 17, 0.3); border-radius: 10px; padding: 10px 12px; font-family: var(--sans); font-weight: 600; }
.nj-nuit .pt-filters select { background: #241f19; color: var(--ivory); border-color: rgba(239, 231, 213, 0.3); }
/* Bilan : la ligne trophée existe aussi la nuit. */
.nj-nuit body.sport-naruto .report li.trophy { background: rgba(224, 104, 92, 0.12); border-color: rgba(224, 104, 92, 0.4); }
/* Survol de l'offre de trahison, la nuit. */
.nj-nuit body.sport-naruto .btn-choice.betray:hover { background: rgba(224, 104, 92, 0.14); }
/* Lueur « bad » : le cramoisi du mode, pas celui du foot. */
body.sport-naruto .game-card.bad { filter: drop-shadow(0 8px 24px rgba(176, 42, 31, 0.28)); }
/* Le score de fin suit le thème (il était figé sur l'orange jour). */
body.sport-naruto .end-score { color: var(--gold); }
body.sport-naruto .end-score small { color: var(--pos-soft); }
/* Erreurs de compte : une vraie couleur d'erreur. */
body.sport-naruto .acc-err { color: var(--neg); font-weight: 600; }
.nj-nuit body.sport-naruto .acc-err { color: #e0685c; }
/* Bandeaux longs : équilibrer les retours à la ligne. */
.km-banner { text-wrap: balance; }
/* Étiquettes de choix : lisibles aussi la nuit. */
.nj-nuit .opt-tag { filter: brightness(1.75); }
/* Squelettes de chargement : tant que le JS n'a pas rendu, les blocs
   scintillent au lieu de rester vides (impression de casse). */
body:not(.js-ready) .home-card > *, body:not(.js-ready) .meta-btn > * { opacity: 0; }
body:not(.js-ready) .home-card, body:not(.js-ready) .meta-btn { position: relative; overflow: hidden; min-height: 52px; }
body:not(.js-ready) .home-card::before, body:not(.js-ready) .meta-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 32%, rgba(240, 134, 42, 0.09) 50%, transparent 68%);
  background-size: 220% 100%; animation: skel 1.1s linear infinite;
}
@keyframes skel { from { background-position: 130% 0; } to { background-position: -80% 0; } }
@media (prefers-reduced-motion: reduce) { body:not(.js-ready) .home-card::before, body:not(.js-ready) .meta-btn::before { animation: none; } }
/* Filigrane du village servi + particules d'ambiance. */
#vil-mark { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: center 40% / min(62vmin, 520px) no-repeat; opacity: 0; transition: opacity 0.8s; filter: grayscale(0.35); }
#vil-mark.on { opacity: 0.07; }
.nj-nuit #vil-mark.on { opacity: 0.1; filter: grayscale(0.15) brightness(1.5); }
#vil-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
/* Tampon 完 : l'année est actée. */
.hanko { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; display: flex;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  align-items: center; justify-content: center; border: 3px solid var(--neg); border-radius: 8px;
  color: var(--neg); font-size: 24px; font-weight: 700; transform: rotate(-8deg); opacity: 0.9;
  animation: hankoPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes hankoPop { from { transform: rotate(-8deg) scale(2.2); opacity: 0; } to { transform: rotate(-8deg) scale(1); opacity: 0.9; } }
@media (max-width: 760px) { .hanko { width: 34px; height: 34px; font-size: 18px; right: 8px; top: 8px; } }
@media (prefers-reduced-motion: reduce) { .hanko { animation: none; } }
/* Écran de mort : le sceau s'imprime. */
.death-ov { position: fixed; inset: 0; z-index: 260; background: #060303; display: flex;
  align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s; pointer-events: none; }
.death-ov.on { opacity: 1; }
.death-kanji { font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif; font-size: min(46vmin, 340px); color: #b02a1f; font-weight: 700;
  text-shadow: 0 0 60px rgba(176, 42, 31, 0.5); animation: hankoPop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1); }
/* Sheen TCG sur les cartes de légende. */
.cardskin-item { position: relative; }
.cardskin-item img { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.cardskin-item:hover img { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 18px rgba(240, 134, 42, 0.3); }
.cardskin-item::after { content: ""; position: absolute; inset: 0 0 auto 0; aspect-ratio: 4 / 5; border-radius: 10px;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
  background-size: 260% 100%; background-position: 120% 0; pointer-events: none; }
.cardskin-item:hover::after { animation: cardSheen 0.8s ease; }
@keyframes cardSheen { from { background-position: 120% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .cardskin-item:hover::after, .death-kanji { animation: none; } }
/* Cartes de légende : vignettes de la boutique. */
.cardskin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.cardskin-item { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.cardskin-item img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
.cardskin-item.eq img { border-color: var(--gold); box-shadow: 0 0 14px rgba(240, 134, 42, 0.35); }
/* Avatar emoji (foot/basket, sans photo) + aperçu boutique sans SVG. */
.av-emoji { display: flex; align-items: center; justify-content: center; font-size: 26px; }
.av-emoji-big { font-size: 64px; }
.cos-emoji { display: block; text-align: center; font-size: 42px; padding: 14px 0; }
/* Avatar ninja = sprite du jeu (photo uploadée sinon). */
.av-px, .av-px-big { image-rendering: pixelated; object-fit: contain;
  background: radial-gradient(circle at 50% 42%, rgba(240, 134, 42, 0.2), rgba(0, 0, 0, 0) 72%); padding: 5px; }
/* Police du logo Naruto (fan-font « Ninja Naruto », usage commercial permis,
   fichier non modifié). ASCII seulement : réservée aux titres sans accent. */
@font-face {
  font-family: "NinjaNaruto";
  src: url("../assets/fonts/njnaruto.ttf") format("truetype");
  font-display: swap;
}
/* Le wordmark illustré EST le logo : pas de badge redondant au-dessus. */
body.sport-naruto #screen-home .laurel { display: none; }
/* Wordmark illustré (logo pinceau) : fond charbon fondu par blend screen. */
.wm-has-logo { position: relative; display: block; }
/* height:auto est OBLIGATOIRE : les attributs width/height du HTML (posés pour
   réserver la place au chargement) s'appliquent sinon comme hauteur réelle et
   écrasent l'image (600×545 au lieu de 600×327). */
.wm-logo { display: block; margin: 0 auto; width: min(600px, calc(100vw - 36px)); height: auto;
  filter: drop-shadow(0 8px 26px rgba(0, 0, 0, 0.4)); }
.wm-has-logo .wm-px { position: absolute; left: calc(50% + min(255px, 37vw)); bottom: 34px; }
body.sport-naruto .wm-main { font-family: "NinjaNaruto", 'Playfair Display', serif; letter-spacing: 0.04em; font-weight: 400; }
body.sport-naruto .wm-top { font-family: "NinjaNaruto", 'Inter', sans-serif; font-weight: 400; letter-spacing: 0.35em; }
/* Le NIVEAU en chiffres de pinceau : la fonte a ses chiffres, pas ses accents. */
body.sport-naruto .hd-ovr strong { font-family: "NinjaNaruto", 'Playfair Display', serif; font-weight: 400; }
/* Sprite d'accueil : il fonce sur le titre, Rasengan en avant. */
body.sport-naruto .wm-main { position: relative; }
.wm-px { position: absolute; right: -118px; bottom: 14px; height: 96px; width: auto;
  image-rendering: pixelated; pointer-events: none;
  filter: brightness(1.08) drop-shadow(0 0 12px rgba(240, 134, 42, 0.3)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)); }
@media (max-width: 899px) { .wm-px { display: none; } }
/* Les trois pastilles flottantes (langue, nuit, son) : même teinte, même
   comportement mobile — la langue passait seule en absolute à 480px. */
body.sport-naruto .lang-toggle { background: rgba(26, 22, 17, 0.08); color: var(--ink); border: 1px solid rgba(26, 22, 17, 0.3); }
.nj-nuit body.sport-naruto .lang-toggle { background: rgba(239, 231, 213, 0.1); color: var(--ivory); border-color: rgba(239, 231, 213, 0.3); }
@media (max-width: 480px) {
  .nj-night-btn, .nj-snd-btn { position: absolute; }
  /* En JEU, le bouton musique doit rester collé au viewport : en absolute,
     bottom:16px se résolvait contre le DOCUMENT et le bouton défilait
     au milieu de la carte. */
  body[data-screen="screen-game"] .nj-snd-btn { position: fixed; }
  /* Les trois pastilles hautes forment une rangée alignée. */
  .nj-night-btn { top: 10px; right: 72px; }
  body:not([data-screen="screen-game"]) .nj-snd-btn { top: 10px; right: 130px; }
}
/* Survol du sprite : il s'anime, l'aura Rasengan s'allume. */
.wm-px, .hd-deco img { pointer-events: auto; transition: transform 0.18s ease, filter 0.18s ease; }
.wm-px:hover, .hd-deco img:hover {
  animation: pxBob 0.5s ease infinite alternate;
  filter: brightness(1.18) drop-shadow(0 0 14px rgba(240, 134, 42, 0.65)) drop-shadow(0 0 30px rgba(90, 185, 255, 0.4));
}
@keyframes pxBob { from { transform: translateY(-3px) scale(1.05); } to { transform: translateY(-9px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .wm-px:hover, .hd-deco img:hover { animation: none; transform: scale(1.05); } }
/* Duo pixel-art décoratif au centre de l'en-tête (desktop seulement). */
body.sport-naruto #game-header { position: relative; }
.hd-deco { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; gap: 16px; align-items: flex-end; pointer-events: none; }
.hd-deco img { height: 84px; width: auto; image-rendering: pixelated; filter: brightness(1.12) drop-shadow(0 0 10px rgba(240, 134, 42, 0.25)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35)); }
@media (max-width: 1023px) { .hd-deco { display: none; } }
.nj-mini-ic { display: inline-block; vertical-align: -5px; }
.nj-mini-ic svg { width: 22px; height: 22px; display: block; }
@keyframes rkPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.sport-naruto .rk-kanji { animation: none; } }
.nj-nuit body.sport-naruto .btn-choice { background: #241f19; color: #efe7d5; border-color: rgba(239, 231, 213, 0.22); }
.nj-nuit body.sport-naruto .btn-choice:hover { background: #2c261e; }
/* L'encre sombre du bouton or (jour) devenait invisible sur le fond nuit. */
.nj-nuit body.sport-naruto .btn-choice.gold { color: #efe7d5; }
.nj-nuit body.sport-naruto .btn-choice.gold small { color: #f0a05a; }
.nj-nuit body.sport-naruto .btn-ghost { color: #c9bda9; border-color: rgba(239, 231, 213, 0.25); }
.nj-nuit body.sport-naruto .meta-btn { color: #efe7d5; }

/* Offre de trahison : liseré rouge en pointillés, l'avertissement au-dessus. */
body.sport-naruto .btn-choice.betray { border: 1.5px dashed var(--neg); color: var(--ink); }
body.sport-naruto .btn-choice.betray:hover { background: rgba(176, 42, 31, 0.08); }
body.sport-naruto .offers-warn { color: var(--neg); font-weight: 700; text-align: center; font-size: 13.5px; }

/* Bouton d'aide de l'en-tete : discret, jamais concurrent du bouton retour. */
.hd-help { font-family: var(--serif); font-weight: 700; opacity: .72; }
.hd-help:hover { opacity: 1; }

/* Fiche « a quoi ca sert » : une ligne par element de l'ecran de jeu. */
.modal-msg-rich { text-align: left; max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; }
.help-list { display: flex; flex-direction: column; gap: 2px; }
.help-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 2px; border-top: 1px solid rgba(246, 241, 231, 0.09);
}
.help-row:first-child { border-top: 0; }
.help-ic { font-size: 18px; line-height: 1.25; flex: 0 0 22px; text-align: center; }
.help-row b { display: block; font-size: 13.5px; color: var(--ivory); letter-spacing: .01em; }
.help-row small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
body.sport-naruto .help-row b { font-family: var(--serif); }

/* Legende du Bingo Book : les pictos des fiches ne se lisent pas seuls. */
.bingo-key {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 2px 0 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(246, 241, 231, 0.1);
  font-size: 12px; color: var(--ink-soft); font-weight: 600;
}
.bingo-key span { white-space: nowrap; }

/* Sans compte, la progression tient a un vidage de navigateur : on le dit. */
.xp-warn {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(26, 22, 17, 0.12);
  display: flex; flex-direction: column; gap: 9px; align-items: stretch;
}
.xp-warn > span { font-size: 12.5px; line-height: 1.45; color: var(--ink-soft); }
.nj-nuit body.sport-naruto .xp-warn { border-top-color: rgba(239, 231, 213, 0.14); }
.acc-warn { color: #b4602c; font-weight: 600; }
.acc-warn-block { border: 1px solid rgba(180, 96, 44, 0.35); }

/* La legende du Bingo Book portait ses pictos sans les nommer assez fort. */
.bingo-key { font-variant-numeric: tabular-nums; }
.bingo-key b { font-weight: 800; color: var(--ivory); letter-spacing: .02em; }

/* Montee du registre en fin de voie : la barre se remplit, et le passage de
   niveau se voit au lieu d'etre annonce apres coup. */
.xp-end .xp-bar i { transition: none; }
.xp-end .xp-rank { transition: color .2s ease-out; }
.lvl-pop { animation: lvlPop .5s cubic-bezier(.2, .9, .25, 1); }
@keyframes lvlPop {
  0%   { transform: scale(1);    color: var(--gold); }
  35%  { transform: scale(1.14); color: var(--gold); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .lvl-pop { animation: none; } }

/* La legende du Bingo Book se lisait trop petit a cote des fiches. */
.bingo-key { font-size: 13px; }

/* Entraînement annuel (mode ninja) : des points à placer au rapport. */
.train-grp .train-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px dashed rgba(246, 241, 231, 0.14); font-size: 14.5px; }
body.sport-naruto .train-row { border-bottom-color: rgba(26, 22, 17, .16); }
.nj-nuit body.sport-naruto .train-row { border-bottom-color: rgba(239, 231, 213, 0.14); }
.train-grp .train-row:last-of-type { border-bottom: none; }
.train-nom { flex: 1; text-align: left; font-weight: 600; }
.train-val { min-width: 34px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Cible tactile réelle (44 px) et texte lisible : --gold en texte tombe à
   2,98:1 sur le parchemin, on prend --gold-pale. Même opacité désactivée que
   les autres boutons de la carte, sinon deux gris cohabitent. */
.train-plus { min-width: 44px; min-height: 44px; padding: 7px 12px; font-size: 14px; font-weight: 800; border-radius: 10px; border: 1.5px solid var(--gold); color: var(--gold-pale); background: transparent; cursor: pointer; transition: opacity .15s; }
.train-plus:disabled { opacity: 0.45; cursor: default; }
.train-hint { text-align: left; font-size: 12.5px; opacity: 0.7; margin: 8px 0 0; min-height: 16px; }

/* Le parcours en « je » : des lignes de journal, plus lisibles que la liste
   d'affectations juste dessous. */
.journey.memoires li { font-style: italic; line-height: 1.5; }
.journey.memoires li em { font-style: normal; }

/* Note de voie : une lettre, même gabarit que la pastille de grade. */
.hd-note { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; margin-left: 6px; padding: 0 6px; border-radius: 6px; border: 1.5px solid var(--rc, currentColor); color: var(--rc, currentColor); font-size: 12px; font-weight: 900; letter-spacing: .02em; vertical-align: middle; }