/* =========================================================================
   POTOS — Écran 4 : FIN DE PARTIE (podium, trophées, moment fort, revanche)
   Rempli par js/endscreen.js · calque plein écran au-dessus du jeu
   (sous les confettis z75, la modale z85, les toasts z88). Thème « Soirée jeux » (docs/theme-soiree-jeux.md §5) :
   sombre ou clair selon le mode du site, podium en carton coloré, pas de halo néon.

   ▸ RE-THÉMATISER : ne modifier que les jetons --end-* de la section 0
     (dérivés des jetons globaux de css/theme.css). Aucune couleur en dur
     ailleurs. La carte de partage (canvas) lit aussi ces jetons au rendu :
     garder des couleurs PLEINES (hex / var vers un hex) pour les jetons lus.
     Surcharger : `.end-screen { --end-gold: … }` (les jetons sont en :where).
   ▸ Composants de base réutilisés partout : .end-surface (panneau de verre),
     .end-pill (pastille, --pill-bg / --pill-fg), .end-glass (verre sombre), .end-me.
   ▸ Profondeur : lueurs (--end-glow-*) ; ombres = jetons (--end-elev-*).
   ▸ L'état FINAL est l'état par défaut ; les états « avant révélation »
     n'existent que sous .is-playing / .is-hidden (section 12) : passer
     l'animation ou prefers-reduced-motion = retirer ces classes.
   ========================================================================= */
@layer theme, base, components, utilities;

@layer components {
  /* ======================= 0. Jetons ======================= */
  :where(.end-screen) {
    /* Teintes pleines (aussi lues par le canvas de partage) */
    --end-bg: var(--bg);
    --end-bg-2: var(--bg-2);
    --end-text: var(--text);
    --end-line: var(--encre);         /* contour sombre */
    --end-edge: var(--filet);         /* filets des panneaux */
    --end-surface: var(--surface);    /* panneaux */
    --end-surface-2: var(--surface-2);
    --end-on-surface: var(--text);
    --end-on-neon: var(--on-accent);  /* encre sur aplat coloré (pastilles or, vert…) */
    --end-avatar-bg: var(--surface-3);
    --end-gold: var(--accent);        /* 1er (jaune jeton) */
    --end-gold-text: var(--accent-text); /* or en TEXTE (lisible en clair comme en sombre) */
    --end-silver: #A9B1BE;            /* 2e */
    --end-bronze: #D98A4E;            /* 3e */
    --end-ok: var(--ok);              /* vote, badge « toi » */
    --end-danger: var(--danger);      /* argent perdu */
    --end-share: var(--accent-2);     /* bouton Partager */
    --end-glow: var(--accent);        /* couleur des reflets */
    --end-beam: var(--accent);
    --end-halo-a: var(--accent-2);
    --end-halo-b: var(--blue);
    --end-halo-c: var(--accent-3);
    --end-accent-1: var(--accent);    /* trophées, dans l'ordre */
    --end-accent-2: var(--accent-2);
    --end-accent-3: var(--ok);
    --end-accent-4: var(--blue);
    --end-accent-5: var(--orange);
    --end-accent-6: var(--accent-3);

    /* Dérivés (transparences) */
    --end-text-soft: color-mix(in srgb, var(--end-text) 86%, transparent);
    --end-text-mute: color-mix(in srgb, var(--end-text) 66%, transparent);
    --end-on-surface-soft: color-mix(in srgb, var(--end-on-surface) 70%, transparent);
    --end-surface-me: color-mix(in srgb, var(--end-gold) 16%, var(--end-surface));
    --end-glass: color-mix(in srgb, var(--end-bg) 82%, transparent);
    --end-glass-line: color-mix(in srgb, var(--end-edge) 80%, transparent);
    --end-veil: color-mix(in srgb, var(--end-bg) 94%, transparent);
    --end-dots: color-mix(in srgb, var(--end-text) 70%, transparent);
    --end-grid: color-mix(in srgb, var(--end-beam) 22%, transparent);
    --end-texture: color-mix(in srgb, var(--end-text) 10%, transparent);
    --end-sheen: color-mix(in srgb, var(--end-text) 20%, transparent);
    --end-shade: color-mix(in srgb, #000 45%, transparent);

    /* Formes, typo, mouvement */
    --end-bw: 1px;
    --end-r-lg: 16px;
    --end-r-md: 12px;
    --end-r-sm: 10px;
    --end-r-pill: 999px;
    --end-font-display: var(--font-display);
    --end-font-ui: var(--font-ui);
    --end-font-hud: var(--font-hud);
    --end-ease: var(--spring);

    /* Ombres simples (plus de halos néon) */
    --end-glow-sm: 0 3px 10px -4px var(--end-shade);
    --end-glow-md: 0 6px 16px -6px var(--end-shade);
    --end-glow-lg: 0 14px 34px -10px color-mix(in srgb, var(--end-glow) 55%, transparent);
    --end-elev-1: var(--ombre-1);
    --end-elev-2: var(--ombre-2);
    --end-text-glow: none;
    --end-text-depth: none;
    --end-emoji-glow: drop-shadow(0 2px 1px rgba(0, 0, 0, .22));
    --end-emoji-depth: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
  }

  /* ======================= 1. Calque & décor ======================= */
  html.end-open, html.end-open body { overflow: hidden; }

  .end-screen {
    position: fixed; inset: 0; z-index: 74; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    color: var(--end-text); background: var(--end-bg); font-family: var(--end-font-ui);
    animation: fade-in .35s ease both;
  }
  .end-screen[hidden] { display: none !important; }
  .end-screen.no-trans, .end-screen.no-trans * { transition: none !important; }

  .end-bg { /* la pièce, avec un rond de lumière jaune sur le podium (peint une fois) */
    position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
    background:
      radial-gradient(48vmax 40vmax at 50% 26%, color-mix(in srgb, var(--end-gold) 14%, transparent), transparent 62%),
      var(--page, var(--end-bg)), var(--end-bg);
  }
  .end-bg::before, .end-bg::after { display: none; } /* plus d'étoiles ni de sol holographique */
  .end-bg::before { /* étoiles */
    content: ""; position: absolute; inset: -60px; opacity: .55;
    background-image:
      radial-gradient(circle at 18% 22%, var(--end-dots) 0 1px, transparent 1.6px),
      radial-gradient(circle at 64% 70%, var(--end-dots) 0 .8px, transparent 1.4px),
      radial-gradient(circle at 84% 34%, color-mix(in srgb, var(--end-halo-b) 90%, transparent) 0 1px, transparent 1.7px),
      radial-gradient(circle at 38% 86%, color-mix(in srgb, var(--end-halo-a) 85%, transparent) 0 .9px, transparent 1.5px);
    background-size: 210px 210px, 210px 210px, 330px 330px, 330px 330px;
    animation: drift 40s linear infinite;
  }
  .end-bg::after { /* sol holographique sous le podium */
    content: ""; position: absolute; left: -40%; right: -40%; bottom: -2%; height: 42%; opacity: .45;
    background-image: linear-gradient(var(--end-grid) 1px, transparent 1.5px), linear-gradient(90deg, var(--end-grid) 1px, transparent 1.5px);
    background-size: 64px 48px; background-position: center bottom;
    transform: perspective(420px) rotateX(64deg); transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 90%); mask-image: linear-gradient(to top, #000, transparent 90%);
  }

  .end-wrap {
    position: relative; width: 100%; max-width: 1180px; min-height: 100%; margin: 0 auto; overflow-x: clip;
    display: flex; flex-direction: column; padding: max(10px, env(safe-area-inset-top)) 16px 0;
  }
  .end-wrap.is-shake { animation: end-shake .45s ease-out; }

  /* ======================= 2. Composants de base ======================= */
  .end-surface {
    color: var(--end-on-surface);
    background: var(--end-surface);
    border: var(--end-bw) solid var(--end-glass-line); border-radius: var(--end-r-lg); box-shadow: var(--end-elev-2);
  }
  .end-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .3em; white-space: nowrap;
    color: var(--pill-fg, var(--end-on-surface)); background: var(--pill-bg, color-mix(in srgb, var(--end-surface) 90%, transparent));
    border: 1px solid var(--pill-line, var(--end-glass-line)); border-radius: var(--end-r-pill); box-shadow: var(--pill-shadow, var(--end-elev-1));
  }
  .end-glass {
    color: var(--end-text); background: var(--end-glass); border: 1px solid var(--end-glass-line);
    border-radius: var(--end-r-pill); box-shadow: var(--end-elev-1);
    /* pas de backdrop-filter : --end-glass est déjà opaque à 82 % (cf. docs/fluidite.md) */
  }
  .end-me {
    --pill-bg: var(--end-ok); --pill-fg: var(--end-on-neon); --pill-line: var(--end-ok);
    --pill-shadow: none;
    flex: none; padding: 2px 7px; font: 700 .64rem/1.3 var(--end-font-display); text-transform: uppercase; letter-spacing: .06em;
  }

  /* ======================= 3. Barre du haut ======================= */
  .end-top { display: flex; align-items: center; gap: 8px; min-height: 48px; }
  .end-top .chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .end-top .icon-btn { margin-left: auto; }
  .end-skip {
    flex: none; min-height: 44px; padding: .5em .95em; cursor: pointer; font: 600 .84rem/1 var(--end-font-display); letter-spacing: .04em; /* cible ≥ 44 px */
    transition: transform .15s var(--end-ease), box-shadow .2s ease;
  }
  .end-skip:hover { transform: translateY(-1px); --pill-line: var(--end-beam); --pill-shadow: var(--end-elev-1), 0 0 18px color-mix(in srgb, var(--end-beam) 45%, transparent); }
  .end-skip:active { transform: scale(.96); }
  .end-screen:not(.is-playing) .end-skip { display: none; }
  .end-screen.is-playing .end-skip { margin-left: auto; }
  .end-screen.is-playing .end-top .icon-btn { margin-left: 0; }

  /* ======================= 4. Titre & sous-titre ======================= */
  .end-title {
    margin: 8px auto 0; max-width: 100%; text-align: center; text-wrap: balance; outline: none;
    font-family: var(--end-font-display); font-weight: 700; font-size: clamp(2.1rem, 9.6vw, 4.4rem);
    line-height: 1.02; letter-spacing: -.005em; color: var(--end-text); text-shadow: var(--end-text-glow);
  }
  .end-title .em { display: inline-block; text-shadow: none; filter: var(--end-emoji-glow); }
  /* Focalisé par script à l'ouverture (lecteurs d'écran) : pas d'anneau, il n'est pas interactif */
  .end-title:focus, .end-title:focus-visible { outline: none; }
  .end-sub {
    min-height: 1.5em; margin: 14px auto 0; max-width: 34ch; text-align: center; text-wrap: balance;
    font-weight: 600; font-size: clamp(.98rem, 3.9vw, 1.2rem); line-height: 1.3; color: var(--end-text-soft);
  }
  .end-sub b { color: var(--end-gold-text); }
  .end-sub2 { display: block; margin-top: 4px; font-size: .86em; font-weight: 500; color: var(--end-text-mute); }
  .end-sub.is-new { animation: end-up .5s var(--end-ease) both; }
  .end-dots i { display: inline-block; font-style: normal; animation: end-dot 1s ease-in-out infinite; }
  .end-dots i:nth-child(2) { animation-delay: .15s; }
  .end-dots i:nth-child(3) { animation-delay: .3s; }

  /* Boutique : effet de victoire du gagnant (sous la phrase du gagnant) et éclairs ⚡ gagnés */
  .end-fxtag {
    display: block; width: fit-content; max-width: 100%; margin: 7px auto 0; padding: 3px 11px; border-radius: var(--end-r-pill);
    font: 700 .74rem/1.3 var(--end-font-display); letter-spacing: .04em; color: var(--end-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: color-mix(in srgb, var(--end-gold) 16%, var(--end-surface));
    border: 1px solid color-mix(in srgb, var(--end-gold) 60%, transparent);
  }
  .end-reward {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px;
    width: fit-content; max-width: min(100%, 470px); margin: 12px auto 0; padding: 6px 16px 6px 6px; border-radius: 24px;
    color: var(--end-text); background: linear-gradient(90deg, color-mix(in srgb, var(--end-gold) 20%, transparent), color-mix(in srgb, var(--end-gold) 5%, transparent)), var(--end-glass);
    border: 1px solid color-mix(in srgb, var(--end-gold) 70%, transparent);
    box-shadow: var(--end-elev-1);
  }
  .end-reward[hidden] { display: none; }
  .end-reward.is-new { animation: end-up .55s var(--end-ease) both; }
  .er-ico {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-size: 19px; line-height: 1;
    background: color-mix(in srgb, var(--end-gold) 18%, var(--end-surface)); border: 1.5px solid var(--end-gold);
  }
  .er-txt { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.2; }
  .er-amt { font: 700 1.08rem/1.15 var(--end-font-display); color: var(--end-gold-text); font-variant-numeric: tabular-nums; }
  .er-amt em { font-style: normal; font-size: .76em; font-weight: 600; color: var(--end-text-mute); text-shadow: none; }
  .er-txt small { font-size: .74rem; font-weight: 500; color: var(--end-text-mute); }
  /* D'où vient le gain : « 30 min de jeu · 2e place · 4 joueurs » (chaque morceau reste entier au retour à la ligne) */
  .er-txt small.er-why { display: flex; flex-wrap: wrap; column-gap: 0; font-size: .8rem; color: var(--end-text-soft, var(--end-text-mute)); }
  .er-why > span { white-space: nowrap; }
  .er-why > i { font-style: normal; white-space: pre; }
  .er-chip.is-bonus { color: var(--end-on-neon); background: var(--end-gold); }
  .er-extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .er-chip {
    padding: 3px 9px; border-radius: var(--end-r-pill); font: 700 .72rem/1.25 var(--end-font-display); white-space: nowrap;
    color: var(--end-on-neon); background: var(--end-ok);
  }
  /* Info (« Partie trop courte… ») : l'icône reste À CÔTÉ du texte, qui passe à la ligne dans sa colonne (avant, le
     texte long partait sous l'icône, centrée seule sur sa ligne, à 1280 × 720) */
  .end-reward.is-info { flex-wrap: nowrap; padding-right: 14px; border-color: var(--end-glass-line); background: var(--end-glass); box-shadow: var(--end-elev-1); }
  .end-reward.is-info .er-txt { flex: 1 1 auto; }
  .end-reward.is-info .er-ico { width: 30px; height: 30px; font-size: 15px; border-color: var(--end-glass-line); background: var(--end-surface-2); box-shadow: none; }
  .end-reward.is-info small { font-size: .8rem; color: var(--end-text-soft); }
  /* Gain (lot 14a) : « +52 ⚡ » en gros, « éclairs gagnés » dessous, puis le détail ; centré, lisible d'un coup d'œil */
  .end-reward.is-gain { flex-direction: column; gap: 4px; padding: 10px 20px 12px; border-radius: 22px; text-align: center; }
  .er-gros { display: grid; justify-items: center; gap: 2px; }
  .end-reward.is-gain .er-amt {
    display: inline-flex; align-items: center; gap: .08em;
    font: 800 clamp(2.3rem, 12vw, 2.9rem)/1 var(--end-font-display); letter-spacing: -.01em;
  }
  .er-z { font-size: .82em; line-height: 1; }
  .er-unit { font: 700 .9rem/1.2 var(--end-font-display); letter-spacing: .02em; color: var(--end-text-soft, var(--end-text-mute)); }
  .er-unit em { font-style: normal; font-weight: 600; color: var(--end-text-mute); }
  .end-reward.is-gain .er-why { justify-content: center; text-align: center; font-size: .8rem; color: var(--end-text-mute); }

  /* ======================= 5. Mise en page ======================= */
  .end-grid { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .end-main, .end-side { min-width: 0; }
  /* Contenu court (2 joueurs, pas de trophées…) : les actions restent calées en bas */
  .end-side { display: flex; flex-direction: column; }
  .end-side > .end-actions { margin-top: auto; }
  /* Téléphone, tablette (une colonne) : la barre d'actions est collée en bas DÈS l'ouverture. Collée dans sa colonne
     (.end-side), elle restait bloquée en haut de celle-ci, sous le classement : coupée par le bas de l'écran
     (« Quitter le salon » rogné à 375 px), voire entièrement hors écran avec 8 joueurs. Les deux conteneurs de
     colonnes s'effacent (display: contents) : la barre se cale sur toute la hauteur de l'écran de fin (.end-wrap). */
  @media (max-width: 1023.98px) {
    .end-grid, .end-side { display: contents; }
  }
  .end-h2 {
    display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
    font-family: var(--end-font-display); font-weight: 600; font-size: clamp(1.15rem, 5vw, 1.45rem); letter-spacing: .01em;
  }

  /* ======================= 6. Podium ======================= */
  .podium-wrap { position: relative; width: 100%; max-width: 640px; margin: 6px auto 0; container-type: inline-size; }
  .podium {
    position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end;
    column-gap: 2.5cqw; margin: 0; padding: 15cqw 0 0; list-style: none;
  }
  .podium.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 13cqw; column-gap: 4cqw; }
  .podium.n1 { grid-template-columns: minmax(0, 1fr); padding-inline: 30cqw; }
  .podium::after { /* le sol sous le podium */
    content: ""; position: absolute; left: -3%; right: -3%; bottom: -8px; height: 4px; z-index: 0; border-radius: var(--end-r-pill);
    background: var(--end-edge);
  }
  /* Ordre du DOM = 1er, 2e, 3e (lecteurs d'écran) ; ordre visuel = 2e, 1er, 3e */
  .pod { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
  .pod-1 { order: 2; --av: min(25cqw, 150px); --h: min(32cqw, 184px); --stp: var(--end-gold); }
  .pod-2 { order: 1; --av: min(19.5cqw, 118px); --h: min(22cqw, 128px); --stp: var(--end-silver); }
  .pod-3 { order: 3; --av: min(18cqw, 108px); --h: min(15cqw, 88px); --stp: var(--end-bronze); }

  .pod-hero { position: relative; z-index: 2; width: var(--av); aspect-ratio: 1; }
  .pod-av {
    display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--end-avatar-bg) 80%, #fff 8%) 0%, var(--end-surface-2) 60%, var(--end-surface) 100%);
    border: 3px solid var(--stp); box-shadow: var(--end-elev-1);
  }
  .pod-av svg { width: 84%; height: 84%; }
  .pod-1 .pod-av { box-shadow: 0 0 0 4px var(--end-bg), 0 0 0 7px var(--end-gold), var(--end-glow-lg); }
  .pod.is-out .pod-av svg { filter: grayscale(1); opacity: .7; }
  .pod-crown {
    position: absolute; left: 50%; top: 0; z-index: 3; font-size: calc(var(--av) * .5); line-height: 1;
    translate: -50% -74%; rotate: -14deg; filter: var(--end-emoji-glow); pointer-events: none;
    animation: crown-idle 3.2s ease-in-out infinite;
  }
  .pod-skull { position: absolute; right: -6%; bottom: -4%; z-index: 3; font-size: calc(var(--av) * .38); line-height: 1; filter: var(--end-emoji-depth); }
  .pod-me { position: absolute; left: 50%; bottom: -9px; z-index: 3; translate: -50% 0; }
  .pod-name {
    max-width: 100%; margin-top: 12px; padding: 0 3px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
    font-family: var(--end-font-display); font-weight: 700; font-size: clamp(.8rem, 3.7cqw, 1.3rem); line-height: 1.2;
    text-shadow: var(--end-text-depth);
  }
  .pod-1 .pod-name { font-size: clamp(.92rem, 4.6cqw, 1.6rem); color: var(--end-text); }
  .pod-worth {
    margin: 5px 0 10px; padding: 3px 8px; gap: 3px;
    font: 700 clamp(.72rem, 3.3cqw, 1.05rem)/1.15 var(--end-font-display); font-variant-numeric: tabular-nums;
  }
  .pod-1 .pod-worth { --pill-bg: var(--end-gold); --pill-fg: var(--end-on-neon); --pill-line: var(--end-gold); --pill-shadow: var(--end-elev-1), var(--end-glow-md); font-size: clamp(.84rem, 4cqw, 1.25rem); }
  .pod.is-out .pod-worth { --pill-bg: var(--end-surface-2); --pill-fg: var(--end-text-mute); }
  /* NÉON : libellés prêts à afficher (« 3 cartes · 27 pts en main ») → retour à la ligne dans la colonne */
  .pod-worth.is-label { max-width: 100%; padding: 3px 7px; white-space: normal; text-align: center; border-radius: 10px; font-size: clamp(.64rem, 2.9cqw, .9rem); line-height: 1.2; }
  .pod-step {
    position: relative; width: 100%; height: var(--h); display: grid; place-items: start center; padding-top: 6px;
    background-color: var(--end-surface-2); /* marche de podium en carton coloré */
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--stp) 55%, transparent), color-mix(in srgb, var(--stp) 18%, transparent) 80%);
    border: 1px solid color-mix(in srgb, var(--stp) 70%, var(--end-edge)); border-radius: 10px 10px 4px 4px; transform-origin: 50% 100%;
    box-shadow: inset 0 4px 0 var(--stp), var(--end-elev-1);
  }
  .pod-rank {
    font-family: var(--end-font-hud); font-weight: 700; line-height: 1; font-size: min(calc(var(--h) * .5), 14cqw, 88px);
    color: var(--end-text); opacity: .85;
  }
  /* Rayons tournants + projecteur derrière le gagnant */
  .pod-rays, .pod-spot { display: none !important; } /* plus de rayons tournants ni de projecteur (charte §5.9) */
  .pod-rays {
    position: absolute; z-index: -1; left: 50%; top: calc(var(--av) / 2); width: calc(var(--av) * 3.6); aspect-ratio: 1;
    translate: -50% -50%; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(color-mix(in srgb, var(--end-glow) 24%, transparent) 0 6deg, transparent 6deg 22.5deg);
    -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 100%);
    mask: radial-gradient(closest-side, #000 22%, transparent 100%);
    animation: rays-spin 38s linear infinite; transition: opacity .8s ease;
  }
  .pod-spot {
    position: absolute; z-index: -1; left: 50%; bottom: calc(var(--h) - 6px); width: calc(var(--av) * 2.5); height: calc(var(--av) * 4.2);
    translate: -50% 0; transform-origin: 50% 0; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--end-beam) 12%, transparent) 45%, color-mix(in srgb, var(--end-beam) 28%, transparent));
    clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
    animation: spot-sway 5s ease-in-out infinite; transition: opacity .5s ease;
  }

  /* ======================= 7. Classement (4e et suivants) ======================= */
  .end-rows { display: grid; gap: 8px; width: 100%; max-width: 560px; margin: 26px auto 0; padding: 0; list-style: none; }
  .end-row {
    display: grid; grid-template-columns: 28px 40px minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 7px 12px 7px 8px; border-radius: var(--end-r-md); box-shadow: var(--end-elev-1);
    transition: opacity .4s ease, transform .55s var(--end-ease); transition-delay: calc(var(--i, 0) * 90ms);
  }
  .end-row .rk { font: 700 1.05rem/1 var(--end-font-hud); text-align: center; color: var(--end-text-mute); }
  .end-row .rav { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, var(--end-avatar-bg), var(--end-surface) 75%); }
  .end-row .rav svg { width: 100%; height: 100%; }
  .end-row .rn { min-width: 0; font-weight: 600; line-height: 1.2; }
  .end-row .rnl { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .end-row .rnt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .end-row .rs { display: block; font-size: .72rem; font-weight: 500; color: var(--end-on-surface-soft); }
  .end-row .rw { font: 700 1rem/1 var(--end-font-display); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .end-row .rw.is-label { max-width: min(46vw, 240px); font-size: .84rem; line-height: 1.2; white-space: normal; text-align: right; }
  /* NÉON sur téléphone : le libellé (« 22 cartes · 294 pts en main ») ne doit pas écraser le pseudo (réduit à « M… ») */
  @media (max-width: 479.98px) {
    .end-row:has(> .rw.is-label) { grid-template-columns: 28px 40px minmax(4.5em, 1fr) auto; }
    .end-row .rw.is-label { max-width: 34vw; font-size: .76rem; }
  }
  .end-row.is-me { background-color: var(--end-surface-me); border-color: color-mix(in srgb, var(--end-gold) 60%, transparent); }
  .end-row.is-out { background-color: color-mix(in srgb, var(--end-surface-2) 70%, transparent); }
  .end-row.is-out .rav { filter: grayscale(1); opacity: .6; }
  .end-row.is-out .rw { font-size: .82rem; color: var(--end-on-surface-soft); }

  /* ======================= 8. Trophées : cartes qui se retournent ======================= */
  .end-awards { margin-top: 34px; container-type: inline-size; }
  .award-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin: 14px 0 0; padding: 0; list-style: none; }
  @container (min-width: 500px) { .award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @container (max-width: 499.98px) {
    .award:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  }
  .award { --ac: var(--end-accent-1); perspective: 900px; min-width: 0; }
  .award:nth-child(6n + 2) { --ac: var(--end-accent-2); }
  .award:nth-child(6n + 3) { --ac: var(--end-accent-3); }
  .award:nth-child(6n + 4) { --ac: var(--end-accent-4); }
  .award:nth-child(6n + 5) { --ac: var(--end-accent-5); }
  .award:nth-child(6n + 6) { --ac: var(--end-accent-6); }
  .award-inner { display: grid; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--end-ease); }
  .award-face { grid-area: 1 / 1; min-width: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .award-front { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 10px 12px; text-align: center; border-color: color-mix(in srgb, var(--ac) 45%, transparent); }
  .award-back {
    display: grid; place-items: center; transform: rotateY(180deg);
    /* dos de carte à jouer : aplat franc de la couleur du trophée, rayures et filet blanc imprimés (lisible en clair et en sombre) */
    background: repeating-linear-gradient(45deg, var(--ac) 0 7px, color-mix(in srgb, var(--ac) 82%, #000) 7px 14px);
    border: 3px solid var(--papier, #fff); outline: 1px solid color-mix(in srgb, var(--ac) 70%, #000); outline-offset: -1px;
    box-shadow: var(--end-elev-2);
  }
  .award-back span {
    display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%;
    font-family: var(--end-font-hud); font-weight: 700; font-size: 2.2rem; line-height: 1;
    color: var(--encre, #1E1F26); background: var(--papier, #fff);
  }
  .aw-emoji {
    display: grid; place-items: center; width: 54px; height: 54px; font-size: 28px; line-height: 1; border-radius: 50%;
    background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--ac) 40%, transparent), var(--end-surface) 75%);
    border: 2px solid var(--ac);
  }
  .award.is-flipped .aw-emoji { animation: react .5s var(--end-ease) .3s; }
  .aw-title { margin-top: 4px; font: 700 1rem/1.15 var(--end-font-display); letter-spacing: .01em; color: var(--end-text); }
  .aw-who { display: flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; font-size: .82rem; font-weight: 600; }
  .aw-who .wav { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--end-avatar-bg); }
  .aw-who .wav svg { width: 100%; height: 100%; }
  .aw-who b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .aw-label { font-size: .76rem; font-weight: 500; line-height: 1.3; color: var(--end-on-surface-soft); text-wrap: balance; }

  /* ======================= 9. Le moment de la partie ======================= */
  .end-moment {
    position: relative; max-width: 520px; margin: 40px auto 30px; padding: 22px 16px 18px; text-align: center;
    transition: opacity .5s ease, transform .7s var(--end-ease);
  }
  .end-moment::before { /* morceau de scotch jaune */
    content: ""; position: absolute; top: -6px; left: 50%; width: 96px; height: 14px; translate: -50% 0; rotate: -2deg; border-radius: 2px;
    background: color-mix(in srgb, var(--end-gold) 80%, transparent);
  }
  .end-moment .end-h2 { font-size: clamp(1rem, 4.4vw, 1.25rem); }
  .mo-scene { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; }
  .mo-p { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; width: 86px; }
  .mo-av {
    display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--end-avatar-bg), var(--end-surface) 75%);
    border: 1px solid var(--end-glass-line); box-shadow: var(--end-elev-1), 0 0 16px -6px var(--end-beam);
  }
  .mo-av svg { width: 54px; height: 54px; }
  .mo-p b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
  .mo-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
  .mo-amount {
    --pill-bg: var(--end-danger); --pill-fg: var(--end-on-neon); --pill-line: var(--end-danger);
    --pill-shadow: var(--end-elev-1), 0 0 16px color-mix(in srgb, var(--end-danger) 55%, transparent);
    padding: 4px 10px; font: 700 1.05rem/1.1 var(--end-font-display);
  }
  .mo-amount.is-gain { --pill-bg: var(--end-ok); --pill-line: var(--end-ok); --pill-shadow: var(--end-elev-1), 0 0 16px color-mix(in srgb, var(--end-ok) 55%, transparent); }
  .mo-arrow i { font-style: normal; font-size: 1.5rem; line-height: 1; color: var(--danger-text, var(--end-danger)); animation: mo-slide 1.6s ease-in-out infinite; }
  .mo-tile { margin-top: 12px; }
  .mo-text { margin: 12px auto 0; max-width: 32ch; font: 600 1.05rem/1.3 var(--end-font-display); text-wrap: balance; }

  /* ======================= 10. Actions & votes (collées en bas, zone du pouce) ======================= */
  .end-actions {
    position: sticky; bottom: 0; z-index: 5; margin: 0 -16px; padding: 40px 16px calc(14px + env(safe-area-inset-bottom));
    /* fondu au-dessus, puis aplat plein derrière les boutons : le classement ne transparaît plus en filigrane */
    background: linear-gradient(180deg, transparent, var(--end-veil) 28%, var(--end-bg) 62%);
    transition: transform .6s var(--end-ease), opacity .35s ease, visibility 0s;
  }
  .end-actions-in { display: grid; gap: 10px; max-width: 520px; margin: 0 auto; }
  .end-actions .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .end-actions .row2 .btn { padding-inline: .6em; white-space: nowrap; }
  /* Libellé long (« 🛒 Retour à la boutique » des essais lancés depuis la boutique, js/endscreen.js) : 2 lignes
     équilibrées au lieu d'être rogné à 375 px ; les libellés courts restent sur une ligne */
  .end-actions .row2 .btn.is-long { white-space: normal; text-wrap: balance; line-height: 1.12; text-align: center; }
  /* Couleurs des boutons via les jetons (la forme vient de .btn dans styles.css) */
  .btn-rematch { --bg: var(--end-gold); --fg: var(--end-on-neon); width: 100%; }
  .btn-rematch.is-voted { --bg: var(--end-ok); }
  .end-btn-lobby { --bg: var(--surface-2); --fg: var(--end-text); --edge: var(--line-2); }
  .end-btn-share { --bg: var(--end-share); --fg: var(--end-on-neon); }
  .btn.is-busy { cursor: progress; filter: saturate(.7); }
  /* Lien « Quitter le salon » : cible de 44 px de haut (22 px avant) sans grandir la barre — les marges négatives
     la font déborder dans l'espace libre au-dessus (écart de la grille) et en dessous (marge du bas) */
  .end-quit {
    justify-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: -10px 0 -12px; padding: 0 16px;
    color: var(--end-text-mute);
  }
  .end-quit:hover { color: var(--end-text); }

  .end-votes {
    display: flex; align-items: center; justify-content: center; gap: 10px; justify-self: center; max-width: 100%;
    min-height: 40px; padding: 4px 14px 4px 6px; font-weight: 600; font-size: .92rem;
  }
  .end-votes[hidden] { display: none; }
  .end-votes.is-full { color: var(--ok-text, var(--end-ok)); border-color: var(--end-ok); box-shadow: var(--end-elev-1); }
  .vote-stack { display: flex; padding-left: 8px; }
  .vote-stack > span {
    position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin-left: -8px; border-radius: 50%;
    background: var(--end-avatar-bg); border: 1.5px solid var(--end-glass-line); box-shadow: 0 0 0 2px var(--end-bg); transition: filter .3s, opacity .3s;
  }
  .vote-stack svg { width: 27px; height: 27px; }
  .vote-stack > span.is-off { filter: grayscale(1); opacity: .45; }
  .vote-stack > span.is-on { border-color: var(--end-ok); }
  .vote-stack > span.is-on::after {
    content: "✓"; position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 16px; height: 16px;
    font-size: 10px; font-weight: 900; color: var(--end-on-neon); background: var(--end-ok); border: 2px solid var(--end-bg); border-radius: 50%;
  }
  .vote-stack > span.is-pop { animation: join-pop .6s var(--end-ease) both; }

  /* ======================= 11. Utilitaires ======================= */
  .end-toast { /* repli si FX.toast est absent */
    position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 6; translate: -50% 0;
    max-width: min(92vw, 380px); padding: 10px 14px; font-weight: 600; font-size: .92rem; border-radius: var(--end-r-sm);
    color: var(--end-on-surface); background: var(--end-surface); border: 1px solid var(--end-beam); box-shadow: var(--end-elev-2);
    animation: toast-in .45s var(--end-ease) both;
  }
  .end-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  @media (max-width: 419.98px) { .skip-long { display: none; } }

  /* ======================= 12. Révélation animée (uniquement pendant l'animation) ======================= */
  /* Ouverture étalée : blocs pas encore montés (js/endscreen.js, revealDeferred), ni style ni mise en page */
  .end-screen [data-end-defer] { display: none !important; }
  /* Copie invisible du préchauffage des polices (js/endscreen.js, warmUp) : mise en page seulement */
  .end-screen.end-warm { visibility: hidden !important; pointer-events: none; contain: strict; z-index: -1; }
  .end-warm, .end-warm *, .end-warm *::before, .end-warm *::after { animation: none !important; transition: none !important; }
  .is-playing .end-title { animation: end-slam .7s var(--end-ease) both .1s; }
  .is-playing .pod:not(.is-step) .pod-step { transform: scaleY(0); }
  .is-playing .pod.is-step .pod-step { animation: step-rise .6s var(--end-ease) both; }
  .is-playing .pod-1.is-rumble .pod-step { animation: step-grow 1.25s cubic-bezier(.45, 0, .85, .5) both, end-jitter .1s linear infinite; }
  .is-playing .pod-1.is-step .pod-step { animation: step-slam .55s var(--end-ease) both; }
  .is-playing .pod:not(.is-in) :is(.pod-hero, .pod-name, .pod-worth) { opacity: 0; }
  .is-playing .pod.is-in .pod-hero { animation: pod-pop .7s var(--end-ease) both; }
  .is-playing .pod.is-in :is(.pod-name, .pod-worth) { animation: end-up .5s var(--end-ease) both .15s; }
  .is-playing .pod-1.is-in .pod-hero { animation: pod-pop-big 1s ease-out both; }
  .is-playing .pod-1:not(.is-in) :is(.pod-rays, .pod-spot) { opacity: 0; }
  .is-playing .pod-crown:not(.is-in) { opacity: 0; }
  .is-playing .pod-crown.is-in { animation: crown-drop .95s ease-out both, crown-idle 3.2s ease-in-out .95s infinite; }
  .is-playing .end-row:not(.is-in) { opacity: 0; transform: translateX(-28px); }
  .is-playing .end-actions:not(.is-in) { transform: translateY(110%); opacity: 0; visibility: hidden; transition: none; }
  .award.is-hidden .award-inner { transform: rotateY(180deg); }
  .end-moment.is-hidden { opacity: 0; transform: translateY(30px) scale(.94); }

  /* ======================= 13. Grand écran : 2 colonnes (scène à gauche, résultats à droite) ======================= */
  @media (min-width: 1024px) {
    .end-wrap { padding-inline: 32px; }
    .end-title { margin-top: 2px; }
    .end-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 8px; }
    .end-awards { margin-top: 26px; }
    .end-moment { margin-top: 36px; }
    .end-actions { margin-inline: 0; padding-top: 44px; padding-inline: 0; }
  }

  /* ======================= 14. Ordinateur (paysage) : tout tient dans l'écran ======================= */
  /* 1280×720 … 1920×1080 : plus de défilement, et plus rien ne passe sous la barre « Revanche » (à 1366×768, elle
     recouvrait la 2e rangée de trophées et le moment fort). Barre du haut posée sur la ligne du titre, titre et
     podium bornés par la HAUTEUR de l'écran, trophées en cartes horizontales sur 2 colonnes, moment fort en ligne,
     actions dans le flux en bas de la colonne de droite (collées en bas seulement sur mobile : zone du pouce). */
  @media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
    /* En-tête sur 2 lignes : le titre, puis la phrase du gagnant et la récompense CÔTE À CÔTE (≈ 55 px de gagnés) */
    .end-wrap {
      display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); column-gap: 18px; align-content: start;
      padding-top: max(8px, env(safe-area-inset-top));
    }
    .end-wrap > * { grid-column: 1 / -1; }
    .end-wrap > .end-sub { grid-column: 2; align-self: center; max-width: 52ch; } /* une ligne (« … premier·e au Noyau galactique ! ») */
    .end-wrap > .end-reward { grid-column: 3; align-self: center; margin: 6px 0 0; }
    .end-wrap > .end-sub:has(+ .end-reward[hidden]) { grid-column: 2 / 4; }
    .end-top { position: absolute; z-index: 6; top: max(8px, env(safe-area-inset-top)); left: 32px; right: 32px; pointer-events: none; }
    .end-top > * { pointer-events: auto; }
    /* La puce du jeu (≤ 180 px, « … » au-delà) + « ? Règles » (≈ 94 px) à gauche, « Passer » + vocal + son (≈ 300 px)
       à droite, et le titre, posés sur la même ligne, ne se touchent jamais : le titre (≈ 8,9 × sa taille de police de
       large) garde ≥ 24 px d'écart avec le plus large des deux groupes : 2 × (300 + 32 + 24) = 712 px réservés
       (vérification finale du 15/11 : à 1280 × 720, « ? Règles » recouvrait le « F » de « Fin de partie ! » et
       « Passer » le drapeau, avec « Dernière carte ! · 1 manche ») */
    .end-top .chip { display: block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
    .end-title { margin-top: 0; font-size: clamp(2.1rem, min(8.6dvh, calc((min(100vw, 1180px) - 712px) / 8.9)), 4.4rem); }
    .end-sub { margin-top: 6px; font-size: clamp(.98rem, 2.4dvh, 1.2rem); }
    .end-grid { gap: 40px; margin-top: 10px; }
    /* Podium borné par la hauteur restante (≈ 0,72 × sa largeur + noms et montants) : la scène entière reste visible */
    .podium-wrap { max-width: min(640px, max(400px, calc((100dvh - 305px) * 1.39))); }
    .end-rows { margin-top: 14px; gap: 6px; }
    .end-row { padding-block: 5px; }
    /* 5 à 8 joueurs (2 à 5 lignes de classement) : lignes compactes (44 px) et podium plus petit d'autant par ligne
       en plus : tout tient sans défiler, même à 1280 × 720 avec 8 joueurs */
    .end-rows:has(> :nth-child(2)) { gap: 4px; }
    .end-rows:has(> :nth-child(2)) .end-row { grid-template-columns: 28px 32px minmax(0, 1fr) auto; padding-block: 3px; }
    .end-rows:has(> :nth-child(2)) .rav { width: 32px; height: 32px; }
    .end-main:has(.end-row:nth-child(2)) .podium-wrap { max-width: min(640px, max(300px, calc((100dvh - 349px) * 1.39))); }
    .end-main:has(.end-row:nth-child(3)) .podium-wrap { max-width: min(640px, max(300px, calc((100dvh - 393px) * 1.39))); }
    .end-main:has(.end-row:nth-child(4)) .podium-wrap { max-width: min(640px, max(300px, calc((100dvh - 437px) * 1.39))); }
    .end-main:has(.end-row:nth-child(5)) .podium-wrap { max-width: min(640px, max(300px, calc((100dvh - 481px) * 1.39))); }

    .end-awards { margin-top: 2px; }
    .end-awards .end-h2 { font-size: 1.15rem; }
    .award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
    .award:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }
    .award-front {
      display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; justify-items: start;
      padding: 10px 12px; text-align: left;
    }
    .aw-emoji { grid-row: 1 / span 3; width: 44px; height: 44px; font-size: 22px; }
    .aw-title { margin-top: 0; font-size: .92rem; }
    .aw-who { justify-content: flex-start; font-size: .78rem; }
    .aw-who .wav { width: 20px; height: 20px; }
    .aw-label { font-size: .72rem; line-height: 1.25; }
    .award-back span { font-size: 1.5rem; }

    /* Moment fort en ligne : la scène à gauche, la phrase à droite */
    .end-moment {
      display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center;
      max-width: none; margin: 14px 0 0; padding: 12px 16px 14px; text-align: left;
    }
    .end-moment .end-h2 { grid-column: 1 / -1; font-size: 1.05rem; }
    .mo-scene { grid-column: 1; grid-row: 2 / span 2; margin-top: 8px; gap: 6px; }
    .mo-p { width: 70px; }
    .mo-av { width: 50px; height: 50px; }
    .mo-av svg { width: 42px; height: 42px; }
    .mo-tile { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 8px; }
    .mo-text { grid-column: 2; grid-row: 2 / span 2; margin: 8px 0 0; max-width: none; font-size: .98rem; }
    .end-moment:has(.mo-tile) .mo-text { grid-row: 3; margin-top: 4px; }

    .end-actions { position: static; margin: 14px 0 0; padding: 0 0 max(14px, env(safe-area-inset-bottom)); background: none; }
    .end-side > .end-actions { margin-top: 14px; }
    .end-actions .btn-rematch { min-height: 56px; padding-block: .6em; }
    /* Entrée des actions : petit glissé (dans le flux, un grand décalage ferait apparaître une barre de défilement) */
    .is-playing .end-actions:not(.is-in) { transform: translateY(14px); }
  }
}

/* ======================= Keyframes ======================= */
@keyframes end-slam {
  0% { transform: scale(2.4); opacity: 0; }
  45% { transform: scale(.92); opacity: 1; }
  70% { transform: scale(1.04); }
  100% { transform: none; opacity: 1; }
}
@keyframes end-shake {
  15% { transform: translate(-7px, 3px); } 30% { transform: translate(6px, -4px); }
  45% { transform: translate(-5px, 2px); } 60% { transform: translate(4px, -1px); } 80% { transform: translate(-2px, 1px); }
}
@keyframes end-up { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes end-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes step-rise { 0% { transform: scaleY(0); } 60% { transform: scaleY(1.08); } 80% { transform: scaleY(.97); } 100% { transform: none; } }
@keyframes step-grow { from { transform: scaleY(0); } to { transform: scaleY(.84); } }
@keyframes step-slam { 0% { transform: scaleY(.84); } 45% { transform: scaleY(1.12); } 70% { transform: scaleY(.95); } 100% { transform: none; } }
@keyframes end-jitter { 0%, 100% { translate: 0 0; } 25% { translate: -1.5px 0; } 50% { translate: 1px -1px; } 75% { translate: 1.5px 0; } }
@keyframes pod-pop {
  0% { opacity: 0; transform: translateY(40px) scale(.3); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.1); }
  78% { transform: translateY(2px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes pod-pop-big {
  0% { opacity: 0; transform: translateY(70px) scale(.2); }
  35% { opacity: 1; transform: translateY(-40px) scale(1.38); }
  52% { transform: translateY(6px) scale(1.12, .86); }
  68% { transform: translateY(-12px) scale(.96, 1.06); }
  84% { transform: translateY(0) scale(1.03, .97); }
  100% { opacity: 1; transform: none; }
}
@keyframes crown-drop {
  0% { opacity: 0; transform: translateY(-460%) rotate(-50deg) scale(1.3); }
  15% { opacity: 1; }
  55% { transform: translateY(0) rotate(12deg) scale(1); }
  70% { transform: translateY(-24%) rotate(-6deg); }
  84% { transform: translateY(0) rotate(5deg); }
  92% { transform: translateY(-6%) rotate(-2deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes crown-idle { 0%, 100% { rotate: -14deg; } 50% { rotate: -6deg; } }
@keyframes rays-spin { to { rotate: 1turn; } }
@keyframes spot-sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes mo-slide { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } }

/* ======================= Fluidité : perf-lite (cf. docs/fluidite.md) ======================= */
/* On garde la révélation du podium (c'est l'information) ; on coupe les boucles décoratives. */
.perf-lite .end-bg::before, .perf-lite .pod-rays, .perf-lite .pod-spot, .perf-lite .pod-crown,
.perf-lite .mo-arrow i { animation: none; }
.perf-lite .end-bg::after { display: none; }
.perf-lite .is-playing .pod-crown.is-in { animation: crown-drop .95s ease-out both; }