/* ══════════════════════════════════════════════
   hero-card.css  —  Premium RPG Hero Card
   Only touch this file for hero card iterations.
   ══════════════════════════════════════════════ */

/* ── Card shell ── */
.hero-card {
    position: relative;
    background: var(--surface-deep);
    border: 1px solid transparent;
    background-image:
        linear-gradient(var(--surface-deep), var(--surface-deep)),
        linear-gradient(135deg, #f0c860 0%, #b9842f 45%, #f0e0a8 60%, #946a22 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 30px rgba(226,176,74,0.14);
    animation: borderShimmer 5s ease-in-out infinite;
}

@keyframes borderShimmer {
    0%, 100% { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 30px rgba(226,176,74,0.14); }
    50%       { box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 44px rgba(226,176,74,0.30); }
}

.hero-row {
    display: flex;
    align-items: stretch;
    min-height: 210px;
}

/* ── Left column ── */
.hero-avatar {
    flex: 1.15;
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
    overflow: visible;
    z-index: 1;
}

.avatar-frame {
    position: relative;
    width: 100%;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--space-4);
    overflow: visible;
}

/* Warm glow behind hero — wider radial than before */
.avatar-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 48% 46%, rgba(226,176,74,0.36) 0%, rgba(226,176,74,0.14) 35%, transparent 62%),
        radial-gradient(ellipse at 50% 110%, rgba(0,0,0,0.50) 0%, transparent 58%);
    pointer-events: none;
}

/* Gradient bleeds all the way to the right edge of the card */
.avatar-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -600px;
    z-index: 2;
    background: linear-gradient(
        90deg,
        transparent              48%,
        rgba(15,23,42,0.35)      60%,
        rgba(15,23,42,0.75)      72%,
        var(--surface-deep)      84%
    );
    pointer-events: none;
}

/* ── Golden particles — clustered around the hero, not spreading everywhere ── */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-particles::before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(226,176,74,0.85);
    left: 22%;
    top: 70%;
    box-shadow:
        14px  -38px 0 0px rgba(226,176,74,0.75),
        30px  -72px 0 1px rgba(255,210,90,0.55),
        8px  -110px 0 0px rgba(226,176,74,0.40),
        46px  -28px 0 1px rgba(255,220,110,0.60),
        22px  -90px 0 0px rgba(226,176,74,0.38),
        38px  -55px 0 1px rgba(255,200,80,0.48),
        4px   -48px 0 0px rgba(226,176,74,0.65),
        52px -125px 0 1px rgba(255,215,95,0.32),
        18px -145px 0 0px rgba(226,176,74,0.28),
        60px  -80px 0 1px rgba(255,205,85,0.42);
    animation: particleDrift 6.5s ease-in-out infinite;
}

.hero-particles::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255,220,100,0.70);
    left: 34%;
    top: 78%;
    box-shadow:
        -10px  -44px 0 1px rgba(226,176,74,0.60),
         18px  -85px 0 0px rgba(255,210,90,0.48),
        -26px -122px 0 1px rgba(226,176,74,0.32),
         36px  -22px 0 0px rgba(255,220,110,0.65),
        -14px -100px 0 1px rgba(226,176,74,0.42),
         48px  -65px 0 0px rgba(255,200,80,0.44),
         -6px  -52px 0 1px rgba(226,176,74,0.55),
         28px -138px 0 0px rgba(255,215,95,0.30),
        -32px  -75px 0 1px rgba(226,176,74,0.38),
         55px -108px 0 0px rgba(255,205,85,0.35);
    animation: particleDrift 8.5s ease-in-out infinite 1.6s;
}

@keyframes particleDrift {
    0%   { transform: translateY(0);     opacity: 0;   }
    12%  { opacity: 1;                               }
    88%  { opacity: 0.5;                             }
    100% { transform: translateY(-70px); opacity: 0;  }
}

/* Ghost echo */
.avatar-ghost {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    height: 170%;
    width: auto;
    max-width: none;
    object-fit: contain;
    transform: translate(-50%, -50%) scale(1.55);
    filter: grayscale(1) blur(2px) brightness(1.3);
    opacity: 0.09;
    pointer-events: none;
}

/* ✅ 15% larger than the 9.5 base (was 160%, now 184%) */
.avatar-inner {
    position: relative;
    z-index: 1;
    width: auto;
    height: 184%;
    max-width: 96%;
    object-fit: contain;
    margin-bottom: -30px;
    filter:
        drop-shadow(0 0 28px rgba(226,176,74,0.44))
        drop-shadow(0 0 10px rgba(226,176,74,0.22))
        drop-shadow(0 20px 18px rgba(0,0,0,0.72));
    animation: heroBob 3.4s ease-in-out infinite;
}

.avatar-fallback {
    position: relative;
    z-index: 1;
    font-size: 8.8rem;
    line-height: 1;
    margin-bottom: -30px;
    filter:
        drop-shadow(0 0 28px rgba(226,176,74,0.44))
        drop-shadow(0 20px 18px rgba(0,0,0,0.72));
    animation: heroBob 3.4s ease-in-out infinite;
}

@keyframes heroBob {
    0%, 100% { transform: translateY(-10px);  }
    50%       { transform: translateY(-13px); }
}

/* ── Streak — bottom-right, compact ── */
.hero-streak {
    position: absolute;
    bottom: 16px;
    right: 10px;
    left: auto;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: none;
    padding: 0;
}

.hero-streak-number-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    line-height: 1;
}

/* ── Phase 3 (H-2): both glows below now reference --streak-flame-rgb,
   the RGB-triplet companion of --streak-flame (see style.css :root), so
   the token itself is used at every site — solid color and rgba() glow
   alike — not just documented as "the same value" via a literal. */
.hero-streak .streak-fire {
    font-size: 1.8rem;
    line-height: 1;
    animation: flicker 1.5s infinite alternate;
    filter: drop-shadow(0 0 6px rgba(var(--streak-flame-rgb), 0.55));
}

.hero-streak > .hero-streak-number-row > span:not(.streak-fire) {
    font-family: 'Oswald', var(--font), sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--streak-flame);
    text-shadow: 0 0 12px rgba(var(--streak-flame-rgb), 0.55);
    line-height: 1;
}

.streak-label {
    font-size: 0.48rem;
    font-weight: 700;
    color: #8a95a8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: var(--space-1);
    text-align: center;
    width: 100%;
    opacity: 0.75;
}

/* ── Right column — sits above the bleed gradient, text always crisp ── */
.hero-main {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    padding: var(--space-6) var(--space-6) var(--space-6) var(--space-2);
    margin-left: var(--space-6);
    justify-content: center;
}

.hero-name-level {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.hero-name {
    font-family: 'Oswald', var(--font), sans-serif;
    font-size: 2.3rem;
    font-weight: 700;
    background: linear-gradient(180deg, #ffe9ad 0%, #e2b04a 55%, #b9842f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

/* Rank as a subtle pill badge */
.hero-rank-row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    background: rgba(148,163,184,0.10);
    border: 1px solid rgba(148,163,184,0.20);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
}

.hero-rank {
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.hero-rank-icon { font-size: var(--text-lg); }

.hero-level-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.hero-level {
    font-family: var(--font);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-bright);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-level-icon { font-size: 1.1rem; }

/* ── EXP pill ── */
.hero-exp-pill {
    display: inline-block;
    align-self: flex-start;
    background: linear-gradient(145deg, #1a5c52, #0e3933);
    color: #c8fff0;
    border: 1px solid rgba(92,201,138,0.4);
    box-shadow: 0 0 14px rgba(92,201,138,0.22);
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: var(--text-base);
    letter-spacing: 0.04em;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius);
    text-transform: uppercase;
}

/* ── Progress bar ── */
.progress-bar-outer {
    position: relative;
    height: 20px;
    width: 88%;
    background: rgba(15,23,42,0.8);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid var(--gold);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 0 8px rgba(226,176,74,0.12);
}

.progress-bar-fill {
    position: relative;
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--progress-duration) var(--progress-easing);
}

.progress-bar-fill.xp-fill {
    background-color: #2f8f7d;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.36) 0%, rgba(255,255,255,0.05) 45%, transparent 50%);
    box-shadow: 0 0 10px rgba(226,176,74,0.38);
}

.progress-bar-fill.xp-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.48) 48%, transparent 72%);
    background-size: 220% 100%;
    animation: barShine 3.5s ease-in-out infinite;
}

@keyframes barShine {
    0%        { background-position: 140% 0; }
    55%, 100% { background-position: -60% 0; }
}

.progress-bar-fill.xp-pulse { animation: xpPulse 0.75s ease-out; }

@keyframes xpPulse {
    0%   { box-shadow: 0 0 10px rgba(226,176,74,0.38); }
    40%  { box-shadow: 0 0 26px rgba(226,176,74,0.95); }
    100% { box-shadow: 0 0 10px rgba(226,176,74,0.38); }
}

/* ── XP to next level ── */
.hero-next-level {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.next-value {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--text-bright);
}

.next-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: #8a95a8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Evolution flash ── */
.avatar-frame.evolve-flash .avatar-inner {
    animation: evolveFlash 0.9s ease-out;
}

@keyframes evolveFlash {
    0%   { filter: drop-shadow(0 0 28px rgba(226,176,74,0.44)) brightness(1);   transform: scale(1);    }
    35%  { filter: drop-shadow(0 0 60px rgba(255,255,255,0.9)) brightness(2.2); transform: scale(1.25); }
    100% { filter: drop-shadow(0 0 28px rgba(226,176,74,0.44)) brightness(1);   transform: scale(1);    }
}

@keyframes flicker {
    0%   { transform: scale(1);    filter: brightness(1);   }
    100% { transform: scale(1.15); filter: brightness(1.3); }
}