/* ============================================
   ⚡ 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.6rem, 5.5vh, 3.6rem);
    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(23rem, 44vh);
    --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 remplacement d'un portrait par le suivant */
.rush-carte-enter-active { transition: opacity 0.16s ease, transform 0.24s cubic-bezier(0.2, 0.9, 0.25, 1); }
.rush-carte-leave-active { transition: opacity 0.12s ease, transform 0.16s ease; }
.rush-carte-enter-from   { opacity: 0; transform: translateY(0.7rem) scale(0.97); }
.rush-carte-leave-to     { opacity: 0; transform: translateY(-0.5rem) scale(0.99); }

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

.rush-serie .v {
    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); }
}

/* 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;
    grid-template-columns: 1.1rem 1fr auto;
    align-items: baseline;
    gap: 1rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.3s ease;
}

/* 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 {
    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; }

.rush-fin-actions {
    display: flex;
    flex-direction: column;
    align-items: 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;
}