/* ==========================================================================
   cresa-ui-tokens.css
   Sistema visual premium unificado — glow, gold, profundidad, mobile safe.
   NO altera banderas, emblemas circulares ni rarezas de avatar.
   ========================================================================== */

@import url('https://fonts.bunny.net/css2?family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
    /* ——— Paleta gold coherente (sin naranjas) ——— */
    --cresa-gold-light: #fde047;
    --cresa-gold-main: #facc15;
    --cresa-gold-dark: #ca8a04;
    --cresa-gold-muted: #eab308;
    --cresa-gold-text: #fef08a;
    --cresa-gold-shadow: #854d0e;
    --cresa-gold-border: rgba(250, 204, 21, 0.48);
    --cresa-gold-glow-soft: rgba(250, 204, 21, 0.12);

    /* Alias legacy auth */
    --cresa-gold: var(--cresa-gold-main);
    --cresa-gold-dark-legacy: var(--cresa-gold-dark);

    /* ——— Glow system (~15 % menos intensidad vs baseline) ——— */
    --cresa-glow-primary: rgba(56, 189, 248, 0.238);
    --cresa-glow-primary-strong: rgba(56, 189, 248, 0.272);
    --cresa-glow-gold: rgba(250, 204, 21, 0.323);
    --cresa-glow-gold-soft: rgba(250, 204, 21, 0.153);
    --cresa-glow-rare: rgba(56, 189, 248, 0.272);
    --cresa-glow-epic: rgba(167, 139, 250, 0.306);
    --cresa-glow-legendary: rgba(250, 204, 21, 0.323);
    --cresa-glow-common: rgba(148, 163, 184, 0.153);

    /* ——— Profundidad premium ——— */
    --cresa-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --cresa-inset-depth: inset 0 2px 6px rgba(0, 0, 0, 0.22);
    --cresa-card-border: 0 0 0 1px rgba(0, 0, 0, 0.34);
    --cresa-card-shadow: 0 16px 42px rgba(0, 0, 0, 0.4);
    --cresa-card-glow-primary: 0 0 36px var(--cresa-glow-primary);
    --cresa-card-stack:
        var(--cresa-inset-highlight),
        var(--cresa-card-border),
        var(--cresa-card-shadow),
        var(--cresa-card-glow-primary);

    /* ——— Gradientes gold UI ——— */
    --cresa-gold-gradient: linear-gradient(
        180deg,
        var(--cresa-gold-light) 0%,
        var(--cresa-gold-main) 52%,
        var(--cresa-gold-muted) 100%
    );
    --cresa-gold-gradient-cta: linear-gradient(
        180deg,
        #fffef5 0%,
        var(--cresa-gold-light) 32%,
        var(--cresa-gold-main) 72%,
        var(--cresa-gold-dark) 100%
    );

    /* ——— Motion & forma (game feel premium) ——— */
    --cresa-ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
    --cresa-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --cresa-duration-fast: 0.18s;
    --cresa-duration-normal: 0.22s;
    --cresa-radius-card: 1.05rem;
    --cresa-radius-btn: 0.78rem;
    --cresa-btn-scale-hover: 1.02;
    --cresa-btn-scale-press: 0.98;
    --cresa-card-lift: -2px;

    /* ——— Rarezas vivas (sin saturación excesiva) ——— */
    --cresa-rarity-common-accent: #94a3b8;
    --cresa-rarity-common-glow: rgba(148, 163, 184, 0.14);
    --cresa-rarity-rare-accent: #38bdf8;
    --cresa-rarity-rare-glow: rgba(56, 189, 248, 0.28);
    --cresa-rarity-epic-accent: #a78bfa;
    --cresa-rarity-epic-glow: rgba(167, 139, 250, 0.3);
    --cresa-rarity-legendary-accent: var(--cresa-gold-main);
    --cresa-rarity-legendary-glow: rgba(250, 204, 21, 0.32);

    /* ——— Sombras hover premium ——— */
    --cresa-shadow-card-hover:
        var(--cresa-inset-highlight),
        0 0 0 1px rgba(56, 189, 248, 0.22),
        0 14px 36px rgba(0, 0, 0, 0.42),
        0 0 24px var(--cresa-glow-primary);
    --cresa-shadow-energy-cyan: 0 0 0 1px rgba(56, 189, 248, 0.35), 0 0 20px rgba(56, 189, 248, 0.22);
    --cresa-shadow-energy-violet: 0 0 0 1px rgba(167, 139, 250, 0.38), 0 0 22px rgba(167, 139, 250, 0.24);
    --cresa-shadow-energy-gold: 0 0 0 1px rgba(250, 204, 21, 0.4), 0 0 24px rgba(250, 204, 21, 0.26);

    /* ——— Tipografía nicknames (competitiva / premium) ——— */
    --cresa-font-player-name: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cresa-player-name-weight: 700;
    --cresa-player-name-color: #fafaf9;
    --cresa-player-name-tracking: -0.018em;
    --cresa-player-name-lh: 1.12;
    --cresa-player-name-shadow: 0 1px 0 rgba(0, 0, 0, 0.38), 0 0 14px rgba(255, 255, 255, 0.035);
}

/* ——— Utilidades glow (decorativas, no emblemas) ——— */
.glow-primary {
    box-shadow: 0 0 18px var(--cresa-glow-primary);
}

.glow-gold {
    box-shadow: 0 0 18px var(--cresa-glow-gold);
}

.glow-rare {
    box-shadow: 0 0 18px var(--cresa-glow-rare);
}

.glow-epic {
    box-shadow: 0 0 18px var(--cresa-glow-epic);
}

.glow-legendary {
    box-shadow: 0 0 20px var(--cresa-glow-legendary);
}

/* ——— Mobile: legibilidad + performance (≤767px) ——— */
@media (max-width: 767.98px) {
    :root {
        --cresa-glow-primary: rgba(56, 189, 248, 0.19);
        --cresa-glow-gold: rgba(250, 204, 21, 0.24);
        --cresa-glow-rare: rgba(56, 189, 248, 0.21);
        --cresa-glow-epic: rgba(167, 139, 250, 0.24);
        --cresa-glow-legendary: rgba(250, 204, 21, 0.26);
        --cresa-card-glow-primary: 0 0 24px var(--cresa-glow-primary);
    }

    /* Tipografía: más aire, menos compresión */
    .cresa-player-hero__name,
    .cresa-player-hero--lobby-embed .cresa-player-hero__name {
        line-height: 1.14;
    }

    .cresa-player-hero__title,
    .cresa-player-hero--lobby-embed .cresa-player-hero__title {
        line-height: 1.35;
        letter-spacing: 0.045em;
    }

    .cresa-player-hero__body,
    .kid-dash-lobby-shell .cresa-player-hero--lobby-embed .cresa-player-hero__body {
        gap: 0.42rem;
    }

    .cresa-player-hero__chips,
    .kid-dash-lobby-shell .cresa-player-hero--lobby-embed .cresa-player-hero__chips {
        gap: 0.26rem 0.32rem;
    }

    .cresa-player-badge,
    .cresa-player-badges {
        line-height: 1.28;
    }

    .cresa-result-identity__name,
    .mp-premium-head__player-name,
    .game-hub__events-pill,
    .gh-streak-chip {
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
    }

    /* Performance: sin brightness en :active */
    .kid-dash-play:active,
    .kid-dash-cta-knights:active,
    .gh-btn:active,
    .gh-btn--sky:active,
    .mp-btn:active,
    .cresa-gamer-modal__btn:active,
    .gamer-profile-btn:active,
    .gamer-profile-hero__avatar-btn:active,
    .gamer-avatar-pick:active:not(:disabled),
    .gamer-avatar-modal__close:active,
    .gamer-account-settings button.gamer-account-btn:active,
    .cresa-auth-btn:active,
    .cresa-char-onboard__submit:active {
        filter: none !important;
    }

    /* CTAs: feedback con transform + sombra, no filter */
    .kid-dash-play:active,
    .kid-dash-cta-knights:active {
        transform: translateY(2px);
        opacity: 0.94;
    }

    .gamer-profile-btn:active,
    .mp-btn:active {
        transform: translateY(1px);
        opacity: 0.92;
    }

    /* Cards: separación y profundidad suave */
    .kid-dash-lobby-shell,
    .kid-dash-card--hub,
    .game-hub__events,
    .gh-card {
        box-shadow:
            var(--cresa-inset-highlight),
            var(--cresa-card-border),
            0 12px 32px rgba(0, 0, 0, 0.36);
    }

    /* Glow decorativo: sin blur pesado en scroll */
    .cresa-player-hero__glow,
    .kid-dash-lobby-shell__glow,
    .kid-dash-lobby-shell__frame::before,
    .gh-social-hero__glow,
    .mp-premium-head__glow,
    .mp-invite-launcher__glow {
        filter: none !important;
    }

    .cresa-player-hero__glow {
        opacity: 0.42;
    }

    .kid-dash-lobby-shell__glow {
        opacity: 0.38;
    }

    /* Layout game: sin blur en capas decorativas durante scroll */
    .kid-dash-wrap:not(.kid-dash-wrap--desktop-lobby)::before,
    .kid-dash-wrap:not(.kid-dash-wrap--desktop-lobby)::after,
    .kid-dash-card:not(.kid-dash-card--desktop-lobby):not(.battle-pve-card)::after {
        filter: none !important;
    }

    .kid-dash-wrap:not(.kid-dash-wrap--desktop-lobby)::before {
        opacity: 0.32 !important;
    }

    .kid-dash-card:not(.kid-dash-card--wide):not(.kid-dash-card--lg):not(.kid-dash-card--desktop-lobby):not(.battle-pve-card)::after {
        opacity: 0.28 !important;
    }

    .kid-subjects-row.kid-subjects-row--link:active {
        filter: none !important;
        opacity: 0.94;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glow-primary,
    .glow-gold,
    .glow-rare,
    .glow-epic,
    .glow-legendary {
        box-shadow: none;
    }
}

/* ——— Nicknames: sans premium competitivo (solo nombres de jugador) ——— */
.cresa-player-display-name__text,
.cresa-player-hero__name,
.cresa-player-hero__name-text,
.cresa-hero-profile-modal__name,
.cresa-hero-profile-modal__name-text,
.battle-pve-fighter__name,
.cresa-result-identity__name,
.mp-premium-head__player-name,
.kid-battle-ranking-name,
.kid-academic-ranking-name,
.battle-ranking-name,
.academic-ranking-name,
.kid-ranking-name,
.game-player-hud__name,
.mp-row__name:not(.mp-row__name--muted),
.mp-arena__fighter-name,
.mp-arena__result-name {
    font-family: var(--cresa-font-player-name);
    font-weight: var(--cresa-player-name-weight);
    letter-spacing: var(--cresa-player-name-tracking);
    line-height: var(--cresa-player-name-lh);
    font-feature-settings: 'liga' 1, 'kern' 1;
    -webkit-font-smoothing: antialiased;
}

.cresa-player-display-name__text,
.kid-battle-ranking-name,
.kid-academic-ranking-name,
.battle-ranking-name,
.academic-ranking-name,
.kid-ranking-name,
.mp-row__name:not(.mp-row__name--muted),
.mp-arena__result-name {
    color: var(--cresa-player-name-color);
    text-shadow: var(--cresa-player-name-shadow);
}

.battle-pve-fighter__name,
.cresa-result-identity__name,
.mp-premium-head__player-name,
.mp-arena__fighter-name,
.game-player-hud__name {
    color: var(--cresa-player-name-color);
    text-shadow: var(--cresa-player-name-shadow);
}

/* ——— Hero nickname premium: dorado luminoso + sweep shine ——— */
:root {
    --cresa-hero-nickname-shine-layer: linear-gradient(
        105deg,
        transparent 36%,
        rgba(255, 255, 255, 0.1) 41%,
        rgba(255, 255, 255, 0.88) 50%,
        rgba(255, 255, 255, 0.1) 59%,
        transparent 64%
    );
    --cresa-hero-nickname-gold-layer: linear-gradient(
        180deg,
        #fffef5 0%,
        #fff9c4 10%,
        #ffee58 24%,
        #ffd740 40%,
        #ffca28 56%,
        #ffc107 72%,
        #ffab00 88%,
        #ffe082 100%
    );
    --cresa-hero-nickname-filter:
        drop-shadow(0 1px 0 rgba(0, 0, 0, 0.62))
        drop-shadow(0 0 10px rgba(255, 241, 118, 0.48))
        drop-shadow(0 0 20px rgba(255, 213, 0, 0.32));
    --cresa-hero-nickname-filter-mobile:
        drop-shadow(0 1px 0 rgba(0, 0, 0, 0.48))
        drop-shadow(0 0 12px rgba(255, 245, 157, 0.62))
        drop-shadow(0 0 22px rgba(255, 214, 0, 0.44));
}

/* ——— Hero identity: nickname + bandera siempre en línea ——— */
.cresa-player-hero__identity-head {
    width: 100%;
    min-width: 0;
}

.cresa-player-hero__name {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.28rem 0.32rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.cresa-player-hero__name .cresa-country-flag {
    flex: 0 0 auto;
    align-self: center;
}

.cresa-player-hero__name-text {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: 0.012em;
    background-image:
        var(--cresa-hero-nickname-shine-layer),
        var(--cresa-hero-nickname-gold-layer);
    background-size: 280% 100%, 100% 100%;
    background-position: 200% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: var(--cresa-hero-nickname-filter);
    animation: cresa-hero-nickname-shine 4.5s ease-in-out infinite;
}

.cresa-hero-profile-modal__name-text {
    position: relative;
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    letter-spacing: 0.012em;
    background-image:
        var(--cresa-hero-nickname-shine-layer),
        var(--cresa-hero-nickname-gold-layer);
    background-size: 280% 100%, 100% 100%;
    background-position: 200% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: var(--cresa-hero-nickname-filter);
    animation: cresa-hero-nickname-shine 4.5s ease-in-out infinite;
}

@keyframes cresa-hero-nickname-shine {
    0%,
    20% {
        background-position: 200% 0, 0 0;
    }

    48%,
    52% {
        background-position: -60% 0, 0 0;
    }

    80%,
    100% {
        background-position: 200% 0, 0 0;
    }
}

@media (max-width: 767.98px) {
    .cresa-player-hero__name-text,
    .cresa-hero-profile-modal__name-text {
        filter: var(--cresa-hero-nickname-filter-mobile);
    }
}

.cresa-hero-profile-modal__name {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: auto;
    max-width: 100%;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cresa-player-hero__name-text,
    .cresa-hero-profile-modal__name-text {
        animation: none;
        background-image: var(--cresa-hero-nickname-gold-layer);
        background-size: 100% 100%;
        background-position: 0 0;
    }
}