/* Player titles (the badge above a name). Shared by the game (header.php) and the public pages
   (outsideheader.php), so a title looks the same everywhere. Moved out of vg-ingame-v2.css. */

/* ══════════════════════════════════════════════════════════════
   Player Title System
   --title-color is set inline per-title from the DB hex value.
   Everything derives from that single CSS variable.
   ══════════════════════════════════════════════════════════════ */

.player-name-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    vertical-align: top;
    line-height: 1.3;
}
.player-name-line {
    display: inline;
    white-space: normal;
}

.player-title {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1px 8px;
    border-radius: 2px;
    margin-bottom: 1px;

    /* all colours driven by the single --title-color variable */
    color: var(--title-color);
    border: 1px solid color-mix(in srgb, var(--title-color) 45%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--title-color) 18%, transparent),
        color-mix(in srgb, var(--title-color) 6%, transparent)
    );
    text-shadow: 0 0 6px color-mix(in srgb, var(--title-color) 50%, transparent);
    box-shadow: 0 0 4px color-mix(in srgb, var(--title-color) 20%, transparent);
}

/* subtle shimmer animation for legendary-tier titles (opt-in via class) */
.player-title--shimmer {
    background-size: 200% 100%;
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--title-color) 6%, transparent) 0%,
        color-mix(in srgb, var(--title-color) 25%, transparent) 50%,
        color-mix(in srgb, var(--title-color) 6%, transparent) 100%
    );
    animation: title-shimmer 3s ease-in-out infinite;
}

@keyframes title-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* breathing glow animation for high-tier titles */
.player-title--pulse {
    animation: title-pulse 2.8s ease-in-out infinite;
}

/* when both shimmer + pulse are applied (legendary tier) */
.player-title--shimmer.player-title--pulse {
    background-size: 200% 100%;
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--title-color) 6%, transparent) 0%,
        color-mix(in srgb, var(--title-color) 30%, transparent) 50%,
        color-mix(in srgb, var(--title-color) 6%, transparent) 100%
    );
    animation: title-shimmer 3s ease-in-out infinite,
               title-pulse 2.8s ease-in-out infinite;
    border-color: color-mix(in srgb, var(--title-color) 60%, transparent);
}

@keyframes title-pulse {
    0%, 100% {
        text-shadow: 0 0 6px color-mix(in srgb, var(--title-color) 50%, transparent);
        box-shadow:  0 0 4px color-mix(in srgb, var(--title-color) 20%, transparent);
        filter: brightness(1);
    }
    50% {
        text-shadow: 0 0 14px color-mix(in srgb, var(--title-color) 80%, transparent),
                     0 0 28px color-mix(in srgb, var(--title-color) 40%, transparent);
        box-shadow:  0 0 10px color-mix(in srgb, var(--title-color) 50%, transparent),
                     0 0 22px color-mix(in srgb, var(--title-color) 25%, transparent);
        filter: brightness(1.15);
    }
}

/* ── Yulebound: drifting snowflake sparkles ── */
.player-title--snowflake {
    position: relative;
    overflow: hidden;
    animation: title-pulse 3s ease-in-out infinite;
}
.player-title--snowflake::before,
.player-title--snowflake::after {
    content: '\2744\00a0\00a0\2744\00a0\00a0\2744\00a0\00a0\2744';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    font-size: 0.55rem;
    letter-spacing: 0.5em;
    text-align: justify;
    text-align-last: justify;
    color: rgba(255,255,255,0.6);
    pointer-events: none;
    animation: title-snow-fall 4s linear infinite;
}
.player-title--snowflake::after {
    content: '\2744\00a0\00a0\2744\00a0\00a0\2744';
    animation-delay: 2s;
    animation-duration: 4.5s;
    left: 10%;
    width: 90%;
}
@keyframes title-snow-fall {
    0%   { top: -100%; opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.5; }
    100% { top: 120%; opacity: 0; }
}

/* ── Bloodsworn: red-black shimmer + pulse (like Divine but crimson) ── */
.player-title--bloodsworn {
    background-size: 200% 100%;
    background-image: linear-gradient(
        90deg,
        rgba(0,0,0,0.4) 0%,
        color-mix(in srgb, var(--title-color) 35%, transparent) 25%,
        rgba(0,0,0,0.5) 50%,
        color-mix(in srgb, var(--title-color) 35%, transparent) 75%,
        rgba(0,0,0,0.4) 100%
    );
    animation: title-shimmer 5s ease-in-out infinite,
               title-bloodsworn-pulse 4s ease-in-out infinite;
    border-color: color-mix(in srgb, var(--title-color) 60%, #000);
    text-shadow: 0 0 8px var(--title-color), 0 0 16px rgba(0,0,0,0.8);
}
@keyframes title-bloodsworn-pulse {
    0%, 100% {
        box-shadow: 0 0 4px rgba(200,0,0,0.3), 0 0 8px rgba(0,0,0,0.4);
        filter: brightness(1);
    }
    50% {
        box-shadow: 0 0 12px rgba(200,0,0,0.6), 0 0 24px rgba(0,0,0,0.5),
                    inset 0 0 8px rgba(0,0,0,0.3);
        filter: brightness(1.2);
    }
}

/* ── Blightwalker: toxic green bubbling effect ── */
.player-title--blight {
    position: relative;
    overflow: hidden;
    animation: title-blight-glow 2.2s ease-in-out infinite;
    border-color: color-mix(in srgb, var(--title-color) 50%, #003300);
}
.player-title--blight::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 5%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--title-color);
    opacity: 0.7;
    animation: title-bubble 2s ease-in-out infinite;
    box-shadow:
        20px 2px 0 0 color-mix(in srgb, var(--title-color) 60%, transparent),
        48px -1px 0 -1px color-mix(in srgb, var(--title-color) 50%, transparent),
        72px 1px 0 0 color-mix(in srgb, var(--title-color) 55%, transparent),
        96px 0 0 0 color-mix(in srgb, var(--title-color) 40%, transparent);
}
.player-title--blight::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 15%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--title-color) 70%, transparent);
    animation: title-bubble 2.6s ease-in-out 0.8s infinite;
    box-shadow:
        30px 0 0 0 color-mix(in srgb, var(--title-color) 50%, transparent),
        58px 1px 0 -1px color-mix(in srgb, var(--title-color) 45%, transparent),
        84px -1px 0 0 color-mix(in srgb, var(--title-color) 40%, transparent);
}
@keyframes title-bubble {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    20%  { opacity: 0.7; }
    80%  { opacity: 0.3; }
    100% { transform: translateY(-14px) scale(0.4); opacity: 0; }
}
/* ── Hellspawn: erratic hellfire flicker ── */
.player-title--hellfire {
    position: relative;
    overflow: hidden;
    animation: title-hellfire-flicker 0.8s steps(3, end) infinite,
               title-hellfire-glow 3s ease-in-out infinite;
    border-color: color-mix(in srgb, var(--title-color) 55%, #220000);
}
.player-title--hellfire::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--title-color) 30%, transparent) 0%,
        color-mix(in srgb, var(--title-color) 10%, transparent) 40%,
        transparent 100%
    );
    pointer-events: none;
    animation: title-hellfire-wave 2s ease-in-out infinite;
}
.player-title--hellfire::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 15%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #ff4400;
    opacity: 0;
    pointer-events: none;
    animation: title-ember 1.5s ease-out infinite;
    box-shadow:
        22px 1px 0 0 #ff6600,
        50px -2px 0 0 #ff4400,
        74px 0 0 0 #ff5500;
}
@keyframes title-hellfire-flicker {
    0%   { filter: brightness(1); }
    33%  { filter: brightness(1.15); }
    66%  { filter: brightness(0.95); }
    100% { filter: brightness(1.08); }
}
@keyframes title-hellfire-glow {
    0%, 100% {
        text-shadow: 0 0 6px var(--title-color),
                     0 -2px 10px color-mix(in srgb, var(--title-color) 40%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, var(--title-color) 20%, transparent);
    }
    50% {
        text-shadow: 0 0 10px var(--title-color),
                     0 -4px 18px color-mix(in srgb, var(--title-color) 60%, transparent),
                     0 -6px 30px color-mix(in srgb, var(--title-color) 20%, transparent);
        box-shadow: 0 0 10px color-mix(in srgb, var(--title-color) 35%, transparent),
                    0 -2px 16px color-mix(in srgb, var(--title-color) 15%, transparent);
    }
}
@keyframes title-hellfire-wave {
    0%, 100% { opacity: 0.5; transform: scaleY(0.8); }
    50%      { opacity: 0.9; transform: scaleY(1.2); }
}
@keyframes title-ember {
    0%   { opacity: 0; transform: translateY(0); }
    20%  { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-12px) scale(0.3); }
}

@keyframes title-blight-glow {
    0%, 100% {
        text-shadow: 0 0 6px color-mix(in srgb, var(--title-color) 50%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, var(--title-color) 20%, transparent);
        filter: brightness(1);
    }
    50% {
        text-shadow: 0 0 10px color-mix(in srgb, var(--title-color) 80%, transparent),
                     0 0 20px color-mix(in srgb, var(--title-color) 30%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, var(--title-color) 40%, transparent),
                    0 0 16px color-mix(in srgb, var(--title-color) 15%, transparent);
        filter: brightness(1.1);
    }
}


/* ── Prestige frames (gold-bought, the Prestige atelier, owner 2026-10-14) ──
   Gilt: a double gold rule with corner studs. Sovereign: the gilt frame on black lacquer with a slow gold sheen. */
.player-title--gilt {
    position: relative;
    padding: 1px 10px;
    border: 1px solid #c8a040;
    outline: 1px solid color-mix(in srgb, #c8a040 45%, transparent);
    outline-offset: 1px;
    border-radius: 1px;
    background: linear-gradient(180deg, rgba(40,28,8,.55), rgba(10,6,4,.7));
}
.player-title--gilt::before,
.player-title--gilt::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 3px;
    margin-top: -1.5px;
    background: #e8c85c;
    transform: rotate(45deg);
}
.player-title--gilt::before { left: 3px; }
.player-title--gilt::after  { right: 3px; }
.player-title--sovereign {
    border-color: #e8c85c;
    background-color: #0a0406;
    background-image: linear-gradient(100deg, transparent 0%, transparent 40%, rgba(255,232,160,.28) 50%, transparent 60%, transparent 100%),
                      linear-gradient(180deg, rgba(70,8,16,.7), rgba(10,4,6,.9));
    background-size: 250% 100%, 100% 100%;
    animation: title-sovereign-sheen 6s ease-in-out infinite;
    text-shadow: 0 0 6px color-mix(in srgb, var(--title-color) 70%, transparent), 0 1px 0 #000;
    box-shadow: 0 0 8px rgba(232,200,92,.25);
}
@keyframes title-sovereign-sheen {
    0%, 30% { background-position: 150% 0, 0 0; }
    70%, 100% { background-position: -150% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .player-title--sovereign { animation: none; }
}