/* ------------------------------------------------------------------
   Hoop Dreams — direction artistique « Chrome Prophecy ».
   Y2K chrome, dégradés thermiques irisés et typo néon sur un noir
   outremer profond. Mobile-first, référence 390 px, testé dès 360 px.

   Règle de couleur : Blackout et Ultramarine portent 90 % de chaque écran.
   Le spectre irisé complet (rose → violet → cyan → ambre) est réservé aux
   moments héroïques : logotype, draft, buzzer beater, fin de carrière.
   Un seul élément « fort » par écran, jamais deux.

   Les polices sont auto-hébergées (voir fonts/fonts.css) : le jeu est une
   PWA hors-ligne et ne doit dépendre d'aucun service externe.
   ------------------------------------------------------------------ */

@import url("./fonts/fonts.css");

:root {
  /* Fond — nuit outremer */
  --bg-0: #07060F;   /* Blackout : page, remplissage des silhouettes */
  --bg-1: #0B0A1E;   /* Panel : cartes */
  --bg-2: #141230;   /* Panel-alt : surfaces encastrées, boutons secondaires */
  --bg-3: #12102A;   /* pistes de barres, tuiles de stats */
  --ultramarine: #1A1650;
  --ultra-deep: #2A2178;

  /* Accents — le spectre */
  --pink: #FF3BD4;
  --pink-light: #FF8AE6;
  --violet: #7B5CFF;
  --cyan: #9FF1FF;
  --amber: #FFB03B;
  --amber-light: #FFE29A;

  /* Alias historiques : tout le jeu les utilise déjà, ils pointent
     désormais vers la nouvelle palette plutôt que vers le parquet. */
  --ball: var(--pink);
  --ball-bright: var(--pink-light);
  --ball-deep: #C2199F;
  --wood: var(--violet);
  --wood-deep: #4A38A8;
  --wood-soft: var(--cyan);
  --gold: var(--amber);
  --gold-deep: #A87B22;

  /* Texte */
  --text-0: #E8E6F5;
  --text-1: #C9C5E6;
  --text-2: #9F9AC9;
  --text-3: #8F89C0;
  --text-4: #7D78A8;

  /* Sémantique */
  --good: #6BE8B0;
  --bad: #FF6B8A;
  --warn: var(--amber);
  --info: var(--cyan);

  /* Ligues */
  --tier-hs: #7D78A8;
  --tier-dev: #8F89C0;
  --tier-ncaa: var(--cyan);
  --tier-nba: var(--pink);
  --tier-elite: var(--amber);

  --line: #262148;
  --line-strong: #38335E;
  --shadow: rgba(0, 0, 0, 0.6);

  --radius: 20px;
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Unbounded", "Arial Narrow", Impact, var(--font);
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Dégradés signature */
  --grad-iris: linear-gradient(105deg, #fff 0%, #ffd9f4 8%, #ff3bd4 20%, #7b5cff 36%,
                #9ff1ff 50%, #ffffff 58%, #ffb03b 70%, #ff3bd4 84%, #fff 96%);
  --grad-cta: linear-gradient(105deg, #ff3bd4, #7b5cff);
  --grad-light: linear-gradient(105deg, #9ff1ff, #fff, #ff8ae6);
  --shimmer-dur: 9s;
}

*, *::before, *::after { box-sizing: border-box; }

/* Les règles display: block des composants écrasent le [hidden] du navigateur.
   Sans ceci, un bouton masqué reste visible et vide. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Projecteur outremer : c'est lui qui porte l'ambiance, pas les cartes. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 70% -10%, var(--ultramarine) 0%, #0b0a1e 45%, #07060f 100%),
    radial-gradient(600px 400px at 20% 105%, rgba(123, 92, 255, .16), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.screen { display: none; flex: 1; flex-direction: column; animation: fadeIn .35s ease; }
.screen.active { display: flex; }

button { font: inherit; color: inherit; }

/* ─────────────────────── Texte irisé (moments héros) ─────────────────── */
/* Réservé au logotype, aux scores et aux titres de fin. Jamais ailleurs.
   `background-clip: text` ne peint QUE dans la boîte de l'élément. En italique
   900 avec un interlettrage négatif, l'encre du dernier glyphe dépasse cette
   boîte de plusieurs pixels (mesuré : 20 px sur « DREAMS » à 58 px) : la
   dernière lettre ne reçoit alors aucun dégradé et paraît coupée.
   On élargit donc la boîte de peinture, puis on annule cet élargissement par
   une marge négative pour que la mise en page et le centrage ne bougent pas. */
/* Le dépassement d'encre vaut ~.34em pour cet italique, PLUS
   |interlettrage| × nombre de lettres — l'avance rétrécit avec un interlettrage
   négatif, l'encre du dernier glyphe non. Il croît donc avec la longueur du mot.
   Le titre le plus long que le jeu produise fait 31 caractères
   (« Passage chez les professionnels ») : .34 + .04 × 31 ≈ 1.6em. On prend
   1.6em, et SYMÉTRIQUE — un rembourrage d'un seul côté décale un texte centré.
   La marge négative annule tout cela : la mise en page ne bouge pas. */
.iris, .final-title, .draft-pick-num {
  padding: .08em 1.6em;
  margin: -.08em -1.6em;
}

.iris {
  background: var(--grad-iris);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer var(--shimmer-dur) linear infinite;
}

/* Étiquettes monospace : le vocabulaire « diffusion TV » du jeu. */
.mono {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .69rem;
  color: var(--text-4);
}

/* ─────────────────────────────── Boutons ─────────────────────────────── */
.btn {
  display: block;
  width: 100%;
  min-height: 54px;
  border: none;
  border-radius: 16px;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* CTA clair — démarrer, continuer. Le bouton le plus lumineux du jeu. */
.btn-primary {
  background: var(--grad-light);
  color: var(--bg-0);
  box-shadow: 0 0 30px rgba(159, 241, 255, .4);
}
.btn-primary:hover { filter: brightness(1.08); transform: scale(1.02); }

.btn-ghost {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { background: #1A1740; border-color: var(--cyan); color: var(--text-0); }

.btn-danger {
  background: transparent;
  color: var(--bad);
  border: 1px solid rgba(255, 107, 138, .4);
}
.btn-danger:hover { background: rgba(255, 107, 138, .1); }

/* ──────────────────────── Ballons et anneau (CSS pur) ────────────────── */
/* Le ballon chrome : les coutures sont des découpes, pas des traits. Un
   masque SVG en luminance retire la couture horizontale, la verticale et
   les deux arcs latéraux — on ne garde que la matière. */
.ball-chrome {
  background: radial-gradient(circle at 32% 28%, #ffd9f4 0%, #ff3bd4 34%, #7b5cff 68%, #1a1650 100%);
  transform: rotate(-12deg);
  -webkit-mask-image: var(--ball-mask);
  mask-image: var(--ball-mask);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
:root {
  /* Le creusement des coutures se fait À L'INTÉRIEUR du SVG, via un <mask> :
     le SVG rendu porte donc de vrais trous transparents, et le masquage CSS
     n'a plus qu'à travailler en alpha — ce que font tous les moteurs.
     La version précédente comptait sur `mask-mode: luminance`, que WebKit iOS
     n'honore pas : les traits noirs y étaient lus comme opaques, donc ils
     AJOUTAIENT de la matière au lieu d'en retirer, et les portions qui
     dépassaient du disque apparaissaient en ergots. */
  --ball-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 100 100%27%3E%3Cmask id=%27s%27%3E%3Ccircle cx=%2750%27 cy=%2750%27 r=%2750%27 fill=%27white%27/%3E%3Crect x=%270%27 y=%2747.5%27 width=%27100%27 height=%275%27 fill=%27black%27/%3E%3Crect x=%2747.5%27 y=%270%27 width=%275%27 height=%27100%27 fill=%27black%27/%3E%3Cellipse cx=%27-8%27 cy=%2750%27 rx=%2740%27 ry=%2772%27 fill=%27none%27 stroke=%27black%27 stroke-width=%275%27/%3E%3Cellipse cx=%27108%27 cy=%2750%27 rx=%2740%27 ry=%2772%27 fill=%27none%27 stroke=%27black%27 stroke-width=%275%27/%3E%3C/mask%3E%3Ccircle cx=%2750%27 cy=%2750%27 r=%2750%27 fill=%27white%27 mask=%27url(%23s)%27/%3E%3C/svg%3E");
}

/* Ballon de jeu — ambre, fonctionnel, pour l'interface courante. */
.ball-game {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd28a, #ffb03b 45%, #b36f14 100%);
  position: relative; overflow: hidden;
}
.ball-game::before, .ball-game::after {
  content: ""; position: absolute; background: rgba(24, 12, 5, .55);
}
.ball-game::before { top: 50%; left: -5%; width: 110%; height: 1.5px; transform: translateY(-50%); }
.ball-game::after { left: 50%; top: -5%; height: 110%; width: 1.5px; transform: translateX(-50%); }

/* Mini-ballon cyan — marque l'élément actif et les puces de liste. */
.ball-mini {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--cyan); box-shadow: 0 0 14px rgba(159, 241, 255, .7);
  position: relative; overflow: hidden;
}
.ball-mini::before, .ball-mini::after {
  content: ""; position: absolute; background: var(--bg-1);
}
.ball-mini::before { top: 50%; left: -5%; width: 110%; height: 1.5px; transform: translateY(-50%); }
.ball-mini::after { left: 50%; top: -5%; height: 110%; width: 1.5px; transform: translateX(-50%); }

/* ─────────────────────────────── Logotype ────────────────────────────── */
.logo {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  filter: drop-shadow(0 0 22px rgba(255, 59, 212, .35))
          drop-shadow(0 0 46px rgba(123, 92, 255, .3))
          drop-shadow(0 3px 0 rgba(3, 2, 12, .9));
}
.logo-row { display: flex; align-items: center; gap: 10px; }
.logo-word {
  font-family: var(--font-display);
  font-weight: 900; font-style: italic;
  font-size: clamp(2.9rem, 15vw, 4.1rem);
  line-height: .95; letter-spacing: -.04em;
}
.logo-ball { width: .82em; height: .82em; font-size: clamp(2.9rem, 15vw, 4.1rem); flex: none; }
.logo-tagline {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .42em;
  color: var(--text-4); text-transform: uppercase; margin-top: 12px; text-align: center;
}


.home-kicker { margin: 0 0 2px; }

/* ─────────────────────────── Animations signature ────────────────────── */
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes float   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulseGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes sweep   { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes pop     { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; }
                     60% { transform: scale(1.12) rotate(-7deg); opacity: 1; }
                     100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes wobble  { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-5deg) scale(1.04); } }

/* ─────────────────────────────── Accueil ─────────────────────────────── */
.home-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 24px 0;
}

.home-mark {
  width: 210px; height: 210px; display: grid; place-items: center;
  margin-bottom: 2px; animation: float 6s ease-in-out infinite;
}
/* Le ballon héros : chrome irisé, coutures en négatif. */
.ball { width: 168px; height: 168px; }

.home-title { display: none; }   /* remplacé par le logotype .logo */
.home-tagline {
  color: var(--text-2); font-size: .92rem; margin: 6px 0 10px; max-width: 21rem;
  line-height: 1.55;
}
.home-meta { color: var(--text-2); font-size: .8rem; margin: 8px 0 0; }

.home-transfer {
  background: none; border: 0; color: var(--text-2); font: inherit; font-size: .78rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  padding: 12px 8px; margin: 0; min-height: 44px;
}
.home-transfer:hover, .home-transfer:focus-visible { color: var(--cyan); }

.modal-body { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; text-align: left; }
.transfer-label { color: var(--text-2); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.transfer-box {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg-2); color: var(--text-1); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; font-family: var(--font-mono);
  font-size: .74rem; line-height: 1.5; word-break: break-all;
}
.transfer-box:focus-visible { outline: 2px solid var(--ball); outline-offset: 1px; }
.transfer-note { font-size: .78rem; margin: 2px 0 0; min-height: 1.2em; color: var(--text-2); }
.transfer-note.ok { color: var(--good); }
.transfer-note.warn { color: var(--warn); }
.storage-warn {
  color: var(--warn); font-size: .82rem; background: rgba(255, 176, 59, .10);
  border: 1px solid rgba(255, 176, 59, .3); border-radius: 12px; padding: 10px 12px; margin: 4px 0 0;
}

/* ────────────────────────────── Onboarding ───────────────────────────── */
.setup-back {
  align-self: flex-start;
  background: none; border: none; color: var(--text-2);
  font-size: .9rem; padding: 10px 4px; min-height: 44px; cursor: pointer;
}
.setup-back:hover { color: var(--text-0); }
.setup-back:focus-visible { outline: 2px solid var(--ball-bright); outline-offset: 2px; border-radius: 8px; }

.step-dots { display: flex; gap: 6px; margin: 2px 0 14px; }
.step-dot { flex: 1; height: 3px; border-radius: 2px; background: var(--bg-3); transition: background .3s ease; }
.step-dot.done { background: var(--violet); }
.step-dot.active { background: var(--cyan); box-shadow: 0 0 10px rgba(159,241,255,.6); }

.screen-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.55rem; line-height: 1.2; margin: 0 0 8px;
  letter-spacing: -.02em; text-wrap: pretty;
}
.screen-sub { color: var(--text-2); font-size: .92rem; margin: 0 0 18px; line-height: 1.55; }

.choice-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 24px; }

.choice {
  width: 100%;
  min-height: 56px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 16px 18px;
  color: var(--text-1);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .12s ease, color .12s ease;
}
.choice:hover { border-color: var(--cyan); color: var(--text-0); }
.choice:active { transform: translateY(1px); }
.choice:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* Le choix recommandé porte le dégradé principal — un seul par écran. */
.choice.recommended {
  background: var(--grad-cta); border-color: transparent; color: #fff;
  box-shadow: 0 0 24px rgba(255, 59, 212, .3);
}
.choice.recommended:hover { filter: brightness(1.12); border-color: transparent; }
.choice.recommended .choice-desc,
.choice.recommended .choice-detail { color: rgba(255,255,255,.82); }

.choice-head { display: flex; align-items: center; gap: 10px; }
.choice-icon { font-size: 1.3rem; line-height: 1; flex: none; }
.choice-title { font-family: var(--font-display); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.choice-badge {
  margin-left: auto; font-family: var(--font-mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--cyan); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 9px;
  white-space: nowrap;
}
.choice.recommended .choice-badge { color: #fff; border-color: rgba(255,255,255,.5); }
.choice-desc { color: var(--text-1); font-size: .87rem; margin: 6px 0 0; }
.choice-detail { color: var(--text-2); font-size: .78rem; margin: 6px 0 0; }

.attr-preview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.attr-pill {
  font-size: .68rem; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px;
  background: var(--bg-3); color: var(--text-1); font-variant-numeric: tabular-nums;
}
.attr-pill.hi { background: rgba(159, 241, 255, .14); color: var(--cyan); }

/* ──────────────────────────────── HUD ────────────────────────────────── */
.hud {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
}
.hud-row { display: flex; align-items: center; gap: 8px; }
.hud-top { justify-content: space-between; }
.hud-name {
  font-family: var(--font-display); font-weight: 600; font-style: italic;
  font-size: 1.12rem; letter-spacing: -.03em; text-transform: uppercase;
}
.hud-age {
  font-family: var(--font-mono); color: var(--cyan); font-size: .69rem;
  letter-spacing: .1em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hud-team { margin-top: 1px; }
.hud-teamname { color: var(--text-1); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.league-tag {
  margin-left: auto; flex: none; font-family: var(--font-mono);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: var(--bg-3);
  color: var(--text-2); border: 1px solid var(--line);
}
.league-tag.lg-hs { color: var(--tier-hs); }
.league-tag.lg-ncaa { background: rgba(159,241,255,.12); color: var(--cyan); border-color: rgba(159,241,255,.3); }
.league-tag.lg-gleague, .league-tag.lg-euro { color: var(--tier-dev); }
.league-tag.lg-nba { background: rgba(255,59,212,.14); color: var(--pink-light); border-color: rgba(255,59,212,.35); }

/* La pastille de poste a ajouté 68 px à une rangée déjà pleine : elle
   débordait de 76 px et coupait les étoiles. On autorise le retour à la
   ligne plutôt que de rétrécir des cibles tactiles déjà à 44 px. */
.hud-stats { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.hud-stats .hud-stars { margin-left: auto; }
.hud-stats .hud-money { margin-left: 0; }

.ovr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px 10px;
  background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: 10px;
  cursor: pointer; transition: background .12s ease;
}
.ovr-chip:hover { background: #2F3646; }
.ovr-chip:focus-visible { outline: 3px solid var(--ball-bright); outline-offset: 2px; }
.ovr-pos { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--text-4); text-transform: uppercase; }
.ovr-val {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.3rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1;
}
.ovr-caret { font-size: .6rem; color: var(--text-2); transition: transform .2s ease; }
.ovr-chip[aria-expanded="true"] .ovr-caret { transform: rotate(180deg); }

.hud-stars { color: var(--amber); font-size: .95rem; letter-spacing: .06em; }
.hud-money {
  margin-left: auto; font-family: var(--font-mono); color: var(--pink-light);
  font-size: .78rem; font-variant-numeric: tabular-nums;
}

.gauges { display: flex; gap: 10px; margin-top: 11px; }
.gauge { flex: 1; }
.gauge-lbl {
  display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 4px;
}
.gauge-bar { height: 6px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.gauge-fill { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
/* Chaque jauge porte sa propre lueur : c'est la signature des barres. */
.g-form  { background: linear-gradient(90deg, #7b5cff, #9ff1ff); box-shadow: 0 0 10px rgba(159,241,255,.5); }
.g-moral { background: linear-gradient(90deg, #ff3bd4, #ff8ae6); box-shadow: 0 0 10px rgba(255,59,212,.45); }
.g-wear  { background: linear-gradient(90deg, #ffb03b, #ffe29a); box-shadow: 0 0 10px rgba(255,176,59,.45); }

/* ── Poste et calendrier de saison ─────────────────────────────────────
   Les testeurs oubliaient leur poste entre deux sessions et ne savaient pas
   où ils en étaient dans l'année. Les deux informations existaient : le poste
   en 0,6 rem dans la couleur la plus terne du système, l'avancement dans un
   filet de 2 px. Elles existent maintenant à une taille lisible. */
.pos-badge {
  flex: none;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(159, 241, 255, .35); border-radius: 999px;
  padding: 6px 11px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.season-strip { display: flex; gap: 4px; margin-top: 12px; }
.season-step { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.season-step i {
  display: block; height: 4px; border-radius: 99px;
  background: var(--bg-3); border: 1px solid var(--line);
  transition: background .35s ease, box-shadow .35s ease;
}
.season-step b {
  font-family: var(--font-mono); font-weight: 400; font-size: .52rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-4);
  text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.season-step.done i { background: var(--violet); border-color: transparent; }
.season-step.now i {
  background: var(--cyan); border-color: transparent;
  box-shadow: 0 0 10px rgba(159, 241, 255, .6);
}
.season-step.now b { color: var(--cyan); }

.career-bar { height: 2px; background: var(--bg-3); border-radius: 2px; margin-top: 11px; overflow: hidden; }
.career-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--pink), var(--cyan)); transition: width .5s ease; }

/* ───────────────────────────── Panneau profil ────────────────────────── */
.profile-panel {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px; animation: fadeIn .25s ease;
}
.attr-grid { display: flex; flex-direction: column; gap: 8px; }
.attr-line { display: grid; grid-template-columns: 78px 1fr 30px; align-items: center; gap: 9px; }
.attr-name { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.attr-bar { height: 8px; background: var(--bg-3); border-radius: 99px; overflow: hidden; position: relative; }
.attr-val-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 10px rgba(159, 241, 255, .45);
  transition: width .5s ease;
}
.attr-cap { position: absolute; top: -1px; bottom: -1px; width: 2px; background: rgba(232,230,245,.4); }
.attr-num {
  font-family: var(--font-mono); font-size: .78rem; color: var(--cyan);
  font-variant-numeric: tabular-nums; text-align: right;
}
.profile-meta { color: var(--text-2); font-size: .76rem; margin: 12px 0 0; }
.trait-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.trait-chip {
  font-family: var(--font-mono); font-size: .68rem; padding: 5px 11px; border-radius: 999px;
  color: var(--pink-light); border: 1px solid rgba(255,59,212,.35);
  box-shadow: 0 0 12px rgba(255,59,212,.2);
}

/* ──────────────────────────────── Carte ──────────────────────────────── */
.card-stage { flex: 1; display: flex; }

.game-card {
  flex: 1;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 24px 22px 20px;
  box-shadow: 0 12px 34px var(--shadow);
  animation: cardIn .3s cubic-bezier(.2, .8, .3, 1);
  align-self: flex-start;
  width: 100%;
  position: relative;
  overflow: hidden;
}
/* Le ton colore une lueur au sommet de la carte plutôt qu'un liseré :
   la couleur baigne la scène au lieu de la souligner. */
.game-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 120px;
  background: radial-gradient(180px 90px at 50% 0%, var(--tone, transparent), transparent 70%);
  pointer-events: none;
}
.game-card.tone-good     { --tone: rgba(107, 232, 176, .16); border-color: rgba(107,232,176,.28); }
.game-card.tone-bad      { --tone: rgba(255, 107, 138, .16); border-color: rgba(255,107,138,.28); }
.game-card.tone-terrible { --tone: rgba(255, 107, 138, .26); border-color: rgba(255,107,138,.4);
                           animation: cardIn .3s ease, shake .4s ease .3s; }
.game-card.tone-gold     { --tone: rgba(255, 176, 59, .22); border-color: rgba(255,176,59,.35); }

.card-tag {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .63rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 14px;
  position: relative;
}
.card-icon { font-size: 1.05rem; }
.card-tag-right { margin-left: auto; font-variant-numeric: tabular-nums; }

.card-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.42rem; line-height: 1.25; letter-spacing: -.03em;
  margin: 0 0 12px; text-wrap: pretty; position: relative;
}
.card-text { font-size: .96rem; line-height: 1.58; margin: 0 0 18px; color: var(--text-2); position: relative; }
.card-note { font-size: .84rem; color: var(--text-4); margin: 0 0 14px; position: relative; }

.options { display: flex; flex-direction: column; gap: 12px; position: relative; }
.opt-btn {
  width: 100%; min-height: 56px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 16px 18px; cursor: pointer;
  color: var(--text-1);
  transition: border-color .12s ease, background .12s ease, transform .12s ease,
              opacity .2s ease, color .12s ease;
}
.opt-btn:hover:not(:disabled) { border-color: var(--cyan); color: var(--text-0); }
.opt-btn:active:not(:disabled) { transform: translateY(1px); }
.opt-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.opt-btn:disabled { cursor: default; }
.opt-btn.thinking { opacity: .3; }
.opt-btn.chosen {
  opacity: 1; background: var(--grad-cta); border-color: transparent; color: #fff;
  box-shadow: 0 0 24px rgba(255, 59, 212, .3);
}
.opt-btn.chosen .opt-sub, .opt-btn.chosen .opt-hint { color: rgba(255,255,255,.85); }
.opt-hint {
  display: block; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 5px;
}
.opt-label { font-size: .95rem; font-weight: 500; line-height: 1.4; }
.opt-sub { display: block; color: var(--text-4); font-size: .78rem; margin-top: 5px; }

/* Une liste d'options qui n'en contient qu'une seule est un bouton de
   continuation, pas un choix : il prend le CTA clair du système. */
.options:has(> .opt-btn:only-child) .opt-btn {
  background: var(--grad-light); border-color: transparent; color: var(--bg-0);
  text-align: center; box-shadow: 0 0 30px rgba(159, 241, 255, .35);
}
.options:has(> .opt-btn:only-child) .opt-btn .opt-label {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: .92rem;
}
.options:has(> .opt-btn:only-child) .opt-btn:hover:not(:disabled) { filter: brightness(1.08); }

/* Puces d'effet */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.chip {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em;
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: chipIn .32s cubic-bezier(.2, .9, .3, 1) backwards;
}
.chip.good  { color: var(--cyan);  border: 1px solid rgba(159,241,255,.4); box-shadow: 0 0 12px rgba(159,241,255,.2); }
.chip.bad   { color: var(--bad);   border: 1px solid rgba(255,107,138,.4); }
.chip.trait { color: var(--amber); border: 1px solid rgba(255,176,59,.45); box-shadow: 0 0 12px rgba(255,176,59,.22); }

/* Récapitulatif de saison */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 14px; }
.stat-cell {
  background: var(--bg-3); border-radius: 12px; padding: 12px 4px; text-align: center;
}
.stat-num {
  display: block; font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.28rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* Trois couleurs, dans l'ordre des tuiles : cyan, rose, ambre. */
.stat-cell:nth-child(1) .stat-num { color: var(--cyan); }
.stat-cell:nth-child(2) .stat-num { color: var(--pink-light); }
.stat-cell:nth-child(3) .stat-num { color: var(--amber); }
.stat-lbl {
  display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4); margin-top: 4px;
}

.recap-line { font-size: .9rem; margin: 0 0 8px; color: var(--text-2); }
.recap-line strong { color: var(--text-0); font-family: var(--font-mono); font-size: .86rem; }
.recap-flash {
  font-size: .87rem; margin: 0 0 8px; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-1);
}
.recap-flash.good { border-color: rgba(159,241,255,.32); }
.recap-flash.bad  { border-color: rgba(255,107,138,.32); }
.recap-flash.gold { border-color: rgba(255,176,59,.4); color: var(--amber); }

.trophy-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.trophy {
  font-family: var(--font-mono); font-size: .72rem; padding: 7px 12px; border-radius: 999px;
  color: var(--amber); border: 1px solid rgba(255,176,59,.4);
  animation: trophyGlow 2.4s ease-in-out infinite;
}

.draft-big {
  text-align: center; padding: 22px 0 12px; position: relative;
}
/* L'ancre de l'onomatopée a besoin d'un parent positionné à la taille du
   nombre, sinon elle se cale sur toute la largeur de la carte. */
.draft-pick-wrap { position: relative; display: inline-block; }
.draft-pick-num {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 4.4rem; line-height: .9; letter-spacing: -.04em; display: block;
  background: var(--grad-iris); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer var(--shimmer-dur) linear infinite;
  filter: drop-shadow(0 0 18px rgba(255, 59, 212, .4));
}
.draft-pick-lbl {
  display: block;   /* sous le numéro, pas à côté */
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--text-3); margin-top: 2px;
}
.draft-team {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  margin-top: 12px; text-transform: uppercase; letter-spacing: -.02em;
}
.draft-undrafted {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 2.2rem; color: var(--text-3); text-transform: uppercase;
  line-height: 1.1; letter-spacing: -.04em;
}

/* ───────────────────────────── Écran final ───────────────────────────── */
 /* Bordure irisée : le seul cadre en dégradé du jeu, réservé à la fin. */
.final-card {
  background: radial-gradient(400px 300px at 50% 0%, var(--ultra-deep) 0%, var(--bg-1) 70%);
  border: none;
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: 0 16px 44px var(--shadow), 0 0 40px rgba(123, 92, 255, .3);
  position: relative;
  overflow: hidden;
}
.final-card::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 2px;
  background: linear-gradient(140deg, #ff3bd4, #7b5cff, #9ff1ff, #ffb03b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
/* Balayage lumineux, comme sur la carte joueur de la référence. */
.final-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 70px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: sweep 6s ease-in-out infinite; pointer-events: none;
}
.final-tier {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-3); text-align: center; margin: 0 0 10px;
  position: relative;
}
.final-title {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 2rem; text-align: center; letter-spacing: -.04em;
  margin: 0 0 6px; text-transform: uppercase; line-height: 1.05;
  text-wrap: balance;   /* « LES » seul sur une ligne, sinon */
  background: var(--grad-iris); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer var(--shimmer-dur) linear infinite;
  filter: drop-shadow(0 0 18px rgba(255, 59, 212, .35));
  position: relative;
}
.final-name {
  text-align: center; color: var(--text-2); font-size: .88rem; margin: 0 0 18px;
  font-family: var(--font-mono); position: relative;
}
.final-score-row { display: flex; gap: 10px; margin-bottom: 18px; position: relative; }
.final-score-box { flex: 1; background: var(--bg-3); border-radius: 14px; padding: 14px 8px; text-align: center; }
.final-score-num {
  display: block; font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.7rem; letter-spacing: -.05em; font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--cyan);
}
.final-score-num.gold { color: var(--amber); }
.final-score-box:last-child .final-score-num { color: var(--pink-light); }
.final-score-lbl {
  display: block; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4); margin-top: 5px;
}

.section-label {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-4); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
  position: relative;
}
.final-story { font-size: .9rem; line-height: 1.62; color: var(--text-2); margin: 0 0 6px; position: relative; }
.final-untaken {
  font-size: .88rem; line-height: 1.62; color: var(--text-3); font-style: italic;
  border-left: 2px solid var(--violet); padding-left: 14px; margin: 16px 0 0; position: relative;
}
.timeline { display: flex; flex-direction: column; gap: 10px; position: relative; }
.tl-item { display: grid; grid-template-columns: 46px 1fr; gap: 12px; font-size: .86rem; }
.tl-age {
  font-family: var(--font-mono); font-size: .68rem; color: var(--cyan);
  letter-spacing: .04em; font-variant-numeric: tabular-nums; padding-top: 2px;
}
.tl-text { color: var(--text-2); line-height: 1.5; }

.final-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }

/* ────────────────────────── Accueil : panneaux et liens ──────────────── */
.home-panel { width: 100%; }

.daily-card {
  width: 100%; display: flex; align-items: flex-start; gap: 12px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 14px 16px; min-height: 56px; cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.daily-card:hover { border-color: var(--cyan); }
.daily-card:active { transform: translateY(1px); }
.daily-card:focus-visible { outline: 3px solid var(--ball-bright); outline-offset: 2px; }
/* Le titre porte désormais le nom du format et tient sur deux lignes : l'icône
   doit s'aligner sur la PREMIÈRE, sinon elle flotte au milieu du bloc. */
.daily-left { display: flex; align-items: flex-start; gap: 11px; flex: 1; min-width: 0; }
.daily-icon { font-size: 1.4rem; line-height: 1.25; flex: none; }
.daily-text { display: flex; flex-direction: column; min-width: 0; }
.daily-text strong { font-size: .95rem; line-height: 1.28; }
.daily-sub { color: var(--text-4); font-size: .76rem; }
.daily-go {
  flex: none; align-self: flex-start; margin-top: 2px;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pink-light);
  border: 1px solid rgba(255,59,212,.45); border-radius: 999px; padding: 6px 12px;
  box-shadow: 0 0 12px rgba(255,59,212,.22);
}

.home-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; width: 100%; }
.link-tile {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 4px; min-height: 64px; color: var(--text-3);
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: border-color .12s ease, color .12s ease;
}
.link-tile span { font-size: 1.15rem; }
.link-tile:hover { border-color: var(--cyan); color: var(--cyan); }
.link-tile:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ─────────────────────────────── Écrans méta ─────────────────────────── */
.meta-body { padding-bottom: 28px; }
.meta-hint { color: var(--text-2); font-size: .82rem; line-height: 1.5; margin: 0 0 16px; }
.meta-flash {
  background: rgba(255, 107, 138,.15); border: 1px solid rgba(255, 107, 138,.35); color: var(--bad);
  border-radius: 10px; padding: 9px 12px; font-size: .84rem; margin: 0 0 12px;
}
.empty-state { color: var(--text-2); text-align: center; padding: 40px 20px; line-height: 1.7; }
.cat-count { color: var(--cyan); letter-spacing: .1em; }

/* Série de connexion */
.streak-hero {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 16px; margin-bottom: 18px; text-align: center;
}
.streak-flame { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.streak-emoji { font-size: 2.2rem; }
.streak-flame.alive .streak-emoji { animation: flamePulse 2s ease-in-out infinite; }
.streak-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.streak-unit { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); }
.streak-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0; }
.streak-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bg-3); }
.streak-dot.on { background: var(--ball); }
.streak-note, .streak-next { font-size: .78rem; color: var(--text-2); margin: 6px 0 0; }
.streak-next strong { color: var(--wood-soft); }
.streak-stats { display: flex; justify-content: center; gap: 18px; margin-top: 14px; font-size: .74rem; color: var(--text-2); }
.streak-stats strong { display: block; font-size: 1.2rem; color: var(--text-0); font-variant-numeric: tabular-nums; }

/* Quêtes */
.quest {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 9px;
}
.quest.done { border-color: rgba(159,241,255,.32); opacity: .7; }
.quest-icon { font-size: 1.3rem; flex: none; }
.quest-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.quest-name { font-family: var(--font-display); font-weight: 600; font-size: .88rem; letter-spacing: -.01em; }
.quest-desc { color: var(--text-4); font-size: .77rem; }
.quest-pts {
  flex: none; font-family: var(--font-mono); font-size: .78rem; color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.quest.done .quest-pts { color: var(--cyan); }

/* Badges */
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.badge {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 8px; text-align: center; opacity: .4; transition: opacity .2s ease, border-color .2s ease;
}
.badge.got {
  opacity: 1; border-color: rgba(255, 176, 59, .42);
  box-shadow: 0 0 18px rgba(255, 176, 59, .16);
}
.badge-icon { display: block; font-size: 1.6rem; line-height: 1.2; filter: grayscale(1); }
.badge.got .badge-icon { filter: none; }
.badge-name {
  display: block; font-family: var(--font-display); font-weight: 600; font-size: .68rem;
  letter-spacing: -.01em; margin-top: 6px; line-height: 1.3;
}
.badge.got .badge-name { color: var(--amber); }
.badge-hint { display: block; font-size: .6rem; color: var(--text-4); margin-top: 5px; line-height: 1.35; }

/* Boutique */
.shop-balance {
  border: 1px solid rgba(255, 176, 59, .35); color: var(--amber);
  border-radius: 16px; padding: 14px; text-align: center; margin-bottom: 16px;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .06em;
  box-shadow: 0 0 20px rgba(255, 176, 59, .12);
}
.shop-balance strong {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.3rem; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.perk {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 9px;
}
.perk.owned { border-color: rgba(123,92,255,.4); }
.perk.equipped { border-left-color: var(--ball); background: rgba(255, 59, 212,.06); }
.perk-icon { font-size: 1.45rem; flex: none; }
.perk-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.perk-name { font-weight: 650; font-size: .95rem; }
.perk-desc { color: var(--text-1); font-size: .78rem; line-height: 1.4; }
.perk-effect { color: var(--wood-soft); font-size: .7rem; margin-top: 3px; }
.perk-btn {
  flex: none; min-height: 44px; padding: 8px 14px; border-radius: 10px; cursor: pointer;
  background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--text-0);
  font-size: .8rem; font-weight: 650; white-space: nowrap;
}
.perk-btn:hover:not(:disabled) { background: var(--ball-deep); border-color: var(--ball); }
.perk-btn:disabled { opacity: .4; cursor: default; }
.perk-btn:focus-visible { outline: 3px solid var(--ball-bright); outline-offset: 2px; }
.perk.equipped .perk-btn { background: var(--ball-deep); border-color: var(--ball); }

/* Panthéon */
.pantheon-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
}
.pan-rank {
  flex: none; width: 30px; text-align: center; font-family: var(--font-display);
  font-size: 1.3rem; color: var(--wood-soft);
}
.pan-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pan-name { font-weight: 650; font-size: .95rem; }
.pan-sub { color: var(--text-1); font-size: .78rem; }
.pan-detail { color: var(--text-2); font-size: .72rem; }
.pan-score {
  flex: none; font-size: 1.35rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums;
}

/* Mode Histoire */
.story {
  background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 14px; padding: 16px; margin-bottom: 12px;
}
.story.beaten { border-left-color: var(--gold); background: rgba(255, 176, 59,.05); }
.story-head { display: flex; align-items: center; gap: 10px; }
.story-icon { font-size: 1.5rem; }
.story-title { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; }
.story-badge {
  margin-left: auto; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold); border: 1px solid var(--gold-deep); border-radius: 999px; padding: 3px 9px;
}
.story-sub { color: var(--wood-soft); font-size: .78rem; margin: 6px 0 0; }
.story-teaser { color: var(--text-1); font-size: .87rem; line-height: 1.55; margin: 10px 0 0; }
.story-meta { color: var(--text-2); font-size: .78rem; margin: 10px 0 0; }
.story-reveal {
  color: var(--gold); font-size: .84rem; font-style: italic; line-height: 1.55;
  border-left: 2px solid var(--gold-deep); padding-left: 11px; margin: 12px 0 0;
}
.story-btn { margin-top: 14px; }

/* Règle spéciale d'une histoire */
.story-rule {
  display: block; margin: 12px 0 0; padding: 11px 13px; border-radius: 11px;
  background: rgba(255, 59, 212, .08); border: 1px solid rgba(255, 59, 212, .28);
}
.story-rule-head {
  display: block; font-size: .78rem; font-weight: 700; color: var(--ball-bright);
  letter-spacing: .02em; margin-bottom: 5px;
}
.story-rule-desc { display: block; font-size: .82rem; line-height: 1.5; color: var(--text-1); }
.story-goal {
  font-size: .84rem; color: var(--gold); margin: 10px 0 0; padding-left: 2px; font-weight: 600;
}

/* Duel */
.duel-compare { display: flex; gap: 10px; margin: 10px 0; }
.duel-col {
  flex: 1; background: var(--bg-2); border-radius: 12px; padding: 13px 10px; text-align: center;
  display: flex; flex-direction: column; gap: 3px;
}
.duel-label { font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-2); }
.duel-name { font-weight: 650; font-size: .9rem; }
.duel-score { font-size: 1.9rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.1; }
.duel-title { font-size: .78rem; color: var(--text-1); }
.duel-detail { font-size: .7rem; color: var(--text-2); }
.duel-verdict {
  font-size: .88rem; line-height: 1.55; color: var(--text-1); text-align: center;
  margin: 10px 0 0; padding: 11px; background: var(--bg-2); border-radius: 12px;
}

/* Déblocages sur l'écran final */
.unlocks { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.unlock-note {
  font-size: .84rem; line-height: 1.5; margin: 0;
  padding: 10px 12px; border-radius: 10px; background: var(--bg-2); border-left: 3px solid var(--bg-3);
}
.unlock-note.badge { border-left-color: var(--gold); color: var(--gold); }
.unlock-note.quest { border-left-color: var(--good); color: var(--good); }
.unlock-note.streak { border-left-color: var(--ball); color: var(--ball); }
.unlock-note.daily { border-left-color: var(--info); color: var(--text-1); }
.unlock-note.legend { border-left-color: var(--gold); color: var(--text-1); }

@keyframes flamePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ──────────────────────── Bouton de ligue dans le HUD ────────────────── */
.hud-league-btn {
  flex: none; min-width: 44px; min-height: 44px;
  background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: 10px;
  font-size: 1.05rem; cursor: pointer; transition: background .12s ease;
}
.hud-league-btn:hover { background: #2F3646; }
.hud-league-btn:focus-visible { outline: 3px solid var(--ball-bright); outline-offset: 2px; }

/* ─────────────────────────── Classement de la ligue ──────────────────── */
.standings { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.stand-row {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 9px; background: var(--bg-1);
  border-left: 3px solid transparent; font-size: .87rem;
}
.stand-row.out { opacity: .5; }
.stand-row.mine {
  background: rgba(255, 59, 212, .10); border-left-color: var(--ball);
  font-weight: 650; opacity: 1;
}
.stand-rank { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; font-size: .8rem; }
.stand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stand-rec { font-variant-numeric: tabular-nums; color: var(--text-1); font-size: .84rem; }
.stand-row.mine .stand-rec { color: var(--text-0); }
.stand-sep { color: var(--text-2); margin: 0 1px; }

.leaders { display: flex; flex-direction: column; gap: 2px; }
.leader-row {
  display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 9px; background: var(--bg-1); font-size: .87rem;
  border-left: 3px solid transparent;
}
.leader-row.mine { background: rgba(255, 59, 212, .10); border-left-color: var(--ball); font-weight: 650; }
.leader-rank { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; font-size: .8rem; }
.leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-team { color: var(--text-2); font-size: .74rem; letter-spacing: .05em; }
.leader-pts { font-variant-numeric: tabular-nums; color: var(--wood-soft); font-weight: 700; }

/* ────────────────────────── Parcours international ───────────────────── */
.intl-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin: 0 0 14px; font-size: .74rem;
}
.intl-round {
  padding: 4px 9px; border-radius: 999px; background: var(--bg-2); color: var(--text-2);
  border: 1px solid var(--line);
}
.intl-round.passed {
  background: rgba(255, 176, 59, .12); color: var(--gold); border-color: rgba(255, 176, 59, .3);
}
/* Manche en cours du parcours de playoffs : c'est elle qu'on est en train de
   jouer, elle doit se distinguer des manches déjà remportées. */
.intl-round.now {
  color: var(--cyan); border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(159, 241, 255, .35);
}
.intl-arrow { color: var(--text-2); font-size: .8rem; }

/* Écran d'entrée de manche. Ce qui est déjà acquis se lit en un coup d'œil,
   au-dessus du titre : le joueur doit voir ce qu'il a gagné avant de lire dans
   quel état il aborde la suite. */
.po-acquis {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 8px; position: relative;
}
/* La lecture de l'adversaire, détachée de l'état d'esprit : deux informations
   distinctes, l'une sur vous, l'autre sur en face. */
.po-oppo {
  font-size: .88rem; line-height: 1.5; color: var(--text-3);
  border-left: 2px solid var(--line-strong); padding-left: 12px;
  margin: 0 0 16px; position: relative;
}


/* ──────────────────── Onomatopées (moments de bravoure) ──────────────── */
/* Un seul par écran, jamais deux. Le contour se dessine DERRIÈRE le
   remplissage (paint-order), sinon il ronge la lettre. La pastille est
   ancrée au coin de l'élément qu'elle commente : elle l'effleure, elle ne
   le couvre jamais. */
.callout-anchor { position: absolute; top: 0; right: 0; transform: translate(30%, -70%); z-index: 3; }
.callout {
  animation: pop .6s cubic-bezier(.34, 1.56, .64, 1) both,
             wobble 3s ease-in-out .6s infinite;
  position: relative;
}
.callout-word {
  position: relative;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1rem; letter-spacing: -.03em; white-space: nowrap;
  -webkit-text-stroke: 2px var(--bg-0);
  paint-order: stroke fill;
}
/* SWISH! — le plus rare : réservé à l'action du match. */
.callout.swish .callout-word { color: #fff; text-shadow: 2px 2px 0 var(--pink); }
.callout.swish::before {
  content: ""; position: absolute; inset: -11px -15px; background: var(--amber);
  clip-path: polygon(50% 0%, 61% 12%, 78% 5%, 80% 22%, 98% 24%, 88% 38%, 100% 50%,
    88% 62%, 98% 76%, 80% 78%, 78% 95%, 61% 88%, 50% 100%, 39% 88%, 22% 95%,
    20% 78%, 2% 76%, 12% 62%, 0% 50%, 12% 38%, 2% 24%, 20% 22%, 22% 5%, 39% 12%);
  filter: drop-shadow(0 0 18px rgba(255, 176, 59, .5));
}
/* Tampons nus, sans éclat. */
.callout.posterized .callout-word { color: var(--cyan); text-shadow: 3px 3px 0 var(--violet); }
.callout.brick .callout-word { color: var(--pink-light); text-shadow: 3px 3px 0 var(--amber); }

/* ─────────────── Scènes : l'étape de carrière comme lumière ──────────── */
/* Jamais illustrée : un ciel en dégradé, un horizon lumineux à 68 %, et
   l'arc du rond central. Une teinte par étape. */
.scene {
  position: relative; width: 100%; height: 68px; border-radius: 16px;
  overflow: hidden; margin-bottom: 12px;
  background: linear-gradient(180deg, #0e0c26 0%, var(--scene-mid, #171233) 55%, #07060f 100%);
}
.scene::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120px 60px at 50% 68%, var(--scene-glow, rgba(255,176,59,.45)), transparent 70%);
}
.scene::after {
  content: ""; position: absolute; left: 0; right: 0; top: 68%; height: 1.5px;
  background: var(--scene-line, rgba(255, 176, 59, .5));
}
.scene-arc {
  position: absolute; left: 50%; top: 68%; width: 52px; height: 26px;
  border: 1.5px solid rgba(255, 255, 255, .18); border-top: none;
  border-radius: 0 0 56px 56px; transform: translateX(-50%);
}
.scene.stage-hs    { --scene-mid: #171233; --scene-glow: rgba(255,176,59,.45); --scene-line: rgba(255,176,59,.5); }
.scene.stage-ncaa  { --scene-mid: #1d1850; --scene-glow: rgba(159,241,255,.4);  --scene-line: rgba(159,241,255,.5); }
.scene.stage-euro,
.scene.stage-gleague { --scene-mid: #191340; --scene-glow: rgba(255,59,212,.4); --scene-line: rgba(255,59,212,.45); }
/* La NBA seule débloque le spectre complet. */
.scene.stage-nba { --scene-mid: #2a2178; --scene-line: rgba(255,255,255,.35); }
.scene.stage-nba::before {
  background:
    radial-gradient(130px 70px at 50% 68%, rgba(255,59,212,.35), transparent 70%),
    radial-gradient(90px 50px at 30% 60%, rgba(159,241,255,.3), transparent 70%),
    radial-gradient(90px 50px at 70% 60%, rgba(255,176,59,.3), transparent 70%);
}


/* ─────────────────────────────── Glossaire ───────────────────────────── */
.pos-badge { cursor: pointer; transition: border-color .12s ease, color .12s ease; }
.pos-badge:hover { border-color: var(--cyan); }
.pos-badge::before { content: "ⓘ "; opacity: .55; }

.gloss-index { max-height: 52vh; overflow-y: auto; }
.gloss-index .section-label { margin-top: 14px; }
.gloss-index .section-label:first-child { margin-top: 0; }
.gloss-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gloss-item {
  display: flex; align-items: center; gap: 8px; text-align: left;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; min-height: 44px; color: var(--text-1);
  font-size: .82rem; cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.gloss-item:hover { border-color: var(--cyan); color: var(--text-0); }
.gloss-item:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.gloss-icon { flex: none; font-size: 1rem; }
.gloss-terme { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.trivia {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: .84rem; line-height: 1.55; color: var(--text-2);
}
.trivia-lbl {
  display: block; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
  margin-bottom: 6px;
}

@media (max-width: 359px) { .gloss-list { grid-template-columns: 1fr; } }

/* ─────────────────────────────── Modale ──────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(7, 6, 15, .84); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .18s ease;
}
.modal-box {
  width: 100%; max-width: 380px;
  background: var(--bg-1); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 22px 18px 18px; box-shadow: 0 20px 60px var(--shadow);
  animation: cardIn .22s cubic-bezier(.2, .8, .3, 1);
}
.modal-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.28rem;
  margin: 0 0 10px; letter-spacing: -.03em; text-transform: uppercase;
}
.modal-text { color: var(--text-2); font-size: .89rem; line-height: 1.55; margin: 0 0 18px; }
.modal-actions { display: flex; flex-direction: column; gap: 9px; }
.modal-actions .btn { font-size: 1rem; min-height: 48px; }


/* ─────────────────────────────── Animations ──────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes chipIn { from { opacity: 0; transform: scale(.82) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
@keyframes trophyGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 176, 59,0); }
  50% { box-shadow: 0 0 14px rgba(255, 176, 59,.25); }
}

/* ────────────────────────── Confort et accessibilité ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Le texte irisé s'anime en déplaçant son dégradé : figé à .01ms il se
     retrouve arrêté sur une position arbitraire, parfois presque blanche.
     On le fixe explicitement sur une portion lisible du spectre. */
  .iris, .final-title, .draft-pick-num { background-position: 25% 50% !important; }
  .home-mark { animation: none !important; }
}

/* Très petits téléphones */
@media (max-width: 359px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  /* Place comptée : le poste reprend son abréviation. */
  .pos-badge { font-size: 0; padding: 6px 9px; }
  .pos-badge::after { content: attr(data-short); font-size: .66rem; }
  .season-step b { font-size: .46rem; }
  .attr-line { grid-template-columns: 66px 1fr 26px; }
  .home-mark { width: 150px; height: 150px; }
  .ball { width: 120px; height: 120px; }
  .logo-word, .logo-ball { font-size: 2.6rem; }
}

/* Tablette : la colonne respire, le HUD s'étale */
@media (min-width: 620px) {
  #app { max-width: 560px; padding-top: 28px; }
  .screen-title { font-size: 1.9rem; }
  .card-text { font-size: 1.02rem; }
  .final-actions { flex-direction: row; }
}

/* Bureau : deux colonnes, le HUD reste visible pendant qu'on lit la carte */
@media (min-width: 1024px) {
  #app { max-width: 980px; padding-top: 40px; }
  #screen-game { display: none; }
  #screen-game.active { display: grid; grid-template-columns: 320px 1fr; gap: 24px; align-items: start; }
  .hud { position: sticky; top: 24px; margin-bottom: 0; }
  .profile-panel { grid-column: 1; margin-bottom: 0; margin-top: 14px; }
  .card-stage { grid-column: 2; grid-row: 1 / span 3; }
  .home-title { font-size: 4.4rem; }
  .final-card { padding: 28px 26px; }
}

/* Écrans larges : on ne laisse pas la colonne flotter dans le vide */
@media (min-width: 1440px) {
  #app { max-width: 1080px; }
}

/* Le refus de prolongation. Encadré et détaché du reste : c'est une décision
   prise CONTRE le joueur, pas une information de plus dans la liste. */
.fa-refus {
  border-left: 3px solid var(--bad);
  background: rgba(255, 107, 138, .07);
  border-radius: 0 10px 10px 0;
  padding: 11px 14px; margin: 0 0 16px;
  font-size: .9rem; line-height: 1.5; position: relative;
}
.fa-refus strong { display: block; color: var(--bad); margin-bottom: 3px; }
.fa-refus span { color: var(--text-3); }

/* L'adversaire de la manche. Il pèse dans le calcul depuis que le moment décisif
   tient compte de l'écart de niveau : il devait cesser d'être un nombre anonyme. */
.po-adversaire {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-4); margin: 0 0 12px; position: relative;
}
.po-adversaire strong {
  color: var(--cyan); font-weight: 400; letter-spacing: .06em;
}

/* Le format du Défi du jour. Il change tous les jours : son nom doit se lire
   avant le reste, sinon le roulement passe inaperçu. */
.daily-tag {
  display: block;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); margin: 3px 0 4px;
}
.daily-text .daily-sub { line-height: 1.42; }
.daily-kicker {
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 2px;
}

/* ═══════════════════════ Initiales de borne d'arcade ═════════════════════
   Trois cases, comme sur les tableaux des années quatre-vingt. Le champ de
   saisie réel est masqué visuellement mais reste focusable et lisible par les
   lecteurs d'écran : les flèches haut/bas d'époque sont impraticables au pouce. */
.tag-field { margin: 6px 0 2px; }
.tag-slots {
  display: flex; justify-content: center; gap: 10px; margin-bottom: 14px;
}
.tag-slot {
  width: 54px; height: 66px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 2rem;
  color: var(--amber-light);
  background: #0C0A1B; border-radius: 12px;
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .9), 0 0 14px rgba(255, 176, 59, .12);
}
/* La case en cours clignote — c'est le curseur des bornes. */
.tag-slot.now {
  border-color: var(--amber);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .9), 0 0 20px rgba(255, 176, 59, .45);
  animation: tagBlink 1.1s steps(2, start) infinite;
}
@keyframes tagBlink { 50% { border-color: var(--line-strong); box-shadow: inset 0 2px 4px rgba(0,0,0,.9); } }
@media (prefers-reduced-motion: reduce) { .tag-slot.now { animation: none; } }

.tag-label {
  display: block; text-align: center;
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text-4);
  margin-bottom: 6px;
}
.tag-input {
  display: block; width: 140px; margin: 0 auto;
  text-align: center; letter-spacing: .5em; text-indent: .5em;
  font-family: var(--font-mono); font-size: 1rem; text-transform: uppercase;
  background: var(--bg-2); color: var(--text-0);
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 8px;
}
.tag-input:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.tag-error {
  min-height: 1.1em; margin: 8px 0 0; text-align: center;
  font-size: .8rem; color: var(--bad);
}

/* ══════════════════════════ Classement du jour ══════════════════════════ */
.lb-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-row {
  display: grid; grid-template-columns: 34px 46px 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 11px;
  background: var(--bg-2); border: 1px solid var(--line);
}
/* Sa propre ligne, retrouvée dans le tableau : c'est la première chose qu'on
   cherche des yeux. */
.lb-row.me {
  border-color: var(--amber);
  background: rgba(255, 176, 59, .08);
  box-shadow: 0 0 16px rgba(255, 176, 59, .18);
}
.lb-rank { font-family: var(--font-mono); font-size: .74rem; color: var(--text-4); text-align: right; }
.lb-tag {
  font-family: var(--font-display); font-weight: 900; font-size: .95rem;
  letter-spacing: .04em; color: var(--amber-light);
}
.lb-name { font-size: .88rem; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: var(--font-mono); font-size: .92rem; color: var(--text-0); font-variant-numeric: tabular-nums; }
.lb-empty { padding: 18px 14px; color: var(--text-4); font-size: .9rem; line-height: 1.5; text-align: center; }
.lb-note { font-size: .78rem; line-height: 1.5; color: var(--text-4); margin: 0; }

/* Le bloc de soumission, sur l'écran de fin. */
.lb-submit { margin: 14px 0 0; }
.lb-status { font-size: .86rem; line-height: 1.5; margin: 10px 0 0; color: var(--text-3); }
.lb-status.ok { color: var(--good); }
.lb-status.ko { color: var(--bad); }
.daily-lb {
  display: block; width: 100%; margin-top: 8px;
  background: none; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.daily-lb:hover { border-color: var(--amber); color: var(--amber-light); }
.daily-lb:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }