/* =========================================================================
   Football Specialist — système graphique repris de la maquette MVP.
   Vert olive profond, accent lime, cartes très arrondies, pastilles.
   ========================================================================= */

:root {
  --fond: #1b2410;
  --fond-haut: #2a3718;
  --carte: rgba(212, 245, 60, .055);
  --carte-forte: rgba(212, 245, 60, .10);
  --trait: rgba(212, 245, 60, .14);
  --trait-fort: rgba(212, 245, 60, .30);

  --lime: #d4f53c;
  --sur-lime: #17200a;

  --txt: #ffffff;
  --muted: #a9b894;

  --danger: #ff6b5e;
  --warn: #ffc94d;

  --r-carte: 22px;
  --r-pill: 999px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--fond);
  background-image: linear-gradient(180deg, var(--fond-haut) 0%, var(--fond) 46%);
  background-attachment: fixed;
  color: var(--txt);
  font: 400 16px/1.5 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex;
  justify-content: center;
  padding: 20px 18px;
  -webkit-font-smoothing: antialiased;
}

#wrap { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
#app { display: flex; flex-direction: column; gap: 14px; }

/* --- cartes --------------------------------------------------------- */
.card {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
}
.card.plein { background: var(--carte-forte); }

.section { font-size: 14.5px; font-weight: 600; color: var(--txt); margin: 8px 0 -6px; }
.title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* --- accueil -------------------------------------------------------- */
.hero h1 {
  font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em;
}
.hero h1 em { display: block; color: var(--lime); font-style: italic; }
.hero p { color: var(--muted); font-size: 14.5px; margin-top: 12px; }

/* --- cartes de mini-jeu --------------------------------------------- */
.jeu {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: linear-gradient(100deg, rgba(212,245,60,.13), rgba(212,245,60,.03) 62%);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  padding: 16px;
}
.jeu.on { border-color: var(--trait-fort); background: linear-gradient(100deg, rgba(212,245,60,.22), rgba(212,245,60,.05) 62%); }
.jeu-icone {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.3); border: 1.5px solid var(--trait-fort);
  color: var(--lime);
}
.jeu-icone svg, .nav-item svg { width: 24px; height: 24px; display: block; }
.acte-ico svg { width: 19px; height: 19px; display: block; }
.jeu-icone.petit svg { width: 20px; height: 20px; }
.acte-ico { color: var(--lime); }
.jeu-corps { flex: 1; min-width: 0; display: block; }
/* Titre et pastille restent sur une ligne : le titre se tronque si besoin,
   la pastille ne se replie jamais. */
.jeu-titre { display: flex; align-items: center; gap: 7px; flex-wrap: nowrap; }
.jeu-titre b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jeu-desc { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; margin-top: 5px; }
.chev {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--trait); color: var(--lime); font-size: 15px;
}
.jeu.on .chev { background: var(--lime); color: var(--sur-lime); border-color: var(--lime); }

.badge {
  background: var(--lime); color: var(--sur-lime);
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; flex: none;
}
.badge.creux { background: transparent; color: var(--lime); border: 1px solid var(--trait-fort); }

/* --- en-tête de partie ---------------------------------------------- */
.entete { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.entete b { font-size: 17px; font-weight: 600; }
.entete .sous { width: 100%; text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* --- boutons --------------------------------------------------------- */
button {
  font: inherit; font-weight: 600; color: var(--txt);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r-pill); padding: 16px 18px; cursor: pointer;
  transition: transform .06s ease, filter .15s ease;
}
button:active:not(:disabled) { transform: scale(.975); }
button:disabled { opacity: .4; cursor: not-allowed; }
button.primary { background: var(--lime); border-color: var(--lime); color: var(--sur-lime); font-weight: 700; }
button.danger { background: transparent; border-color: rgba(255,107,94,.5); color: var(--danger); }
button.ghost { background: rgba(255,255,255,.05); }
.full { width: 100%; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 8px; }

/* --- duel : deux joueurs face à face --------------------------------- */
.duel { display: flex; align-items: center; justify-content: space-around; gap: 10px; margin-top: 14px; }
.duel-col { flex: 1; min-width: 0; text-align: center; }
.duel-col .qui { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duel .vs { color: var(--muted); font-size: 12px; font-weight: 700; flex: none; }
.rond {
  width: 84px; height: 84px; margin: 0 auto; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.18); background: rgba(0,0,0,.22);
}
.rond.mien { border-color: var(--lime); border-width: 2.5px; }
.rond .n { font-size: 27px; font-weight: 700; line-height: 1; }
.rond .u { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.rond.vide .n { color: var(--muted); font-weight: 600; }

/* --- chrono ---------------------------------------------------------- */
.chip-chrono {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--lime); font-size: 19px; font-weight: 700;
}
.timer { font-size: 42px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.timer.low { color: var(--danger); }
.bar { height: 6px; background: rgba(255,255,255,.09); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.bar > i { display: block; height: 100%; background: var(--lime); transition: width .25s linear; }
.bar.low > i { background: var(--danger); }

.question { font-size: 19px; font-weight: 600; line-height: 1.35; text-align: center; }
.theme-label { font-size: 12px; color: var(--lime); font-weight: 600; margin-bottom: 8px; }
.counter { text-align: center; font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.counter small { font-size: 16px; color: var(--muted); font-weight: 500; }

/* --- avis (bandeau d'info avec pictogramme) --------------------------- */
.avis { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.24); border-radius: 16px; padding: 12px 14px; }
.avis .pic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(212,245,60,.12); }
.avis .txt { font-size: 13.5px; line-height: 1.35; }
.avis .txt b { font-weight: 600; }

/* --- enchères : sélecteur -------------------------------------------- */
.stepper { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 14px; }
.stepper button { width: 52px; height: 52px; padding: 0; font-size: 23px; border-radius: 50%; }
.stepper .n { font-size: 40px; font-weight: 700; min-width: 74px; text-align: center; font-variant-numeric: tabular-nums; }

/* --- saisie ----------------------------------------------------------- */
input[type=text], input[type=password], input[type=email] {
  width: 100%; font: inherit; color: var(--txt);
  background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; padding: 15px 17px;
}
input::placeholder { color: var(--muted); opacity: .75; }
input:focus { outline: none; border-color: var(--trait-fort); }
input.flash-ok { border-color: var(--lime); background: rgba(212,245,60,.13); }
input.flash-no { border-color: var(--danger); background: rgba(255,107,94,.12); }

#barre {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 8px; align-items: stretch;
  padding: 10px 0 max(10px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--fond) 24%);
}
#barre[hidden] { display: none; }
#barre input { flex: 1; min-width: 0; }
#barre button { flex: none; padding: 15px 22px; }

/* --- listes ----------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-pill); padding: 5px 12px; font-size: 13px; }
.chip.ok { border-color: var(--trait-fort); color: var(--lime); }
.chip.miss { color: var(--muted); }

.feed { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.feed .it { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; padding: 10px 13px; border-radius: 14px; background: rgba(0,0,0,.24); }
.feed .it b { font-weight: 600; }
.feed .found { color: var(--lime); }
.feed .unknown { color: var(--danger); }
.feed .already { color: var(--warn); }
.feed .impasse { color: var(--warn); }
.feed .tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .8; white-space: nowrap; }

/* --- code de partie ---------------------------------------------------- */
.code { font-size: 34px; font-weight: 700; letter-spacing: .2em; text-align: center; color: var(--lime); padding: 6px 0; }

/* --- Le Une-Deux : blasons -------------------------------------------- */
.blason {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--c); color: #fff; font-weight: 700; font-size: 14px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  flex: none;
}
.blason.sm { width: 27px; height: 27px; font-size: 10px; }

.logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 17px 8px; border-radius: 18px; }
.logo .nom { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.25; }
.logo.mine { border-color: var(--lime); background: rgba(212,245,60,.12); }
.logo.taken { opacity: .3; }

/* --- sièges ------------------------------------------------------------ */
.seats { display: flex; gap: 7px; }
.seat { flex: 1; min-width: 0; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 10px 6px; text-align: center; }
.seat.me { border-color: var(--trait-fort); }
.seat.now { background: rgba(212,245,60,.13); border-color: var(--lime); }
.seat.out { opacity: .35; }
.seat .nm { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat .st { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }
.seat.now .st { color: var(--lime); }

/* --- chaîne ------------------------------------------------------------ */
.seedline { display: flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 15px; flex-wrap: wrap; }
.seedline .plus { color: var(--lime); font-weight: 700; }
.trail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.maillon { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: var(--r-pill); background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.1); font-size: 13px; font-weight: 600; }
.maillon.joueur { padding-left: 12px; border-color: var(--trait-fort); color: var(--lime); }
.trail .fleche { color: var(--muted); font-size: 13px; }
.prompt { text-align: center; font-size: 16px; line-height: 1.4; margin: 16px 0 4px; }
.prompt b { color: var(--lime); font-weight: 600; }

/* --- divers ------------------------------------------------------------ */
.muted { color: var(--muted); font-size: 14px; }
.center { text-align: center; }
.big { font-size: 25px; font-weight: 700; }
.win { color: var(--lime); }
.lose { color: var(--danger); }

/* --- sélecteurs segmentés (mode, niveau) ------------------------------- */
.segments { display: flex; gap: 8px; }
.segments .seg { flex: 1; padding: 13px 6px; font-size: 13.5px; font-weight: 600; }
.segments .seg.on { background: var(--lime); border-color: var(--lime); color: var(--sur-lime); font-weight: 700; }

/* --- score solo -------------------------------------------------------- */
.scorebar { display: flex; gap: 8px; }
.scorebar .bloc { flex: 1; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 11px 8px; text-align: center; }
.scorebar .bloc .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.scorebar .bloc .v.lime { color: var(--lime); }
.scorebar .bloc .l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }

.gain { text-align: center; font-size: 30px; font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; }
.gain small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* --- classement --------------------------------------------------------- */
.classement { display: flex; flex-direction: column; gap: 7px; }
.rang { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; background: rgba(0,0,0,.24); }
.rang.or { background: rgba(212,245,60,.13); border: 1px solid var(--trait-fort); }
.rang .pos { width: 24px; text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.rang.or .pos { color: var(--lime); }
.rang .qui { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rang .qui b { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rang .det { font-size: 11px; color: var(--muted); }
.rang .pts { font-weight: 700; font-size: 17px; color: var(--lime); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Page d'atterrissage (maquette 1)
   ========================================================================= */

/* Le hero déborde volontairement du padding du corps, pour aller bord à bord. */
.landing { margin: -20px -18px 0; display: flex; flex-direction: column; }

.hero-media {
  position: relative;
  height: 52vh; min-height: 300px; max-height: 460px;
  overflow: hidden;
}

/* Le logo est carré et sans transparence : c'est le CSS qui l'arrondit, ce qui
   est plus net et divise son poids par deux (une vraie palette PNG). */
.hero-logo {
  position: absolute; left: 50%; top: 46%;
  transform: translate(-50%, -50%);
  width: 46%; max-width: 200px; height: auto;
  border-radius: 22%;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

/* La photo se pose par-dessus. Fichier absent = rien ne s'affiche, le repli reste. */
.hero-photo {
  position: absolute; inset: 0;
  background:
    url('/hero.jpg') center 22% / cover no-repeat,
    radial-gradient(120% 85% at 50% 34%, rgba(212,245,60,.13), transparent 62%),
    linear-gradient(180deg, #2f3f1a, #212d14);
}

/* Fondu vers le fond de page : le texte s'y pose sans cartouche. */
.hero-fade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(27,36,16,.15) 0%, rgba(27,36,16,0) 38%, var(--fond) 97%);
}

.cloche {
  position: absolute; top: 16px; right: 16px;
  width: 44px; height: 44px; padding: 0; font-size: 17px; border-radius: 50%;
  background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}

.landing-txt { position: relative; margin-top: -34px; padding: 0 22px; text-align: center; }
.landing-txt h1 { font-size: 31px; font-weight: 700; line-height: 1.16; letter-spacing: -.02em; }
.landing-txt h1 em { display: block; color: var(--lime); font-style: italic; }
.landing-txt p { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 14px; }

.landing-actions { padding: 24px 18px 18px; }
.landing-actions .primary { display: flex; align-items: center; justify-content: center; position: relative; }
.landing-actions .fleche { position: absolute; right: 20px; font-size: 20px; line-height: 1; }
.landing-actions .ghost .ico { margin-right: 8px; }

/* =========================================================================
   Accueil joueur (maquette 2)
   ========================================================================= */

.topbar { display: flex; align-items: center; gap: 10px; }
.topbar .spacer { flex: 1; }
.rond-btn {
  width: 44px; height: 44px; padding: 0; font-size: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.avatar {
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background: var(--lime); color: var(--sur-lime);
  font-weight: 700; font-size: 15px; letter-spacing: .02em;
  border-color: var(--lime);
  display: flex; align-items: center; justify-content: center;
}
.avatar.gros { width: 78px; height: 78px; font-size: 26px; margin: 0 auto; }

.salut h2 { font-size: 25px; font-weight: 700; letter-spacing: -.015em; }
.salut h2 .main { font-style: normal; }
.salut p { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 5px; }

/* --- bandeau de trois stats --- */
.stats3 { display: flex; align-items: stretch; padding: 14px 8px; }
.stats3 .st { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.stats3 .st + .st { border-left: 1px solid var(--trait); }
.stats3 .st .ic { font-size: 17px; }
.stats3 .st b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stats3 .st span:last-child { font-size: 10.5px; color: var(--muted); line-height: 1.25; padding: 0 4px; }

/* --- activité récente --- */
.acte {
  display: flex; align-items: center; gap: 11px;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 16px; padding: 10px 13px; margin-bottom: 7px;
}
.acte-ico {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: rgba(0,0,0,.3); border: 1.5px solid var(--trait-fort);
}
.acte-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acte-corps b { font-size: 14.5px; font-weight: 600; }
.acte-corps .det { font-size: 11.5px; color: var(--muted); }
.acte-fin { display: flex; align-items: center; gap: 7px; flex: none; }
.acte-fin .coupe { font-size: 15px; }

/* --- ligne générique (page stats) --- */
.ligne { display: flex; align-items: center; gap: 12px; }
.ligne-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ligne-corps b { font-size: 15px; font-weight: 600; }
.ligne-corps .det { font-size: 11.5px; color: var(--muted); }
.ligne-val { font-size: 20px; font-weight: 700; color: var(--lime); font-variant-numeric: tabular-nums; }
.jeu-icone.petit { width: 42px; height: 42px; font-size: 18px; }

/* --- barre de navigation --- */
/* Fixée au bas de la fenêtre. En `sticky`, elle se superposait au contenu
   qui la précède — « Activité récente » passait dessous. */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; gap: 4px;
  width: 100%; max-width: 440px; margin: 0 auto;
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(20, 28, 12, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--trait);
}
/* Réserve la hauteur de la barre : le dernier élément doit pouvoir défiler
   au-dessus d'elle. */
.a-nav { padding-bottom: 84px; }
/* Idem pour la barre de saisie, qui est collée en bas. */
.a-barre { padding-bottom: 8px; }
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: none; padding: 8px 2px; border-radius: 14px;
  color: var(--muted);
}
.nav-item .ico { display: block; width: 22px; height: 22px; }
.nav-item .lbl { font-size: 10px; font-weight: 600; }
.nav-item.on { color: var(--lime); background: rgba(212,245,60,.10); }


/* --- grille de statistiques (2 colonnes) ------------------------------- */
.card.compact { padding: 4px 16px; }

.srang { display: flex; align-items: center; gap: 14px; padding: 13px 0; }
.srang + .srang { border-top: 1px solid var(--trait); }
.slbl {
  flex: none; width: 62px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
.sfigs { flex: 1; display: flex; gap: 6px; min-width: 0; }
.sfig {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px;
  text-align: center;
}
.sfig b {
  font-size: 20px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--lime);
}
.sfig span {
  font-size: 9.5px; color: var(--muted); line-height: 1.2;
  white-space: nowrap; letter-spacing: -.01em;
}

/* --- sortie de partie --------------------------------------------------- */
.sortie { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.sortie button {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  color: var(--muted); background: transparent; border-color: var(--trait);
}
.sortie button.arme { color: var(--danger); border-color: rgba(255,107,94,.55); }

/* =========================================================================
   Maillot floqué (mini-jeu à venir) — dessiné au trait, sans image.
   ========================================================================= */
.maillot { display: block; margin: 0 auto; max-width: 100%; height: auto; }

.m-nom { font-size: 31px; font-weight: 700; letter-spacing: .02em; }
.m-numero { font-size: 140px; font-weight: 700; }

/* --- Le Flocage : le maillot ne doit pas manger l'écran --- */
.compact-maillot { padding: 12px 14px 4px; }
.compact-maillot .maillot { margin-top: -6px; margin-bottom: -14px; }

/* =========================================================================
   Le Flocage — écran de jeu (structure reprise de la maquette)
   ========================================================================= */

/* Fil des manches : un blason par maillot */
.fil {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  flex-wrap: wrap; padding: 2px 0;
}
.pastille {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 2px solid transparent;
}
.pastille .blason { width: 30px; height: 30px; font-size: 9px; }
.pastille.ok { border-color: var(--lime); }
.pastille.rate { opacity: .45; }
.pastille.ici { border-color: var(--lime); transform: scale(1.22); box-shadow: 0 0 0 3px rgba(212,245,60,.18); }
.pastille.vide {
  width: 26px; height: 26px;
  background: rgba(255,255,255,.05); border: 1px solid var(--trait);
}

.titre-jeu { text-align: center; margin-top: 4px; }
.titre-jeu h2 {
  font-size: 21px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.titre-jeu p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* Cases de lettres */
.lettres { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; }
.lettre {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 42px; border-radius: 9px;
  background: var(--carte-forte); border: 1px solid var(--trait);
  font-size: 19px; font-weight: 700; color: var(--txt);
}
.lettre.vide { background: rgba(0,0,0,.26); }
.lettre.tiret { width: 16px; border: none; background: none; color: var(--muted); }
.lettres .espace { width: 12px; }

.indice { font-size: 12.5px; margin-top: -2px; }

/* Chrono en pastille */
.chrono-pill {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 2px auto 0; padding: 12px 26px; width: fit-content;
  background: var(--carte-forte); border: 1px solid var(--trait); border-radius: var(--r-pill);
}
.chrono-pill .ic { font-size: 19px; }
.chrono-pill b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.chrono-pill .u { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.chrono-pill.low b { color: var(--danger); }

.revelation {
  text-align: center; font-size: 11.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; margin-top: -4px;
}
.revelation b { color: var(--lime); font-variant-numeric: tabular-nums; }

/* Barre du bas : maillots et points */
.barre-bas { display: flex; padding: 12px 8px; }
.barre-bas .bb {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.barre-bas .bb + .bb { border-left: 1px solid var(--trait); }
.barre-bas .bb .ic { font-size: 15px; }
.barre-bas .bb b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.barre-bas .bb span:last-child { font-size: 10.5px; color: var(--muted); }

/* =========================================================================
   Animations — voir public/anim.js pour les règles
   ========================================================================= */

/* Flamme de série */
.flamme {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; line-height: 1; vertical-align: middle;
  animation: flamme-vive 1.1s ease-in-out infinite alternate;
}
.flamme b { font-size: 12px; font-weight: 700; color: var(--warn); }
.flamme.n2 { font-size: 14px; } .flamme.n3 { font-size: 16px; }
.flamme.n4 { font-size: 18px; } .flamme.n5 { font-size: 21px; }
.flamme.n6 { font-size: 24px; filter: drop-shadow(0 0 8px rgba(255,180,40,.55)); }
@keyframes flamme-vive {
  from { transform: scale(1) rotate(-2deg); }
  to   { transform: scale(1.12) rotate(2deg); }
}

/* Mauvaise réponse */
.secousse { animation: secousse .4s cubic-bezier(.36,.07,.19,.97); }
@keyframes secousse {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Bonne réponse */
.pulse { animation: pulse .5s ease-out; }
@keyframes pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}

/* Cases de lettres : retournement à la révélation */
.lettre { transition: background .2s ease, border-color .2s ease; }
.lettre.revelee { animation: retourne .45s ease-out; border-color: var(--trait-fort); }
@keyframes retourne {
  0%   { transform: rotateX(90deg); background: var(--lime); color: var(--sur-lime); }
  60%  { transform: rotateX(0deg);  background: var(--lime); color: var(--sur-lime); }
  100% { transform: rotateX(0deg); }
}

/* Chrono qui presse dans les dernières secondes */
.chrono-pill.low, .timer.low { animation: presse .9s ease-in-out infinite; }
@keyframes presse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Bandeau de record */
.record-bandeau {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(100deg, rgba(212,245,60,.2), rgba(212,245,60,.05));
  border: 1px solid var(--trait-fort); border-radius: var(--r-carte);
  padding: 14px; font-weight: 700; font-size: 15px; color: var(--lime);
  animation: pulse .6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .flamme, .secousse, .pulse, .lettre.revelee, .chrono-pill.low, .timer.low,
  .record-bandeau { animation: none !important; }
}

/* --- écran de compte --- */
.logo-auth { width: 96px; height: 96px; border-radius: 22%; margin: 0 auto 18px; display: block;
             box-shadow: 0 10px 26px rgba(0,0,0,.35); }