/**
 * TCG DropZone - Gamification : styles front-end (HUD néon / cyberpunk).
 *
 * Sommaire :
 *  1. Jetons de design & couleur d'accent synchronisée avec le thème
 *  2. Rang (.tcg-rank)
 *  3. Barre d'XP (.tcg-xp-bar)
 *  4. Couronne d'avatar (.tcg-avatar)
 *  5. Badge (.tcg-badge)
 *  6. Animations
 *  7. Responsive & accessibilité
 *
 * COULEUR D'ACCENT
 * ---------------
 * Tous les composants s'accordent au thème choisi par le joueur : `--tcg-accent`
 * hérite de `--dz-main` (la variable du tableau de bord). Quand le joueur change
 * de thème, la jauge d'XP, le rang et le badge changent de couleur avec lui.
 *
 * `--tcg-rarity-accent` n'est qu'un REPLI : il ne sert que hors tableau de bord,
 * là où `--dz-main` n'est pas défini. Il porte la couleur du palier atteint.
 *
 * Toutes les règles sont préfixées `.tcg-` et scopées : aucune fuite possible
 * vers le thème ou les widgets Elementor voisins.
 */

/* -------------------------------------------------------------------------
 * 1. JETONS DE DESIGN & COULEUR D'ACCENT
 * ---------------------------------------------------------------------- */

.tcg-gami {
    /* Repli de rareté (surchargé par .tcg-level-N ; jamais prioritaire sur le thème). */
    --tcg-rarity-accent: #9ca3af;
    --tcg-rarity-accent-2: #d1d5db;
    --tcg-rarity-accent-soft: rgba(156, 163, 175, 0.32);
    --tcg-rarity-accent-glow: rgba(156, 163, 175, 0.5);

    /* Accent réel : le thème du joueur d'abord, la rareté seulement en secours. */
    --tcg-accent: var(--dz-main, var(--tcg-rarity-accent));
    --tcg-accent-2: var(--dz-main-hover, var(--tcg-rarity-accent-2));
    --tcg-accent-soft: var(--dz-glow-light, var(--tcg-rarity-accent-soft));
    --tcg-accent-glow: var(--dz-glow-strong, var(--tcg-rarity-accent-glow));
    --tcg-accent-faint: var(--dz-glow-verylight, rgba(255, 255, 255, 0.05));

    /* Surfaces alignées sur .dz-card / .dz-dash-header du tableau de bord. */
    --tcg-surface: linear-gradient(180deg, rgba(15, 15, 18, 0.78) 0%, rgba(8, 8, 10, 0.92) 100%);
    --tcg-border: rgba(255, 255, 255, 0.06);
    --tcg-shadow: 0 20px 44px rgba(0, 0, 0, 0.82);
    --tcg-track: rgba(255, 255, 255, 0.055);

    --tcg-text: #ffffff;
    --tcg-text-muted: rgba(255, 255, 255, 0.55);
    --tcg-text-dim: rgba(255, 255, 255, 0.4);

    /* Arrondis fluides et harmonieux, aucune valeur nulle : rien de carré. */
    --tcg-radius: 18px;
    --tcg-radius-inner: 12px;
    --tcg-speed: 1.05s;
    --tcg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tcg-hud-font: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Courier New", monospace;

    box-sizing: border-box;
    color: var(--tcg-text);
    /* Le tableau de bord impose sa police : on ne la contredit jamais. */
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}

.tcg-gami *,
.tcg-gami *::before,
.tcg-gami *::after {
    box-sizing: border-box;
}

/* Repli de couleur par palier — n'agit que si --dz-main est absent. */
.tcg-gami.tcg-level-1 {
    --tcg-rarity-accent: #9ca3af;
    --tcg-rarity-accent-2: #e5e7eb;
    --tcg-rarity-accent-soft: rgba(156, 163, 175, 0.3);
    --tcg-rarity-accent-glow: rgba(156, 163, 175, 0.45);
}

.tcg-gami.tcg-level-2 {
    --tcg-rarity-accent: #34d399;
    --tcg-rarity-accent-2: #a7f3d0;
    --tcg-rarity-accent-soft: rgba(52, 211, 153, 0.32);
    --tcg-rarity-accent-glow: rgba(52, 211, 153, 0.5);
}

.tcg-gami.tcg-level-3 {
    --tcg-rarity-accent: #3b82f6;
    --tcg-rarity-accent-2: #93c5fd;
    --tcg-rarity-accent-soft: rgba(59, 130, 246, 0.34);
    --tcg-rarity-accent-glow: rgba(59, 130, 246, 0.58);
}

.tcg-gami.tcg-level-4 {
    --tcg-rarity-accent: #a855f7;
    --tcg-rarity-accent-2: #e9d5ff;
    --tcg-rarity-accent-soft: rgba(168, 85, 247, 0.36);
    --tcg-rarity-accent-glow: rgba(168, 85, 247, 0.62);
}

.tcg-gami.tcg-level-5 {
    --tcg-rarity-accent: #f59e0b;
    --tcg-rarity-accent-2: #fde68a;
    --tcg-rarity-accent-soft: rgba(245, 158, 11, 0.36);
    --tcg-rarity-accent-glow: rgba(245, 158, 11, 0.65);
}

/* -------------------------------------------------------------------------
 * 2. RANG  —  rendu épuré : un seul niveau visuel, jamais de double encadré
 *
 * Aucun fond, aucune bordure, aucune ombre de conteneur : le shortcode ne
 * produit qu'une puce + un préfixe de niveau + le nom du rang. Impossible
 * d'obtenir un double cadre puisqu'il n'y a aucun cadre.
 * ---------------------------------------------------------------------- */

.tcg-rank,
.tcg-rank.tcg-gami {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    font-family: var(--tcg-hud-font);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--tcg-accent);
}

.tcg-rank__dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tcg-accent);
    box-shadow:
        0 0 0 3px var(--tcg-accent-soft),
        0 0 10px var(--tcg-accent-glow);
    animation: tcg-pulse-dot 2.4s ease-in-out infinite;
}

.tcg-rank__level {
    position: relative;
    padding-right: 9px;
    color: var(--tcg-text-dim);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Séparateur fin entre le niveau et le nom (pas un cadre : un simple trait). */
.tcg-rank__level::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 11px;
    background: var(--tcg-accent-soft);
    transform: translateY(-50%);
}

.tcg-rank__name {
    color: var(--tcg-accent);
    text-shadow:
        0 0 14px var(--tcg-accent-glow),
        0 0 4px var(--tcg-accent-soft);
}

/* Holographique / Secrète Rare : le nom du rang devient un dégradé mouvant. */
.tcg-rank.tcg-tier-holo .tcg-rank__name,
.tcg-rank.tcg-tier-prismatic .tcg-rank__name {
    background: linear-gradient(92deg, #ffffff, var(--tcg-accent-2), var(--tcg-accent), #ffffff);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    animation: tcg-flow 5s linear infinite;
}

/* Variante optionnelle : pastille pleine (un seul contour, arrondi franc). */
.tcg-rank--solid {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--tcg-accent-faint);
    box-shadow: inset 0 0 0 1px var(--tcg-accent-soft);
}

/* Variante texte pur : même la puce disparaît. */
.tcg-rank--plain .tcg-rank__dot {
    display: none;
}

/* -------------------------------------------------------------------------
 * 3. BARRE D'XP  —  HUD haut de gamme, lueur pilotée par la progression
 * ---------------------------------------------------------------------- */

.tcg-xp-bar {
    position: relative;
    display: block;
    width: 100%;
    padding: 20px 22px;
    border: 1px solid var(--tcg-border);
    /* Un seul rayon, généreux et homogène sur les quatre coins. */
    border-radius: var(--tcg-radius);
    /*
     * Calques de profondeur (glassmorphism) :
     *  - voile radial teinté par l'accent, en haut à gauche
     *  - dégradé de surface sombre
     * posés au-dessus du backdrop-filter flouté.
     */
    background:
        radial-gradient(120% 150% at 0% 0%, var(--tcg-accent-faint) 0%, transparent 55%),
        var(--tcg-surface);
    box-shadow:
        var(--tcg-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        /* lueur interne subtile, colorée par le thème */
        inset 0 0 32px -18px var(--tcg-accent-glow);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    backdrop-filter: blur(16px) saturate(1.25);
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 0.45s var(--tcg-ease),
        box-shadow 0.45s var(--tcg-ease);
}

/* Survol : la carte se soulève en douceur, la lueur respire. Rien de carré. */
@media (hover: hover) {
    .tcg-xp-bar:not(.tcg-xp-bar--bare):hover {
        transform: translateY(-2px);
        box-shadow:
            var(--tcg-shadow),
            inset 0 1px 0 rgba(255, 255, 255, 0.08),
            inset 0 0 40px -16px var(--tcg-accent-glow),
            0 0 34px -10px var(--tcg-accent-glow);
    }
}

/* Filet lumineux supérieur, fondu dans l'arrondi du conteneur. */
.tcg-xp-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tcg-accent), transparent);
    opacity: 0.7;
    pointer-events: none;
    z-index: 2;
}

/* Reflet vitré diagonal : deuxième calque de profondeur. */
.tcg-xp-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/*
 * Halo dynamique : sa largeur suit --tcg-progress, donc la carte entière
 * s'illumine à mesure que le joueur avance. C'est le cœur du « ça en jette ».
 */
.tcg-xp-bar__aura {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--tcg-progress, 0%);
    background: radial-gradient(60% 120% at 50% 100%, var(--tcg-accent-glow) 0%, transparent 72%);
    opacity: 0.55;
    filter: blur(22px);
    pointer-events: none;
    z-index: 0;
    transition: width var(--tcg-speed) var(--tcg-ease);
}

.tcg-xp-bar > *:not(.tcg-xp-bar__aura):not(.tcg-xp-gain) {
    position: relative;
    z-index: 1;
}

.tcg-xp-bar__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 14px;
}

.tcg-xp-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--tcg-hud-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--tcg-text-dim);
}

.tcg-xp-bar__rank {
    padding-left: 10px;
    border-left: 1px solid var(--tcg-accent-soft);
    color: var(--tcg-accent-2);
    text-shadow: 0 0 12px var(--tcg-accent-glow);
}

/* Pourcentage « hero » : gros chiffre tabulaire, signe % en exposant discret. */
.tcg-xp-bar__percent {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--tcg-hud-font);
    font-weight: 800;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 18px var(--tcg-accent-glow);
}

.tcg-xp-bar__percent-num {
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.tcg-xp-bar__percent-sign {
    font-size: 13px;
    font-weight: 700;
    color: var(--tcg-accent);
}

.tcg-xp-bar__track {
    position: relative;
    height: 16px;
    border-radius: 999px;
    background:
        radial-gradient(140% 100% at 50% 0%, rgba(0, 0, 0, 0.35) 0%, transparent 60%),
        var(--tcg-track);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.72),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        /* halo interne du rail, teinté par le thème */
        inset 0 0 14px -7px var(--tcg-accent-glow);
    overflow: hidden;
}

/* Fines graduations HUD. */
.tcg-xp-bar__track::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.12) 0 1px,
        transparent 1px 10%
    );
    opacity: 0.5;
    pointer-events: none;
}

/* Remplissage : largeur portée par --tcg-progress (style inline / JS). */
.tcg-xp-bar__fill {
    position: relative;
    height: 100%;
    width: var(--tcg-progress, 0%);
    min-width: 6px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--tcg-accent) 0%,
        var(--tcg-accent-2) 55%,
        #ffffff 100%
    );
    box-shadow:
        0 0 12px var(--tcg-accent-glow),
        0 0 26px -4px var(--tcg-accent-glow),
        /* inner glow : liseré lumineux à l'intérieur de la jauge */
        inset 0 0 10px rgba(255, 255, 255, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    transition: width var(--tcg-speed) var(--tcg-ease);
    will-change: width;
}

.tcg-xp-bar__fill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.06) 46%,
        rgba(0, 0, 0, 0.2) 100%
    );
    z-index: 2;
}

/* Reflet animé qui balaie la jauge. */
.tcg-xp-bar__fill::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 45%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: tcg-shine 2.6s ease-in-out infinite;
    z-index: 3;
}

/*
 * Flux d'énergie : bandes lumineuses obliques qui défilent en continu à
 * l'intérieur de la jauge. Rendu CSS pur (repeating-gradient + background-position),
 * aucun coût JS / Canvas.
 */
.tcg-xp-bar__flux {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: repeating-linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0) 9px,
        rgba(255, 255, 255, 0.28) 13px,
        rgba(255, 255, 255, 0) 20px
    );
    background-size: 36px 100%;
    mix-blend-mode: screen;
    opacity: 0.65;
    animation: tcg-flux 0.9s linear infinite;
    z-index: 1;
}

/* Tête lumineuse en bout de jauge. */
.tcg-xp-bar__spark {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 4;
    width: 9px;
    height: 9px;
    margin-right: -1px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 9px 2px var(--tcg-accent-glow);
    transform: translateY(-50%);
    animation: tcg-pulse 1.7s ease-in-out infinite;
}

.tcg-xp-bar__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    margin-top: 13px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tcg-text-muted);
}

.tcg-xp-bar__values {
    font-family: var(--tcg-hud-font);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4px;
    white-space: nowrap;
}

.tcg-xp-bar__current {
    color: #ffffff;
    text-shadow: 0 0 14px var(--tcg-accent-glow);
}

.tcg-xp-bar__sep,
.tcg-xp-bar__max {
    color: var(--tcg-text-dim);
    font-weight: 700;
}

.tcg-xp-bar__unit {
    margin-left: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--tcg-accent);
}

.tcg-xp-bar__next b {
    color: var(--tcg-text);
    font-weight: 800;
}

/* Palier maximum : jauge pleine, dégradé qui circule. */
.tcg-xp-bar.is-max .tcg-xp-bar__fill {
    background: linear-gradient(
        90deg,
        var(--tcg-accent) 0%,
        var(--tcg-accent-2) 50%,
        var(--tcg-accent) 100%
    );
    background-size: 200% 100%;
    animation: tcg-flow 4s linear infinite;
}

.tcg-xp-bar.is-max .tcg-xp-bar__aura {
    animation: tcg-aura-throb 3.2s ease-in-out infinite;
}

/* Variante compacte. */
.tcg-xp-bar--compact {
    padding: 14px 16px;
    border-radius: var(--tcg-radius-inner);
}

.tcg-xp-bar--compact .tcg-xp-bar__track {
    height: 10px;
}

.tcg-xp-bar--compact .tcg-xp-bar__percent-num {
    font-size: 20px;
}

.tcg-xp-bar--compact .tcg-xp-bar__foot {
    margin-top: 9px;
}

/* Variante transparente (le conteneur Elementor gère le fond). */
.tcg-xp-bar--bare {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: visible;
}

.tcg-xp-bar--bare::before {
    display: none;
}

/*
 * Bulle « +N XP » : injectée sur <body> en position fixe, centrée juste
 * au-dessus de la jauge. Elle monte, tient ~4 s, puis s'efface (.is-out).
 */
.tcg-xp-gain {
    --tcg-accent: var(--dz-main, #be0000);

    position: fixed;
    z-index: 2147483000;
    transform: translate(-50%, -100%);
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(6, 8, 12, 0.82);
    box-shadow:
        inset 0 0 0 1px var(--tcg-accent),
        0 0 26px -4px var(--tcg-accent),
        0 10px 30px -12px rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-family: var(--tcg-hud-font, ui-monospace, monospace);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-shadow: 0 0 12px var(--tcg-accent);
    white-space: nowrap;
    pointer-events: none;
    animation: tcg-gain-pop 0.5s var(--tcg-ease, cubic-bezier(0.22, 1, 0.36, 1)) both,
        tcg-gain-float 4.2s ease-in-out both;
}

.tcg-xp-gain.is-out {
    transition: opacity 0.55s ease, transform 0.55s ease;
    opacity: 0;
    transform: translate(-50%, -180%);
}

@keyframes tcg-gain-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.7);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }
}

@keyframes tcg-gain-float {
    0% {
        margin-top: 0;
    }
    100% {
        margin-top: -14px;
    }
}

/* -------------------------------------------------------------------------
 * 3b. CINÉMATIQUES PLEIN ÉCRAN (coin burst, level up, tombola)
 *
 * Rendues sur <body>, elles héritent du thème via applyThemeVars() (le script
 * recopie --dz-main & consorts sur le nœud racine de l'overlay).
 * ---------------------------------------------------------------------- */

.tcg-cine {
    --tcg-accent: var(--dz-main, #be0000);
    --tcg-accent-2: var(--dz-main-hover, #ff3b3b);
    --tcg-glow: var(--dz-glow-strong, rgba(190, 0, 0, 0.6));

    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(120% 120% at 50% 40%, rgba(10, 12, 18, 0.86) 0%, rgba(2, 3, 6, 0.96) 70%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    font-family: "Montserrat", system-ui, -apple-system, sans-serif;
    color: #fff;
    text-align: center;
}

.tcg-cine.is-in {
    opacity: 1;
}

.tcg-cine.is-closing {
    opacity: 0;
}

/* Rayons animés en fond de cinématique (level up / gain de tombola). */
.tcg-cine__rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160vmax;
    height: 160vmax;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(
        from 0deg,
        transparent 0deg 8deg,
        var(--tcg-glow) 8deg 10deg
    );
    opacity: 0.14;
    mask: radial-gradient(closest-side, transparent 12%, #000 42%, transparent 78%);
    -webkit-mask: radial-gradient(closest-side, transparent 12%, #000 42%, transparent 78%);
    animation: tcg-rays-spin 26s linear infinite;
    pointer-events: none;
}

@keyframes tcg-rays-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- Éclat « + N Drop Coins » --- */
.tcg-coinburst__body {
    position: relative;
    z-index: 2;
    transform: scale(0.9);
    transition: transform 0.5s var(--tcg-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.tcg-coinburst.is-in .tcg-coinburst__body {
    transform: scale(1);
}

.tcg-coinburst__label {
    display: block;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 10px;
}

.tcg-coinburst__amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.tcg-coinburst__num {
    font-size: clamp(52px, 12vw, 104px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    color: #fff;
    text-shadow: 0 0 40px var(--tcg-glow), 0 0 14px var(--tcg-accent);
}

.tcg-coinburst__amount i {
    font-style: normal;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--tcg-accent-2);
}

.tcg-coinburst__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.tcg-coinburst__coin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #fff, var(--tcg-accent-2) 45%, var(--tcg-accent) 100%);
    box-shadow: 0 0 12px var(--tcg-glow);
    animation: tcg-coin-fly 1.5s cubic-bezier(0.16, 0.84, 0.44, 1) forwards;
    animation-delay: calc(var(--i) * 22ms);
    transform: rotate(var(--r));
}

@keyframes tcg-coin-fly {
    0% {
        opacity: 0;
        transform: rotate(var(--r)) translateY(0) scale(0.4);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--r)) translateY(-46vh) scale(1);
    }
}

/* --- Cinématique de montée de palier --- */
.tcg-levelup-cine__inner {
    position: relative;
    z-index: 2;
    max-width: 520px;
    width: 100%;
    padding: 34px 28px 30px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(18, 20, 27, 0.86), rgba(8, 9, 13, 0.94));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 60px -12px var(--tcg-glow),
        0 40px 80px -30px rgba(0, 0, 0, 0.9);
    transform: translateY(18px) scale(0.96);
    opacity: 0;
    transition: transform 0.55s var(--tcg-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.45s ease;
}

.tcg-levelup-cine.is-in .tcg-levelup-cine__inner {
    transform: none;
    opacity: 1;
}

.tcg-levelup-cine__kicker {
    display: block;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--tcg-accent-2);
}

.tcg-levelup-cine__lvl {
    display: block;
    margin-top: 8px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.55);
}

.tcg-levelup-cine__rank {
    margin: 4px 0 14px;
    font-size: clamp(28px, 6.4vw, 50px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: #fff;
    background: linear-gradient(92deg, #fff 0%, var(--tcg-accent-2) 35%, var(--tcg-accent) 62%, #fff 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tcg-flow 5s linear infinite;
}

.tcg-levelup-cine__meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-bottom: 18px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.tcg-levelup-cine__meta b {
    color: #fff;
}

.tcg-levelup-cine__perks {
    text-align: left;
    margin-bottom: 22px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.tcg-levelup-cine__perkstitle {
    display: block;
    margin-bottom: 8px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tcg-accent-2);
}

.tcg-levelup-cine__perks ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tcg-levelup-cine__perks li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateX(-8px);
    animation: tcg-perk-in 0.5s var(--tcg-ease, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
    animation-delay: calc(0.5s + var(--d) * 0.12s);
}

.tcg-levelup-cine__perks svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    fill: none;
    stroke: var(--tcg-accent);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes tcg-perk-in {
    to {
        opacity: 1;
        transform: none;
    }
}

.tcg-levelup-cine__btn,
.tcg-raffle-cine__btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 13px 30px;
    border-radius: 12px;
    background: var(--tcg-accent);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 26px -6px var(--tcg-glow);
    transition: transform 0.35s var(--tcg-ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 0.35s ease, background 0.35s ease;
}

.tcg-levelup-cine__btn:hover,
.tcg-raffle-cine__btn:hover {
    background: var(--tcg-accent-2);
    transform: translateY(-2px);
    box-shadow: 0 0 34px -4px var(--tcg-glow);
}

/* --- Cinématique de résultat de tombola --- */
.tcg-raffle-cine__inner {
    position: relative;
    z-index: 2;
    max-width: 460px;
    width: 100%;
    padding: 32px 26px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(18, 20, 27, 0.88), rgba(8, 9, 13, 0.95));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
    transform: scale(0.94);
    opacity: 0;
    transition: transform 0.5s var(--tcg-ease, cubic-bezier(0.22, 1, 0.36, 1)), opacity 0.4s ease;
}

.tcg-raffle-cine.is-in .tcg-raffle-cine__inner {
    transform: none;
    opacity: 1;
}

.tcg-raffle-cine.is-win .tcg-raffle-cine__inner {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 70px -12px var(--tcg-glow), 0 40px 80px -30px rgba(0, 0, 0, 0.9);
}

.tcg-raffle-cine__kicker {
    display: block;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--tcg-accent-2);
    margin-bottom: 6px;
}

.tcg-raffle-cine h2 {
    margin: 6px 0 12px;
    font-size: clamp(28px, 7vw, 44px);
    font-weight: 900;
    letter-spacing: 0.5px;
}

.tcg-raffle-cine.is-win h2 {
    color: #fff;
    text-shadow: 0 0 30px var(--tcg-glow);
}

.tcg-raffle-cine__img {
    margin: 4px auto 14px;
    max-width: 240px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 40px -10px var(--tcg-glow);
}

.tcg-raffle-cine__img img {
    display: block;
    width: 100%;
    height: auto;
}

.tcg-raffle-cine__ava {
    width: 92px;
    height: 92px;
    margin: 4px auto 12px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--tcg-accent);
    box-shadow: 0 0 26px -6px var(--tcg-glow);
}

.tcg-raffle-cine__ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tcg-raffle-cine p {
    margin: 6px 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.5;
}

.tcg-raffle-cine__prize {
    font-family: ui-monospace, monospace;
    font-weight: 800;
    color: var(--tcg-accent-2) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px !important;
    margin-bottom: 16px !important;
}

.tcg-raffle-cine__btn {
    margin-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .tcg-cine,
    .tcg-cine * {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
    }
    .tcg-cine__rays {
        display: none;
    }
}

/* -------------------------------------------------------------------------
 * 4. COURONNE D'AVATAR  —  un effet distinct par palier
 *
 *  tier-flat      (1) cadre net, aucun halo
 *  tier-aura      (2) halo diffus permanent
 *  tier-glow      (3) contour qui respire
 *  tier-holo      (4) anneau conique rotatif + voile holographique
 *  tier-prismatic (5) anneau prismatique rapide + halo intense + éclats
 * ---------------------------------------------------------------------- */

.tcg-avatar {
    position: relative;
    display: inline-block;
    width: var(--tcg-avatar-size, 140px);
    height: var(--tcg-avatar-size, 140px);
    flex-shrink: 0;
    isolation: isolate;
}

.tcg-avatar__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--tcg-accent);
    filter: blur(15px);
    opacity: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

/* Anneau : disque masqué en couronne, épaisseur --tcg-ring-width. */
.tcg-avatar__ring {
    --tcg-ring-width: 3px;

    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: var(--tcg-accent);
    -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--tcg-ring-width)),
        #000 calc(100% - var(--tcg-ring-width))
    );
    mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--tcg-ring-width)),
        #000 calc(100% - var(--tcg-ring-width))
    );
    pointer-events: none;
    z-index: 3;
}

.tcg-avatar__sheen {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 255, 255, 0.22) 46%,
        rgba(120, 220, 255, 0.26) 53%,
        transparent 70%
    );
    background-size: 260% 100%;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 4;
}

.tcg-avatar__img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #0a0a0c;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--tcg-accent);
    z-index: 2;
}

.tcg-avatar__img img,
.tcg-avatar__img .tcg-avatar__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.tcg-avatar__crest {
    position: absolute;
    right: 2px;
    bottom: 2px;
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border: 2px solid #0a0a0c;
    border-radius: 999px;
    background: radial-gradient(100% 100% at 30% 20%, var(--tcg-accent-2) 0%, var(--tcg-accent) 70%);
    color: #0b0f18;
    font-family: var(--tcg-hud-font);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 14px -2px var(--tcg-accent-glow);
    z-index: 5;
}

.tcg-avatar__rank {
    position: absolute;
    left: 50%;
    bottom: -12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(5, 5, 5, 0.92);
    box-shadow: inset 0 0 0 1px var(--tcg-accent-soft);
    color: var(--tcg-accent-2);
    font-family: var(--tcg-hud-font);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateX(-50%);
    z-index: 5;
}

/* --- Tier 1 / Commune --- */
.tcg-avatar.tcg-tier-flat .tcg-avatar__ring {
    --tcg-ring-width: 2px;

    background: var(--tcg-accent-soft);
}

/* --- Tier 2 / Peu Commune --- */
.tcg-avatar.tcg-tier-aura .tcg-avatar__halo {
    opacity: 0.4;
}

.tcg-avatar.tcg-tier-aura .tcg-avatar__ring {
    box-shadow: 0 0 16px -2px var(--tcg-accent-glow);
}

/* --- Tier 3 / Rare --- */
.tcg-avatar.tcg-tier-glow .tcg-avatar__halo {
    opacity: 0.5;
    animation: tcg-halo-breathe 3.4s ease-in-out infinite;
}

.tcg-avatar.tcg-tier-glow .tcg-avatar__ring {
    --tcg-ring-width: 4px;

    box-shadow: 0 0 24px -2px var(--tcg-accent-glow);
    animation: tcg-ring-breathe 3.4s ease-in-out infinite;
}

/* --- Tier 4 / Holographique --- */
.tcg-avatar.tcg-tier-holo .tcg-avatar__halo {
    opacity: 0.55;
    filter: blur(18px);
}

.tcg-avatar.tcg-tier-holo .tcg-avatar__ring {
    --tcg-ring-width: 4px;

    background: conic-gradient(
        from var(--tcg-angle, 0deg),
        var(--tcg-accent),
        #22d3ee,
        #f472b6,
        var(--tcg-accent-2),
        var(--tcg-accent)
    );
    box-shadow: 0 0 26px -4px var(--tcg-accent-glow);
    animation: tcg-rotate-border 6s linear infinite;
}

.tcg-avatar.tcg-tier-holo .tcg-avatar__sheen {
    opacity: 1;
    animation: tcg-holo-sweep 4.2s ease-in-out infinite;
}

/* --- Tier 5 / Secrète Rare --- */
.tcg-avatar.tcg-tier-prismatic .tcg-avatar__halo {
    opacity: 0.7;
    filter: blur(22px);
    animation: tcg-halo-breathe 2.6s ease-in-out infinite;
}

.tcg-avatar.tcg-tier-prismatic .tcg-avatar__ring {
    --tcg-ring-width: 5px;

    inset: -7px;
    background: conic-gradient(
        from var(--tcg-angle, 0deg),
        var(--tcg-accent),
        #ffffff,
        #22d3ee,
        #f472b6,
        var(--tcg-accent-2),
        #ffffff,
        var(--tcg-accent)
    );
    box-shadow:
        0 0 34px -4px var(--tcg-accent-glow),
        inset 0 0 18px -4px var(--tcg-accent-glow);
    animation: tcg-rotate-border 3.4s linear infinite;
}

.tcg-avatar.tcg-tier-prismatic .tcg-avatar__sheen {
    opacity: 1;
    animation: tcg-holo-sweep 3s ease-in-out infinite;
}

.tcg-avatar.tcg-tier-prismatic::before,
.tcg-avatar.tcg-tier-prismatic::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 12px 3px var(--tcg-accent-glow);
    pointer-events: none;
    z-index: 6;
    animation: tcg-orbit 5.5s linear infinite;
}

.tcg-avatar.tcg-tier-prismatic::after {
    animation-delay: -2.75s;
    animation-duration: 7s;
}

/* -------------------------------------------------------------------------
 * 5. BADGE
 * ---------------------------------------------------------------------- */

.tcg-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    padding: 12px 18px 12px 14px;
    border: 1px solid var(--tcg-border);
    border-radius: var(--tcg-radius);
    background: var(--tcg-surface);
    box-shadow: var(--tcg-shadow);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    isolation: isolate;
    text-decoration: none;
}

.tcg-badge__medal {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--tcg-radius-inner);
    background: radial-gradient(
        100% 100% at 30% 20%,
        var(--tcg-accent-2) 0%,
        var(--tcg-accent) 62%,
        rgba(0, 0, 0, 0.4) 100%
    );
    color: #0b0f18;
    font-family: var(--tcg-hud-font);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.55);
}

.tcg-badge__medal-value {
    position: relative;
    z-index: 2;
}

.tcg-badge__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.tcg-badge__rank {
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--tcg-accent-2);
    overflow-wrap: anywhere;
}

.tcg-badge__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-family: var(--tcg-hud-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--tcg-text-dim);
}

.tcg-badge__meta span {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tcg-badge__meta b {
    color: var(--tcg-text);
}

/* --- Tier 1 / Commune --- */
.tcg-badge.tcg-tier-flat {
    box-shadow: var(--tcg-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* --- Tier 2 / Peu Commune --- */
.tcg-badge.tcg-tier-aura {
    border-color: var(--tcg-accent-soft);
    box-shadow: var(--tcg-shadow), 0 0 20px -6px var(--tcg-accent-glow);
}

/* --- Tier 3 / Rare --- */
.tcg-badge.tcg-tier-glow {
    border-color: var(--tcg-accent);
    animation: tcg-breathe 3.4s ease-in-out infinite;
}

.tcg-badge.tcg-tier-glow .tcg-badge__medal {
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        0 0 14px -2px var(--tcg-accent-glow);
}

/* --- Tiers 4 & 5 : cadre conique animé --- */
.tcg-badge.tcg-tier-holo,
.tcg-badge.tcg-tier-prismatic {
    border-color: transparent;
    border-width: 2px;
    border-style: solid;
    background:
        var(--tcg-surface) padding-box,
        conic-gradient(
            from var(--tcg-angle, 0deg),
            var(--tcg-accent),
            #22d3ee,
            #f472b6,
            var(--tcg-accent-2),
            var(--tcg-accent)
        ) border-box;
    box-shadow:
        0 0 22px -6px var(--tcg-accent-glow),
        0 18px 44px -28px var(--tcg-accent-glow);
    animation: tcg-rotate-border 6s linear infinite;
}

.tcg-badge.tcg-tier-holo::before,
.tcg-badge.tcg-tier-prismatic::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    background: inherit;
    filter: blur(14px);
    opacity: 0.5;
    pointer-events: none;
}

.tcg-badge.tcg-tier-holo::after,
.tcg-badge.tcg-tier-prismatic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 28%,
        rgba(255, 255, 255, 0.16) 46%,
        rgba(120, 220, 255, 0.2) 52%,
        transparent 70%
    );
    background-size: 260% 100%;
    animation: tcg-holo-sweep 4.2s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

.tcg-badge.tcg-tier-holo .tcg-badge__medal,
.tcg-badge.tcg-tier-prismatic .tcg-badge__medal {
    background: radial-gradient(
        100% 100% at 30% 15%,
        #ffffff 0%,
        var(--tcg-accent-2) 45%,
        var(--tcg-accent) 100%
    );
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.75),
        0 0 18px -1px var(--tcg-accent-glow);
}

.tcg-badge.tcg-tier-holo .tcg-badge__rank,
.tcg-badge.tcg-tier-prismatic .tcg-badge__rank {
    background: linear-gradient(92deg, #ffffff, var(--tcg-accent-2), var(--tcg-accent));
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: tcg-flow 5s linear infinite;
}

.tcg-badge.tcg-tier-prismatic {
    animation-duration: 3.4s;
}

.tcg-badge.tcg-tier-prismatic::before {
    opacity: 0.68;
    filter: blur(18px);
}

/* Tailles. */
.tcg-badge--sm {
    gap: 9px;
    padding: 8px 13px 8px 10px;
}

.tcg-badge--sm .tcg-badge__medal {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.85rem;
}

.tcg-badge--sm .tcg-badge__rank {
    font-size: 0.86rem;
}

.tcg-badge--lg {
    gap: 16px;
    padding: 18px 26px 18px 18px;
}

.tcg-badge--lg .tcg-badge__medal {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    font-size: 1.4rem;
}

.tcg-badge--lg .tcg-badge__rank {
    font-size: 1.22rem;
}

.tcg-badge--icon-only {
    padding: 8px;
    gap: 0;
}

/* -------------------------------------------------------------------------
 * 5c. BLOC TOMBOLA (front-end, shortcode [tcg_tombola])
 *
 * Même grammaire que la carte du tableau de bord : surface vitrée, équerres
 * néon, accent = --dz-main (thème du joueur).
 * ---------------------------------------------------------------------- */

.tcg-tombola {
    --tcg-accent: var(--dz-main, #be0000);
    --tcg-accent-2: var(--dz-main-hover, #ff3b3b);
    --tcg-glow: var(--dz-glow-strong, rgba(190, 0, 0, 0.55));
    --tcg-soft: var(--dz-glow-light, rgba(190, 0, 0, 0.2));
    --tcg-faint: var(--dz-glow-verylight, rgba(255, 255, 255, 0.04));

    position: relative;
    display: block;
    width: 100%;
    /* Plafonnée : sur un très grand écran, .tcg-tombola-main peut dépasser
       1100px de large -- sans max-width, la carte s'étirait bien au-delà
       de ce que son contenu occupe réellement, laissant un vide énorme à
       droite du visuel + infos du lot. max-width borne la carte à une
       taille cohérente avec son contenu (voir aussi .tcg-tombola__prize
       plus bas, agrandi en retour pour bien remplir cet espace). */
    max-width: 1040px;
    /* Padding généreux sur desktop pour que la carte respire verticalement
       (resserré en tablette/mobile par les media queries plus bas). */
    padding: 36px 32px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    background:
        radial-gradient(120% 150% at 0% 0%, var(--tcg-faint) 0%, transparent 55%),
        linear-gradient(180deg, rgba(15, 15, 18, 0.78) 0%, rgba(8, 8, 10, 0.92) 100%);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.82), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    color: #fff;
    font-family: "Montserrat", system-ui, -apple-system, sans-serif;
    overflow: hidden;
}

.tcg-tombola::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--tcg-accent), transparent);
}

/* Équerres néon aux quatre angles, comme les .dz-card du tableau de bord. */
.tcg-tombola .tcg-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 0 solid var(--tcg-accent);
    pointer-events: none;
}

.tcg-tombola .tcg-corner--tl {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.tcg-tombola .tcg-corner--tr {
    top: -1px;
    right: -1px;
    border-width: 2px 2px 0 0;
}

.tcg-tombola .tcg-corner--bl {
    bottom: -1px;
    left: -1px;
    border-width: 0 0 2px 2px;
}

.tcg-tombola .tcg-corner--br {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

/* ==========================================================================
   Composition large écran : carte principale + colonne latérale (derniers
   gagnants / comment participer) -- occupe l'espace disponible sur desktop
   avec du contenu réel plutôt que de laisser la carte flotter seule dans un
   conteneur trop large, et garantit que la page n'est jamais "vide" même
   sans tombola active (voir tcg_raffle_render_sidebar() côté PHP).
   ========================================================================== */
.tcg-tombola-outer {
    display: grid;
    /* Une seule colonne par défaut : la colonne latérale (320px) n'est
       réservée que si une <aside> est réellement présente dans le markup
       (tcg_raffle_render_sidebar() n'imprime rien si elle serait vide --
       tombola active sans le moindre historique de tirage, par ex.) --
       sinon la grille laissait un vide visible à droite sur grand écran. */
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
    width: 100%;
}

/* Repassée en 2 colonnes uniquement au-delà de 1024px : un sélecteur
   :has() compte comme une classe dans le calcul de spécificité, donc une
   règle non gardée par media query l'emporterait ici sur les surcharges
   "1 colonne" de tablette/mobile plus bas (même hors media query, :has()
   bat une simple classe) -- ce qui cassait complètement la mise en page
   mobile (colonne de 320px forcée à côté de la carte sur un écran de
   390px). La media query règle ce conflit de spécificité une fois pour
   toutes. */
@media (min-width: 1025px) {
    .tcg-tombola-outer:has(.tcg-tombola-side) {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.tcg-tombola-main {
    min-width: 0;
}

.tcg-tombola-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 24px;
}

.tcg-tombola-side__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
}

.tcg-tombola-howto,
.tcg-tombola-winners {
    position: relative;
    background:
        radial-gradient(120% 150% at 0% 0%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
        linear-gradient(180deg, rgba(15, 15, 18, 0.78) 0%, rgba(8, 8, 10, 0.92) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 38px 28px;
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.7);
}

.tcg-tombola-howto__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* Espacement généreux entre les 3 étapes : c'est ce qui donne à la
       bulle "Comment participer" sa hauteur -- plutôt que d'agrandir le
       texte lui-même, qui resterait moins lisible en colonne étroite. */
    gap: 30px;
}

.tcg-tombola-howto__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
}

.tcg-tombola-howto__list li b {
    color: #fff;
}

.tcg-tombola-howto__num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--tcg-accent, var(--dz-main, #be0000));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.tcg-tombola-winners__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tcg-tombola-winners__item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tcg-tombola-winners__thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tcg-tombola-winners__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    font-size: 18px;
}

.tcg-tombola-winners__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tcg-tombola-winners__prize {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcg-tombola-winners__meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

.tcg-tombola-winners__meta b {
    color: rgba(255, 255, 255, 0.75);
}

.tcg-tombola--empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    padding-top: 14px;
    padding-bottom: 10px;
}

.tcg-tombola--empty p {
    margin: 4px 0;
}

/* Espace réservé au visuel du lot quand aucune tombola n'est active --
   emplacement au format d'une vraie carte à jouer (63,5 x 88,9 mm, ratio
   standard TCG) pour que l'oeil reconnaisse immédiatement "c'est ici que
   la carte du lot apparaîtra", plutôt qu'un simple carré générique. */
.tcg-tombola__empty-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.tcg-tombola__prizeimg--placeholder {
    border: 2px dashed rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 2px, transparent 2px, transparent 14px),
        radial-gradient(120% 90% at 50% 28%, var(--tcg-soft, rgba(190, 0, 0, 0.1)) 0%, transparent 70%),
        #0a0a0c;
    box-shadow: none;
    position: relative;
    overflow: visible;
}

.tcg-tombola__prizeimg--placeholder .tcg-tombola__noimg {
    font-size: 64px;
    color: rgba(255, 255, 255, 0.22);
    animation: tcgNoimgPulse 2.6s ease-in-out infinite;
}

@keyframes tcgNoimgPulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tcg-tombola__prizeimg--placeholder .tcg-tombola__noimg {
        animation: none;
        opacity: 0.8;
    }
}

/* Teasing dynamique de la prochaine tombola programmée (module 2). */
.tcg-tombola__teaser {
    text-align: center;
    padding: 18px 10px 6px;
}

.tcg-tombola__teaser-tag {
    display: inline-block;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tcg-accent);
}

.tcg-tombola__teaser-prize {
    margin: 0 0 6px;
    font-size: 19px;
    color: var(--tcg-text);
}

.tcg-tombola__teaser-date {
    margin: 0 0 16px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.tcg-tombola__teaser-countdown {
    font-family: var(--tcg-hud-font, monospace);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--tcg-accent);
    font-variant-numeric: tabular-nums;
}

.tcg-tombola__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.tcg-tombola__tag {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--tcg-accent-2);
}

.tcg-tombola__countdown {
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 0 1px var(--tcg-soft);
}

.tcg-tombola__prize {
    display: flex;
    gap: 40px;
    /* flex-start plutôt que center : avec une carte plus haute que le bloc
       d'infos, un centrage vertical laissait un vide égal au-dessus ET
       en-dessous du texte -- aligner en haut lit comme une vraie fiche
       produit (visuel à gauche, infos qui démarrent au même niveau). */
    align-items: flex-start;
    margin-bottom: 16px;
}

/* Format réel d'une carte à jouer (63,5 x 88,9 mm, même ratio que
   .tcg-tombola__result--win .tcg-tombola__prizeimg côté cinématique de
   gain -- les deux doivent rester identiques) : s'applique aussi bien à
   une vraie photo de lot qu'à l'espace réservé "aucune tombola" (voir
   --placeholder plus bas), pour que le format ne "saute" jamais entre les
   deux états. Seule la largeur est fixée à chaque palier responsive ;
   la hauteur suit automatiquement via aspect-ratio. */
.tcg-tombola__prizeimg {
    flex: 0 0 auto;
    width: 300px;
    height: auto;
    aspect-ratio: 635 / 889;
    border-radius: 14px;
    overflow: hidden;
    background: #0a0a0c;
    display: grid;
    place-items: center;
    box-shadow: 0 0 26px -8px var(--tcg-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tcg-tombola__prizeimg img {
    width: 100%;
    height: 100%;
    /* "contain" plutôt que "cover" : le cadre respecte maintenant le vrai
       ratio de la carte, la photo du lot s'y affiche donc en entier, sans
       rogner le haut/bas ou les côtés. */
    object-fit: contain;
    display: block;
}

.tcg-tombola__noimg {
    font-size: 30px;
    font-weight: 900;
    color: var(--tcg-accent);
}

.tcg-tombola__prizeinfo {
    min-width: 0;
    /* Colonne flex : le prix (inline-flex, en "puce") et le bouton
       n'étant plus des blocs pleine largeur, il faut ce conteneur pour
       les garder empilés verticalement plutôt que côte à côte. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Petit décalage pour respirer par rapport au sommet de la carte,
       maintenant que .tcg-tombola__prize aligne en haut (flex-start). */
    padding-top: 6px;
}

.tcg-tombola__label {
    font-family: ui-monospace, monospace;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.tcg-tombola__name {
    margin: 12px 0 20px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
    text-transform: uppercase;
    color: #fff;
}

/* Puce mise en avant plutôt qu'une simple ligne de texte : donne au prix
   plus de poids visuel, dans le même langage graphique que les autres
   badges de la page (.dz-tombola-badge, .tcg-tombola-badge...). */
.tcg-tombola__price {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    margin: 0 0 26px;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--tcg-faint, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--tcg-soft, rgba(190, 0, 0, 0.22));
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.7);
}

.tcg-tombola__price b {
    color: var(--tcg-accent-2);
    font-size: 26px;
}

.tcg-tombola__viewbtn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tcg-soft, rgba(190, 0, 0, 0.3));
    cursor: pointer;
    background: transparent;
    color: var(--tcg-accent-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 13px 24px;
    border-radius: 999px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.tcg-tombola__viewbtn:hover {
    background: var(--tcg-faint, rgba(255, 255, 255, 0.06));
    border-color: var(--tcg-accent-2);
}

.tcg-tombola__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 12px 0;
    margin-bottom: 14px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.tcg-tombola__stats b {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.tcg-tombola__guest {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.tcg-tombola__mine {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.tcg-tombola__mine b {
    color: #fff;
    font-size: 14px;
}

.tcg-tombola__minihint {
    color: rgba(255, 255, 255, 0.35);
}

.tcg-tombola__btn {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    cursor: pointer;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--tcg-accent);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 22px -6px var(--tcg-glow);
    transition: transform 0.35s var(--tcg-ease, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 0.35s ease, background 0.35s ease, opacity 0.2s ease;
}

.tcg-tombola__btn:hover:not(:disabled) {
    background: var(--tcg-accent-2);
    transform: translateY(-2px);
    box-shadow: 0 0 32px -4px var(--tcg-glow);
}

.tcg-tombola__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.tcg-tombola__feedback {
    margin: 10px 0 0;
    font-size: 12px;
    min-height: 1em;
    color: rgba(255, 255, 255, 0.6);
}

.tcg-tombola__feedback.is-ok {
    color: #4ade80;
}

.tcg-tombola__feedback.is-err {
    color: #f87171;
}

/* Résultat inline (le bloc reste visible sous la cinématique). */
.tcg-tombola__result {
    text-align: center;
    padding: 6px 0 4px;
}

.tcg-tombola__result h3 {
    margin: 10px 0 8px;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
}

.tcg-tombola__result--win h3 {
    color: #fff;
    text-shadow: 0 0 26px var(--tcg-glow);
}

.tcg-tombola__result p {
    margin: 6px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
}

.tcg-tombola__winneravatar {
    width: 84px;
    height: 84px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--tcg-accent);
    box-shadow: 0 0 24px -6px var(--tcg-glow);
}

.tcg-tombola__winneravatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* object-fit:contain (et non cover, contrairement a l'avatar rond
   ci-dessus) : une carte a jouer est PORTRAIT (~5:7, pas carree) --
   "cover" dans un cadre carre en rognait le haut et le bas. Le cadre
   adopte maintenant ce meme ratio, la carte s'y affiche donc en entier. */
.tcg-tombola__result--win .tcg-tombola__prizeimg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.tcg-tombola__result--win .tcg-tombola__prizeimg {
    width: 460px;
    height: auto;
    aspect-ratio: 5 / 7;
    max-width: 85%;
    margin: 0 auto;
}

.tcg-tombola__lostprize {
    font-family: ui-monospace, monospace;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tcg-accent-2) !important;
    font-size: 11px !important;
}

/* Formulaire de coordonnées de livraison du gagnant (module 2). */
.tcg-tombola__delivery-form {
    text-align: left;
    max-width: 360px;
    margin: 14px auto 0;
}

.tcg-tombola__delivery-form label {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.tcg-tombola__delivery-form input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.04);
    color: var(--tcg-text);
    font-size: 13px;
}

.tcg-tombola__delivery-form input:focus {
    outline: none;
    border-color: var(--tcg-accent);
}

.tcg-tombola__delivery-form .tcg-tombola__btn {
    width: 100%;
    margin-top: 4px;
}

.tcg-tombola__delivery-done {
    color: #6fd394 !important;
    font-weight: 600;
}

/* Rappel "envoi en recommandé, vérifie tes infos" en haut du formulaire de
   livraison -- même famille visuelle que les autres encarts de la carte
   (glow + bordure dans la teinte du thème). */
.tcg-tombola__delivery-notice {
    margin: 0 0 16px !important;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--tcg-soft, rgba(190, 0, 0, 0.12));
    border: 1px solid var(--tcg-glow, rgba(190, 0, 0, 0.4));
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 12.5px !important;
    line-height: 1.55;
}

.tcg-tombola__delivery-notice strong {
    color: #fff;
}

/* Historique personnel (module 1) : repliable, ouvert au clic sur son
   propre resume -- pas de JS necessaire, <details> natif. */
.tcg-tombola__history {
    margin-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
    padding-top: 12px;
}

.tcg-tombola__history summary {
    cursor: pointer;
    font-family: ui-monospace, monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tcg-text-dim);
    list-style: none;
}

.tcg-tombola__history summary::-webkit-details-marker { display: none; }

.tcg-tombola__history summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s ease;
}

.tcg-tombola__history[open] summary::before {
    transform: rotate(90deg);
}

.tcg-tombola__history-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.tcg-tombola__history-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 8px 10px;
}

/* Formulaire de livraison intégré à une ligne d'historique (gain pas
   encore réclamé, au-delà de la fenêtre "principale" -- voir
   tcg_raffle_render_delivery_form() côté PHP). flex-basis:100% force le
   passage à la ligne dans le conteneur flex wrap ci-dessus, plutôt que de
   s'écraser à côté de la vignette/du statut. */
.tcg-tombola__history-delivery {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.tcg-tombola__history-delivery-hint {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    font-weight: 700;
    color: var(--tcg-accent-2, #ff3b3b) !important;
}

.tcg-tombola__history-item.is-won {
    border-color: var(--tcg-accent);
    background: rgba(190, 0, 0, 0.08);
}

.tcg-tombola__history-item img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}

.tcg-tombola__history-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tcg-tombola__history-name {
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tcg-tombola__history-meta {
    font-size: 11px;
    color: var(--tcg-text-dim);
}

.tcg-tombola__history-status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--tcg-text-dim);
    white-space: nowrap;
}

.tcg-tombola__history-item.is-won .tcg-tombola__history-status {
    color: var(--tcg-accent);
}

/* Modale image du prix. */
.tcg-tombola__modal {
    position: fixed;
    inset: 0;
    z-index: 2147483500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 3, 6, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.tcg-tombola__modal.is-in {
    opacity: 1;
}

.tcg-tombola__modal[hidden] {
    display: none;
}

.tcg-tombola__modalinner {
    position: relative;
    max-width: 520px;
    width: 100%;
    text-align: center;
}

.tcg-tombola__modalinner img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 14px;
    box-shadow: 0 0 60px -10px var(--tcg-glow, rgba(190, 0, 0, 0.5));
}

.tcg-tombola__modalinner p {
    margin: 12px 0 0;
    color: #fff;
    font-family: "Montserrat", system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
}

.tcg-tombola__modalclose {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 36px;
    height: 36px;
    /* padding/box-sizing : sans ça, le padding par défaut du navigateur sur
       un <button> s'ajoutait à width/height (box-sizing: content-box par
       défaut), transformant le rond en ovale et décentrant le "×". Le
       centrage passe maintenant par flexbox plutôt que line-height, plus
       fiable quel que soit le rendu du glyphe. */
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: #fff;
    color: #111;
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
}

@media (max-width: 520px) {
    .tcg-tombola__prize {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* -------------------------------------------------------------------------
 * 6. ANIMATIONS
 * ---------------------------------------------------------------------- */

@property --tcg-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes tcg-rotate-border {
    to {
        --tcg-angle: 360deg;
    }
}

@keyframes tcg-shine {
    0% {
        left: -45%;
    }
    55%,
    100% {
        left: 115%;
    }
}

/* Flux d'énergie : décale le motif de bandes d'une période complète. */
@keyframes tcg-flux {
    to {
        background-position: 36px 0;
    }
}

@keyframes tcg-pulse {
    0%,
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    50% {
        opacity: 0.55;
        transform: translateY(-50%) scale(1.45);
    }
}

@keyframes tcg-pulse-dot {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.35;
    }
}

@keyframes tcg-flow {
    to {
        background-position: 200% 50%;
    }
}

@keyframes tcg-aura-throb {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes tcg-breathe {
    0%,
    100% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 0 1px var(--tcg-accent-soft),
            0 0 14px -3px var(--tcg-accent-glow);
    }
    50% {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.06),
            0 0 0 1px var(--tcg-accent),
            0 0 26px 0 var(--tcg-accent-glow);
    }
}

@keyframes tcg-ring-breathe {
    0%,
    100% {
        box-shadow: 0 0 18px -4px var(--tcg-accent-glow);
    }
    50% {
        box-shadow: 0 0 32px 0 var(--tcg-accent-glow);
    }
}

@keyframes tcg-halo-breathe {
    0%,
    100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.75;
        transform: translate(-50%, -50%) scale(1.12);
    }
}

@keyframes tcg-holo-sweep {
    0% {
        background-position: 180% 50%;
    }
    60%,
    100% {
        background-position: -80% 50%;
    }
}

@keyframes tcg-orbit {
    from {
        transform: rotate(0deg) translateX(calc(var(--tcg-avatar-size, 140px) / 2 + 7px)) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(calc(var(--tcg-avatar-size, 140px) / 2 + 7px)) rotate(-360deg);
    }
}

@keyframes tcg-fill-in {
    from {
        width: 0;
    }
}

.tcg-xp-bar__fill {
    animation: tcg-fill-in var(--tcg-speed) var(--tcg-ease) both;
}

@keyframes tcg-gain-rise {
    0% {
        opacity: 0;
        transform: translateY(6px) scale(0.9);
    }
    18%,
    62% {
        opacity: 1;
        transform: translateY(-4px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-22px) scale(0.96);
    }
}

/* Montée de niveau : impulsion appliquée par le script pendant 2,6 s. */
.tcg-gami.tcg-is-levelup {
    animation: tcg-levelup 1.3s var(--tcg-ease) 2;
}

@keyframes tcg-levelup {
    0% {
        filter: brightness(1);
    }
    22% {
        filter: brightness(1.85) saturate(1.4);
    }
    100% {
        filter: brightness(1);
    }
}

/* -------------------------------------------------------------------------
 * 7. RESPONSIVE & ACCESSIBILITÉ
 * ---------------------------------------------------------------------- */

.tcg-gami .tcg-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.tcg-gami--guest {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.9em;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    font-family: var(--tcg-hud-font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
}

/*
 * Palier tablette (≤1024px) : on resserre un cran les cartes et cinématiques
 * avant le passage au régime mobile plein-écran ci-dessous. Aucune grille
 * n'est définie ici (elles vivent dans le widget Elementor), on ne fait que
 * réduire densité/paddings pour ce format intermédiaire.
 */
@media (max-width: 1024px) {
    /* La colonne latérale passe sous la carte principale plutôt qu'à
       côté : plus de place en largeur pour rester lisible sur tablette. */
    .tcg-tombola-outer {
        grid-template-columns: 1fr;
    }

    .tcg-tombola-side {
        position: static;
    }

    .tcg-tombola {
        padding: 18px;
    }

    .tcg-tombola__prizeimg {
        width: 220px;
        height: auto;
    }

    .tcg-levelup-cine__inner {
        max-width: 460px;
        padding: 28px 22px 24px;
    }

    .tcg-raffle-cine__inner {
        max-width: 400px;
        padding: 26px 20px;
    }

    .tcg-coinburst__num {
        font-size: clamp(46px, 11vw, 88px);
    }
}

@media (max-width: 767px) {
    /*
     * Allègement mobile : le glassmorphism (backdrop-filter) est l'un des
     * postes les plus coûteux en compositing sur téléphone. On réduit son
     * rayon partout (jauge XP, badge, tombola, modale prix) sans le retirer.
     */
    .tcg-xp-bar,
    .tcg-badge,
    .tcg-tombola,
    .tcg-tombola__modal,
    .tcg-cine {
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }

    /*
     * 100vh vs 100dvh : sur mobile, 100vh ignore le retrait de la barre
     * d'adresse au scroll, ce qui coupe le bas des cinématiques plein
     * écran. 100dvh suit la hauteur réellement visible. Isolé sous 768px,
     * la version bureau garde vh sans changement.
     */
    @supports (height: 100dvh) {
        .tcg-cine {
            min-height: 100dvh;
        }
    }

    .tcg-xp-bar {
        padding: 16px 16px;
        border-radius: var(--tcg-radius-inner);
    }

    .tcg-xp-bar__percent-num {
        font-size: 22px;
    }

    .tcg-xp-bar__values {
        font-size: 12px;
    }

    .tcg-xp-bar__foot {
        font-size: 10px;
    }

    .tcg-avatar {
        width: min(var(--tcg-avatar-size, 140px), 112px);
        height: min(var(--tcg-avatar-size, 140px), 112px);
    }

    .tcg-avatar__crest {
        min-width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .tcg-badge {
        width: 100%;
        padding: 11px 14px 11px 11px;
    }

    .tcg-badge--lg .tcg-badge__medal {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }

    .tcg-badge--lg .tcg-badge__rank {
        font-size: 1.05rem;
    }

    /*
     * Bloc tombola : la ligne de stats respire mieux en colonne serrée,
     * et le bouton d'achat garde une vraie zone de doigt confortable.
     */
    .tcg-tombola {
        padding: 16px;
        border-radius: var(--tcg-radius-inner);
    }

    .tcg-tombola__head {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .tcg-tombola__name {
        font-size: 16px;
    }

    .tcg-tombola__stats {
        gap: 6px 14px;
    }

    .tcg-tombola__btn {
        min-height: 46px;
    }

    /* Lien texte : on l'entoure d'une vraie zone de doigt sans changer son style. */
    .tcg-tombola__viewbtn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 2px;
        margin: -4px -2px;
    }

    /* Colonne latérale (derniers gagnants / comment participer) : même
       traitement d'allègement que la carte principale sur mobile. */
    .tcg-tombola-outer {
        gap: 16px;
    }

    .tcg-tombola-howto,
    .tcg-tombola-winners {
        padding: 16px;
        border-radius: var(--tcg-radius-inner);
        -webkit-backdrop-filter: blur(6px) !important;
        backdrop-filter: blur(6px) !important;
    }

    .tcg-tombola-winners__thumb {
        width: 38px;
        height: 38px;
    }

    /*
     * Cinématiques plein écran : on retire le padding extérieur superflu
     * (l'écran EST déjà petit) et on autorise le défilement interne pour
     * qu'un petit smartphone en paysage ne coupe jamais le bas du contenu.
     */
    .tcg-cine {
        padding: 14px;
        align-items: flex-end;
    }

    @supports (padding: max(0px)) {
        .tcg-cine {
            padding-bottom: max(14px, env(safe-area-inset-bottom));
            padding-top: max(14px, env(safe-area-inset-top));
        }
    }

    .tcg-levelup-cine__inner,
    .tcg-raffle-cine__inner {
        max-width: 100%;
        max-height: 88vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 24px 18px 20px;
        border-radius: 18px;
    }

    .tcg-levelup-cine__perks {
        padding: 12px 13px;
    }

    .tcg-levelup-cine__btn,
    .tcg-raffle-cine__btn {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 14px 24px;
    }

    .tcg-raffle-cine__img {
        max-width: 190px;
    }

    /* Modale image du prix (tombola) : marges minimales, image contenue. */
    .tcg-tombola__modal {
        padding: 14px;
    }

    .tcg-tombola__modalinner img {
        max-height: 62vh;
    }

    /* Zone de clic confortable (44×44 min) pour la fermeture de la modale. */
    .tcg-tombola__modalclose {
        top: -10px;
        right: 4px;
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 479px) {
    .tcg-xp-bar__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .tcg-badge__rank {
        font-size: 0.92rem;
    }

    .tcg-badge__meta {
        font-size: 10px;
    }

    .tcg-tombola__prize {
        gap: 12px;
    }

    .tcg-tombola__prizeimg {
        /* min() evite tout debordement sur les tres petits ecrans (ex: 375px
           iPhone SE) -- hauteur automatique via aspect-ratio (héritée de la
           règle de base), donc plus besoin de la fixer ici aussi. */
        width: min(260px, 68vw);
        height: auto;
    }

    .tcg-coinburst__num {
        font-size: clamp(40px, 15vw, 64px);
    }

    .tcg-levelup-cine__rank {
        font-size: clamp(24px, 8vw, 36px);
    }
}

/* Petits écrans en paysage (téléphone couché) : les cinématiques plein
 * écran doivent rester scrollables et ne jamais dépasser la hauteur visible. */
@media (max-height: 480px) and (orientation: landscape) {
    .tcg-cine {
        align-items: center;
        padding: 10px;
    }

    .tcg-levelup-cine__inner,
    .tcg-raffle-cine__inner {
        max-height: 92vh;
        overflow-y: auto;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .tcg-cine__rays {
        opacity: 0.08;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tcg-gami,
    .tcg-gami *,
    .tcg-gami *::before,
    .tcg-gami *::after {
        animation: none !important;
        transition: none !important;
    }

    .tcg-xp-bar__fill,
    .tcg-xp-bar__aura {
        width: var(--tcg-progress, 0%);
    }
}

@media print {
    .tcg-gami {
        --tcg-surface: #fff;
        --tcg-border: #ccc;
        --tcg-text: #111;
        --tcg-text-muted: #555;
        --tcg-text-dim: #666;
    }

    .tcg-badge,
    .tcg-xp-bar,
    .tcg-rank,
    .tcg-avatar {
        box-shadow: none !important;
        animation: none !important;
    }
}