/* ============================================
   ⚡ RUSH — feuille de style du mode
   Un portrait, un champ, deux nombres. Tout le reste est du silence : le
   joueur a soixante secondes, rien ne doit lui prendre l'œil.
   ============================================ */

.rush {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.4rem, 3vh, 2.2rem);
    /* Le bas plus lourd que le haut : l'ensemble remonte dans l'écran */
    padding: 3.5rem 1rem 6rem;
    background:
        radial-gradient(58% 46% at 50% 42%, rgba(255, 200, 60, 0.05), transparent 72%),
        #08080b;
}

/* ══════════ Le chrono de la manche ══════════ */
/* Le chrono vit dans son coin, en haut à droite. */
.rush-chrono {
    position: fixed;
    top: var(--chrono-haut, 1.4rem);
    right: var(--chrono-droite, 2rem);
    left: auto;
    display: grid;
    place-items: center;
    z-index: 70;
}

/* Il paraît une seconde avant le reste : une frappe brève, puis il se pose.
   L'éclat vient d'un halo qui se rétracte, pas d'un clignotement — on veut
   annoncer le départ, pas éblouir. */
.rush-chrono.parait .rush-chrono-n {
    animation: rushChronoParait 0.75s cubic-bezier(0.16, 1.1, 0.3, 1) both;
}

@keyframes rushChronoParait {
    0%   { opacity: 0; transform: scale(2.1); text-shadow: 0 0 4rem rgba(255, 215, 0, 0.9); }
    45%  { opacity: 1; transform: scale(0.94); text-shadow: 0 0 2.6rem rgba(255, 215, 0, 0.7); }
    70%  { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); text-shadow: 0 0 1.8rem rgba(255, 215, 0, 0.35); }
}

.rush-chrono-n {
    position: relative;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 4.6vh, 3rem);
    line-height: 0.85;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 1.8rem rgba(255, 215, 0, 0.35);
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* Les dix dernières secondes : le halo bat, sans clignoter */
/* Le souffle des dix dernieres secondes porte sur le chiffre, pas sur le bloc :
   celui-ci n a plus de transformation propre, mais garder les deux separes
   evite qu un futur effet sur le bloc ecrase le souffle. */
.rush-chrono.urgence .rush-chrono-n {
    color: #ff8a97;
    text-shadow: 0 0 2rem rgba(255, 90, 110, 0.5);
    animation: rushSouffle 1s ease-in-out infinite;
}

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

/* ══════════ Le portrait ══════════ */
/* Les deux compteurs au-dessus du portrait, côte à côte et centrés sur lui. */
.rush-rang {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.6rem, 4vh, 2.6rem);
}

.rush-compteurs {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(2.2rem, 7vw, 4rem);
}

/* Le chrono paraît seul une seconde ; le jeu entre ensuite d'un bloc, sans
   décalage entre ses éléments — c'est un mode nerveux, il démarre net. */
.rush.en-entree .rush-rang,
.rush.en-entree .rush-saisie,
.rush.en-entree .rush-top {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

.rush .rush-rang,
.rush .rush-saisie,
.rush .rush-top {
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* Les 308 portraits font tous 225 x 350. La vitre prend ce format, le cadre
   l'entoure d'un filet fin, et le bandeau du bas porte le minuteur du tour.
   Toutes les tailles descendent de --carte-h : elle seule se règle. */
.rush {
    --carte-h: min(22rem, 42vh);
    --carte-l: calc(var(--carte-h) * 225 / 350);
    --cadre: 0.4rem;        /* le filet, sur trois côtés */
    --cartouche: 1.9rem;    /* le bandeau du bas */
}

/* La scène garde la taille du cadre même pendant le remplacement d'un
   portrait : sans elle, la page sauterait à chaque changement. */
.rush-scene {
    display: grid;
    place-items: center;
    width: calc(var(--carte-l) + var(--cadre) * 2);
    height: calc(var(--carte-h) + var(--cadre) + var(--cartouche));
    flex: 0 0 auto;
}

.rush-carte {
    --porte: 0 1.2rem 3rem rgba(0, 0, 0, 0.5);
    --filet: inset 0 0 0 0.06rem rgba(255, 255, 255, 0.09);
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--cadre) var(--cadre) var(--cartouche);
    border-radius: 0.55rem;
    background: #131217;
    box-shadow: var(--porte), var(--filet);
}

/* La vitre rogne le portrait : sans elle, sa respiration déborderait sur le
   cadre et viendrait recouvrir le bandeau. */
.rush-vitre {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.28rem;
    overflow: hidden;
}

.rush-carte img {
    display: block;
    width: 100%;
    height: 100%;
    /* La vitre ayant le format du fichier, « cover » ne rogne rien : il garantit
       seulement qu'aucun demi-pixel d'arrondi ne laisse un liseré. */
    object-fit: cover;
    /* Le portrait respire : très lent, il ne distrait pas de la saisie */
    animation: rushFlotte 9s ease-in-out infinite;
}

/* Le bandeau, simple dégradé : il ne porte aucun texte, seulement le minuteur */
.rush-cartouche {
    position: absolute;
    left: var(--cadre);
    right: var(--cadre);
    bottom: var(--cadre);
    height: 1.15rem;
    border-radius: 0.2rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
    pointer-events: none;
}

@keyframes rushFlotte {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.025) translateY(-0.3rem); }
}

/* Le minuteur vit dans le bandeau : jamais sur la photo, dont le bas peut
   être clair, et jamais à côté d'elle, où il tirait l'œil de travers. */
.rush-limite-rail {
    position: absolute;
    left: calc(var(--cadre) + 0.35rem);
    right: calc(var(--cadre) + 0.35rem);
    bottom: 0.88rem;
    height: 0.18rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    pointer-events: none;
}

.rush-limite {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    background: linear-gradient(90deg, #ff8c00, var(--neon-primary, #ffd700));
    box-shadow: 0 0 0.5rem rgba(255, 190, 40, 0.55);
    transform-origin: left center;
    animation-name: rushMeche;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes rushMeche {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Les deux verdicts : un éclat vert quand ça passe, un repli quand on saute */
.rush-carte.juste { animation: rushJuste 0.32s cubic-bezier(0.2, 0.9, 0.25, 1); }
.rush-carte.passe { animation: rushPasse 0.32s ease; }

/* Le filet du cadre s'allume : vert quand le nom tombe, rouge quand on passe.
   Les images repartent de --porte et --filet, pour rester d'accord avec le
   repos du cadre si sa profondeur change un jour. */
@keyframes rushJuste {
    0%   { box-shadow: var(--porte), inset 0 0 0 0.06rem rgba(110, 231, 183, 0.9); }
    40%  { box-shadow: var(--porte), inset 0 0 0 0.22rem rgba(110, 231, 183, 0.75); }
    100% { box-shadow: var(--porte), var(--filet); }
}

@keyframes rushPasse {
    0%   { box-shadow: var(--porte), inset 0 0 0 0.06rem rgba(255, 90, 110, 0.85); }
    100% { box-shadow: var(--porte), var(--filet); }
}

/* ── Le paquet qui defile ──
   La sortante part sur la gauche, la suivante arrive de la droite : on parcourt
   une pile, et le sens de lecture est celui du temps. Les deux se croisent, ce
   qui suppose que la transition ne soit plus en « out-in » — sinon la sortante
   aurait fini son chemin avant que l autre s annonce, et le geste se casserait
   en deux.

   Les deux cartes occupent alors la meme case de la grille : sans « grid-area »,
   la seconde s empilerait sous la premiere et la scene doublerait de hauteur le
   temps du passage.

   Les durees sont courtes a dessein — deux dixiemes a l aller, un et demi au
   retour. Au rythme d un portrait toutes les deux secondes, on tape deja le nom
   suivant : une animation qui s attarde deconcentre au lieu d accompagner. */
.rush-scene > .rush-carte { grid-area: 1 / 1; }

.rush-carte-enter-active { transition: opacity 0.14s ease, transform 0.2s cubic-bezier(0.2, 0.95, 0.25, 1); }
.rush-carte-leave-active { transition: opacity 0.12s ease, transform 0.15s cubic-bezier(0.5, 0, 0.9, 0.3); }
.rush-carte-enter-from   { opacity: 0; transform: translateX(115%) rotate(4deg); }
.rush-carte-leave-to     { opacity: 0; transform: translateX(-115%) rotate(-6deg); }

/* ══════════ La série et le record ══════════ */
.rush-serie, .rush-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.rush-serie { position: relative; }

/* Le chiffre sert de repere a l exposant : en colonne, « align-items: center »
   laisse chaque enfant a sa largeur propre, celle du nombre exactement. */
.rush-serie .v {
    position: relative;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 8vw, 4rem);
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.rush-serie.bat .v {
    color: var(--neon-primary, #ffd700);
    text-shadow: 0 0 1.8rem rgba(255, 215, 0, 0.4);
}

/* Le battement d'une bonne réponse : bref, sinon il déborde sur la suivante */
.rush-serie.monte .v { animation: rushMonte 0.34s cubic-bezier(0.2, 1.6, 0.4, 1); }

@keyframes rushMonte {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Sous multiplicateur, le chiffre ne se contente plus de gonfler : il tremble.
   Le simple changement d échelle ne se sentait pas — c est le meme geste que
   sans multiplicateur, et rien ne disait que la reponse valait davantage.
   L exposant vit DANS le chiffre : il est emporte par la meme transformation,
   sans avoir a etre anime a part.
   Les decalages sont en « em » pour suivre la taille du chiffre, qui tombe de
   4 rem a 1.85 rem sur telephone ; en « rem » la secousse y aurait double.
   Duree calee sur les 340 ms de « battreSerieRush » : plus longue, la classe
   serait retiree en pleine animation et le chiffre retomberait d un coup. */
.rush-serie.cran.monte .v { animation: rushSecousse 0.34s cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes rushSecousse {
    0%   { transform: translate(0, 0) scale(1); }
    18%  { transform: translate(-0.09em, 0.035em) scale(1.24); }
    38%  { transform: translate(0.1em, -0.045em) scale(1.35); }
    58%  { transform: translate(-0.07em, 0.03em) scale(1.28); }
    78%  { transform: translate(0.045em, -0.02em) scale(1.12); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ⚠️ Ne rien animer sur l exposant lui-meme. Une regle « .cran.monte
   .rush-mult » ecraserait la propriete « animation » de sa regle de base et lui
   volerait son entree : le palier s ouvre et la secousse part dans le meme
   trente-quatrieme de seconde, si bien que le x2 apparaitrait d un coup, puis
   se poserait 340 ms trop tard une fois la classe retiree.
   Il n en a pas besoin : il vit DANS le chiffre, la transformation du parent
   l emporte deja, et sa lueur doree est permanente. */

/* ══════════ ✖️ Le multiplicateur ══════════
   Un exposant, et rien autour. Une pastille pleine y ferait badge de jeu
   mobile : tout l ecran du Rush est fait de chiffres nus sur du noir, et un
   rectangle de couleur pose dessus casse le ton du reste.

   Rajdhani italique contre le Bebas du chiffre : c est le contraste de police
   qui empeche le ×2 de se lire comme un troisieme digit. Elle est deja chargee
   par la page, il n y a pas une requete de plus.

   « bottom » depasse volontairement les 100 % de la hauteur du chiffre : le
   glyphe doit mordre au-dessus de lui, pas s aligner sur son sommet. */
.rush-mult {
    position: absolute;
    left: 100%;
    bottom: 74%;
    margin-left: 0.06em;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.36em;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    transform: rotate(-7deg) skewX(-6deg);
    text-shadow:
        0 0 0.12em #ffd700,
        0 0 0.34em rgba(255, 179, 0, 0.95),
        0 0 0.7em rgba(255, 179, 0, 0.45);
    animation: rushMultPose 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes rushMultPose {
    0%   { opacity: 0; transform: rotate(-30deg) skewX(-6deg) translateY(0.4em) scale(0.3); }
    100% { opacity: 1; transform: rotate(-7deg) skewX(-6deg) translateY(0) scale(1); }
}

/* L onde du palier : elle part du chiffre au moment ou le cran s ouvre. Sa
   clef Vue est le multiplicateur lui-meme, si bien qu elle se rejoue toute
   seule a chaque nouveau palier et jamais entre deux. */
.rush-onde {
    position: absolute;
    left: 50%;
    top: 1.4rem;
    width: 4rem;
    height: 4rem;
    margin: -2rem 0 0 -2rem;
    border: 0.09rem solid var(--neon-primary, #ffd700);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: rushOnde 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes rushOnde {
    0%   { opacity: 0.9; transform: scale(0.4); }
    100% { opacity: 0;   transform: scale(2.6); }
}

/* Le record en bleu froid : c'est un acquis, pas la course en cours */
.rush-record .v {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 6.5vw, 3rem);
    color: #7fb4ff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 1.4rem rgba(127, 180, 255, 0.22);
}

.rush-record .l { color: rgba(127, 180, 255, 0.4); }

.rush-serie .l, .rush-record .l {
    margin-top: 0.3rem;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.28);
}

/* ══════════ La saisie ══════════ */
/* Le champ fait exactement la largeur du portrait : le bouton « passer » est
   posé hors du flux, sinon il décalerait l'un par rapport à l'autre. */
/* Un peu plus étroit que le portrait, et centré sur lui : le bouton
   « passer » est posé hors du flux, sinon il romprait ce centrage. */
.rush-saisie {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(var(--carte-l) + var(--cadre) * 2);
    margin-top: 0.2rem;
}

/* Sans bordure, comme le champ de BombAnime : le texte seul, souligné */
.rush-input {
    flex: 1;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 250, 235, 0.96);
    background: rgba(255, 255, 255, 0.035);
    border: none;
    border-bottom: 0.12rem solid rgba(255, 215, 0, 0.35);
    border-radius: 0.5rem 0.5rem 0 0;
    outline: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.rush-input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-bottom-color: var(--neon-primary, #ffd700);
}

.rush-input::placeholder {
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: rgba(255, 215, 0, 0.28);
}

.rush-passer {
    position: absolute;
    left: calc(100% + 0.8rem);
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    color: rgba(255, 215, 0, 0.75);
    background: rgba(255, 215, 0, 0.09);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.rush-passer svg { width: 1.1rem; height: 1.1rem; }

.rush-passer:hover:not(:disabled) {
    color: #14100a;
    background: var(--neon-primary, #ffd700);
    transform: translateY(-50%) scale(1.06);
}

.rush-passer:disabled { opacity: 0.35; cursor: default; }

/* ══════════ Le classement, discret ══════════ */
/* Aucun cadre, aucun bouton : trois lignes posées sur le fond. Un clic
   n'importe où les efface à 90 % — assez pour ne plus gêner, assez pour
   qu'on sache où recliquer. */
.rush-top {
    position: fixed;
    top: clamp(2rem, 5vh, 3.2rem);
    left: clamp(1.1rem, 3vw, 2.2rem);
    z-index: 60;
    padding: 0.3rem 0.5rem;
    border-radius: 0.6rem;
    cursor: pointer;
    user-select: none;
    opacity: 0.85;
    transition: opacity 0.35s ease;
}

.rush-top:hover { opacity: 1; }
.rush-top.replie { opacity: 0.1; }

.rush-top ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

/* Un filet entre deux places : il s'efface vers la droite plutôt que de
   s'arrêter net, pour ne pas dessiner un tableau. */
.rush-top li + li {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 0.06rem solid transparent;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 85%) 1;
}

.rush-top li {
    display: grid;
    /* Une colonne de plus pour l'avatar, entre le rang et le pseudo. */
    grid-template-columns: 1.1rem auto 1fr auto;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.3s ease;
}

/* 🖼️ La vignette, entre le rang et le pseudo. Assez petite pour que le
   classement reste une liste qu'on survole, pas une galerie. */
.rush-top li .a {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    object-fit: cover;
    align-self: center;
    opacity: 0.55;
    transition: opacity 0.3s ease;
}

.rush-top li.tete .a,
.rush-top li.moi .a { opacity: 1; }

/* Le premier porte le liseré, comme son rang porte la couleur. */
.rush-top li.tete .a { box-shadow: 0 0 0 1.5px rgba(255, 215, 0, 0.5); }

/* Le rang en très petit, la valeur en gros : on lit le score, pas la place */
.rush-top .r {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.2);
}

.rush-top .n {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.rush-top .s {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.45rem;
    line-height: 0.9;
    color: rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}

/* La tête de course se détache, la sienne se reconnaît */
.rush-top li.tete .s { color: rgba(255, 255, 255, 0.8); }
.rush-top li.moi { color: var(--neon-primary, #ffd700); }
.rush-top li.moi .r { color: rgba(255, 215, 0, 0.45); }
.rush-top li.moi .s { color: var(--neon-primary, #ffd700); }

/* ══════════ Téléphone ══════════ */
@media (max-width: 600px) {
    /* Le clavier virtuel couvre le bas de l'écran sans raccourcir la fenêtre
       d'un élément « fixed » : tout s'appuie donc sur le haut, et la saisie
       reste au-dessus de la moitié de l'écran. « auto » sert de filet si un
       clavier plus haut que prévu la recouvrait quand même. */
    .rush {
        /* Centré, mais le bas plus lourd que le haut : l'ensemble se pose
           juste au-dessus du milieu, sans coller aux éléments fixés au coin.
           « auto » reste le filet si le clavier virtuel mange la saisie. */
        justify-content: center;
        gap: 4.1rem;
        padding: 4.6rem 0.8rem 5.5rem;
        overflow-y: auto;
    }

    .rush { --carte-h: 30vh; }

    /* Les compteurs repassent au-dessus du portrait, comme sur grand écran :
       le bloc étant recentré, ils ne tombent plus dans le classement, qui
       s'arrête bien plus haut. Plus petits qu'ailleurs — ici ils encadrent
       une image étroite, pas un panneau. */
    .rush-rang { gap: 1.6rem; }
    .rush-compteurs { gap: 2.8rem; }
    .rush-serie .v, .rush-record .v { font-size: 1.85rem; }
    .rush-serie .l, .rush-record .l { font-size: 0.44rem; }

    /* Cinq places mangeaient le tiers de l'écran : on n'en montre que trois */
    .rush-top { top: 0.7rem; left: 0.7rem; max-width: 45vw; }
    .rush-top li:nth-child(n + 4) { display: none; }
    .rush-top li { font-size: 0.67rem; gap: 0.45rem; }
    .rush-top li + li { margin-top: 0.4rem; padding-top: 0.4rem; }
    .rush-top .r { font-size: 0.6rem; }
    .rush-top .n { max-width: 4.2rem; }
    .rush-top .s { font-size: 0.92rem; }

    .rush-chrono { --chrono-haut: 1.35rem; --chrono-droite: 1.7rem; }
    .rush-chrono-n { font-size: 2.05rem; }

    /* Posé à côté du champ, le bouton sortait de l'écran : il entre dedans,
       et le texte saisi s'arrête avant lui. */
    .rush-saisie { width: min(71vw, 17rem); }
    .rush-input { padding: 0.7rem 0.8rem; font-size: 0.95rem; }

    .rush-passer {
        left: auto;
        right: 0.35rem;
        width: 2.3rem;
        height: 2.3rem;
    }

    .rush-input { padding-right: 3.1rem; }
}

/* Ecran court — un iPhone SE fait 667 px de haut. La saisie descendait sous
   la moitie de l ecran, la ou le clavier la recouvre. Le portrait cede de la
   hauteur, et le classement se limite a deux places pour ne pas mordre
   dessus. */
@media (max-width: 600px) and (max-height: 700px) {
    .rush { --carte-h: 26vh; padding: 3.6rem 0.8rem 4rem; gap: 3.2rem; }
    .rush-rang { gap: 1.15rem; }
    .rush-top { top: 0.6rem; }
    .rush-top li:nth-child(n + 3) { display: none; }
    .rush-chrono-n { font-size: 1.9rem; }
}

/* ============================================
   ⚡ RUSH — classement de fin de manche
   ============================================ */
.rush-fin {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 1.2rem;
    background: radial-gradient(60% 50% at 50% 40%, rgba(255, 200, 60, 0.05), transparent 70%), #08080b;
}

.rush-fin-boite {
    width: min(26rem, 92vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

.rush-fin-titre {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.32);
}

.rush-fin-liste {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Chaque place attend son tour, mais occupe sa hauteur dès le départ : la
   boîte garde la même taille du premier au dernier dévoilement. */
.rush-fin-liste li {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.7rem 0.2rem;
    border-bottom: 0.06rem solid rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: translateY(0.55rem);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.rush-fin-liste li.vu { opacity: 1; transform: none; }

/* Un trait de lumière balaie la ligne au moment où elle paraît */
.rush-fin-sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
    opacity: 0;
}

.rush-fin-liste li.vu .rush-fin-sweep {
    animation: rushFinSweep 0.85s cubic-bezier(0.3, 0.8, 0.2, 1) 0.1s both;
}

@keyframes rushFinSweep {
    0%   { opacity: 0; transform: translateX(-100%); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(100%); }
}

.rush-fin-liste .rang {
    width: 1.2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.28);
}

.rush-fin-liste .nom {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.rush-fin-liste .detail { font-size: 0.7rem; color: rgba(255, 255, 255, 0.28); }

.rush-fin-liste .record {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-variant-numeric: tabular-nums;
}

/* La première place, dévoilée en dernier, tombe plus lourdement que les autres */
.rush-fin-liste li.premier { padding: 0.95rem 0.2rem; }
.rush-fin-liste li.premier .rang { font-size: 1.7rem; text-shadow: 0 0 0.9rem rgba(255, 215, 0, 0.45); }
.rush-fin-liste li.premier .record { font-size: 2.1rem; }
.rush-fin-liste li.premier .rang,
.rush-fin-liste li.premier .record { color: var(--neon-primary, #ffd700); }
.rush-fin-liste li.premier .nom { color: #fff; font-size: 1.1rem; }
.rush-fin-liste li.moi .nom { color: var(--neon-primary, #ffd700); }

.rush-fin-liste li.premier.vu { animation: rushFinChoc 0.7s cubic-bezier(0.2, 1.4, 0.35, 1) both; }

@keyframes rushFinChoc {
    0%   { opacity: 0; transform: scale(0.9); }
    60%  { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

.rush-fin-liste li.premier .rush-fin-sweep {
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
}

/* Au-delà du top 5 on ne se voit pas : ce rappel arrive avec les boutons */
.rush-fin-moi {
    /* Elle ne fait PAS partie du classement : collée à la dernière ligne,
       on la lisait comme une sixième place. Le blanc la détache. */
    margin-top: 0.7rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.rush-fin-moi b { color: var(--neon-primary, #ffd700); font-weight: 700; }
.rush-fin-moi sup { font-size: 0.6em; }

/* ⚠️ CÔTE À CÔTE, et c'est la forme de TOUS les podiums du site — Rush,
   Collect, Ascension et Choice, qui partage cette feuille. Empilés, les
   deux boutons allongeaient la boîte d'un cran juste après un classement
   déjà long, et « Retour » tombait sous la ligne de flottaison sur un
   téléphone. Côte à côte ils tiennent sur une ligne, et c'est l'OR de
   « Rejouer » qui dit lequel prime, pas sa position. */
.rush-fin-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    margin-top: 0.4rem;
}

/* Rien ne s'offre au clic tant que le classement n'est pas entièrement dit */
.rush-fin-moi,
.rush-fin-actions {
    opacity: 0;
    transform: translateY(0.5rem);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.rush-fin-moi.vu,
.rush-fin-actions.vu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ══════════ Les grands écrans ══════════
   « --carte-h » vaut min(23rem, 44vh) : sur un 2K c est le terme en rem qui
   l emporte, et le portrait garde donc les 368 pixels qu il a en 1080p. Le
   plafond monte ici, le terme en vh restant le garde-fou pour les écrans
   larges mais courts. Le seuil est a 2000 px, et non plus bas : il doit passer
   juste au-dessus du 1920 de large d un ecran ordinaire, sur lequel tout a ete
   regle a l oeil. */
@media (min-width: 2000px) {
    .rush { --carte-h: min(30rem, 50vh); --cartouche: 2.3rem; }
    .rush-saisie { font-size: 1.3rem; }
}