/**
 * Character Introduction Modal Styles
 * Unique visual effects for each character's first appearance
 */

/* ============================================
   Base Character Modal
   ============================================ */
.character-intro-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

.character-intro-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Backdrop - customizable per character */
.character-intro-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.98) 100%);
}

/* Content container */
.character-intro-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 3rem;
    max-width: 500px;
    width: 100%;
    z-index: 1;
}

/* Avatar container */
.character-intro-avatar-wrap {
    position: relative;
    width: 180px;
    height: 180px;
}

.character-intro-effect {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border-radius: 50%;
    pointer-events: none;
}

.character-intro-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid;
    position: relative;
    z-index: 1;
}

/* Name tag */
.character-intro-nametag {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 24px;
    border-radius: 20px;
    z-index: 2;
    animation: nametagReveal 0.8s ease-out 1.5s both;
}

@keyframes nametagReveal {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

.character-intro-alias {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
}

.character-intro-name {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 3px;
}

/* Dialogue box */
.character-intro-dialogue {
    background: rgba(10, 10, 20, 0.9);
    border-radius: 15px;
    padding: 2rem;
    max-width: 450px;
    width: 100%;
    position: relative;
}

.character-intro-dialogue::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
}

.character-intro-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.05rem;
    line-height: 1.8;
    text-align: center;
    min-height: 100px;
}

/* Typing indicator */
.character-intro-typing {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
}

.character-intro-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: typingDot 1.4s ease-in-out infinite;
}

.character-intro-typing span:nth-child(2) { animation-delay: 0.2s; }
.character-intro-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

.character-intro-typing.hidden { display: none; }

/* Continue button */
.character-intro-continue {
    background: transparent;
    border: 2px solid;
    padding: 14px 45px;
    border-radius: 30px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    animation: btnReveal 0.8s ease-out 3s both;
}

@keyframes btnReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.character-intro-continue:hover {
    transform: scale(1.05);
}

/* Progress dots */
.character-intro-progress {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.character-intro-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.character-intro-dot.active {
    transform: scale(1.3);
}

.character-intro-dot.completed {
    background: rgba(255, 255, 255, 0.5);
}

/* ============================================
   IRON - Metal Effect
   Industrial, chrome, dark and powerful
   ============================================ */
.character-intro-modal[data-character="iron"] .character-intro-backdrop {
    background:
        radial-gradient(ellipse at center, rgba(44, 62, 80, 0.3) 0%, transparent 70%),
        radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
}

.character-intro-modal[data-character="iron"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 50px,
            rgba(44, 62, 80, 0.03) 50px,
            rgba(44, 62, 80, 0.03) 51px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 50px,
            rgba(44, 62, 80, 0.03) 50px,
            rgba(44, 62, 80, 0.03) 51px
        );
    pointer-events: none;
    z-index: 1;
}

.character-intro-modal[data-character="iron"] .character-intro-effect {
    background:
        radial-gradient(circle, rgba(44, 62, 80, 0.4) 0%, transparent 70%);
    animation: ironPulse 3s ease-in-out infinite;
}

@keyframes ironPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
        filter: blur(20px);
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
        filter: blur(25px);
    }
}

/* Iron sparks/rivets effect */
.character-intro-modal[data-character="iron"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255, 200, 100, 0.8) 0%, transparent 2px),
        radial-gradient(circle at 80% 20%, rgba(255, 200, 100, 0.6) 0%, transparent 2px),
        radial-gradient(circle at 70% 70%, rgba(255, 200, 100, 0.7) 0%, transparent 2px),
        radial-gradient(circle at 30% 80%, rgba(255, 200, 100, 0.5) 0%, transparent 2px);
    animation: ironSparks 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes ironSparks {
    0%, 100% { opacity: 0; }
    10%, 12% { opacity: 1; }
    13%, 40% { opacity: 0; }
    50%, 52% { opacity: 0.8; }
    53%, 80% { opacity: 0; }
    85%, 87% { opacity: 0.6; }
    88% { opacity: 0; }
}

.character-intro-modal[data-character="iron"] .character-intro-avatar {
    border-color: #2c3e50;
    box-shadow:
        0 0 30px rgba(44, 62, 80, 0.6),
        0 0 60px rgba(0, 0, 0, 0.8),
        inset 0 0 30px rgba(44, 62, 80, 0.3);
    filter: saturate(0.8) contrast(1.1);
}

.character-intro-modal[data-character="iron"] .character-intro-nametag {
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.9), rgba(20, 30, 40, 0.95));
    border: 2px solid rgba(100, 120, 140, 0.5);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.character-intro-modal[data-character="iron"] .character-intro-name {
    color: #a0b0c0;
    text-shadow: 0 0 10px rgba(160, 176, 192, 0.5);
}

.character-intro-modal[data-character="iron"] .character-intro-alias {
    color: #708090;
}

.character-intro-modal[data-character="iron"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(20, 25, 35, 0.95), rgba(10, 15, 25, 0.98));
    border: 2px solid rgba(44, 62, 80, 0.5);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.7),
        inset 0 0 20px rgba(44, 62, 80, 0.1);
}

.character-intro-modal[data-character="iron"] .character-intro-dialogue::before {
    border-bottom-color: rgba(44, 62, 80, 0.5);
}

.character-intro-modal[data-character="iron"] .character-intro-typing span {
    background: rgba(44, 62, 80, 0.8);
}

.character-intro-modal[data-character="iron"] .character-intro-continue {
    border-color: rgba(44, 62, 80, 0.6);
    color: #a0b0c0;
}

.character-intro-modal[data-character="iron"] .character-intro-continue:hover {
    background: rgba(44, 62, 80, 0.2);
    border-color: #2c3e50;
    box-shadow: 0 0 25px rgba(44, 62, 80, 0.4);
}

.character-intro-modal[data-character="iron"] .character-intro-dot.active {
    background: #2c3e50;
    box-shadow: 0 0 10px rgba(44, 62, 80, 0.8);
}

/* ============================================
   GHOST - Glitch Effect
   Cyber, digital corruption, cyan/magenta
   ============================================ */
.character-intro-modal[data-character="ghost"] .character-intro-backdrop {
    background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.2) 0%, rgba(0, 0, 0, 0.98) 100%);
}

.character-intro-modal[data-character="ghost"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    pointer-events: none;
    animation: scanlines 10s linear infinite;
    z-index: 10;
}

@keyframes scanlines {
    from { transform: translateY(0); }
    to { transform: translateY(4px); }
}

.character-intro-modal[data-character="ghost"] .character-intro-effect {
    background: linear-gradient(45deg,
        rgba(0, 255, 255, 0.15) 0%,
        rgba(255, 0, 255, 0.15) 50%,
        rgba(0, 255, 255, 0.15) 100%);
    filter: blur(20px);
    animation: ghostGlitchEffect 3s ease-in-out infinite;
}

@keyframes ghostGlitchEffect {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.5;
    }
    25% {
        transform: scale(1.1) rotate(5deg) translateX(5px);
        opacity: 0.8;
    }
    50% {
        transform: scale(0.95) rotate(-3deg) translateX(-5px);
        opacity: 0.3;
    }
    75% {
        transform: scale(1.05) rotate(2deg);
        opacity: 0.7;
    }
}

.character-intro-modal[data-character="ghost"] .character-intro-avatar {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow:
        0 0 30px rgba(0, 255, 255, 0.3),
        0 0 60px rgba(255, 0, 255, 0.2),
        inset 0 0 20px rgba(0, 255, 255, 0.1);
    animation: ghostAvatarFlicker 4s ease-in-out infinite;
}

@keyframes ghostAvatarFlicker {
    0%, 100% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.1) saturate(1.2);
    }
    52% {
        filter: brightness(0.8) saturate(0.9);
    }
    54% {
        filter: brightness(1.1) saturate(1.2);
    }
}

.character-intro-modal[data-character="ghost"] .character-intro-nametag {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2));
    border: 1px solid rgba(0, 255, 255, 0.5);
}

.character-intro-modal[data-character="ghost"] .character-intro-name {
    color: #0ff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
    animation: ghostNameGlitch 5s ease-in-out infinite;
}

@keyframes ghostNameGlitch {
    0%, 90%, 100% { transform: translateX(0); color: #0ff; }
    92% { transform: translateX(-2px); color: #f0f; }
    94% { transform: translateX(2px); color: #0ff; }
    96% { transform: translateX(-1px); opacity: 0.5; }
    98% { transform: translateX(1px); opacity: 1; }
}

.character-intro-modal[data-character="ghost"] .character-intro-alias {
    color: #0ff;
}

.character-intro-modal[data-character="ghost"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(10, 20, 30, 0.9), rgba(20, 10, 30, 0.9));
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(0, 255, 255, 0.05);
}

.character-intro-modal[data-character="ghost"] .character-intro-dialogue::before {
    border-bottom-color: rgba(0, 255, 255, 0.3);
}

.character-intro-modal[data-character="ghost"] .character-intro-typing span {
    background: rgba(0, 255, 255, 0.6);
}

.character-intro-modal[data-character="ghost"] .character-intro-continue {
    border-color: rgba(0, 255, 255, 0.3);
    color: rgba(0, 255, 255, 0.7);
}

.character-intro-modal[data-character="ghost"] .character-intro-continue:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.6);
    color: #0ff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.character-intro-modal[data-character="ghost"] .character-intro-dot.active {
    background: #0ff;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

/* ============================================
   RAZE - Fire Effect
   Warm flames, mentor energy
   ============================================ */
.character-intro-modal[data-character="raze"] .character-intro-backdrop {
    background:
        radial-gradient(ellipse at bottom, rgba(255, 107, 107, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.98) 100%);
}

.character-intro-modal[data-character="raze"] .character-intro-effect {
    background:
        radial-gradient(ellipse at bottom, rgba(255, 107, 107, 0.5) 0%, transparent 60%),
        radial-gradient(ellipse at center, rgba(255, 180, 50, 0.3) 0%, transparent 50%);
    filter: blur(25px);
    animation: razeFirePulse 2s ease-in-out infinite alternate;
}

@keyframes razeFirePulse {
    0% {
        transform: scaleY(1) scaleX(1);
        opacity: 0.6;
    }
    100% {
        transform: scaleY(1.2) scaleX(0.95);
        opacity: 0.9;
    }
}

/* Fire particles */
.character-intro-modal[data-character="raze"]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image:
        radial-gradient(circle at 20% 90%, rgba(255, 107, 107, 0.8) 0%, transparent 3px),
        radial-gradient(circle at 40% 85%, rgba(255, 150, 50, 0.6) 0%, transparent 2px),
        radial-gradient(circle at 60% 88%, rgba(255, 200, 100, 0.7) 0%, transparent 2.5px),
        radial-gradient(circle at 80% 92%, rgba(255, 107, 107, 0.5) 0%, transparent 2px),
        radial-gradient(circle at 30% 75%, rgba(255, 150, 50, 0.4) 0%, transparent 1.5px),
        radial-gradient(circle at 70% 80%, rgba(255, 200, 100, 0.5) 0%, transparent 2px);
    animation: razeEmbers 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes razeEmbers {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-20px);
        opacity: 0.9;
    }
}

.character-intro-modal[data-character="raze"] .character-intro-avatar {
    border-color: #ff6b6b;
    box-shadow:
        0 0 40px rgba(255, 107, 107, 0.5),
        0 0 80px rgba(255, 150, 50, 0.3),
        inset 0 0 20px rgba(255, 107, 107, 0.2);
    animation: razeGlow 2s ease-in-out infinite alternate;
}

@keyframes razeGlow {
    0% { filter: brightness(1); }
    100% { filter: brightness(1.15) saturate(1.1); }
}

.character-intro-modal[data-character="raze"] .character-intro-nametag {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(255, 150, 50, 0.2));
    border: 2px solid rgba(255, 107, 107, 0.6);
}

.character-intro-modal[data-character="raze"] .character-intro-name {
    color: #ff6b6b;
    text-shadow: 0 0 15px rgba(255, 107, 107, 0.8);
}

.character-intro-modal[data-character="raze"] .character-intro-alias {
    color: #ffaa80;
}

.character-intro-modal[data-character="raze"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(30, 15, 15, 0.95), rgba(20, 10, 10, 0.98));
    border: 2px solid rgba(255, 107, 107, 0.4);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(255, 107, 107, 0.05);
}

.character-intro-modal[data-character="raze"] .character-intro-dialogue::before {
    border-bottom-color: rgba(255, 107, 107, 0.4);
}

.character-intro-modal[data-character="raze"] .character-intro-typing span {
    background: rgba(255, 107, 107, 0.7);
}

.character-intro-modal[data-character="raze"] .character-intro-continue {
    border-color: rgba(255, 107, 107, 0.5);
    color: #ff8888;
}

.character-intro-modal[data-character="raze"] .character-intro-continue:hover {
    background: rgba(255, 107, 107, 0.15);
    border-color: #ff6b6b;
    box-shadow: 0 0 25px rgba(255, 107, 107, 0.4);
}

.character-intro-modal[data-character="raze"] .character-intro-dot.active {
    background: #ff6b6b;
    box-shadow: 0 0 10px rgba(255, 107, 107, 0.8);
}

/* ============================================
   KENZA - Flames Effect
   Fierce, aggressive flames, pink/red
   ============================================ */
.character-intro-modal[data-character="kenza"] .character-intro-backdrop {
    background:
        radial-gradient(ellipse at bottom, rgba(231, 76, 60, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at top, rgba(255, 20, 147, 0.15) 0%, transparent 40%),
        rgba(0, 0, 0, 0.95);
}

.character-intro-modal[data-character="kenza"] .character-intro-effect {
    background:
        conic-gradient(from 180deg,
            rgba(231, 76, 60, 0.4) 0deg,
            rgba(255, 20, 147, 0.5) 60deg,
            rgba(255, 100, 50, 0.4) 120deg,
            rgba(231, 76, 60, 0.3) 180deg,
            transparent 240deg);
    filter: blur(30px);
    animation: kenzaFlamesSpin 8s linear infinite;
}

@keyframes kenzaFlamesSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Aggressive flame particles */
.character-intro-modal[data-character="kenza"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 15% 85%, rgba(231, 76, 60, 0.9) 0%, transparent 4px),
        radial-gradient(circle at 85% 80%, rgba(255, 20, 147, 0.8) 0%, transparent 3px),
        radial-gradient(circle at 50% 15%, rgba(255, 100, 50, 0.7) 0%, transparent 3px),
        radial-gradient(circle at 25% 25%, rgba(231, 76, 60, 0.6) 0%, transparent 2px),
        radial-gradient(circle at 75% 35%, rgba(255, 20, 147, 0.5) 0%, transparent 2px);
    animation: kenzaSparks 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes kenzaSparks {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.character-intro-modal[data-character="kenza"] .character-intro-avatar {
    border-color: #e74c3c;
    box-shadow:
        0 0 40px rgba(231, 76, 60, 0.6),
        0 0 80px rgba(255, 20, 147, 0.4),
        inset 0 0 25px rgba(231, 76, 60, 0.3);
    animation: kenzaAvatar 1.5s ease-in-out infinite alternate;
}

@keyframes kenzaAvatar {
    0% {
        filter: brightness(1) hue-rotate(0deg);
        box-shadow: 0 0 40px rgba(231, 76, 60, 0.6), 0 0 80px rgba(255, 20, 147, 0.4);
    }
    100% {
        filter: brightness(1.2) hue-rotate(10deg);
        box-shadow: 0 0 60px rgba(231, 76, 60, 0.8), 0 0 100px rgba(255, 20, 147, 0.5);
    }
}

.character-intro-modal[data-character="kenza"] .character-intro-nametag {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.4), rgba(255, 20, 147, 0.3));
    border: 2px solid rgba(231, 76, 60, 0.7);
}

.character-intro-modal[data-character="kenza"] .character-intro-name {
    color: #ff6b8a;
    text-shadow: 0 0 15px rgba(255, 20, 147, 0.8);
}

.character-intro-modal[data-character="kenza"] .character-intro-alias {
    color: #ff9999;
}

.character-intro-modal[data-character="kenza"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(40, 15, 20, 0.95), rgba(25, 10, 15, 0.98));
    border: 2px solid rgba(231, 76, 60, 0.5);
}

.character-intro-modal[data-character="kenza"] .character-intro-dialogue::before {
    border-bottom-color: rgba(231, 76, 60, 0.5);
}

.character-intro-modal[data-character="kenza"] .character-intro-typing span {
    background: rgba(231, 76, 60, 0.7);
}

.character-intro-modal[data-character="kenza"] .character-intro-continue {
    border-color: rgba(231, 76, 60, 0.5);
    color: #ff7788;
}

.character-intro-modal[data-character="kenza"] .character-intro-continue:hover {
    background: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    box-shadow: 0 0 25px rgba(231, 76, 60, 0.5);
}

.character-intro-modal[data-character="kenza"] .character-intro-dot.active {
    background: #e74c3c;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.8);
}

/* ============================================
   TAKI - Ice Effect
   Cold, precise, blue/white crystals
   ============================================ */
.character-intro-modal[data-character="taki"] .character-intro-backdrop {
    background:
        radial-gradient(ellipse at top, rgba(52, 152, 219, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, transparent 30%),
        rgba(5, 10, 20, 0.98);
}

.character-intro-modal[data-character="taki"] .character-intro-effect {
    background:
        radial-gradient(circle, rgba(52, 152, 219, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 30% 30%, rgba(200, 230, 255, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 70% 70%, rgba(100, 180, 255, 0.2) 0%, transparent 30%);
    filter: blur(20px);
    animation: takiIcePulse 4s ease-in-out infinite;
}

@keyframes takiIcePulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0.7; }
}

/* Ice crystal particles */
.character-intro-modal[data-character="taki"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 2px),
        radial-gradient(circle at 80% 30%, rgba(200, 230, 255, 0.8) 0%, transparent 2px),
        radial-gradient(circle at 60% 70%, rgba(100, 180, 255, 0.7) 0%, transparent 1.5px),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 1.5px),
        radial-gradient(circle at 90% 85%, rgba(200, 230, 255, 0.5) 0%, transparent 1px),
        radial-gradient(circle at 10% 60%, rgba(100, 180, 255, 0.4) 0%, transparent 1px);
    animation: takiSnowfall 15s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes takiSnowfall {
    from { transform: translateY(-10%) rotate(0deg); }
    to { transform: translateY(10%) rotate(5deg); }
}

.character-intro-modal[data-character="taki"] .character-intro-avatar {
    border-color: #3498db;
    box-shadow:
        0 0 30px rgba(52, 152, 219, 0.5),
        0 0 60px rgba(200, 230, 255, 0.3),
        inset 0 0 20px rgba(52, 152, 219, 0.2);
    filter: saturate(0.9) brightness(1.05);
}

.character-intro-modal[data-character="taki"] .character-intro-nametag {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.3), rgba(200, 230, 255, 0.2));
    border: 2px solid rgba(52, 152, 219, 0.6);
    backdrop-filter: blur(5px);
}

.character-intro-modal[data-character="taki"] .character-intro-name {
    color: #a0d8ff;
    text-shadow: 0 0 15px rgba(52, 152, 219, 0.8);
}

.character-intro-modal[data-character="taki"] .character-intro-alias {
    color: #80c0e0;
}

.character-intro-modal[data-character="taki"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(15, 25, 40, 0.95), rgba(10, 20, 35, 0.98));
    border: 2px solid rgba(52, 152, 219, 0.4);
    backdrop-filter: blur(5px);
}

.character-intro-modal[data-character="taki"] .character-intro-dialogue::before {
    border-bottom-color: rgba(52, 152, 219, 0.4);
}

.character-intro-modal[data-character="taki"] .character-intro-typing span {
    background: rgba(52, 152, 219, 0.7);
}

.character-intro-modal[data-character="taki"] .character-intro-continue {
    border-color: rgba(52, 152, 219, 0.5);
    color: #80c0e0;
}

.character-intro-modal[data-character="taki"] .character-intro-continue:hover {
    background: rgba(52, 152, 219, 0.15);
    border-color: #3498db;
    box-shadow: 0 0 25px rgba(52, 152, 219, 0.4);
}

.character-intro-modal[data-character="taki"] .character-intro-dot.active {
    background: #3498db;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.8);
}

/* ============================================
   JUICE - Rainbow Effect
   Chaotic, colorful, shifting hues
   ============================================ */
.character-intro-modal[data-character="juice"] .character-intro-backdrop {
    background:
        radial-gradient(ellipse at center, rgba(243, 156, 18, 0.15) 0%, transparent 50%),
        rgba(0, 0, 0, 0.95);
    animation: juiceBackdropShift 5s ease-in-out infinite;
}

@keyframes juiceBackdropShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(30deg); }
}

.character-intro-modal[data-character="juice"] .character-intro-effect {
    background:
        conic-gradient(from 0deg,
            rgba(255, 0, 0, 0.3),
            rgba(255, 165, 0, 0.3),
            rgba(255, 255, 0, 0.3),
            rgba(0, 255, 0, 0.3),
            rgba(0, 255, 255, 0.3),
            rgba(0, 0, 255, 0.3),
            rgba(255, 0, 255, 0.3),
            rgba(255, 0, 0, 0.3));
    filter: blur(30px);
    animation: juiceRainbowSpin 6s linear infinite;
}

@keyframes juiceRainbowSpin {
    from { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    to { transform: rotate(360deg) scale(1); }
}

/* Confetti-like particles */
.character-intro-modal[data-character="juice"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255, 0, 0, 0.8) 0%, transparent 4px),
        radial-gradient(circle at 35% 75%, rgba(255, 165, 0, 0.8) 0%, transparent 3px),
        radial-gradient(circle at 55% 15%, rgba(255, 255, 0, 0.8) 0%, transparent 3.5px),
        radial-gradient(circle at 75% 65%, rgba(0, 255, 0, 0.8) 0%, transparent 4px),
        radial-gradient(circle at 85% 35%, rgba(0, 255, 255, 0.8) 0%, transparent 3px),
        radial-gradient(circle at 25% 55%, rgba(0, 0, 255, 0.8) 0%, transparent 3.5px),
        radial-gradient(circle at 65% 85%, rgba(255, 0, 255, 0.8) 0%, transparent 4px);
    animation: juiceConfetti 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes juiceConfetti {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-5px) rotate(2deg);
        opacity: 0.9;
    }
    50% {
        transform: translateY(5px) rotate(-2deg);
        opacity: 0.7;
    }
    75% {
        transform: translateY(-3px) rotate(1deg);
        opacity: 1;
    }
}

.character-intro-modal[data-character="juice"] .character-intro-avatar {
    border-color: #f39c12;
    box-shadow:
        0 0 40px rgba(243, 156, 18, 0.5),
        0 0 80px rgba(255, 100, 200, 0.3);
    animation: juiceAvatarHue 4s linear infinite;
}

@keyframes juiceAvatarHue {
    0% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(30deg) brightness(1.1); }
    100% { filter: hue-rotate(0deg) brightness(1); }
}

.character-intro-modal[data-character="juice"] .character-intro-nametag {
    background: linear-gradient(135deg,
        rgba(255, 100, 100, 0.3),
        rgba(255, 200, 100, 0.3),
        rgba(100, 255, 100, 0.3),
        rgba(100, 200, 255, 0.3));
    border: 2px solid rgba(243, 156, 18, 0.7);
    animation: juiceNametagShift 3s linear infinite;
}

@keyframes juiceNametagShift {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(60deg); }
}

.character-intro-modal[data-character="juice"] .character-intro-name {
    color: #ffd700;
    text-shadow:
        0 0 10px rgba(255, 100, 100, 0.8),
        0 0 20px rgba(100, 255, 100, 0.5);
    animation: juiceNameColor 2s linear infinite;
}

@keyframes juiceNameColor {
    0%, 100% { color: #ffd700; }
    33% { color: #ff6b6b; }
    66% { color: #4ecdc4; }
}

.character-intro-modal[data-character="juice"] .character-intro-alias {
    color: #ffcc80;
}

.character-intro-modal[data-character="juice"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(30, 20, 10, 0.95), rgba(20, 15, 25, 0.98));
    border: 2px solid rgba(243, 156, 18, 0.5);
}

.character-intro-modal[data-character="juice"] .character-intro-dialogue::before {
    border-bottom-color: rgba(243, 156, 18, 0.5);
}

.character-intro-modal[data-character="juice"] .character-intro-typing span {
    background: rgba(243, 156, 18, 0.7);
    animation: juiceTypingColor 1.4s ease-in-out infinite;
}

.character-intro-modal[data-character="juice"] .character-intro-typing span:nth-child(1) { animation-delay: 0s; }
.character-intro-modal[data-character="juice"] .character-intro-typing span:nth-child(2) { animation-delay: 0.2s; }
.character-intro-modal[data-character="juice"] .character-intro-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes juiceTypingColor {
    0%, 100% { background: rgba(255, 100, 100, 0.7); }
    33% { background: rgba(100, 255, 100, 0.7); }
    66% { background: rgba(100, 100, 255, 0.7); }
}

.character-intro-modal[data-character="juice"] .character-intro-continue {
    border-color: rgba(243, 156, 18, 0.5);
    color: #ffcc80;
}

.character-intro-modal[data-character="juice"] .character-intro-continue:hover {
    background: rgba(243, 156, 18, 0.2);
    border-color: #f39c12;
    box-shadow: 0 0 25px rgba(243, 156, 18, 0.5);
}

.character-intro-modal[data-character="juice"] .character-intro-dot.active {
    background: #f39c12;
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.8);
    animation: juiceDotColor 1s linear infinite;
}

@keyframes juiceDotColor {
    0%, 100% { background: #ff6b6b; }
    33% { background: #4ecdc4; }
    66% { background: #f39c12; }
}

/* ============================================
   NOVA - Electric Effect
   Lightning, storms, teal/white
   ============================================ */
.character-intro-modal[data-character="nova"] .character-intro-backdrop {
    background:
        radial-gradient(ellipse at center, rgba(26, 188, 156, 0.2) 0%, transparent 60%),
        rgba(0, 5, 15, 0.98);
}

.character-intro-modal[data-character="nova"] .character-intro-effect {
    background: radial-gradient(circle, rgba(26, 188, 156, 0.4) 0%, transparent 60%);
    filter: blur(20px);
    animation: novaElectricPulse 0.5s ease-in-out infinite;
}

@keyframes novaElectricPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

/* Lightning bolts */
.character-intro-modal[data-character="nova"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, transparent 45%, rgba(26, 188, 156, 0.8) 45%, rgba(26, 188, 156, 0.8) 45.5%, transparent 45.5%),
        linear-gradient(45deg, transparent 60%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.6) 60.3%, transparent 60.3%),
        linear-gradient(90deg, transparent 30%, rgba(26, 188, 156, 0.5) 30%, rgba(26, 188, 156, 0.5) 30.2%, transparent 30.2%);
    animation: novaLightning 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

@keyframes novaLightning {
    0%, 89%, 91%, 93%, 95%, 100% { opacity: 0; }
    90%, 92%, 94% { opacity: 1; }
}

.character-intro-modal[data-character="nova"] .character-intro-avatar {
    border-color: #1abc9c;
    box-shadow:
        0 0 30px rgba(26, 188, 156, 0.6),
        0 0 60px rgba(255, 255, 255, 0.2),
        inset 0 0 20px rgba(26, 188, 156, 0.2);
    animation: novaAvatarSpark 2s ease-in-out infinite;
}

@keyframes novaAvatarSpark {
    0%, 90%, 100% {
        filter: brightness(1);
        box-shadow: 0 0 30px rgba(26, 188, 156, 0.6), 0 0 60px rgba(255, 255, 255, 0.2);
    }
    92%, 94%, 96% {
        filter: brightness(1.3);
        box-shadow: 0 0 50px rgba(26, 188, 156, 0.9), 0 0 100px rgba(255, 255, 255, 0.5);
    }
    93%, 95% {
        filter: brightness(1);
    }
}

.character-intro-modal[data-character="nova"] .character-intro-nametag {
    background: linear-gradient(135deg, rgba(26, 188, 156, 0.3), rgba(100, 220, 200, 0.2));
    border: 2px solid rgba(26, 188, 156, 0.7);
}

.character-intro-modal[data-character="nova"] .character-intro-name {
    color: #1abc9c;
    text-shadow: 0 0 15px rgba(26, 188, 156, 0.9);
}

.character-intro-modal[data-character="nova"] .character-intro-alias {
    color: #80d8c8;
}

.character-intro-modal[data-character="nova"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(10, 25, 25, 0.95), rgba(5, 15, 20, 0.98));
    border: 2px solid rgba(26, 188, 156, 0.4);
}

.character-intro-modal[data-character="nova"] .character-intro-dialogue::before {
    border-bottom-color: rgba(26, 188, 156, 0.4);
}

.character-intro-modal[data-character="nova"] .character-intro-typing span {
    background: rgba(26, 188, 156, 0.7);
}

.character-intro-modal[data-character="nova"] .character-intro-continue {
    border-color: rgba(26, 188, 156, 0.5);
    color: #80d8c8;
}

.character-intro-modal[data-character="nova"] .character-intro-continue:hover {
    background: rgba(26, 188, 156, 0.15);
    border-color: #1abc9c;
    box-shadow: 0 0 25px rgba(26, 188, 156, 0.5);
}

.character-intro-modal[data-character="nova"] .character-intro-dot.active {
    background: #1abc9c;
    box-shadow: 0 0 10px rgba(26, 188, 156, 0.8);
}

/* ============================================
   MACE - Poison Effect
   Toxic, venomous, green/dark
   ============================================ */
.character-intro-modal[data-character="mace"] .character-intro-backdrop {
    background:
        radial-gradient(ellipse at bottom, rgba(39, 174, 96, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at top, rgba(0, 50, 0, 0.3) 0%, transparent 40%),
        rgba(0, 5, 0, 0.98);
}

.character-intro-modal[data-character="mace"] .character-intro-effect {
    background: radial-gradient(circle, rgba(39, 174, 96, 0.4) 0%, transparent 60%);
    filter: blur(25px);
    animation: macePoisonBubble 4s ease-in-out infinite;
}

@keyframes macePoisonBubble {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    25% {
        transform: scale(1.05) translateY(-5px);
        opacity: 0.7;
    }
    50% {
        transform: scale(0.98);
        opacity: 0.4;
    }
    75% {
        transform: scale(1.03) translateY(5px);
        opacity: 0.6;
    }
}

/* Toxic bubbles/drip effect */
.character-intro-modal[data-character="mace"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(39, 174, 96, 0.8) 0%, transparent 8px),
        radial-gradient(circle at 80% 85%, rgba(100, 200, 100, 0.6) 0%, transparent 6px),
        radial-gradient(circle at 50% 90%, rgba(39, 174, 96, 0.7) 0%, transparent 10px),
        radial-gradient(circle at 30% 70%, rgba(150, 220, 150, 0.5) 0%, transparent 5px),
        radial-gradient(circle at 70% 75%, rgba(39, 174, 96, 0.4) 0%, transparent 7px);
    animation: maceBubbles 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes maceBubbles {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-30px);
        opacity: 0.9;
    }
}

/* Dripping effect overlay */
.character-intro-modal[data-character="mace"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
        transparent 0%,
        transparent 85%,
        rgba(39, 174, 96, 0.1) 90%,
        rgba(39, 174, 96, 0.2) 95%,
        rgba(39, 174, 96, 0.3) 100%);
    pointer-events: none;
    z-index: 0;
}

.character-intro-modal[data-character="mace"] .character-intro-avatar {
    border-color: #27ae60;
    box-shadow:
        0 0 30px rgba(39, 174, 96, 0.6),
        0 0 60px rgba(100, 200, 100, 0.3),
        inset 0 0 20px rgba(39, 174, 96, 0.3);
    filter: saturate(1.1) hue-rotate(-10deg);
}

.character-intro-modal[data-character="mace"] .character-intro-nametag {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.4), rgba(0, 100, 50, 0.3));
    border: 2px solid rgba(39, 174, 96, 0.7);
}

.character-intro-modal[data-character="mace"] .character-intro-name {
    color: #2ecc71;
    text-shadow: 0 0 15px rgba(39, 174, 96, 0.9);
}

.character-intro-modal[data-character="mace"] .character-intro-alias {
    color: #80c896;
}

.character-intro-modal[data-character="mace"] .character-intro-dialogue {
    background: linear-gradient(135deg, rgba(10, 25, 15, 0.95), rgba(5, 15, 10, 0.98));
    border: 2px solid rgba(39, 174, 96, 0.4);
}

.character-intro-modal[data-character="mace"] .character-intro-dialogue::before {
    border-bottom-color: rgba(39, 174, 96, 0.4);
}

.character-intro-modal[data-character="mace"] .character-intro-typing span {
    background: rgba(39, 174, 96, 0.7);
}

.character-intro-modal[data-character="mace"] .character-intro-continue {
    border-color: rgba(39, 174, 96, 0.5);
    color: #80c896;
}

.character-intro-modal[data-character="mace"] .character-intro-continue:hover {
    background: rgba(39, 174, 96, 0.15);
    border-color: #27ae60;
    box-shadow: 0 0 25px rgba(39, 174, 96, 0.5);
}

.character-intro-modal[data-character="mace"] .character-intro-dot.active {
    background: #27ae60;
    box-shadow: 0 0 10px rgba(39, 174, 96, 0.8);
}

/* ============================================
   CINEMATIC MODE - VHS / Retro Effects
   ============================================ */

/* VHS Overlay Effect */
.character-intro-modal.cinematic .cinematic-vhs-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    animation: vhsFlicker 0.1s infinite;
    opacity: 0.3;
    z-index: 2;
}

/* Scanlines */
.character-intro-modal.cinematic .cinematic-scanlines {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.2;
    z-index: 3;
}

@keyframes vhsFlicker {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.4; }
}

/* Skip Button */
.character-intro-modal.cinematic .cinematic-skip {
    position: absolute;
    top: 2rem;
    right: 2rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: 100;
}

.character-intro-modal.cinematic .cinematic-skip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: white;
}

.character-intro-modal.cinematic .cinematic-skip .skip-key {
    opacity: 0.5;
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

/* Progress Bar */
.character-intro-modal.cinematic .cinematic-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.character-intro-modal.cinematic .cinematic-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary, #ff6b6b), var(--secondary, #4ecdc4));
    transition: width 0.5s ease;
    width: 0;
}

/* Intro Stage (location text) */
.character-intro-modal.cinematic .cinematic-intro-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: opacity 0.5s ease;
}

.character-intro-modal.cinematic .cinematic-intro-stage.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Location Text */
.character-intro-modal.cinematic .cinematic-location {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.character-intro-modal.cinematic .cinematic-location.visible {
    opacity: 1;
    transform: translateY(0);
}

.character-intro-modal.cinematic .cinematic-location.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.character-intro-modal.cinematic .location-text {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 8px;
    color: var(--primary, #ff6b6b);
    text-shadow: 0 0 30px var(--primary, #ff6b6b);
    margin-bottom: 1rem;
}

.character-intro-modal.cinematic .location-subtext {
    font-size: 1.5rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(255, 255, 255, 0.8);
}

/* Character Content */
.character-intro-modal.cinematic .character-intro-content {
    position: relative;
    z-index: 20;
    opacity: 0;
    transform: scale(0.8) translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.character-intro-modal.cinematic .character-intro-content.hidden {
    display: none;
}

.character-intro-modal.cinematic .character-intro-content.entering {
    display: flex;
    opacity: 1;
    transform: scale(1) translateY(0);
}

.character-intro-modal.cinematic .character-intro-content.entered {
    animation: characterIdle 3s ease-in-out infinite;
}

@keyframes characterIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Character Glow Effect */
.character-intro-modal.cinematic .character-intro-glow {
    position: absolute;
    inset: -50px;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.3) 0%, transparent 70%);
    filter: blur(30px);
    animation: glowPulse 2s ease-in-out infinite;
    z-index: 0;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

/* Speaker Name */
.character-intro-modal.cinematic .character-intro-speaker {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

/* Dialogue Indicator */
.character-intro-modal.cinematic .character-intro-indicator {
    position: absolute;
    bottom: -1.5rem;
    right: 0;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    animation: indicatorBlink 1.5s ease-in-out infinite;
}

@keyframes indicatorBlink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Skipping Animation */
.character-intro-modal.cinematic.skipping {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Character-specific glow colors */
.character-intro-modal.cinematic[data-character="ghost"] .character-intro-glow {
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.2) 0%, rgba(255, 0, 255, 0.2) 100%);
}

.character-intro-modal.cinematic[data-character="kenza"] .character-intro-glow {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.3) 0%, transparent 70%);
}

.character-intro-modal.cinematic[data-character="taki"] .character-intro-glow {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.3) 0%, transparent 70%);
}

.character-intro-modal.cinematic[data-character="iron"] .character-intro-glow {
    background: radial-gradient(circle, rgba(44, 62, 80, 0.3) 0%, transparent 70%);
}

.character-intro-modal.cinematic[data-character="juice"] .character-intro-glow {
    background: conic-gradient(from 0deg, rgba(255, 0, 0, 0.2), rgba(255, 165, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.2), rgba(0, 0, 255, 0.2), rgba(255, 0, 255, 0.2), rgba(255, 0, 0, 0.2));
    filter: blur(40px);
    animation: juiceGlowSpin 6s linear infinite;
}

@keyframes juiceGlowSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.character-intro-modal.cinematic[data-character="nova"] .character-intro-glow {
    background: radial-gradient(circle, rgba(26, 188, 156, 0.3) 0%, transparent 70%);
}

.character-intro-modal.cinematic[data-character="mace"] .character-intro-glow {
    background: radial-gradient(circle, rgba(39, 174, 96, 0.3) 0%, transparent 70%);
}

/* Character-specific location text colors */
.character-intro-modal.cinematic[data-character="ghost"] .location-text {
    color: #0ff;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
}

.character-intro-modal.cinematic[data-character="kenza"] .location-text {
    color: #e74c3c;
    text-shadow: 0 0 30px rgba(231, 76, 60, 0.8);
}

.character-intro-modal.cinematic[data-character="taki"] .location-text {
    color: #3498db;
    text-shadow: 0 0 30px rgba(52, 152, 219, 0.8);
}

.character-intro-modal.cinematic[data-character="iron"] .location-text {
    color: #a0b0c0;
    text-shadow: 0 0 30px rgba(160, 176, 192, 0.5);
}

.character-intro-modal.cinematic[data-character="juice"] .location-text {
    color: #f39c12;
    text-shadow: 0 0 30px rgba(243, 156, 18, 0.8);
    animation: juiceLocationColor 2s linear infinite;
}

@keyframes juiceLocationColor {
    0%, 100% { color: #ffd700; }
    33% { color: #ff6b6b; }
    66% { color: #4ecdc4; }
}

.character-intro-modal.cinematic[data-character="nova"] .location-text {
    color: #1abc9c;
    text-shadow: 0 0 30px rgba(26, 188, 156, 0.8);
}

.character-intro-modal.cinematic[data-character="mace"] .location-text {
    color: #27ae60;
    text-shadow: 0 0 30px rgba(39, 174, 96, 0.8);
}

/* Responsive cinematic mode */
@media (max-width: 600px) {
    .character-intro-modal.cinematic .cinematic-skip {
        top: 1rem;
        right: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .character-intro-modal.cinematic .location-text {
        font-size: 0.85rem;
        letter-spacing: 4px;
    }

    .character-intro-modal.cinematic .location-subtext {
        font-size: 1.2rem;
    }

    .character-intro-modal.cinematic .character-intro-indicator {
        font-size: 0.6rem;
    }
}

/* ============================================
   Animation for modal entrance
   ============================================ */
.character-intro-modal.active .character-intro-content {
    animation: contentEnter 1s ease-out forwards;
}

/* Override for cinematic mode */
.character-intro-modal.cinematic.active .character-intro-content {
    animation: none;
}

@keyframes contentEnter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   Modal closing animation
   ============================================ */
.character-intro-modal.closing {
    animation: modalFadeOut 0.5s ease-out forwards;
}

@keyframes modalFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.character-intro-modal.closing .character-intro-content {
    animation: contentExit 0.5s ease-out forwards;
}

@keyframes contentExit {
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

/* ============================================
   Legendary Color Acquisition
   ============================================ */
.character-intro-legendary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 180, 0, 0.05));
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 15px;
    animation: legendaryReveal 0.8s ease-out forwards;
    transform-origin: center;
}

.character-intro-legendary.hidden {
    display: none;
}

@keyframes legendaryReveal {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.character-intro-legendary.legendary-acquired {
    animation: legendaryPulse 2s ease-in-out infinite;
}

@keyframes legendaryPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    }
}

.legendary-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.3);
    }
}

.legendary-info {
    flex: 1;
}

.legendary-name {
    font-size: 1.3rem;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    margin-bottom: 0.3rem;
}

.legendary-finish {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 215, 0, 0.7);
    padding: 2px 8px;
    background: rgba(255, 215, 0, 0.15);
    border-radius: 4px;
    display: inline-block;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 600px) {
    .character-intro-content {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .character-intro-avatar-wrap {
        width: 140px;
        height: 140px;
    }

    .character-intro-dialogue {
        padding: 1.5rem;
    }

    .character-intro-text {
        font-size: 0.95rem;
        min-height: 80px;
    }

    .character-intro-continue {
        padding: 12px 35px;
        font-size: 0.85rem;
    }

    .character-intro-legendary {
        flex-direction: column;
        text-align: center;
        padding: 1rem 1.5rem;
        gap: 1rem;
    }

    .legendary-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .legendary-name {
        font-size: 1.1rem;
    }
}

/* ============================================
   iPad / Tablet Responsive (768px - 1200px)
   ============================================ */
@media (max-width: 1200px) and (min-width: 601px) {
    .character-intro-content {
        padding: 1.5rem;
        gap: 1rem;
        max-width: 380px;
    }

    .character-intro-avatar-wrap {
        width: 120px;
        height: 120px;
    }

    .character-intro-effect {
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }

    .character-intro-dialogue {
        padding: 1.25rem;
        max-width: 350px;
    }

    .character-intro-text {
        font-size: 0.9rem;
        line-height: 1.6;
        min-height: 60px;
    }

    .character-intro-nametag {
        padding: 6px 16px;
        bottom: -15px;
    }

    .character-intro-name {
        font-size: 1rem;
        letter-spacing: 2px;
    }

    .character-intro-alias {
        font-size: 0.65rem;
    }

    .character-intro-continue {
        padding: 10px 30px;
        font-size: 0.8rem;
    }

    /* Cinematic mode on iPad */
    .character-intro-modal.cinematic .cinematic-skip {
        top: 1rem;
        right: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }

    .character-intro-modal.cinematic .location-text {
        font-size: 0.9rem;
        letter-spacing: 4px;
    }

    .character-intro-modal.cinematic .location-subtext {
        font-size: 0.75rem;
    }

    .character-intro-modal.cinematic .cinematic-character {
        max-width: 200px;
    }

    .character-intro-modal.cinematic .dialogue-text {
        font-size: 0.95rem;
        max-width: 400px;
    }
}

/* ============================================
   QUEST REWARD MODAL
   Celebration modal for completed quests
   ============================================ */
.quest-reward-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

.quest-reward-modal.active {
    opacity: 1;
    visibility: visible;
}

.quest-reward-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.98) 100%);
}

.quest-reward-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem;
    max-width: 450px;
    width: 100%;
    z-index: 1;
    animation: questRewardEnter 0.8s ease-out forwards;
}

@keyframes questRewardEnter {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Success Banner */
.quest-reward-banner {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 180, 0, 0.1));
    border: 2px solid rgba(255, 215, 0, 0.6);
    border-radius: 30px;
    padding: 0.75rem 2rem;
    animation: bannerPulse 2s ease-in-out infinite;
}

@keyframes bannerPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
    }
}

.quest-reward-banner-text {
    color: #ffd700;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* Avatar */
.quest-reward-avatar-wrap {
    position: relative;
    width: 120px;
    height: 120px;
}

.quest-reward-effect {
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    pointer-events: none;
}

.quest-reward-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid;
    position: relative;
    z-index: 1;
}

/* Character Name */
.quest-reward-character-name {
    font-size: 1.3rem;
    font-weight: bold;
    letter-spacing: 2px;
}

/* Quest Title */
.quest-reward-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.quest-title-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
}

.quest-title-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Dialogue */
.quest-reward-dialogue {
    background: rgba(10, 10, 20, 0.9);
    border-radius: 12px;
    padding: 1.5rem;
    width: 100%;
    position: relative;
}

.quest-reward-dialogue::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
}

.quest-reward-text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.7;
    text-align: center;
    font-style: italic;
    min-height: 50px;
}

/* Rewards Section */
.quest-reward-rewards {
    width: 100%;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 12px;
    padding: 1rem;
}

.quest-reward-rewards-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #ffd700;
    text-align: center;
    margin-bottom: 0.75rem;
}

.quest-reward-rewards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.quest-reward-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    animation: rewardItemEnter 0.5s ease-out forwards;
    opacity: 0;
}

.quest-reward-item:nth-child(1) { animation-delay: 0.3s; }
.quest-reward-item:nth-child(2) { animation-delay: 0.5s; }
.quest-reward-item:nth-child(3) { animation-delay: 0.7s; }

@keyframes rewardItemEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.quest-reward-item .reward-icon {
    font-size: 1rem;
    font-weight: bold;
}

.quest-reward-item .reward-value {
    font-size: 0.9rem;
    font-weight: 600;
}

/* XP Reward */
.quest-reward-xp .reward-icon {
    background: linear-gradient(135deg, #ffd700, #ff9500);
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
}

.quest-reward-xp .reward-value {
    color: #ffd700;
}

/* Trust Reward */
.quest-reward-trust .reward-icon {
    color: #ff6b6b;
}

.quest-reward-trust .reward-value {
    color: #ff8888;
}

.quest-reward-trust.negative .reward-icon {
    color: #27ae60;
}

.quest-reward-trust.negative .reward-value {
    color: #2ecc71;
}

/* Unlock Reward */
.quest-reward-unlock .reward-icon {
    color: #4ecdc4;
}

.quest-reward-unlock .reward-value {
    color: #4ecdc4;
}

/* Claim Button */
.quest-reward-claim-btn {
    background: linear-gradient(135deg, #ffd700, #ff9500);
    border: none;
    padding: 1rem 3rem;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #000;
    animation: claimBtnEnter 0.8s ease-out 1s both;
}

@keyframes claimBtnEnter {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.quest-reward-claim-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}

/* Modal closing animation */
.quest-reward-modal.closing {
    animation: questRewardFadeOut 0.5s ease-out forwards;
}

@keyframes questRewardFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

.quest-reward-modal.closing .quest-reward-content {
    animation: questRewardExit 0.5s ease-out forwards;
}

@keyframes questRewardExit {
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

/* ============================================
   Character-specific Quest Reward Styles
   ============================================ */

/* RAZE */
.quest-reward-modal[data-character="raze"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at bottom, rgba(255, 107, 107, 0.2) 0%, transparent 60%),
                radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.98) 100%);
}

.quest-reward-modal[data-character="raze"] .quest-reward-effect {
    background: radial-gradient(circle, rgba(255, 107, 107, 0.4) 0%, transparent 70%);
    filter: blur(20px);
    animation: razeRewardPulse 2s ease-in-out infinite;
}

@keyframes razeRewardPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.quest-reward-modal[data-character="raze"] .quest-reward-avatar {
    border-color: #ff6b6b;
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
}

.quest-reward-modal[data-character="raze"] .quest-reward-dialogue {
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.quest-reward-modal[data-character="raze"] .quest-reward-dialogue::before {
    border-bottom-color: rgba(255, 107, 107, 0.3);
}

/* GHOST */
.quest-reward-modal[data-character="ghost"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at center, rgba(155, 89, 182, 0.15) 0%, rgba(0, 0, 0, 0.98) 100%);
}

.quest-reward-modal[data-character="ghost"] .quest-reward-effect {
    background: linear-gradient(45deg, rgba(0, 255, 255, 0.2) 0%, rgba(255, 0, 255, 0.2) 100%);
    filter: blur(20px);
    animation: ghostRewardGlitch 3s ease-in-out infinite;
}

@keyframes ghostRewardGlitch {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05) translateX(3px); opacity: 0.7; }
}

.quest-reward-modal[data-character="ghost"] .quest-reward-avatar {
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

.quest-reward-modal[data-character="ghost"] .quest-reward-dialogue {
    border: 1px solid rgba(0, 255, 255, 0.3);
}

/* KENZA */
.quest-reward-modal[data-character="kenza"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at bottom, rgba(231, 76, 60, 0.2) 0%, transparent 50%),
                rgba(0, 0, 0, 0.95);
}

.quest-reward-modal[data-character="kenza"] .quest-reward-effect {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.4) 0%, transparent 70%);
    filter: blur(20px);
}

.quest-reward-modal[data-character="kenza"] .quest-reward-avatar {
    border-color: #e74c3c;
    box-shadow: 0 0 30px rgba(231, 76, 60, 0.5);
}

.quest-reward-modal[data-character="kenza"] .quest-reward-dialogue {
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* TAKI */
.quest-reward-modal[data-character="taki"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at top, rgba(52, 152, 219, 0.15) 0%, transparent 50%),
                rgba(5, 10, 20, 0.98);
}

.quest-reward-modal[data-character="taki"] .quest-reward-effect {
    background: radial-gradient(circle, rgba(52, 152, 219, 0.3) 0%, transparent 70%);
    filter: blur(20px);
}

.quest-reward-modal[data-character="taki"] .quest-reward-avatar {
    border-color: #3498db;
    box-shadow: 0 0 30px rgba(52, 152, 219, 0.5);
}

.quest-reward-modal[data-character="taki"] .quest-reward-dialogue {
    border: 1px solid rgba(52, 152, 219, 0.3);
}

/* JUICE */
.quest-reward-modal[data-character="juice"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at center, rgba(243, 156, 18, 0.15) 0%, transparent 50%),
                rgba(0, 0, 0, 0.95);
}

.quest-reward-modal[data-character="juice"] .quest-reward-effect {
    background: conic-gradient(from 0deg, rgba(255, 0, 0, 0.2), rgba(255, 165, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(0, 255, 0, 0.2), rgba(0, 255, 255, 0.2), rgba(255, 0, 0, 0.2));
    filter: blur(25px);
    animation: juiceRewardSpin 6s linear infinite;
}

@keyframes juiceRewardSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.quest-reward-modal[data-character="juice"] .quest-reward-avatar {
    border-color: #f39c12;
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.5);
}

.quest-reward-modal[data-character="juice"] .quest-reward-dialogue {
    border: 1px solid rgba(243, 156, 18, 0.3);
}

/* IRON */
.quest-reward-modal[data-character="iron"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at center, rgba(44, 62, 80, 0.2) 0%, transparent 70%),
                rgba(0, 0, 0, 0.98);
}

.quest-reward-modal[data-character="iron"] .quest-reward-effect {
    background: radial-gradient(circle, rgba(44, 62, 80, 0.4) 0%, transparent 70%);
    filter: blur(20px);
}

.quest-reward-modal[data-character="iron"] .quest-reward-avatar {
    border-color: #2c3e50;
    box-shadow: 0 0 30px rgba(44, 62, 80, 0.5);
}

.quest-reward-modal[data-character="iron"] .quest-reward-dialogue {
    border: 1px solid rgba(44, 62, 80, 0.3);
}

/* NOVA */
.quest-reward-modal[data-character="nova"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at center, rgba(26, 188, 156, 0.15) 0%, transparent 60%),
                rgba(0, 5, 15, 0.98);
}

.quest-reward-modal[data-character="nova"] .quest-reward-effect {
    background: radial-gradient(circle, rgba(26, 188, 156, 0.4) 0%, transparent 70%);
    filter: blur(20px);
    animation: novaRewardPulse 0.5s ease-in-out infinite;
}

@keyframes novaRewardPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

.quest-reward-modal[data-character="nova"] .quest-reward-avatar {
    border-color: #1abc9c;
    box-shadow: 0 0 30px rgba(26, 188, 156, 0.5);
}

.quest-reward-modal[data-character="nova"] .quest-reward-dialogue {
    border: 1px solid rgba(26, 188, 156, 0.3);
}

/* MACE */
.quest-reward-modal[data-character="mace"] .quest-reward-backdrop {
    background: radial-gradient(ellipse at bottom, rgba(39, 174, 96, 0.2) 0%, transparent 50%),
                rgba(0, 5, 0, 0.98);
}

.quest-reward-modal[data-character="mace"] .quest-reward-effect {
    background: radial-gradient(circle, rgba(39, 174, 96, 0.4) 0%, transparent 70%);
    filter: blur(20px);
}

.quest-reward-modal[data-character="mace"] .quest-reward-avatar {
    border-color: #27ae60;
    box-shadow: 0 0 30px rgba(39, 174, 96, 0.5);
}

.quest-reward-modal[data-character="mace"] .quest-reward-dialogue {
    border: 1px solid rgba(39, 174, 96, 0.3);
}

.quest-reward-modal[data-character="mace"] .quest-reward-banner {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(0, 100, 50, 0.1));
    border-color: rgba(39, 174, 96, 0.6);
}

.quest-reward-modal[data-character="mace"] .quest-reward-banner-text {
    color: #2ecc71;
    text-shadow: 0 0 10px rgba(39, 174, 96, 0.5);
}

/* Responsive Quest Reward */
@media (max-width: 600px) {
    .quest-reward-content {
        padding: 1.5rem;
        gap: 1rem;
    }

    .quest-reward-avatar-wrap {
        width: 100px;
        height: 100px;
    }

    .quest-reward-banner {
        padding: 0.5rem 1.5rem;
    }

    .quest-reward-banner-text {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }

    .quest-reward-dialogue {
        padding: 1rem;
    }

    .quest-reward-text {
        font-size: 0.9rem;
        min-height: 40px;
    }

    .quest-reward-claim-btn {
        padding: 0.75rem 2rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   VOTE GATE MODAL
   Blocks access until daily votes are complete
   ============================================ */

.vote-gate-modal {
    z-index: 4000;
}

.vote-gate-content {
    max-width: 480px;
}

/* Fix avatar/nametag overlap in vote gate modal */
.vote-gate-modal .character-intro-avatar-wrap {
    margin-bottom: 30px;
}

.vote-gate-modal .character-intro-nametag {
    bottom: -30px;
}

/* Vote Progress Section */
.vote-gate-progress {
    width: 100%;
    background: rgba(255, 107, 107, 0.1);
    border: 2px solid rgba(255, 107, 107, 0.4);
    border-radius: 15px;
    padding: 1.25rem;
    animation: voteProgressEnter 0.8s ease-out 0.5s both;
}

@keyframes voteProgressEnter {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.vote-gate-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.vote-gate-icon {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.vote-gate-title {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 600;
}

.vote-gate-bar-container {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.vote-gate-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ff4757, #ff6b6b);
    background-size: 200% 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    animation: voteBarShimmer 2s linear infinite;
}

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

.vote-gate-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vote-gate-count {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.vote-gate-remaining {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Locked Modes Badges */
.vote-gate-locked-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.locked-mode {
    background: rgba(255, 71, 87, 0.2);
    border: 1px solid rgba(255, 71, 87, 0.5);
    color: #ff6b6b;
    padding: 0.35rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Vote Gate Action Buttons */
.vote-gate-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    animation: voteActionsEnter 0.8s ease-out 2s both;
}

@keyframes voteActionsEnter {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.vote-gate-btn {
    flex: 1;
    padding: 1rem 1.5rem;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid;
}

.vote-gate-btn.primary {
    background: linear-gradient(135deg, #ff6b6b, #ff4757);
    border-color: #ff6b6b;
    color: white;
}

.vote-gate-btn.primary:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
}

.vote-gate-btn.secondary {
    background: transparent;
    border-color: rgba(255, 107, 107, 0.5);
    color: #ff8888;
}

.vote-gate-btn.secondary:hover {
    background: rgba(255, 107, 107, 0.15);
    border-color: #ff6b6b;
}

/* Tutorial Mode Styles */
.vote-gate-modal.tutorial-mode .character-intro-content {
    max-width: 520px;
}

.tutorial-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 2px;
    box-shadow: 0 5px 20px rgba(78, 205, 196, 0.4);
    animation: tutorialBadgePulse 2s ease-in-out infinite;
}

@keyframes tutorialBadgePulse {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(78, 205, 196, 0.4);
    }
    50% {
        box-shadow: 0 5px 30px rgba(78, 205, 196, 0.7);
    }
}

.tutorial-dialogue {
    border-color: rgba(78, 205, 196, 0.4) !important;
}

/* Locked Card Overlay for Dashboard */
.game-mode-card.vote-locked {
    position: relative;
    cursor: not-allowed;
}

.game-mode-card.vote-locked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 10;
    pointer-events: none;
}

.game-mode-card.vote-locked .vote-lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.vote-unlock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: voteUnlockPulse 2s ease-in-out infinite;
}

@keyframes voteUnlockPulse {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(78, 205, 196, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 8px 30px rgba(78, 205, 196, 0.6);
        transform: scale(1.02);
    }
}

.vote-unlock-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 40px rgba(78, 205, 196, 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}

.vote-unlock-btn:active {
    transform: scale(0.98);
}

.vote-unlock-btn .unlock-icon {
    font-size: 1rem;
    font-weight: bold;
    color: white;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.vote-unlock-btn .unlock-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Responsive Vote Gate */
@media (max-width: 600px) {
    .vote-gate-content {
        padding: 1.5rem;
    }

    .vote-gate-progress {
        padding: 1rem;
    }

    .vote-gate-count {
        font-size: 1.25rem;
    }

    .vote-gate-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .vote-gate-btn {
        width: 100%;
        padding: 0.875rem 1.25rem;
    }

    .tutorial-badge {
        top: -12px;
        padding: 0.4rem 1rem;
        font-size: 0.7rem;
    }

    .vote-unlock-btn {
        padding: 0.75rem 1rem;
    }

    .vote-unlock-btn .unlock-icon {
        font-size: 0.85rem;
    }

    .vote-unlock-btn .unlock-text {
        font-size: 0.65rem;
    }
}