/* Design system MillionMonkeys : toute valeur visuelle vient d'ici. */
:root {
    color-scheme: dark;

    --bg: #0b0b0c;
    --bg-alt: #111113;
    --card: #17171a;
    --card-hover: #1f1f23;
    --hover: #1b1b1f;
    --border: #26262b;
    --border-strong: #3a3a41;

    --accent: #f5c518;
    --accent-hover: #ffd84a;
    --accent-light: rgb(245 197 24 / 0.12);
    --accent-ink: #1a1400;

    --text: #f4f4f5;
    --text-secondary: #a1a1aa;
    --text-muted: #8b8b94; /* ≥ 4,5:1 sur --bg, --bg-alt, --card, --card-hover et --hover */

    --success: #4ade80;
    --error: #f87171;
    --warning: #fbbf24;
    --overlay: rgb(0 0 0 / 0.72);
    --overlay-soft: rgb(0 0 0 / 0.32);

    --r-c: #a1a1aa;
    --r-pc: #4ade80;
    --r-r: #60a5fa;
    --r-sr: #c084fc;
    --r-ur: #fb923c;
    --r-l: #facc15;
    --foil-1: #ff6b6b;
    --foil-2: #facc15;
    --foil-3: #4ade80;
    --foil-4: #60a5fa;
    --foil-5: #c084fc;

    --pack-1: #fffaf0;
    --pack-2: #f1e7d0;
    --pack-edge: #d9c9a3;
    /* Dos des cartes (pile de la révélation, cartes qui sortent du paquet) : disque doré derrière le singe, fines rayures. */
    --card-back:
        radial-gradient(circle, var(--accent-light) 0 32%, transparent 33%),
        repeating-linear-gradient(45deg, var(--card) 0 var(--space-2), var(--bg-alt) var(--space-2) var(--space-4));

    /* Soutien : couleurs de pseudo, bannières, or du Pack Fondateur. */
    --name-banane: #facc15;
    --name-jungle: #4ade80;
    --name-lagon: #38bdf8;
    --name-corail: #fb7185;
    --name-orchidee: #e879f9;
    --name-neige: #f4f4f5;

    --banner-jungle: linear-gradient(120deg, #14532d, #052e16);
    --banner-plage: linear-gradient(120deg, #0e7490, #f59e0b);
    --banner-nuit: linear-gradient(120deg, #1e293b, #0b0b0c);
    --banner-volcan: linear-gradient(120deg, #9a3412, #f97316);

    --gold: #d4af37;
    --gold-light: #f6e27a;
    --gold-deep: #8a6a12;
    --founder-back: linear-gradient(160deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.5rem;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 8px 24px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 24px 64px rgb(0 0 0 / 0.6);
    --glow-accent: 0 0 48px rgb(245 197 24 / 0.35);

    --font-display: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

    /* Encoche et barre d'accueil des téléphones (viewport-fit=cover) : 0 ailleurs. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --sidebar-width: 16rem;
    --card-width: 12rem;
    --content-max: 72rem;
    --pack-width: 12rem;
    --pack-height: 17rem;
    --modal-width: 40rem;
    /* Carte mise en scène, une à une, à la révélation (et son bouton) : 18rem au plus, moins si l'écran est bas, pour
       que carte, haut et bas du plein écran (--booster-chrome) tiennent sans défiler. */
    --booster-chrome: 23rem;
    --stage-card-width: clamp(10rem, calc((100dvh - var(--booster-chrome)) * 0.75), 18rem); /* carte un peu plus haute que large */
    --pack-ratio: 1.45;
    --booster-foot: 10rem; /* bas du plein écran réservé (cartes vues, bouton, aide) : même centre à l'ouverture et à la révélation */
    --leave-reach: 130%; /* course d'une carte vue jetée sur le côté, en largeurs de carte */
    --leave-turn: -14deg;
    --lift-turn: 1.06; /* carte soulevée pendant son retournement */
    --mini-card-width: 2.25rem; /* miniature d'une carte déjà vue, dans la rangée sous la pile */
    --rays-size: 22rem; /* halo de rayons derrière une Super rare et au-delà : tient dans la hauteur de la scène */
    --spark-reach: 8rem; /* course des particules d'une Ultra rare et au-delà ; une sur deux va jusqu'à la suivante */
    --spark-reach-far: 11rem;
    --atlas-cell: 10rem; /* aussi les tuiles « un paquet par pays » */
    --creator-cell: 16rem; /* tuile d'un créateur (nom de chaîne plus long qu'un nom de pays) */
    --touch-target: 2.75rem; /* 44 px : cible tactile minimale (étoile d'un pays favori) */
    --pattern-lg: 6rem;
    --pattern-sm: 4rem;
    --perspective: 1000px;
    --duration-foil: 4s;
    --stagger: 80ms;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 150ms;
    --duration-base: 300ms;
    --duration-slow: 600ms;
    --duration-charge: 900ms; /* suspense avant une carte Super rare et au-delà : CHARGE_MS de views/reveal.js */
    --duration-idle: 3.6s; /* respiration du paquet au repos (un cycle lent, rien qui clignote) */
    --duration-holo: 2s; /* reflet holographique d'une Légendaire qui vient d'être retournée */
    --duration-charge-ur: 1300ms; /* charge plus longue d'une Ultra rare : CHARGE_MS de views/reveal.js */
    --duration-charge-l: 1700ms; /* et d'une Légendaire, la plus longue */
    --duration-flash: 600ms; /* flash plein écran d'une Ultra rare et au-delà : un seul, bref (aucun clignotement) */
    --duration-spark: 900ms; /* particules d'une Ultra rare et au-delà */
    --duration-rays: 8s; /* un tour du halo de rayons, lent */

    /* Survol : inclinaison 3D qui suit le pointeur (tilt.js) et reflet. */
    --tilt-max: 10deg;
    --lift-scale: 1.03;
    --pop-scale: 1.05;
    --glare: rgb(255 255 255 / 0.2);
    --holo-strength: 0.4;
    --rays-strength: 0.55; /* opacité du halo de rayons */
    --flash-strength: 0.7; /* opacité au plus fort du flash plein écran */
    --idle-turn: 1.5deg;
    --burst-light: rgb(255 248 220 / 0.9);
    --burst-brightness: 1.5;
}