/* index-page.css — bloc <style> migré depuis index.html (audit Ultracode 2026-06-05).
   Rendu identique : règles relocalisées à la même position de cascade (link in-place). */

    /* Animation d'apparition staggered au chargement du jeu — cohérent avec
       les onglets Classements. Désactivé par .reduce-motion. */
    @keyframes dlp-pop-in {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .main:not(.hidden) .card-stack,
    .main:not(.hidden) .game-panel,
    .main:not(.hidden) .controls-panel,
    .main:not(.hidden) .stats-trigger,
    .main:not(.hidden) .mobile-footer-nav {
      animation: dlp-pop-in 400ms var(--ease-out) backwards;
    }
    .main:not(.hidden) .card-stack       { animation-delay: 60ms; }
    .main:not(.hidden) .game-panel       { animation-delay: 140ms; }
    .main:not(.hidden) .controls-panel   { animation-delay: 220ms; }
    .main:not(.hidden) .stats-trigger    { animation-delay: 220ms; }
    .main:not(.hidden) .mobile-footer-nav{ animation-delay: 300ms; }
    .reduce-motion .card-stack,
    .reduce-motion .game-panel,
    .reduce-motion .controls-panel,
    .reduce-motion .stats-trigger,
    .reduce-motion .mobile-footer-nav { animation: none !important; }

    /* ── Pop-up explication carte rare (shiny / holo) — DIRECTION A ──────
       « Tampon dossier » néo-brut, ZÉRO dégradé. Le titre + le bouton sont
       animés « comme les cartes » : barre de shine BLANCHE SOLIDE qui balaye
       (brillante) / bandes arc-en-ciel SOLIDES qui défilent (holo). Techniques :
       le shine = pseudo blanc opaque translaté ; l'arc-en-ciel = repeating-
       linear-gradient à arrêts NETS (bandes plates, pas de transition de
       couleur) animé en background-position. */
    /* Balayage du shine blanc : entre, traverse, sort, puis pause hors-champ. */
    @keyframes rare-shine-sweep {
      0%       { left: -30%; }
      55%      { left: 125%; }
      100%     { left: 125%; }
    }
    /* Défilement des bandes arc-en-ciel (1 cycle = 108px = 6 bandes de 18px). */
    @keyframes rare-holo-scroll {
      from { background-position: 0 0; }
      to   { background-position: 108px 0; }
    }
    /* Holo float/pastille — motif STRICTEMENT repris du fond de carte holo
       (js/card-frames.js renderHoloPole + cards.css holo-barbershop) : bandes VERTICALES
       de 12px (6 teintes), défilées horizontalement de 72px (= 6×12 = UNE période). Posé
       sur un pseudo-élément ROTATÉ 35° (cf. .collection-fly.holo::before / .rvd-mchip.is-holo::before).
       Stripes verticales + scroll horizontal d'une période = seamless trivial (la version
       gradient-45° + background-size sautait — retour user 2026-06-15). */
    @keyframes holo-barbershop-bg {
      from { background-position: 0 0; }
      to   { background-position: 72px 0; }
    }
    @keyframes rare-pop-in {
      0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
      70%  { opacity: 1; transform: scale(1.04) rotate(-1.5deg); }
      100% { opacity: 1; transform: scale(1) rotate(-1.5deg); }
    }
    @keyframes rare-pop-out {
      0%   { opacity: 1; transform: scale(1) rotate(-1.5deg); }
      100% { opacity: 0; transform: scale(0.6) rotate(6deg); }
    }
    /* Loop sway + breath après le pop-in : oscillation discrète autour de la
       position de repos. Plus lent (9s) et plus subtil. */
    @keyframes rare-loop {
      0%, 100% { transform: scale(1)     rotate(-1.5deg); }
      25%      { transform: scale(1.008) rotate(-2.2deg); }
      50%      { transform: scale(1)     rotate(-1.5deg); }
      75%      { transform: scale(0.994) rotate(-0.8deg); }
    }

    .rare-explain-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.55);
      display: none;
      align-items: center; justify-content: center;
      z-index: 2000;
      padding: 20px;
    }
    .rare-explain-backdrop.show { display: flex; }
    .rare-explain-card {
      background: var(--paper);
      /* Stroke + shadow toujours noirs */
      border: var(--border-thick);
      box-shadow: 10px 10px 0 var(--ink);
      /* Desktop : 480px max. Mobile : cap à 75vw pour laisser de l'air sur
         les côtés (la modale ne touche jamais les bords de l'écran). */
      max-width: min(480px, 75vw);
      width: 100%;
      padding: 32px 28px 26px;
      display: flex; flex-direction: column;
      align-items: center; text-align: center;
      gap: 16px;
      transform: rotate(-1.5deg);
      /* pop-in (340ms forwards) puis loop sway+breath (9s infini, démarré
         juste après pop-in). forwards garde la position finale du pop-in et
         le loop reprend depuis cet état → pas de saut visuel. */
      animation:
        rare-pop-in 340ms cubic-bezier(0.25, 1.4, 0.5, 1.05) forwards,
        rare-loop   9s ease-in-out 340ms infinite;
      position: relative;
      /* overflow visible : la puce ×N déborde en haut-droite (tampon) et les
         ombres dures des éléments internes respirent. Plus d'overlay shimmer
         à contenir (supprimé — direction A = zéro dégradé). */
      overflow: visible;
    }
    .rare-explain-card.closing { animation: rare-pop-out 220ms ease-in forwards; }
    /* Puce multiplicateur (×2 / ×5) « tamponnée » en haut-droite. */
    .rare-explain-mult {
      position: absolute; top: 16px; right: -10px; z-index: 3;
      font-family: var(--font-display); font-style: italic; font-weight: 800;
      font-size: 22px; line-height: 1; color: var(--ink);
      background: var(--yellow);
      border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
      padding: 3px 12px; transform: rotate(5deg);
    }
    .rare-explain-card[data-type="holo"] .rare-explain-mult {
      background: var(--hue-6); color: var(--paper);
    }

    /* Titre direction A : [icône carrée tamponnée] / "Carte" / [mot vedette
       animé]. Empilés, centrés. Le mot porte l'animation (shine ou holo). */
    .rare-explain-title {
      display: flex; flex-direction: column;
      align-items: center;
      gap: 6px;
      font-family: var(--font-display);
      font-size: clamp(20px, 4.5vw, 34px);
      letter-spacing: -0.02em; line-height: 1;
      margin: 0;
      text-transform: uppercase;
    }
    /* Icône = carré « sticker » tamponné (sparkle SVG). Couleur selon le type. */
    .rare-explain-emoji {
      display: inline-grid; place-items: center;
      width: 50px; height: 50px;
      color: var(--ink);
      background: var(--yellow);
      border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
      transform: rotate(-5deg);
      flex-shrink: 0;
    }
    .rare-explain-card[data-type="holo"] .rare-explain-emoji { background: var(--card-lavender); }
    .rare-explain-emoji svg { width: 28px; height: 28px; }
    .rare-explain-title-row { display: inline-flex; align-items: center; max-width: 100%; }
    /* "Carte" = mot brut (pas de cadre), plus petit, au-dessus du mot vedette. */
    .rare-explain-carte { font-size: 0.52em; letter-spacing: 0.03em; opacity: 0.85; }
    /* Mot vedette "BRILLANTE !" / "HOLOGRAPHIQUE !" : cadre coloré tilté dont le
       FOND est animé. overflow:hidden clippe le shine / les bandes ;
       isolation:isolate confine le z-index:-1 de l'arc-en-ciel sous le texte. */
    #rare-explain-accent {
      position: relative; overflow: hidden; isolation: isolate;
      display: inline-block;
      padding: 4px 14px;
      border: var(--border-thick);
      box-shadow: var(--sh-sm);
      color: var(--ink);
      white-space: nowrap;
      transform: rotate(-1.5deg);
    }
    /* — BRILLANTE : fond OR solide + barre de shine BLANCHE qui balaye par-dessus — */
    .rare-explain-card[data-type="shiny"] #rare-explain-accent { background: var(--yellow); }
    .rare-explain-card[data-type="shiny"] #rare-explain-accent::after {
      content: ''; position: absolute; top: -40%; height: 180%; width: 18px;
      left: -30%; background: rgba(255,255,255,0.92);
      transform: skewX(-16deg); pointer-events: none; z-index: 2;
      animation: rare-shine-sweep 2.8s ease-in-out infinite;
    }
    /* — HOLO : fond lavande + bandes arc-en-ciel SOLIDES qui défilent (sous le texte) — */
    .rare-explain-card[data-type="holo"] #rare-explain-accent { background: var(--card-lavender); }
    .rare-explain-card[data-type="holo"] #rare-explain-accent::before {
      content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: repeating-linear-gradient(90deg,
        var(--hue-1) 0 18px, var(--hue-2) 18px 36px, var(--hue-3) 36px 54px,
        var(--hue-4) 54px 72px, var(--hue-5) 72px 90px, var(--hue-6) 90px 108px);
      background-size: 108px 100%;
      opacity: 0.62;
      animation: rare-holo-scroll 2.6s linear infinite;
    }

    .rare-explain-text {
      font-family: var(--font-body);
      font-size: 16px; line-height: 1.55;
      margin: 0;
      font-weight: 500;
    }
    /* Le `<b>` (× points) : effet surligneur coloré + display font pour pop */
    .rare-explain-text b {
      font-family: var(--font-display); font-weight: 700;
      font-size: 20px; letter-spacing: 0.02em;
      padding: 0 5px;
      background: linear-gradient(transparent 55%, rgba(10,10,10,0.18) 55%);
      display: inline-block;
      transform: rotate(-1deg);
    }
    .rare-explain-card[data-type="shiny"] .rare-explain-text b {
      background: linear-gradient(transparent 55%, rgba(255,193,0,0.75) 55%);
    }
    .rare-explain-card[data-type="holo"] .rare-explain-text b {
      background: linear-gradient(transparent 55%, rgba(180,100,220,0.55) 55%);
    }
    /* R5 #9 : encart d'avertissement = sticker (ombre dure + léger tilt) +
       police Space Mono (cohérence jeu, fini le --font-mono JetBrains). */
    .rare-explain-warn {
      font-family: 'Space Mono', monospace;
      font-size: 12px; line-height: 1.4;
      letter-spacing: 0.02em;
      background: var(--paper-2); border: 2px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink);
      padding: 10px 14px;
      display: flex; gap: 8px; align-items: flex-start;
      text-align: left;
      margin: 6px 2px 2px;
      transform: rotate(-0.6deg);
    }
    .rare-explain-warn .ico { flex-shrink: 0; margin-top: 1px; }

    /* Bouton CTA : stroke + shadow noirs, fond SOLIDE selon le type, animé
       (shine blanc qui balaye / bandes arc-en-ciel qui défilent) comme le mot
       vedette. overflow:hidden + isolation confinent l'animation. */
    .rare-explain-btn {
      position: relative; overflow: hidden; isolation: isolate;
      margin-top: 10px;
      font-family: var(--font-display);
      font-size: 15px; letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 14px 32px;
      color: var(--ink);
      border: var(--border-thick);
      box-shadow: 5px 5px 0 var(--ink);
      cursor: pointer;
      transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
      text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
    }
    .rare-explain-card[data-type="shiny"] .rare-explain-btn { background: var(--yellow); }
    .rare-explain-card[data-type="shiny"] .rare-explain-btn::after {
      content: ''; position: absolute; top: -40%; height: 180%; width: 22px;
      left: -30%; background: rgba(255,255,255,0.9);
      transform: skewX(-16deg); pointer-events: none; z-index: 2;
      animation: rare-shine-sweep 2.8s ease-in-out 0.4s infinite;
    }
    .rare-explain-card[data-type="holo"] .rare-explain-btn { background: var(--card-lavender); }
    .rare-explain-card[data-type="holo"] .rare-explain-btn::before {
      content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background: repeating-linear-gradient(90deg,
        var(--hue-1) 0 18px, var(--hue-2) 18px 36px, var(--hue-3) 36px 54px,
        var(--hue-4) 54px 72px, var(--hue-5) 72px 90px, var(--hue-6) 90px 108px);
      background-size: 108px 100%;
      opacity: 0.55;
      animation: rare-holo-scroll 2.6s linear infinite;
    }
    html.dlp-can-hover .rare-explain-btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: 7px 7px 0 var(--ink);
    }
    .rare-explain-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

    .reduce-motion .rare-explain-card,
    .reduce-motion #rare-explain-accent::before,
    .reduce-motion #rare-explain-accent::after,
    .reduce-motion .rare-explain-btn::before,
    .reduce-motion .rare-explain-btn::after { animation: none !important; }

    /* Mobile : libère de l'espace pour le titre "HOLOGRAPHIQUE !" qui débordait.
       Padding card réduit (libère ~20px content width), max-width 88vw (vs 75vw),
       gap 12 (vs 16), accent en wrap autorisé pour très petit viewport. Le JS
       fitRareExplainTitle continue de réduire la font si besoin (plancher 14px). */
    @media (max-width: 480px) {
      .rare-explain-card {
        padding: 24px 16px 22px;
        max-width: 88vw;
        gap: 12px;
      }
      .rare-explain-accent {
        padding: 3px 10px;
        /* Autorise le wrap quand l'auto-fit JS atteint son plancher mais que
           le mot dépasse encore (cas iPhone SE 320px). Acceptable
           visuellement : "HOLOGRA-PHIQUE !" sur 2 lignes vaut mieux qu'un
           débordement hors-card. */
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        line-height: 1.05;
      }
    }