/* =============================================
   GUILD SYSTEM STYLES - Fantasy Theme
   ============================================= */

:root {
    --guild-primary: #fbbf24;
    --guild-secondary: #a855f7;
    --guild-accent: #22d3ee;
    --guild-dark: #0f172a;
    --guild-darker: #020617;
    --guild-card: #1e293b;
    --guild-border: rgba(251, 191, 36, 0.2);
    --guild-glow: rgba(251, 191, 36, 0.4);
    --guild-success: #22c55e;
    --guild-danger: #ef4444;
    --guild-atk: #ef4444;
    --guild-def: #3b82f6;
    --guild-spd: #22c55e;
}

/* Custom Scrollbar for Guild Modals */
.guild-modal-content::-webkit-scrollbar {
    width: 6px;
}

.guild-modal-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.guild-modal-content::-webkit-scrollbar-thumb {
    background: var(--guild-primary);
    border-radius: 3px;
}

.guild-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--guild-secondary);
}

/* Page Container */
.guild-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 20px 40px;
    position: relative;
    z-index: 1;
}

/* Floating Particles Background */
.guild-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, var(--guild-primary) 0%, transparent 70%);
    border-radius: 50%;
    bottom: -10px;
    animation: floatUp linear infinite;
    opacity: 0.6;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
    }
}

/* Page Header */
.guild-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
    border: 2px solid var(--guild-border);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.guild-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(251,191,36,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
    pointer-events: none;
}

.guild-header::after {
    content: '⚔️';
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 80px;
    opacity: 0.1;
    pointer-events: none;
}

.guild-header-content {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.guild-header-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--guild-primary), var(--guild-secondary));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: white;
    box-shadow: 0 8px 32px var(--guild-glow);
}

.guild-header-text h1 {
    margin: 0;
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--guild-primary), #fff, var(--guild-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px var(--guild-glow);
}

.guild-header-text p {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 1.1rem;
}

/* Shard Drop Timer */
.shard-drop-timer {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(34, 211, 238, 0.1));
    border: 2px solid var(--guild-secondary);
    border-radius: 16px;
    padding: 16px 24px;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.3);
}

.shard-drop-timer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.shard-drop-timer .timer-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--guild-secondary), #22d3ee);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(168, 85, 247, 0.7); }
}

.shard-drop-timer .timer-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.shard-drop-timer .timer-label {
    color: #94a3b8;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.timer-countdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.timer-countdown .time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 8px;
    min-width: 50px;
}

.timer-countdown .time-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 10px var(--guild-secondary);
}

.timer-countdown .time-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timer-countdown .time-separator {
    color: var(--guild-secondary);
    font-size: 1.5rem;
    font-weight: 700;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Treasury Claim Button */
.btn-treasury-claim {
    background: linear-gradient(135deg, #ffd700, #ff9800);
    color: #1a0a2e;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    animation: treasuryPulse 2s ease-in-out infinite;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

.btn-treasury-claim:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 30px rgba(255, 215, 0, 0.6);
}

.btn-treasury-claim:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    animation: none;
    transform: none;
    background: linear-gradient(135deg, #666, #555);
    box-shadow: none;
    color: #ccc;
}

@keyframes treasuryPulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 4px 35px rgba(255, 215, 0, 0.7); }
}

.treasury-estimate {
    font-size: 0.8rem;
    color: #ffd700;
    font-weight: 600;
    text-align: center;
    margin-top: 4px;
}

#treasury-claim-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 2;
}

.shard-drop-timer.treasury-ready {
    border-color: #ffd700;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 152, 0, 0.15));
    box-shadow: 0 4px 30px rgba(255, 215, 0, 0.4);
}

.shard-drop-timer.treasury-ready .timer-icon {
    background: linear-gradient(135deg, #ffd700, #ff9800);
    animation: treasuryIconPulse 1.5s ease-in-out infinite;
}

@keyframes treasuryIconPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4); transform: scale(1); }
    50% { box-shadow: 0 4px 30px rgba(255, 215, 0, 0.8); transform: scale(1.1); }
}

/* Mission Card Prize Badge */

/* =============================================
   TREASURY REWARD MODAL
   ============================================= */
.treasury-reward-content {
    background: linear-gradient(135deg, #1a0a2e 0%, #1e1b4b 40%, #0f172a 100%);
    border: 2px solid #ffd700;
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(255, 215, 0, 0.3), 0 0 60px rgba(168, 85, 247, 0.2);
    animation: treasuryModalAppear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes treasuryModalAppear {
    0% { transform: scale(0.5) translateY(40px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.treasury-reward-inner {
    padding: 40px 32px 32px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.treasury-reward-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, rgba(168, 85, 247, 0.1) 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: treasuryGlowPulse 3s ease-in-out infinite;
}

@keyframes treasuryGlowPulse {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

.treasury-reward-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #ffd700, #ff9800);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: #1a0a2e;
    box-shadow: 0 8px 40px rgba(255, 215, 0, 0.5);
    animation: treasuryIconBounce 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes treasuryIconBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-5deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
}

.treasury-reward-title {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #fff, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 4px;
    letter-spacing: 1px;
}

.treasury-reward-subtitle {
    color: #94a3b8;
    font-size: 0.95rem;
    margin: 0 0 24px;
}

.treasury-reward-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 28px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(168, 85, 247, 0.08));
    border: 1px solid rgba(255, 215, 0, 0.25);
    border-radius: 16px;
}

.treasury-reward-number {
    font-size: 3rem;
    font-weight: 900;
    color: #ffd700;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
    font-family: 'Courier New', monospace;
    line-height: 1;
}

.treasury-reward-label {
    font-size: 0.85rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.treasury-reward-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
}

.treasury-detail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.treasury-detail-item i {
    font-size: 1rem;
    color: #a855f7;
}

.treasury-detail-item span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.treasury-detail-item small {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.treasury-detail-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.3), transparent);
}

.treasury-reward-dismiss {
    background: linear-gradient(135deg, #ffd700, #ff9800);
    color: #1a0a2e;
    border: none;
    padding: 14px 40px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.4);
}

.treasury-reward-dismiss:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.6);
}

.treasury-reward-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.treasury-particle {
    position: absolute;
    bottom: -20px;
    animation: treasuryParticleFloat linear infinite;
    opacity: 0;
}

@keyframes treasuryParticleFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-500px) rotate(360deg); opacity: 0; }
}

@media (max-width: 480px) {
    .treasury-reward-content {
        max-width: 95%;
    }
    .treasury-reward-inner {
        padding: 32px 20px 24px;
    }
    .treasury-reward-number {
        font-size: 2.2rem;
    }
    .treasury-reward-details {
        gap: 10px;
    }
}

/* End Treasury Reward Modal */

.mission-card-prize {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 152, 0, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ffd700;
    margin-top: 8px;
}

.mission-card-prize i {
    font-size: 0.9rem;
    color: #ff9800;
}

/* Responsive adjustments for shard timer */
@media (max-width: 768px) {
    .shard-drop-timer {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }
    
    .timer-countdown .time-unit {
        min-width: 40px;
        padding: 6px 8px;
    }
    
    .timer-countdown .time-value {
        font-size: 1.2rem;
    }
    
    .btn-treasury-claim {
        padding: 10px 18px;
        font-size: 0.9rem;
    }
    
    #treasury-claim-area {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* User Guild Status Bar */
.user-guild-status {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
}

.status-guest, .status-no-guild, .status-member {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.status-guest i, .status-no-guild i {
    font-size: 1.5rem;
    color: #64748b;
}

.status-member .mini-emblem {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid var(--guild-primary);
}

.status-member .status-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.guild-name-link {
    color: var(--guild-primary);
    font-weight: 600;
    cursor: pointer;
}

.guild-name-link:hover {
    text-decoration: underline;
}

.member-role {
    color: #94a3b8;
    font-size: 0.9rem;
}

.guild-level {
    background: linear-gradient(135deg, var(--guild-secondary), #7c3aed);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.btn-login, .btn-find-guild, .btn-create-guild-small, .btn-view-guild {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-login, .btn-view-guild {
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    color: #000;
}

.btn-find-guild {
    background: var(--guild-secondary);
    color: white;
}

.btn-create-guild-small {
    background: transparent;
    border: 1px solid var(--guild-primary);
    color: var(--guild-primary);
}

/* Tab Navigation */
.guild-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.guild-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--guild-card);
    border: 1px solid transparent;
    border-radius: 10px;
    color: #94a3b8;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.guild-tab:hover {
    background: #334155;
    color: white;
}

.guild-tab.active {
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    color: #000;
    border-color: var(--guild-primary);
    box-shadow: 0 4px 20px var(--guild-glow);
}

/* Tab Content */
.guild-tab-content {
    display: none;
}

.guild-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

/* Search Bar */
.guild-search-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-input-wrapper {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.search-input-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.search-input-wrapper input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.search-input-wrapper input:focus {
    outline: none;
    border-color: var(--guild-primary);
    box-shadow: 0 0 0 3px var(--guild-glow);
}

.guild-search-bar select {
    padding: 14px 20px;
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

/* Guilds Grid */
.guilds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

/* Guild Card */
.guild-card {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.guild-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--guild-glow);
    border-color: var(--guild-primary);
}

.guild-card-banner {
    height: 100px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.guild-card-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 50%, var(--guild-card) 100%);
}

.guild-level-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--guild-secondary), #7c3aed);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    z-index: 1;
}

.guild-card-emblem {
    position: absolute;
    top: 60px;
    left: 20px;
    z-index: 2;
}

.guild-card-emblem img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    border: 3px solid var(--guild-card);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    object-fit: cover;
}

.guild-card-content {
    padding: 50px 20px 20px;
}

.guild-card-content .guild-name {
    margin: 0 0 6px;
    font-size: 1.3rem;
    color: white;
}

.guild-card-content .guild-motto {
    margin: 0 0 16px;
    color: #94a3b8;
    font-style: italic;
    font-size: 0.9rem;
}

/* Guild Health Bar */
.guild-health-bar {
    margin-bottom: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.health-bar-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.health-bar-label i {
    color: #ef4444;
    font-size: 0.7rem;
}

.health-bar-label .health-values {
    margin-left: auto;
    font-weight: 600;
    color: #fff;
}

.health-bar-track {
    height: 8px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.health-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s ease;
    box-shadow: 0 0 10px currentColor;
    position: relative;
}

.health-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 4px 4px 0 0;
}

.guild-leader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.guild-leader img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.guild-leader span {
    color: #94a3b8;
    font-size: 0.9rem;
}

.guild-leader strong {
    color: var(--guild-primary);
}

.guild-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.guild-stats-row .stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    font-size: 0.9rem;
}

.guild-stats-row .stat i {
    color: var(--guild-primary);
}

.guild-stats-row .stat.power i {
    color: var(--guild-secondary);
}

.paladin-slots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.paladin-slots .paladin-label {
    color: #64748b;
    font-size: 0.85rem;
}

.paladin-slots .slots {
    display: flex;
    gap: 6px;
}

.paladin-slots .slots img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--guild-secondary);
}

/* Guild Card Paladin Slot with Level Badge */
.card-paladin-slot {
    position: relative;
    display: inline-block;
}

.card-paladin-slot img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--guild-secondary);
    transition: all 0.3s ease;
}

.card-paladin-slot.on-mission img {
    opacity: 0.6;
    filter: grayscale(30%);
}

.card-paladin-slot.is-resting img {
    opacity: 0.5;
    filter: sepia(30%) brightness(0.8);
}

.card-paladin-slot.is-dead img {
    opacity: 0.4;
    filter: grayscale(100%) brightness(0.5);
}

.card-paladin-slot.on-quest img {
    opacity: 0.6;
    filter: hue-rotate(45deg);
}

/* Paladin Status Icons */
.paladin-status-icon {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    border: 1px solid #fff;
    z-index: 10;
}

.paladin-status-icon.resting {
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: #fff;
    animation: restingPulse 3s ease-in-out infinite;
}

.paladin-status-icon.dead {
    background: linear-gradient(135deg, #ef4444, #991b1b);
    color: #fff;
}

.paladin-status-icon.quest {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
    animation: questPulse 2s ease-in-out infinite;
}

@keyframes restingPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(59, 130, 246, 0.5); }
    50% { box-shadow: 0 0 8px rgba(59, 130, 246, 0.8); }
}

@keyframes questPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.card-paladin-level {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--guild-primary) 0%, #f59e0b 100%);
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: bold;
    color: #000;
    z-index: 5;
}

.card-mission-dot {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #a855f7;
    border-radius: 50%;
    border: 1px solid #fff;
    animation: missionDotPulse 2s ease-in-out infinite;
}

@keyframes missionDotPulse {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.6; transform: translateX(-50%) scale(0.8); }
}

.paladin-slots .empty-slot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px dashed #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 0.7rem;
}

.guild-card-actions {
    display: flex;
    gap: 10px;
}

.btn-view, .btn-join {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-view {
    background: #334155;
    color: white;
}

.btn-view:hover {
    background: #475569;
}

.btn-join {
    background: linear-gradient(135deg, var(--guild-success), #16a34a);
    color: white;
}

.btn-join:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

/* Loading & Error States */
.loading-spinner {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.loading-spinner i {
    font-size: 3rem;
    color: var(--guild-primary);
    margin-bottom: 16px;
}

.no-guilds, .error-message {
    text-align: center;
    padding: 80px 20px;
    color: #64748b;
    grid-column: 1 / -1;
}

.no-guilds i, .error-message i {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-guilds h3 {
    color: white;
    margin-bottom: 8px;
}

/* Create Guild Form */
.create-guild-container {
    max-width: 700px;
    margin: 0 auto;
}

.create-guild-card {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.create-guild-header {
    text-align: center;
    margin-bottom: 32px;
}

.create-guild-header i {
    font-size: 3rem;
    color: var(--guild-primary);
    margin-bottom: 16px;
}

.create-guild-header h2 {
    margin: 0;
    font-size: 1.8rem;
    color: white;
}

.create-guild-header p {
    margin: 8px 0 0;
    color: #94a3b8;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #e2e8f0;
    font-weight: 600;
}

.form-group label i {
    color: var(--guild-primary);
    margin-right: 8px;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--guild-dark);
    border: 1px solid #334155;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--guild-primary);
    box-shadow: 0 0 0 3px var(--guild-glow);
}

.form-group small {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 0.85rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.create-guild-info {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--guild-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.create-guild-info h4 {
    margin: 0 0 12px;
    color: var(--guild-primary);
}

.create-guild-info ul {
    margin: 0;
    padding-left: 20px;
}

.create-guild-info li {
    margin-bottom: 8px;
    color: #cbd5e1;
}

.btn-create-guild {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    border: none;
    border-radius: 12px;
    color: #000;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-create-guild:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--guild-glow);
}

/* Auth Modal Override - always visible when present */
#auth-modal.modal-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Guild Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

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

.guild-modal-content {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 20px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
}

.modal-close:hover {
    background: var(--guild-danger);
}

/* WIP Warning Modal Styles */
.wip-warning-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

.wip-warning-modal {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #f59e0b;
    border-radius: 20px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(245, 158, 11, 0.4);
    animation: slideUp 0.4s ease;
}

.wip-modal-icon {
    text-align: center;
    margin-bottom: 20px;
}

.wip-modal-icon i {
    font-size: 4rem;
    color: #f59e0b;
    animation: pulse 2s infinite;
}

.wip-warning-modal h2 {
    text-align: center;
    color: #f59e0b;
    font-size: 1.8rem;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wip-message {
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 30px;
}

.wip-message p {
    margin: 0 0 15px;
}

.wip-message strong {
    color: #f59e0b;
}

.wip-message ul {
    margin: 15px 0;
    padding-left: 25px;
}

.wip-message li {
    margin: 8px 0;
}

.wip-footer {
    text-align: center;
    font-style: italic;
    color: #94a3b8;
    margin-top: 20px !important;
}

.wip-modal-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-wip-accept,
.btn-wip-decline {
    flex: 1;
    min-width: 200px;
    padding: 15px 25px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-wip-accept {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-wip-accept:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.btn-wip-decline {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-wip-decline:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Responsive WIP Modal */
@media (max-width: 768px) {
    .wip-warning-modal {
        padding: 30px 20px;
        max-width: 95%;
    }

    .wip-warning-modal h2 {
        font-size: 1.4rem;
    }

    .wip-modal-icon i {
        font-size: 3rem;
    }

    .wip-modal-actions {
        flex-direction: column;
    }

    .btn-wip-accept,
    .btn-wip-decline {
        min-width: 100%;
    }
}

/* Small Modal Variant */
.guild-modal-content.small {
    max-width: 450px;
    border: 1px solid var(--guild-primary);
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.3);
}

/* Contribute Modal Styles */
.modal-header {
    padding: 20px 24px 0;
    border-bottom: 1px solid var(--guild-border);
    margin-bottom: 0;
}

.modal-header h3 {
    margin: 0 0 16px;
    color: var(--guild-primary);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contribute-modal-body {
    padding: 24px;
}

.contribute-info {
    color: #94a3b8;
    margin-bottom: 20px;
    text-align: center;
}

.shard-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--guild-border);
}

.shard-balance .label {
    color: #94a3b8;
}

.shard-balance .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--guild-accent);
}

.shard-balance .shard-icon {
    color: var(--guild-accent);
    font-size: 1.2rem;
}

.contribute-input-group {
    margin-bottom: 24px;
}

.contribute-input-group label {
    display: block;
    color: #e2e8f0;
    margin-bottom: 8px;
    font-weight: 500;
}

.contribute-input-group input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--guild-border);
    border-radius: 10px;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.contribute-input-group input:focus {
    outline: none;
    border-color: var(--guild-primary);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.quick-amounts {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-amounts button {
    flex: 1;
    min-width: 60px;
    padding: 10px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--guild-border);
    border-radius: 8px;
    color: var(--guild-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-amounts button:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: var(--guild-primary);
    transform: translateY(-2px);
}

.contribute-actions {
    display: flex;
    gap: 12px;
}

.contribute-actions button {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-cancel {
    background: rgba(100, 116, 139, 0.3);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

.btn-cancel:hover {
    background: rgba(100, 116, 139, 0.5);
}

.btn-confirm {
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    color: #0f172a;
}

.btn-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
}

/* ========== LEVEL UP MODAL ========== */
.levelup-modal-box {
    background: linear-gradient(180deg, #1a1f35 0%, #0f1225 100%);
    border: 2px solid var(--guild-primary);
    border-radius: 24px;
    width: 100%;
    max-width: 420px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 60px rgba(251, 191, 36, 0.3),
        0 0 120px rgba(168, 85, 247, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: modalAppear 0.4s ease-out;
}

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

.levelup-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent,
        var(--guild-primary),
        transparent,
        var(--guild-secondary),
        transparent
    );
    animation: rotateGlow 4s linear infinite;
    opacity: 0.1;
    pointer-events: none;
}

@keyframes rotateGlow {
    to { transform: rotate(360deg); }
}

.levelup-modal-box .modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.levelup-header {
    text-align: center;
    padding: 40px 30px 30px;
    position: relative;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.1) 0%, transparent 100%);
}

.levelup-badge {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
}

.levelup-badge-inner {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 0 30px rgba(251, 191, 36, 0.5),
        inset 0 2px 10px rgba(255, 255, 255, 0.3);
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(251, 191, 36, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 50px rgba(251, 191, 36, 0.7); }
}

.levelup-badge-inner i {
    font-size: 1.2rem;
    color: #0f1225;
    margin-bottom: 2px;
}

.levelup-badge-inner .level-number {
    font-size: 2rem;
    font-weight: 800;
    color: #0f1225;
    line-height: 1;
}

.levelup-rings {
    position: absolute;
    inset: -10px;
    border: 2px solid var(--guild-primary);
    border-radius: 50%;
    opacity: 0.5;
    animation: ringExpand 2s ease-out infinite;
}

.levelup-rings::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 2px solid var(--guild-primary);
    border-radius: 50%;
    animation: ringExpand 2s ease-out 0.5s infinite;
}

@keyframes ringExpand {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

.levelup-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--guild-primary);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
}

.levelup-subtitle {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0;
}

.levelup-rewards {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 30px 24px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 20px;
    color: var(--guild-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.reward-item i {
    font-size: 1rem;
}

.levelup-allocate {
    background: rgba(0, 0, 0, 0.3);
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.allocate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.allocate-header h3 {
    margin: 0;
    color: #e2e8f0;
    font-size: 1.1rem;
}

.points-remaining {
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.3);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #94a3b8;
    transition: all 0.3s ease;
}

.points-remaining #points-remaining-value {
    color: var(--guild-accent);
    font-weight: 700;
    font-size: 1rem;
}

.points-remaining.empty {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.points-remaining.empty #points-remaining-value {
    color: #ef4444;
}

.stat-sliders {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.stat-slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.stat-slider:hover {
    background: rgba(255, 255, 255, 0.05);
}

.stat-slider.atk .stat-label i { color: #ef4444; }
.stat-slider.def .stat-label i { color: #3b82f6; }
.stat-slider.spd .stat-label i { color: #22c55e; }

.stat-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e2e8f0;
    font-weight: 500;
}

.stat-label i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.slider-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-btn.minus {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.stat-btn.minus:hover {
    background: rgba(239, 68, 68, 0.4);
}

.stat-btn.plus {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.stat-btn.plus:hover {
    background: rgba(34, 197, 94, 0.4);
}

.stat-value {
    min-width: 40px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
}

.levelup-buttons {
    display: flex;
    gap: 12px;
}

.levelup-buttons button {
    flex: 1;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-skip {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.btn-skip:hover {
    background: rgba(100, 116, 139, 0.3);
}

.btn-confirm-stats {
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    color: #0f1225;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
}

.btn-confirm-stats:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.5);
}

/* Guild Detail View */
.guild-detail-banner {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.guild-detail-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, var(--guild-card) 100%);
}

.guild-detail-emblem {
    position: absolute;
    bottom: -40px;
    left: 30px;
    z-index: 2;
}

.guild-detail-emblem img {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    border: 4px solid var(--guild-card);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    object-fit: cover;
}

.guild-detail-emblem .level-badge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: linear-gradient(135deg, var(--guild-secondary), #7c3aed);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    border: 2px solid var(--guild-card);
}

.guild-detail-header {
    padding: 60px 30px 20px;
}

.guild-detail-header h2 {
    margin: 0;
    font-size: 2rem;
    color: white;
}

.guild-detail-header .motto {
    margin: 8px 0 0;
    color: #94a3b8;
    font-style: italic;
    font-size: 1.1rem;
}

.guild-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 0 30px 24px;
}

.stat-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.stat-box i {
    font-size: 1.5rem;
    color: var(--guild-primary);
    margin-bottom: 8px;
}

.stat-box .value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
}

.stat-box .label {
    font-size: 0.85rem;
    color: #64748b;
}

.stat-box.active {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.stat-box.active i {
    color: var(--guild-success);
}

/* Battle Stats */
.guild-battle-stats {
    padding: 0 30px 24px;
}

.guild-battle-stats h4 {
    margin: 0 0 16px;
    color: var(--guild-primary);
}

/* Guild Health Section in Detail View */
.guild-health-section {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
}

.health-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.health-header span:first-child {
    color: rgba(255, 255, 255, 0.7);
}

.health-header span:first-child i {
    color: #ef4444;
    margin-right: 8px;
}

.health-numbers {
    font-weight: 700;
    color: #fff;
}

.health-bar-large {
    height: 16px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 8px;
    transition: width 0.5s ease;
    position: relative;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.health-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 8px 8px 0 0;
}

.health-note {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    font-style: italic;
}

.battle-stat-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-bar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stat-bar .stat-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-bar.atk .stat-icon { background: rgba(239, 68, 68, 0.2); color: var(--guild-atk); }
.stat-bar.def .stat-icon { background: rgba(59, 130, 246, 0.2); color: var(--guild-def); }
.stat-bar.spd .stat-icon { background: rgba(34, 197, 94, 0.2); color: var(--guild-spd); }

.stat-bar .stat-name {
    width: 40px;
    font-weight: 600;
    color: #94a3b8;
}

.stat-bar .bar-container {
    flex: 1;
    height: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
}

.stat-bar.atk .bar-fill { background: linear-gradient(90deg, var(--guild-atk), #f87171); }
.stat-bar.def .bar-fill { background: linear-gradient(90deg, var(--guild-def), #60a5fa); }
.stat-bar.spd .bar-fill { background: linear-gradient(90deg, var(--guild-spd), #4ade80); }

.stat-bar .bar-fill {
    height: 100%;
    transition: width 0.5s ease;
}

.stat-bar .stat-value {
    width: 40px;
    text-align: right;
    font-weight: 700;
    color: white;
}

.allocate-points {
    margin-top: 16px;
    padding: 16px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--guild-border);
    border-radius: 10px;
}

.allocate-points p {
    margin: 0 0 12px;
    color: var(--guild-primary);
    font-weight: 600;
}

.allocate-inputs {
    display: flex;
    gap: 10px;
}

.allocate-inputs input {
    width: 70px;
    padding: 8px 12px;
    background: var(--guild-dark);
    border: 1px solid #475569;
    border-radius: 6px;
    color: white;
    text-align: center;
}

.allocate-inputs button {
    padding: 8px 16px;
    background: var(--guild-success);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

/* Guild Description */
.guild-description {
    padding: 0 30px 24px;
}

.guild-description h4 {
    margin: 0 0 12px;
    color: var(--guild-primary);
}

.guild-description p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.6;
}

/* Paladins Section */
.guild-paladins-section {
    padding: 0 30px 24px;
}

.guild-paladins-section h4 {
    margin: 0 0 8px;
    color: var(--guild-secondary);
}

.paladins-info {
    margin: 0 0 16px;
    font-size: 0.9rem;
}

.paladins-info .active {
    color: var(--guild-success);
}

.paladins-info .inactive {
    color: #f59e0b;
}

.paladins-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.paladin-slot {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    position: relative;
}

.paladin-slot.filled {
    border: 2px solid var(--guild-secondary);
    background: rgba(168, 85, 247, 0.1);
}

.paladin-slot.filled.is-dead {
    border-color: #6b7280;
    background: rgba(107, 114, 128, 0.15);
    opacity: 0.7;
}

.paladin-slot.filled.is-dead img {
    filter: grayscale(70%);
}

.paladin-slot.empty {
    border: 2px dashed #475569;
}

.paladin-slot img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 8px;
}

/* Paladin Avatar Wrapper */
.paladin-avatar-wrapper {
    position: relative;
    display: inline-block;
}

.paladin-slot.on-mission {
    opacity: 0.7;
}

.paladin-slot.on-mission img {
    filter: grayscale(30%);
}

.mission-status {
    display: block;
    font-size: 0.65rem;
    color: #a855f7;
    margin-top: 4px;
}

.dead-status {
    display: block;
    font-size: 0.65rem;
    color: #ef4444;
    margin-top: 4px;
    font-weight: 600;
}

.dead-indicator {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #374151;
    border: 2px solid #ef4444;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dead-indicator i {
    font-size: 0.65rem;
    color: #ef4444;
}

/* Paladin Health Mini (for overview) */
.paladin-health-mini {
    margin-top: 8px;
    width: 100%;
}

.health-bar-mini {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 3px;
}

.health-fill-mini {
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.health-bar-mini.warning .health-fill-mini {
    background: #f59e0b;
}

.health-bar-mini.critical .health-fill-mini {
    background: #ef4444;
}

.health-bar-mini.dead .health-fill-mini {
    background: #6b7280;
}

.health-text-mini {
    font-size: 0.65rem;
    color: #94a3b8;
}

.paladin-slot.empty i {
    font-size: 2rem;
    color: #475569;
    margin-bottom: 8px;
}

.paladin-slot .paladin-info .name {
    display: block;
    font-weight: 600;
    color: white;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.paladin-slot .paladin-info .level {
    font-size: 0.75rem;
    color: #94a3b8;
}

.paladin-slot.empty span {
    color: #64748b;
    font-size: 0.85rem;
}

.btn-remove-paladin {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: var(--guild-danger);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}

.paladin-slot:hover .btn-remove-paladin {
    opacity: 1;
}

/* Members Section */
.guild-members-section {
    padding: 0 30px 24px;
}

.guild-members-section h4 {
    margin: 0 0 16px;
    color: var(--guild-primary);
}

.members-list {
    max-height: 300px;
    overflow-y: auto;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.member-row:hover {
    background: rgba(0, 0, 0, 0.2);
}

.member-row img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.member-row .member-info {
    flex: 1;
}

.member-row .member-info .name {
    display: block;
    font-weight: 600;
    color: white;
}

.role-badge {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.role-badge.leader {
    background: rgba(251, 191, 36, 0.2);
    color: var(--guild-primary);
}

.role-badge.paladin {
    background: rgba(168, 85, 247, 0.2);
    color: var(--guild-secondary);
}

.role-badge.member {
    background: rgba(100, 116, 139, 0.2);
    color: #94a3b8;
}

.member-level {
    color: #64748b;
    font-weight: 600;
}

.member-actions {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.member-row:hover .member-actions {
    opacity: 1;
}

.member-actions button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
}

.member-actions button:first-child {
    background: var(--guild-secondary);
}

.member-actions button:last-child {
    background: var(--guild-danger);
}

/* Guild Actions */
.guild-actions {
    padding: 20px 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-action {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* =============================================
   REDESIGNED GUILD DETAIL POPUP (gd-popup)
   ============================================= */

/* Banner */
.gd-popup { overflow: hidden; }

.gd-banner {
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 18px 22px;
    gap: 16px;
}

.gd-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.3) 60%, transparent 100%);
}

.gd-emblem {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.gd-emblem img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    border: 3px solid rgba(251, 191, 36, 0.5);
    object-fit: cover;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.gd-title-area {
    position: relative;
    z-index: 2;
    flex: 1;
    min-width: 0;
}

.gd-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    line-height: 1.2;
}

.gd-level {
    font-size: 0.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--guild-secondary), #7c3aed);
    padding: 2px 10px;
    border-radius: 12px;
    margin-left: 8px;
    vertical-align: middle;
}

.gd-motto {
    margin: 4px 0 0;
    color: #94a3b8;
    font-style: italic;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-leader {
    margin: 3px 0 0;
    color: #fbbf24;
    font-size: 0.78rem;
    font-weight: 600;
}

.gd-leader i {
    margin-right: 4px;
    font-size: 0.72rem;
}

/* Stat strip */
.gd-stats-strip {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gd-stat {
    flex: 1;
    text-align: center;
    padding: 14px 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.gd-stat:last-child {
    border-right: none;
}

.gd-stat-val {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.gd-stat-val small {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
}

.gd-stat-lbl {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gd-stat-lbl i {
    margin-right: 3px;
    font-size: 0.68rem;
    color: #94a3b8;
}

/* HP + combat row */
.gd-combat-row {
    padding: 16px 22px;
    display: flex;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.gd-hp-bar-wrap {
    flex: 1;
    min-width: 0;
}

.gd-hp-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 5px;
    font-weight: 600;
}

.gd-hp-track {
    height: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 5px;
    overflow: hidden;
}

.gd-hp-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
    box-shadow: 0 0 8px currentColor;
}

.gd-combat-stats {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.gd-cs {
    font-size: 0.82rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.gd-cs.atk { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.gd-cs.def { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.gd-cs.spd { background: rgba(34, 197, 94, 0.15); color: #4ade80; }

.gd-cs i { font-size: 0.72rem; }

/* Allocate bar */
.gd-alloc-bar {
    padding: 12px 22px;
    background: rgba(251, 191, 36, 0.08);
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.gd-alloc-label {
    display: block;
    font-size: 0.82rem;
    color: var(--guild-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.gd-alloc-inputs {
    display: flex;
    gap: 8px;
}

.gd-alloc-inputs input {
    width: 56px;
    padding: 6px 8px;
    background: var(--guild-dark);
    border: 1px solid #475569;
    border-radius: 6px;
    color: white;
    text-align: center;
    font-size: 0.85rem;
}

.gd-alloc-inputs button {
    padding: 6px 14px;
    background: var(--guild-success);
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
}

/* Roster */
.gd-roster {
    padding: 16px 22px 8px;
}

.gd-section-title {
    margin: 0 0 12px;
    color: var(--guild-primary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gd-count {
    font-size: 0.75rem;
    background: rgba(251, 191, 36, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}

.gd-roster-list {
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gd-member {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 0.15s;
}

.gd-member:hover {
    background: rgba(255, 255, 255, 0.07);
}

.gd-member.is-online {
    border-left: 3px solid #22c55e;
}

.gd-member-avatar {
    position: relative;
    flex-shrink: 0;
}

.gd-member-avatar img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

.gd-member-avatar .online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid var(--guild-card);
    border-radius: 50%;
}

.gd-member-body {
    flex: 1;
    min-width: 0;
}

.gd-member-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gd-member-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.gd-member-lv {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

.gd-member-ago {
    display: block;
    font-size: 0.7rem;
    color: #475569;
    margin-top: 1px;
}

.gd-member-ago i {
    margin-right: 3px;
    font-size: 0.65rem;
}

.gd-kick {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    cursor: pointer;
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.gd-member:hover .gd-kick {
    opacity: 1;
}

/* Action buttons */
.gd-actions {
    padding: 16px 22px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gd-btn {
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.15s, box-shadow 0.15s;
    color: #fff;
}

.gd-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.gd-btn-join     { background: linear-gradient(135deg, #22c55e, #16a34a); }
.gd-btn-primary  { background: linear-gradient(135deg, var(--guild-secondary), #7c3aed); }
.gd-btn-info     { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.gd-btn-success  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.gd-btn-heal     { background: linear-gradient(135deg, #22c55e, #16a34a); }
.gd-btn-level    { background: linear-gradient(135deg, var(--guild-primary), #f59e0b); color: #000; }
.gd-btn-secondary { background: #334155; }
.gd-btn-danger   { background: transparent; border: 1px solid var(--guild-danger); color: var(--guild-danger); }

/* Private guild badge on card */
.guild-private-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
}

/* Registration mode toggle in edit form */
.registration-toggle {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.reg-option {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 10px;
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 600;
}
.reg-option:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
}
.reg-option.active {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.12);
    color: #e2e8f0;
}
.reg-option i {
    font-size: 1.2rem;
    margin-bottom: 2px;
}
.reg-desc {
    font-size: 0.7rem;
    font-weight: 400;
    color: #64748b;
    text-align: center;
}
.reg-option.active .reg-desc {
    color: #a78bfa;
}

/* Join requests section */
.gd-requests {
    padding: 14px 22px 10px;
}
.gd-requests-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    max-height: 280px;
    overflow-y: auto;
}
.gd-count-warn {
    background: #f59e0b !important;
    color: #000 !important;
    animation: pulse-warn 1.5s infinite;
}
@keyframes pulse-warn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Join request card */
.jr-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    transition: opacity 0.3s, transform 0.3s;
}
.jr-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}
.jr-info {
    flex: 1;
    min-width: 0;
}
.jr-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jr-level {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;
}
.jr-msg {
    font-size: 0.75rem;
    color: #a78bfa;
    font-style: italic;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jr-time {
    font-size: 0.68rem;
    color: #64748b;
    margin-top: 1px;
}
.jr-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.jr-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
}
.jr-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.jr-accept {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}
.jr-decline {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Mobile responsive for gd-popup */
@media (max-width: 600px) {
    .gd-banner { height: 130px; padding: 14px 16px; gap: 12px; }
    .gd-emblem img { width: 56px; height: 56px; }
    .gd-name { font-size: 1.1rem; }
    .gd-stats-strip { flex-wrap: wrap; }
    .gd-stat { padding: 10px 6px; }
    .gd-stat-val { font-size: 1rem; }
    .gd-combat-row { flex-direction: column; padding: 12px 16px; }
    .gd-combat-stats { width: 100%; justify-content: center; }
    .gd-actions { justify-content: center; }
    .gd-btn { flex: 1 1 auto; justify-content: center; min-width: 120px; }
    .gd-roster { padding: 12px 16px 8px; }
    .gd-alloc-bar { padding: 10px 16px; }
    .gd-alloc-inputs { flex-wrap: wrap; }
}

.btn-action.join {
    background: linear-gradient(135deg, var(--guild-success), #16a34a);
    color: white;
}

.btn-action.leave {
    background: #475569;
    color: white;
}

.btn-action.edit {
    background: var(--guild-secondary);
    color: white;
}

.btn-action.level-up {
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    color: #000;
}

.btn-action.heal {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.btn-action.heal:hover {
    background: linear-gradient(135deg, #16a34a, #15803d);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.btn-action.transfer {
    background: #0ea5e9;
    color: white;
}

.btn-action.danger {
    background: transparent;
    border: 1px solid var(--guild-danger);
    color: var(--guild-danger);
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Guild Wars */
.guild-wars-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.wars-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.wars-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wars-title i {
    font-size: 2.5rem;
    color: var(--guild-danger);
}

.wars-title h2 {
    margin: 0;
    color: white;
}

.wars-title p {
    margin: 0;
    color: #94a3b8;
}

.wars-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.current-war-card, .war-rewards-card {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 16px;
    padding: 24px;
}

.current-war-card h3, .war-rewards-card h3 {
    margin: 0 0 20px;
    color: var(--guild-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.war-status {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.status-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
}

.war-status.registration .status-badge {
    background: rgba(34, 197, 94, 0.2);
    color: var(--guild-success);
}

.war-status.in_progress .status-badge {
    background: rgba(251, 191, 36, 0.2);
    color: var(--guild-primary);
}

.war-status.completed .status-badge {
    background: rgba(168, 85, 247, 0.2);
    color: var(--guild-secondary);
}

.btn-register-war {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--guild-danger), #dc2626);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-register-war:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
}

.reward-tier {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-bottom: 12px;
}

.reward-tier .rank {
    width: 80px;
    text-align: center;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.reward-tier .rank i {
    font-size: 1.2rem;
}

.reward-tier .rank.gold { color: #ffd700; }
.reward-tier .rank.silver { color: #c0c0c0; }
.reward-tier .rank.bronze { color: #cd7f32; }

.reward-tier.participation {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.reward-tier.participation .rank {
    color: #a855f7;
}

.reward-tier .reward {
    flex: 1;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reward-tier .reward-shards {
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.95rem;
}

.reward-tier .reward-shards i {
    color: #06b6d4;
    margin-right: 6px;
}

.reward-tier .reward-unlockers {
    color: #a855f7;
    font-weight: 600;
    font-size: 0.95rem;
}

.reward-tier .reward-unlockers i {
    color: #c084fc;
    margin-right: 6px;
}

.reward-tier .reward-gamecard {
    color: #f59e0b;
    font-weight: 600;
    font-size: 0.95rem;
}

.reward-tier .reward-gamecard i {
    color: #fbbf24;
    margin-right: 6px;
}

.reward-tier .reward-special {
    color: #f59e0b;
    font-size: 0.85rem;
    background: rgba(245, 158, 11, 0.15);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

.reward-tier .reward-special i {
    margin-right: 4px;
}

/* War Participants */
.war-participants {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 16px;
    padding: 24px;
}

.war-participants h3 {
    margin: 0 0 20px;
    color: var(--guild-primary);
}

#participants-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.participant-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

.participant-card:hover {
    border-color: var(--guild-primary);
}

.participant-card.eliminated {
    opacity: 0.5;
}

.participant-card img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.participant-card .participant-info {
    flex: 1;
}

.participant-card .name {
    display: block;
    font-weight: 600;
    color: white;
    font-size: 0.9rem;
}

.participant-card .stats {
    font-size: 0.75rem;
    color: #64748b;
}

.eliminated-badge {
    font-size: 0.7rem;
    padding: 3px 8px;
    background: var(--guild-danger);
    border-radius: 10px;
}

/* Leaderboard */
.leaderboard-container {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 16px;
    overflow: hidden;
}

.leaderboard-header {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(168, 85, 247, 0.1));
}

.leaderboard-header i {
    font-size: 3rem;
    color: var(--guild-primary);
    margin-bottom: 12px;
}

.leaderboard-header h2 {
    margin: 0;
    color: white;
}

.leaderboard-header p {
    margin: 8px 0 0;
    color: #94a3b8;
}

.leaderboard-table table {
    width: 100%;
    border-collapse: collapse;
}

.leaderboard-table th {
    padding: 16px;
    text-align: left;
    background: rgba(0, 0, 0, 0.3);
    color: var(--guild-primary);
    font-weight: 600;
}

.leaderboard-table td {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.leaderboard-table tr {
    cursor: pointer;
    transition: background 0.2s;
}

.leaderboard-table tr:hover {
    background: rgba(251, 191, 36, 0.1);
}

.leaderboard-table tr.rank-1 {
    background: rgba(255, 215, 0, 0.1);
}

.leaderboard-table tr.rank-2 {
    background: rgba(192, 192, 192, 0.05);
}

.leaderboard-table tr.rank-3 {
    background: rgba(205, 127, 50, 0.05);
}

.leaderboard-table .rank {
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.leaderboard-table .guild-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leaderboard-table .guild-info img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 10px;
    color: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transform: translateX(120%);
    transition: transform 0.3s ease;
}

.toast.show {
    transform: translateX(0);
}

.toast.success {
    border-color: var(--guild-success);
}

.toast.success i {
    color: var(--guild-success);
}

.toast.error {
    border-color: var(--guild-danger);
}

.toast.error i {
    color: var(--guild-danger);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.pagination button {
    width: 40px;
    height: 40px;
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 8px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pagination button:hover, .pagination button.active {
    background: var(--guild-primary);
    color: #000;
    border-color: var(--guild-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .guild-page {
        padding: 80px 12px 20px;
    }
    
    .guild-header {
        padding: 24px;
    }
    
    .guild-header-content {
        flex-direction: column;
        text-align: center;
    }
    
    .guild-header-text h1 {
        font-size: 1.8rem;
    }
    
    .guild-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .guild-tab {
        padding: 12px 16px;
        font-size: 0.9rem;
    }
    
    .guilds-grid {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .guild-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .paladins-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .wars-content-grid {
        grid-template-columns: 1fr;
    }
    
    .guild-actions {
        flex-direction: column;
    }
    
    .btn-action {
        width: 100%;
        justify-content: center;
    }
}

/* Milestone Modal Styles */
.milestone-modal-box {
    position: relative;
    background: linear-gradient(145deg, rgba(26, 32, 44, 0.98), rgba(17, 21, 28, 0.99));
    border: 2px solid rgba(252, 157, 11, 0.4);
    border-radius: 24px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    box-shadow: 
        0 0 80px rgba(252, 157, 11, 0.3),
        0 0 150px rgba(252, 157, 11, 0.15),
        inset 0 0 60px rgba(252, 157, 11, 0.05);
    overflow: hidden;
    animation: milestoneAppear 0.5s ease-out forwards;
}

@keyframes milestoneAppear {
    0% { transform: scale(0.8) rotate(-5deg); opacity: 0; }
    50% { transform: scale(1.05) rotate(2deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.milestone-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(252, 157, 11, 0.15) 0%, transparent 60%);
    animation: milestoneGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
}

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

.milestone-modal-box .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #a0aec0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.milestone-modal-box .modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.milestone-header {
    text-align: center;
    margin-bottom: 32px;
}

.milestone-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.5);
    animation: milestoneBadgePulse 2s ease-in-out infinite;
}

@keyframes milestoneBadgePulse {
    0%, 100% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.5); }
    50% { box-shadow: 0 0 60px rgba(251, 191, 36, 0.8); }
}

.milestone-badge i {
    font-size: 2.5rem;
    color: #1a202c;
}

.milestone-badge .milestone-level {
    position: absolute;
    bottom: -10px;
    background: #1a202c;
    border: 2px solid #fbbf24;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24;
}

.milestone-title {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.milestone-subtitle {
    color: #a0aec0;
    font-size: 1.1rem;
    margin: 0;
}

.milestone-rewards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.milestone-reward-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.milestone-reward-card:hover {
    background: rgba(252, 157, 11, 0.1);
    border-color: rgba(252, 157, 11, 0.5);
    transform: translateX(8px);
    box-shadow: 0 0 30px rgba(252, 157, 11, 0.2);
}

.milestone-reward-card .reward-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(252, 157, 11, 0.2), rgba(252, 157, 11, 0.1));
    border-radius: 12px;
    flex-shrink: 0;
}

.milestone-reward-card .reward-icon i {
    font-size: 1.5rem;
    color: #fc9d0b;
}

.milestone-reward-card h3 {
    margin: 0 0 4px 0;
    color: #f0f0f0;
    font-size: 1.1rem;
    font-weight: 600;
}

.milestone-reward-card p {
    margin: 0;
    color: #a0aec0;
    font-size: 0.9rem;
}

@media (max-width: 600px) {
    .milestone-modal-box {
        padding: 24px;
    }
    
    .milestone-title {
        font-size: 1.5rem;
    }
    
    .milestone-badge {
        width: 80px;
        height: 80px;
    }
    
    .milestone-badge i {
        font-size: 2rem;
    }
}
/* =============================================
   TOURNAMENT BATTLE ROYALE STYLES
   ============================================= */

/* Tournament Header */
.tournament-header {
    margin-bottom: 24px;
}

.tournament-banner {
    background: linear-gradient(135deg, #1a0a2e 0%, #16213e 50%, #1a0a2e 100%);
    border: 2px solid #ff6b35;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.3), inset 0 0 100px rgba(255, 107, 53, 0.1);
}

.tournament-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><pattern id="warGrid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,107,53,0.1)" stroke-width="1"/></pattern></defs><rect width="200" height="200" fill="url(%23warGrid)"/></svg>');
    opacity: 0.5;
}

.tournament-fire {
    position: absolute;
    width: 80px;
    height: 120px;
    bottom: 0;
}

.tournament-fire.left {
    left: 40px;
    background: linear-gradient(0deg, #ff6b35 0%, #ff9500 30%, rgba(255, 149, 0, 0) 100%);
    animation: fireFlicker 1.5s ease-in-out infinite alternate;
    border-radius: 50% 50% 20% 20%;
    filter: blur(2px);
}

.tournament-fire.right {
    right: 40px;
    background: linear-gradient(0deg, #ff6b35 0%, #ff9500 30%, rgba(255, 149, 0, 0) 100%);
    animation: fireFlicker 1.8s ease-in-out infinite alternate-reverse;
    border-radius: 50% 50% 20% 20%;
    filter: blur(2px);
}

@keyframes fireFlicker {
    0% { height: 100px; opacity: 0.8; }
    100% { height: 130px; opacity: 1; }
}

.tournament-title-wrapper {
    text-align: center;
    position: relative;
    z-index: 1;
}

.tournament-swords {
    font-size: 3rem;
    margin-bottom: 10px;
    animation: swordsBounce 2s ease-in-out infinite;
}

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

.tournament-title-wrapper h2 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6b35, #ffd700, #ff6b35);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(255, 107, 53, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.tournament-title-wrapper p {
    margin: 8px 0 0;
    color: #94a3b8;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Tournament Status Bar */
.tournament-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--guild-card);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: 16px;
    padding: 16px 24px;
    margin-bottom: 24px;
    gap: 20px;
    flex-wrap: wrap;
}

.status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-badge.pending {
    background: rgba(100, 116, 139, 0.3);
    color: #94a3b8;
    border: 1px solid #64748b;
}

.status-badge.active {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid #22c55e;
    animation: pulseGreen 2s ease-in-out infinite;
}

.status-badge.completed {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
    border: 1px solid #a855f7;
}

@keyframes pulseGreen {
    0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
}

.guilds-remaining {
    text-align: center;
}

.guilds-remaining .big-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #ff6b35;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
    line-height: 1;
}

.guilds-remaining .label {
    color: #94a3b8;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-tournament-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ff6b35, #ff9500);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-tournament-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.4);
}

/* Tournament Grid */
.tournament-grid {
    display: grid;
    grid-template-columns: 300px 1fr 250px;
    gap: 24px;
}

@media (max-width: 1200px) {
    .tournament-grid {
        grid-template-columns: 1fr;
    }
}

.tournament-panel {
    background: var(--guild-card);
    border: 1px solid var(--guild-border);
    border-radius: 16px;
    overflow: hidden;
}

.panel-header {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 149, 0, 0.1));
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 107, 53, 0.2);
}

.panel-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #ff9500;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Participants Panel */
.participants-panel {
    max-height: 600px;
    display: flex;
    flex-direction: column;
}

.participants-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.tournament-participant {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.tournament-participant:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.3);
}

.tournament-participant.is-me {
    border-color: var(--guild-primary);
    background: rgba(251, 191, 36, 0.1);
}

.tournament-participant.eliminated {
    opacity: 0.5;
    filter: grayscale(0.5);
}

.participant-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.participant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.participant-avatar .eliminated-x {
    position: absolute;
    inset: 0;
    background: rgba(239, 68, 68, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.participant-details {
    flex: 1;
    min-width: 0;
}

.participant-name {
    font-weight: 600;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.participant-name .tag {
    color: var(--guild-primary);
    font-size: 0.8rem;
}

.participant-name .you-badge {
    background: var(--guild-primary);
    color: #000;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.participant-stats {
    display: flex;
    gap: 10px;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
}

.participant-stats .power {
    color: var(--guild-primary);
}

.participant-stats .power i {
    margin-right: 2px;
}

.participant-health {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.health-bar-mini {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
}

.health-fill-mini {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.health-fill-mini.warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.health-fill-mini.critical {
    background: linear-gradient(90deg, #ef4444, #f87171);
    animation: healthPulse 1s ease-in-out infinite;
}

@keyframes healthPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.health-value {
    font-size: 0.7rem;
    color: #94a3b8;
    min-width: 30px;
    text-align: right;
}

.btn-attack {
    padding: 8px 14px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-attack:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* Arena Panel */
.arena-panel {
    display: flex;
    flex-direction: column;
}

.battle-arena {
    min-height: 200px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arena-empty-state {
    text-align: center;
    color: #64748b;
}

.arena-empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Recent Battles */
.recent-battles {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 16px;
}

.recent-battles h4 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.battles-list {
    max-height: 200px;
    overflow-y: auto;
}

.battle-log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.battle-log-entry .attacker {
    color: #3b82f6;
    font-weight: 600;
}

.battle-log-entry .vs {
    font-size: 0.7rem;
}

.battle-log-entry .defender {
    color: #ef4444;
    font-weight: 600;
}

.battle-log-entry .result {
    margin-left: auto;
    font-weight: 600;
}

.battle-log-entry .result.attacker-won {
    color: #3b82f6;
}

.battle-log-entry .result.defender-won {
    color: #ef4444;
}

.battle-log-entry.knockout {
    border: 1px solid rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.1);
}

.ko-badge {
    background: #ef4444;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 4px;
}

/* Rewards Panel */
.rewards-panel {
    display: flex;
    flex-direction: column;
}

.rewards-content {
    padding: 16px;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.reward-item i {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.reward-item.shards i {
    color: #a855f7;
}

.reward-item.unlockers i {
    color: #22d3ee;
}

.reward-item.cards i {
    color: #22c55e;
}

.reward-info {
    display: flex;
    flex-direction: column;
}

.reward-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.reward-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reward-distribution-note {
    padding: 12px 16px;
    background: rgba(100, 116, 139, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.reward-distribution-note i {
    color: #3b82f6;
    margin-top: 2px;
}

/* =============================================
   BATTLE ANIMATION MODAL
   ============================================= */

.battle-modal-overlay {
    background: rgba(0, 0, 0, 0.95);
}

.battle-modal-content {
    background: linear-gradient(135deg, #0f0a1a, #1a0a2e, #0f0a1a);
    border: 2px solid #ff6b35;
    border-radius: 24px;
    padding: 40px;
    max-width: 800px;
    width: 90%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 100px rgba(255, 107, 53, 0.3);
}

.battle-modal-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 107, 53, 0.1), transparent 70%);
    pointer-events: none;
}

/* Battle Scene */
.battle-scene {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.battle-side {
    flex: 1;
    text-align: center;
    padding: 20px;
}

.battle-side .guild-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid;
    box-shadow: 0 0 30px;
}

.attacker-side .guild-avatar {
    border-color: #3b82f6;
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
}

.defender-side .guild-avatar {
    border-color: #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

.battle-side .guild-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.battle-side .guild-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.battle-side .guild-power {
    font-size: 0.9rem;
    color: var(--guild-primary);
    margin-bottom: 12px;
}

.battle-side .guild-power i {
    margin-right: 4px;
}

.battle-side .health-bar {
    height: 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}

.health-fill {
    height: 100%;
    transition: width 0.5s ease;
    border-radius: 6px;
}

.health-fill.attacker {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.health-fill.defender {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

.roll-dice {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 2px solid #64748b;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    transition: all 0.1s ease;
}

.roll-dice.rolling {
    animation: diceShake 0.1s ease-in-out;
    border-color: var(--guild-primary);
    box-shadow: 0 0 20px var(--guild-glow);
}

@keyframes diceShake {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-3px) rotate(-5deg); }
    75% { transform: translateX(3px) rotate(5deg); }
}

/* VS Separator */
.battle-vs {
    position: relative;
}

.vs-text {
    font-size: 2rem;
    font-weight: 900;
    color: #ff6b35;
    text-shadow: 0 0 30px rgba(255, 107, 53, 0.8);
    animation: vsPulse 1s ease-in-out infinite;
}

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

.battle-effects {
    position: absolute;
    inset: -50px;
    pointer-events: none;
}

.effect-slash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: slashEffect 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes slashEffect {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scaleX(0); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scaleX(1.5); }
}

.effect-sparks {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #ff6b35 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: sparkEffect 0.8s ease-out forwards;
}

@keyframes sparkEffect {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Battle Result */
.battle-result {
    text-align: center;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 20px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.5s ease;
}

.battle-result.show {
    opacity: 1;
    transform: scale(1);
}

.battle-result.victory {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.1));
    border: 2px solid #22c55e;
}

.battle-result.defeat {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.1));
    border: 2px solid #ef4444;
}

.result-icon {
    font-size: 3rem;
    margin-bottom: 12px;
}

.result-text {
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.victory .result-text {
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}

.defeat .result-text {
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
}

.result-damage {
    margin-top: 8px;
    color: #94a3b8;
    font-size: 1rem;
}

.btn-close-battle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-close-battle:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: 16px;
}

.btn-create-tournament {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-create-tournament:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.4);
}

.no-battles {
    text-align: center;
    color: #64748b;
    font-style: italic;
    padding: 20px;
}

/* =============================================
   IMPROVED GUILD PAGE VISUALS
   ============================================= */

/* Enhanced Guild Cards */
.guild-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(251, 191, 36, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.guild-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--guild-primary), var(--guild-secondary), var(--guild-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.guild-card:hover::before {
    opacity: 1;
}

.guild-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(251, 191, 36, 0.15), 0 0 40px rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.4);
}

/* Enhanced Guild Header */
.guild-header {
    position: relative;
}

.guild-header::after {
    content: '⚔️';
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 100px;
    opacity: 0.08;
    filter: grayscale(0.5);
}

/* Enhanced Level Badge */
.guild-level {
    background: linear-gradient(135deg, #a855f7, #7c3aed, #6d28d9);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
    animation: levelShine 3s ease-in-out infinite;
}

@keyframes levelShine {
    0%, 100% { box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4); }
    50% { box-shadow: 0 4px 25px rgba(168, 85, 247, 0.6); }
}

/* Enhanced Stat Bars */
.stat-bar {
    position: relative;
    overflow: hidden;
}

.stat-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: statShine 3s ease-in-out infinite;
}

@keyframes statShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Enhanced Treasury Display */
.treasury-amount {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.treasury-amount::after {
    content: '✨';
    font-size: 0.8em;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Better Tab Animation */
.guild-tab {
    position: relative;
    overflow: hidden;
}

.guild-tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--guild-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.guild-tab:hover::after {
    transform: scaleX(1);
}

.guild-tab.active::after {
    transform: scaleX(1);
    background: #000;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tournament-banner {
        padding: 24px;
    }
    
    .tournament-title-wrapper h2 {
        font-size: 1.5rem;
    }
    
    .tournament-fire {
        display: none;
    }
    
    .tournament-status-bar {
        flex-direction: column;
        text-align: center;
    }
    
    .tournament-grid {
        grid-template-columns: 1fr;
    }
    
    .battle-scene {
        flex-direction: column;
        gap: 10px;
    }
    
    .battle-side {
        padding: 10px;
    }
    
    .battle-side .guild-avatar {
        width: 70px;
        height: 70px;
    }
    
    .battle-modal-content {
        padding: 20px;
    }
    
    .roll-dice {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* =============================================
   PALADIN MISSIONS SYSTEM - Fantasy RPG Theme
   ============================================= */

/* Paladin Level Badge */
.paladin-level-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--guild-primary) 0%, #f59e0b 100%);
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: #000;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.5);
}

/* Mission Status Indicator */
.mission-indicator {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.5);
    animation: missionPulse 2s ease-in-out infinite;
}

@keyframes missionPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

/* ===== MISSIONS MODAL ===== */
#missions-modal {
    z-index: 100001 !important;
}

#missions-modal.active {
    z-index: 100001 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.missions-modal-content {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
    border: 2px solid transparent;
    border-image: linear-gradient(180deg, rgba(251, 191, 36, 0.5), rgba(139, 92, 246, 0.5)) 1;
    border-radius: 24px;
    max-width: 900px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 
        0 0 60px rgba(139, 92, 246, 0.3),
        0 0 120px rgba(251, 191, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: missionModalAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

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

/* Decorative Background */
.missions-bg-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.floating-rune {
    position: absolute;
    font-size: 2rem;
    opacity: 0.08;
    animation: floatRune 8s ease-in-out infinite;
}

.rune-1 { top: 10%; left: 5%; animation-delay: 0s; }
.rune-2 { top: 20%; right: 8%; animation-delay: 2s; }
.rune-3 { bottom: 30%; left: 10%; animation-delay: 4s; }
.rune-4 { bottom: 15%; right: 5%; animation-delay: 6s; }

@keyframes floatRune {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.08; }
    50% { transform: translateY(-20px) rotate(10deg); opacity: 0.15; }
}

/* Header Section */
.missions-header {
    position: relative;
    padding: 0;
    z-index: 1;
}

.missions-header-bg {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        linear-gradient(225deg, rgba(251, 191, 36, 0.2) 0%, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: -1;
}

.missions-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 10;
}

.missions-close-btn:hover {
    background: #ef4444;
    border-color: #ef4444;
    transform: rotate(90deg) scale(1.1);
}

.missions-title-section {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px 30px 20px;
}

.missions-emblem {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    box-shadow: 
        0 10px 30px rgba(139, 92, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    animation: emblemGlow 3s ease-in-out infinite;
}

@keyframes emblemGlow {
    0%, 100% { box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    50% { box-shadow: 0 10px 40px rgba(139, 92, 246, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(251, 191, 36, 0.3); }
}

.missions-emblem::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--guild-primary), #a855f7);
    z-index: -1;
    opacity: 0.5;
}

.missions-title-text h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, var(--guild-primary) 50%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 20px rgba(251, 191, 36, 0.3);
}

.missions-title-text p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Paladin Stats Bar */
.paladin-stats-bar {
    display: flex;
    gap: 24px;
    padding: 16px 30px 24px;
    flex-wrap: wrap;
}

.paladin-stats-bar .paladin-stats {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.paladin-stats-bar .stat {
    text-align: center;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    min-width: 100px;
    transition: all 0.3s ease;
}

.paladin-stats-bar .stat:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
    transform: translateY(-2px);
}

.paladin-stats-bar .label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 6px;
}

.paladin-stats-bar .value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--guild-primary), #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mission Tabs */
.missions-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    margin: 0 20px;
    border-radius: 16px;
    gap: 8px;
}

.missions-tabs .mission-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.missions-tabs .mission-tab i {
    font-size: 1.1rem;
}

.missions-tabs .mission-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.missions-tabs .mission-tab.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(251, 191, 36, 0.2));
    color: var(--guild-primary);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.missions-tabs .mission-tab.active i {
    color: #a855f7;
}

/* Missions Content */
.missions-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    padding-bottom: 60px;
    position: relative;
    z-index: 1;
    min-height: 0;
}

/* Mission Tab Content - Show/Hide */
.mission-tab-content {
    display: none;
}

.mission-tab-content.active {
    display: block;
}

.missions-content::-webkit-scrollbar {
    width: 6px;
}

.missions-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.missions-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--guild-primary), #a855f7);
    border-radius: 3px;
}

/* Loading State */
.missions-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 20px;
}

.loading-orb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    animation: orbPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.5);
}

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

.missions-loading p {
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    animation: textFade 1.5s ease-in-out infinite;
}

@keyframes textFade {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Mission Difficulty Groups */
.mission-difficulty-group {
    margin-bottom: 30px;
}

.difficulty-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.difficulty-header::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        currentColor 10px,
        currentColor 11px
    );
}

.difficulty-header.easy {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.05));
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.difficulty-header.medium {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.difficulty-header.hard {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.05));
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.difficulty-header.legendary {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(168, 85, 247, 0.1));
    color: var(--guild-primary);
    border: 1px solid rgba(251, 191, 36, 0.4);
    animation: legendaryShine 3s ease-in-out infinite;
}

@keyframes legendaryShine {
    0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.1); }
    50% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.3); }
}

/* Missions Grid */
.missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* Mission Card - Enhanced */
.mission-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.mission-card::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mission-card.easy::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.mission-card.medium::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.mission-card.hard::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.mission-card.legendary::before { 
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #a855f7);
    background-size: 200% 100%;
    animation: legendaryBar 2s linear infinite;
}

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

.mission-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(139, 92, 246, 0.1);
}

.mission-card:hover::after {
    opacity: 1;
    background: radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.1), transparent 70%);
}

.mission-card.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(50%);
}

.mission-card.legendary {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(139, 92, 246, 0.05), rgba(15, 23, 42, 0.95));
    border-color: rgba(251, 191, 36, 0.3);
}

/* Mission Card Top Row */
.mission-card-top {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Mission Icon - Enhanced */
.mission-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    position: relative;
}

.mission-card.easy .mission-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.1));
    color: #4ade80;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
}

.mission-card.medium .mission-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0.1));
    color: #60a5fa;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.mission-card.hard .mission-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(239, 68, 68, 0.1));
    color: #f87171;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

.mission-card.legendary .mission-icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(168, 85, 247, 0.3));
    color: #fbbf24;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 4px 30px rgba(251, 191, 36, 0.5), 0 0 15px rgba(168, 85, 247, 0.3); }
}

/* Mission Details */
.mission-details {
    flex: 1;
    min-width: 0;
}

.mission-details h5 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
    line-height: 1.3;
}

.mission-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Mission Stats Row */
.mission-stats-row {
    display: flex;
    gap: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    flex-wrap: wrap;
}

.mission-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.mission-stat i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.85rem;
}

.mission-stat.duration i { color: #22d3ee; }
.mission-stat.success i { color: #4ade80; }
.mission-stat span { color: rgba(255, 255, 255, 0.7); }

/* Mission Rewards Row */
.mission-rewards-row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.rewards-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.reward-item.level {
    color: var(--guild-primary);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.reward-item.shards {
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Start Mission Button */
.btn-start-mission {
    background: linear-gradient(135deg, var(--guild-primary) 0%, #f59e0b 100%);
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    color: #000;
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-start-mission:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(251, 191, 36, 0.4);
}

.btn-start-mission:disabled {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* No Active Mission State */
.no-active-mission {
    text-align: center;
    padding: 60px 20px;
}

.idle-paladin {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(251, 191, 36, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
    animation: idleBob 3s ease-in-out infinite;
}

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

.no-active-mission h4 {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 8px;
}

.no-active-mission p {
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Active Mission Card */
.active-mission-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(251, 191, 36, 0.1), rgba(15, 23, 42, 0.9));
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    max-width: 450px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.active-mission-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--guild-primary), #a855f7, transparent);
    animation: scanLine 2s linear infinite;
}

@keyframes scanLine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.active-mission-card .mission-icon.large {
    width: 90px;
    height: 90px;
    font-size: 2.5rem;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(251, 191, 36, 0.2));
    border-radius: 20px;
    animation: activeIconPulse 2s ease-in-out infinite;
}

@keyframes activeIconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5); }
}

.active-mission-card h4 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 20px;
}

.mission-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 2rem;
    font-weight: 800;
    color: #22d3ee;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
}

.mission-timer i {
    animation: timerPulse 1s ease-in-out infinite;
    color: #a855f7;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; transform: rotate(0deg); }
    50% { opacity: 0.5; transform: rotate(180deg); }
}

.mission-progress {
    margin-bottom: 20px;
}

.progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7, var(--guild-primary), #a855f7, #6366f1);
    background-size: 300% 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
    animation: progressFlow 2s linear infinite;
    position: relative;
}

@keyframes progressFlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
}

.mission-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
    font-style: italic;
}

/* Empty History State */
.empty-history {
    text-align: center;
    padding: 60px 20px;
}

.empty-history i {
    font-size: 4rem;
    color: rgba(139, 92, 246, 0.2);
    margin-bottom: 20px;
}

.empty-history p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 8px;
}

.empty-history span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.3);
}

/* History Entry */
.history-entry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.history-entry:hover {
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.history-entry.success {
    border-left: 4px solid #22c55e;
}

.history-entry.failed {
    border-left: 4px solid #ef4444;
}

.history-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.history-entry.success .history-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.history-entry.failed .history-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.history-details {
    flex: 1;
}

.history-details .mission-name {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 4px;
}

.history-details .history-date {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.history-rewards {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.history-rewards span {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.history-entry.success .history-rewards span:first-child { color: var(--guild-primary); }
.history-entry.success .history-rewards span:last-child { color: #a855f7; }

.failed-text {
    color: #ef4444 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .missions-modal-content {
        max-height: 95vh;
        width: 98%;
        border-radius: 20px;
    }
    
    .missions-title-section {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }
    
    .missions-emblem {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
    
    .missions-title-text h2 {
        font-size: 1.4rem;
    }
    
    .paladin-stats-bar {
        padding: 12px 20px 20px;
    }
    
    .paladin-stats-bar .stat {
        min-width: 80px;
        padding: 10px 14px;
    }
    
    .missions-tabs {
        margin: 0 12px;
        padding: 6px;
    }
    
    .missions-tabs .mission-tab {
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    .missions-tabs .mission-tab span {
        display: none;
    }
    
    .missions-tabs .mission-tab i {
        font-size: 1.2rem;
    }
    
    .missions-content {
        padding: 16px;
    }
    
    .missions-grid {
        grid-template-columns: 1fr;
    }
    
    .mission-rewards-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .rewards-group {
        width: 100%;
        justify-content: center;
    }
    
    .btn-start-mission {
        width: 100%;
        justify-content: center;
    }
    
    .mission-timer {
        font-size: 1.5rem;
    }
    
    .history-entry {
        flex-wrap: wrap;
    }
    
    .history-rewards {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 8px;
        padding-left: 66px;
    }
}

/* ===== MISSION COMPLETE / CLAIM REWARDS ===== */
.active-mission-card.mission-complete {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(251, 191, 36, 0.15), rgba(15, 23, 42, 0.95));
    border-color: rgba(34, 197, 94, 0.5);
    animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 60px rgba(34, 197, 94, 0.4), 0 0 100px rgba(251, 191, 36, 0.2); }
}

.completion-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.1), transparent 60%);
    animation: rotateGlow 10s linear infinite;
    pointer-events: none;
}

@keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.mission-icon.completed {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    animation: completedBounce 0.6s ease-out;
}

@keyframes completedBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.btn-claim-rewards {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    animation: claimPulse 2s ease-in-out infinite;
}

@keyframes claimPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.btn-claim-rewards:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.5);
}

.btn-claim-rewards:disabled {
    opacity: 0.7;
    cursor: wait;
    animation: none;
}

/* Reward Reveal Screen */
.mission-reward-reveal {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(251, 191, 36, 0.1), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 20px;
    max-width: 450px;
    margin: 0 auto;
    animation: revealSlide 0.5s ease-out;
}

.mission-reward-reveal.failed {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(15, 23, 42, 0.95));
    border-color: rgba(239, 68, 68, 0.4);
}

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

.reward-celebration {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.5);
    animation: celebrationPop 0.6s ease-out;
}

.mission-reward-reveal.failed .reward-celebration {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.5);
}

@keyframes celebrationPop {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.mission-reward-reveal h3 {
    font-size: 1.8rem;
    color: #22c55e;
    margin: 0 0 10px;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.mission-reward-reveal.failed h3 {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.reward-mission-name {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    margin: 0 0 24px;
}

.failure-message {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0 0 24px;
    font-style: italic;
}

.rewards-earned {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.rewards-earned .reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    animation: rewardPop 0.5s ease-out both;
}

.rewards-earned .reward-item:nth-child(1) { animation-delay: 0.2s; }
.rewards-earned .reward-item:nth-child(2) { animation-delay: 0.4s; }

@keyframes rewardPop {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.rewards-earned .reward-item i {
    font-size: 1.5rem;
    color: var(--guild-primary);
}

.rewards-earned .reward-item span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}

.btn-continue-adventure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-continue-adventure:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4);
}

/* ===== ENHANCED ACTIVE MISSION PANEL ===== */
.active-mission-panel {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.active-mission-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1);
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}

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

.mission-scene {
    position: relative;
    height: 140px;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.3), rgba(99, 102, 241, 0.1));
    overflow: hidden;
}

.mission-environment {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(34, 197, 94, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(59, 130, 246, 0.1) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 0%, rgba(139, 92, 246, 0.2) 0%, transparent 60%);
}

.paladin-sprite {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
    animation: paladinWalk 1.5s ease-in-out infinite;
}

@keyframes paladinWalk {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
}

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

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(139, 92, 246, 0.6);
    border-radius: 50%;
    animation: floatParticle 4s ease-in-out infinite;
}

.particle:nth-child(1) { left: 10%; top: 30%; animation-delay: 0s; }
.particle:nth-child(2) { left: 30%; top: 50%; animation-delay: 0.5s; }
.particle:nth-child(3) { left: 50%; top: 20%; animation-delay: 1s; }
.particle:nth-child(4) { left: 70%; top: 60%; animation-delay: 1.5s; }
.particle:nth-child(5) { left: 90%; top: 40%; animation-delay: 2s; }

@keyframes floatParticle {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
    50% { transform: translateY(-20px) scale(1.5); opacity: 1; }
}

.mission-title-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.95), transparent);
    text-align: center;
}

.mission-title-banner h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.mission-info-panel {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 20px;
    align-items: flex-start;
}

.timer-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.timer-ring {
    position: relative;
    width: 100px;
    height: 100px;
}

.timer-ring svg {
    transform: rotate(-90deg);
    width: 100px;
    height: 100px;
}

.timer-ring circle {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
}

.timer-ring .ring-bg {
    stroke: rgba(99, 102, 241, 0.2);
}

.timer-ring .ring-progress {
    stroke: url(#timerGradient);
    stroke-dasharray: 283;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

.timer-display {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timer-display .time {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Courier New', monospace;
}

.timer-display .label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timer-status {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

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

.mission-log-section {
    flex: 1;
}

.log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.log-header i {
    color: #a855f7;
}

.mission-log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 120px;
    overflow-y: auto;
    padding-right: 8px;
}

.mission-log::-webkit-scrollbar {
    width: 4px;
}

.mission-log::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.mission-log::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 2px;
}

.log-entry {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    border-left: 2px solid rgba(99, 102, 241, 0.4);
    animation: logFadeIn 0.3s ease-out;
}

@keyframes logFadeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.log-entry.new {
    background: rgba(34, 197, 94, 0.15);
    border-left-color: #22c55e;
}

.log-time {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    min-width: 45px;
    font-family: 'Courier New', monospace;
}

.log-message {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.mission-warning {
    padding: 12px 20px;
    background: rgba(239, 68, 68, 0.1);
    border-top: 1px solid rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: rgba(239, 68, 68, 0.8);
}

.mission-warning i {
    font-size: 1rem;
}

/* ===== CHRONICLE TAB STYLING ===== */
.chronicle-empty {
    text-align: center;
    padding: 60px 30px;
}

.chronicle-book {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15));
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: rgba(99, 102, 241, 0.6);
}

.chronicle-empty h4 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 1.3rem;
}

.chronicle-empty p {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.chronicle-timeline {
    padding: 10px 0;
}

.chronicle-day {
    margin-bottom: 24px;
}

.chronicle-day:last-child {
    margin-bottom: 0;
}

.chronicle-date {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), transparent);
    border-radius: 10px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 600;
}

.chronicle-date i {
    color: #a855f7;
}

.chronicle-entries {
    padding-left: 10px;
}

.chronicle-entry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
}

.chronicle-entry:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.entry-time {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    min-width: 55px;
    font-family: 'Courier New', monospace;
    padding-top: 3px;
}

.entry-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2px;
}

.entry-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.chronicle-entry.success .entry-dot {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.chronicle-entry.failed .entry-dot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.entry-line {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 6px;
}

.chronicle-entry:last-child .entry-line {
    display: none;
}

.entry-content {
    flex: 1;
}

.entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.entry-mission {
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
}

.entry-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
}

.entry-status.success {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.entry-status.failed {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.entry-rewards {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.entry-rewards .reward {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.entry-rewards .reward i {
    font-size: 0.75rem;
}

.entry-rewards .reward:first-child i {
    color: #22c55e;
}

.entry-rewards .reward:last-child i {
    color: #a855f7;
}

.entry-failure {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: rgba(239, 68, 68, 0.7);
    font-style: italic;
}

.entry-failure i {
    font-size: 0.8rem;
}

/* Mobile adjustments for mission panel */
@media (max-width: 768px) {
    .mission-info-panel {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .timer-section {
        flex-direction: row;
        justify-content: center;
        gap: 16px;
    }
    
    .timer-ring {
        width: 80px;
        height: 80px;
    }
    
    .timer-ring svg {
        width: 80px;
        height: 80px;
    }
    
    .timer-display .time {
        font-size: 1.1rem;
    }
    
    .mission-log {
        max-height: 100px;
    }
    
    .chronicle-entry {
        flex-wrap: wrap;
    }
    
    .entry-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ===== MISSION COMPLETE PANEL ===== */
.mission-complete-panel {
    text-align: center;
    padding: 40px 30px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(251, 191, 36, 0.1), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    animation: completeSlideIn 0.5s ease-out;
}

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

.complete-celebration {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

.complete-icon {
    width: 100px;
    height: 100px;
    margin: 10px auto;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 
        0 0 40px rgba(34, 197, 94, 0.5),
        0 0 80px rgba(34, 197, 94, 0.3);
    animation: celebratePop 0.6s ease-out, celebrateFloat 3s ease-in-out infinite;
    animation-delay: 0s, 0.6s;
}

@keyframes celebratePop {
    0% { transform: scale(0) rotate(-180deg); }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

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

.confetti {
    position: absolute;
    inset: -20px;
    pointer-events: none;
}

.confetti::before,
.confetti::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.confetti::before {
    top: 0;
    left: 20%;
    background: #f59e0b;
    animation: confettiFall 2s ease-out infinite;
}

.confetti::after {
    top: 0;
    right: 20%;
    background: #a855f7;
    animation: confettiFall 2s ease-out infinite 0.3s;
}

@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
}

.mission-complete-panel h3 {
    font-size: 1.8rem;
    color: #22c55e;
    margin: 0 0 8px;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
}

.complete-mission-name {
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 6px;
    font-weight: 600;
}

.complete-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 24px;
}

/* =============================================
   GUILD FEATURES - Sub-tabs Navigation
   ============================================= */

.guild-sub-tabs {
    display: flex;
    gap: 8px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 16px;
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.guild-sub-tabs::-webkit-scrollbar {
    display: none;
}

.guild-sub-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.guild-sub-tab:hover {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

.guild-sub-tab.active {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(168, 85, 247, 0.2));
    border-color: #fbbf24;
    color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.3);
}

.guild-sub-tab i {
    font-size: 1rem;
}

.guild-sub-content {
    display: none;
}

.guild-sub-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* =============================================
   PALADIN STATS VIEW
   ============================================= */

.paladins-header {
    text-align: center;
    margin-bottom: 30px;
}

.paladins-header h2 {
    font-size: 1.8rem;
    color: #fbbf24;
    margin-bottom: 10px;
}

.paladins-header p {
    color: #94a3b8;
}

.paladins-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.paladin-stat-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.paladin-stat-card.is-me {
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.paladin-stat-card.defeated {
    opacity: 0.7;
    filter: grayscale(0.3);
    border-color: rgba(239, 68, 68, 0.5);
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(15, 23, 42, 0.95));
}

.paladin-stat-card.defeated::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.15), transparent 70%);
    border-radius: inherit;
    pointer-events: none;
}

.paladin-dead-warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.2));
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 10px;
    padding: 12px 15px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fca5a5;
    font-size: 0.85rem;
    animation: deadPulse 2s ease-in-out infinite;
}

.paladin-dead-warning i {
    font-size: 1.4rem;
    color: #ef4444;
}

@keyframes deadPulse {
    0%, 100% { border-color: rgba(239, 68, 68, 0.4); }
    50% { border-color: rgba(239, 68, 68, 0.8); }
}

.paladin-stat-card.is-resting {
    border-color: rgba(99, 102, 241, 0.5);
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.1), rgba(15, 23, 42, 0.95));
}

.paladin-stat-card.is-resting::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.1), transparent 70%);
    border-radius: inherit;
    pointer-events: none;
}

.resting-indicator {
    position: absolute;
    top: -5px;
    left: -5px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    animation: restingPulse 2s ease infinite;
    z-index: 2;
}

@keyframes restingPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(99, 102, 241, 0.5); }
    50% { transform: scale(1.1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.8); }
}

.resting-status {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(79, 70, 229, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.resting-status i {
    color: #a5b4fc;
    font-size: 1.2rem;
}

.resting-status span {
    color: #c7d2fe;
    font-size: 0.9rem;
    flex: 1;
}

.resting-status .rest-timer {
    background: rgba(99, 102, 241, 0.3);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #e0e7ff;
}

.paladin-power.power-disabled {
    opacity: 0.5;
}

.paladin-power.power-disabled span {
    color: #6366f1;
}

.paladin-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.paladin-avatar {
    position: relative;
}

.paladin-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #a855f7;
    object-fit: cover;
}

.paladin-level {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.paladin-name-info {
    flex: 1;
}

.paladin-name-info h4 {
    color: #fff;
    font-size: 1.1rem;
    margin: 0 0 5px;
}

.you-badge {
    background: #22c55e;
    color: #000;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: 700;
}

.paladin-xp-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.paladin-xp-bar .xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #c084fc);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.paladin-xp-bar span {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
}

.paladin-power {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: rgba(168, 85, 247, 0.2);
    border-radius: 10px;
}

.paladin-power i {
    color: #fbbf24;
    font-size: 1.2rem;
}

.paladin-power span {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.paladin-power.has-penalty {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.paladin-power .power-penalty-badge {
    color: #ef4444;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 2px;
}

.paladin-health-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.health-label {
    color: #ef4444;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.health-bar-container {
    flex: 1;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.health-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.health-fill.warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.health-fill.critical {
    background: linear-gradient(90deg, #dc2626, #ef4444);
    animation: healthPulse 1s ease infinite;
}

@keyframes healthPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.health-text {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}

.paladin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    position: relative;
}

.stat-item.atk { border-bottom: 3px solid #ef4444; }
.stat-item.def { border-bottom: 3px solid #3b82f6; }
.stat-item.spd { border-bottom: 3px solid #22c55e; }

.stat-item i {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.stat-item.atk i { color: #ef4444; }
.stat-item.def i { color: #3b82f6; }
.stat-item.spd i { color: #22c55e; }

.stat-label {
    font-size: 0.7rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.btn-upgrade-stat {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22c55e;
    border: none;
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-upgrade-stat:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
}

.paladin-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-points-available {
    text-align: center;
    padding: 8px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    color: #22c55e;
    font-weight: 600;
}

.btn-rest, .btn-full-rest {
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-rest {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
}

.btn-full-rest {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.not-paladin-notice {
    text-align: center;
    padding: 20px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    color: #fbbf24;
    margin-top: 20px;
}

.no-paladins {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
}

.no-paladins i {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* =============================================
   SKIRMISHES VIEW - RPG BATTLE ARENA
   ============================================= */

.skirmish-arena {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 10, 40, 0.95) 100%);
    border-radius: 20px;
    padding: 30px;
    padding-top: 45px;
    border: 2px solid rgba(239, 68, 68, 0.3);
    position: relative;
    overflow: visible;
}

.skirmish-arena::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
}

.arena-header {
    text-align: center;
    margin-bottom: 25px;
}

.arena-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.arena-title i {
    font-size: 2rem;
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.arena-title h2 {
    font-size: 2rem;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.arena-desc {
    color: #94a3b8;
    margin: 0;
}

/* My Paladin Status Card */
.skirmish-my-paladin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(16, 185, 129, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 25px;
    margin-top: 15px;
    overflow: visible;
}

.skirmish-my-paladin.low-health {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    border-color: rgba(239, 68, 68, 0.4);
}

.my-paladin-portrait {
    position: relative;
    overflow: visible;
}

.my-paladin-portrait .portrait-frame {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.3);
}

.skirmish-my-paladin.low-health .portrait-frame {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 5px 20px rgba(239, 68, 68, 0.3);
}

.my-paladin-portrait .level-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: #fbbf24;
    color: #1e293b;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
}

.my-paladin-info {
    flex: 1;
}

.my-paladin-info h3 {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 1.1rem;
}

.my-paladin-health {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.health-bar-skirmish {
    flex: 1;
    height: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    overflow: hidden;
    max-width: 200px;
}

.health-bar-skirmish .health-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 6px;
    transition: width 0.3s ease;
}

.health-bar-skirmish .health-fill.warning {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.health-bar-skirmish .health-fill.critical {
    background: linear-gradient(90deg, #ef4444, #f87171);
    animation: pulse-critical 1s infinite;
}

@keyframes pulse-critical {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.my-paladin-health span {
    color: #94a3b8;
    font-size: 0.85rem;
    white-space: nowrap;
}

.my-paladin-power {
    display: flex;
    align-items: center;
    gap: 8px;
}

.my-paladin-power i {
    color: #fbbf24;
}

.my-paladin-power .power-value {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.my-paladin-power .power-penalty {
    color: #ef4444;
    font-size: 0.8rem;
}

.my-paladin-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.my-paladin-actions .btn-heal-shards {
    padding: 12px 20px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.my-paladin-actions .btn-heal-shards:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.4);
}

/* Safe Mode Button */
.btn-safe-mode {
    padding: 12px 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-safe-mode:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(59, 130, 246, 0.4);
}

.btn-safe-mode.active {
    background: linear-gradient(135deg, #10b981, #059669);
    animation: safe-pulse 2s ease-in-out infinite;
}

@keyframes safe-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }
}

.btn-safe-mode.active:hover {
    box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4);
}

/* Safe Mode Badge on Portrait */
.safe-mode-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
    border: 2px solid #1e293b;
    z-index: 10;
}

/* Safe Mode State on Paladin Card */
.skirmish-my-paladin.safe-mode {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.skirmish-my-paladin.safe-mode::before {
    content: 'SAFE MODE ACTIVE';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: linear-gradient(135deg, #10b981, #059669);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.full-health-badge {
    color: #22c55e;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Arena Content Layout */
.arena-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}

@media (max-width: 900px) {
    .arena-content {
        grid-template-columns: 1fr;
    }
}

.enemies-section h3,
.weekly-champions h3,
.battle-log h3 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.enemies-section h3 i { color: #ef4444; }
.weekly-champions h3 i { color: #fbbf24; }
.battle-log h3 i { color: #a855f7; }

/* Enemy Cards Grid */
.enemies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.skirmish-enemy-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.skirmish-enemy-card:hover {
    border-color: rgba(239, 68, 68, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.2);
}

.skirmish-enemy-card.easy-target {
    border-color: rgba(34, 197, 94, 0.4);
}

.skirmish-enemy-card.easy-target:hover {
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.2);
}

.skirmish-enemy-card.hard-target {
    border-color: rgba(239, 68, 68, 0.4);
}

.skirmish-enemy-card.on-cooldown {
    opacity: 0.5;
    cursor: not-allowed;
}

.enemy-portrait {
    position: relative;
    flex-shrink: 0;
}

.enemy-portrait img {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    border: 2px solid rgba(168, 85, 247, 0.5);
    object-fit: cover;
}

.enemy-level {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #fbbf24;
    color: #1e293b;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
}

.enemy-info {
    flex: 1;
    min-width: 0;
}

.enemy-name {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.enemy-guild {
    color: #64748b;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.enemy-health-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    margin-top: 8px;
    overflow: hidden;
}

.enemy-health-bar .health-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 3px;
}

.enemy-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.enemy-stats .stat {
    display: flex;
    align-items: center;
    gap: 5px;
}

.enemy-stats .stat.power {
    color: #a855f7;
    font-size: 0.85rem;
}

.enemy-stats .stat.chance {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.8rem;
}

.enemy-stats .stat.chance.easy {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.enemy-stats .stat.chance.medium {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.enemy-stats .stat.chance.hard {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.enemy-stats .chance-label {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-right: 2px;
}

.cooldown-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 0.9rem;
    gap: 5px;
}

.no-enemies {
    text-align: center;
    padding: 50px 20px;
    color: #64748b;
}

.no-enemies i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #334155;
}

.no-enemies h4 {
    color: #94a3b8;
    margin: 0 0 10px 0;
}

/* Sidebar - Champions & Log */
.arena-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.weekly-champions,
.battle-log {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border-radius: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.battle-log .log-list {
    max-height: 300px;
    overflow-y: auto;
}

.battle-log .log-list::-webkit-scrollbar {
    width: 4px;
}

.battle-log .log-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.battle-log .log-list::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.5);
    border-radius: 2px;
}

.skirmish-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s ease;
}

.skirmish-leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.skirmish-leaderboard-row.is-me {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.skirmish-leaderboard-row.gold .rank i { color: #fbbf24; }
.skirmish-leaderboard-row.silver .rank i { color: #94a3b8; }
.skirmish-leaderboard-row.bronze .rank i { color: #cd7f32; }

.skirmish-leaderboard-row .rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
}

.skirmish-leaderboard-row .rank i {
    font-size: 1rem;
    color: #64748b;
}

.skirmish-leaderboard-row .rank span {
    font-size: 0.7rem;
    color: #64748b;
}

.skirmish-leaderboard-row img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.4);
}

.skirmish-leaderboard-row .info {
    flex: 1;
    min-width: 0;
}

.skirmish-leaderboard-row .info .name {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skirmish-leaderboard-row .info .wins {
    color: #22c55e;
    font-size: 0.75rem;
}

.skirmish-leaderboard-row .rewards {
    color: #fbbf24;
    font-size: 0.85rem;
}

/* Battle History */
.skirmish-history-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.skirmish-history-row.victory {
    background: rgba(34, 197, 94, 0.1);
    border-left: 3px solid #22c55e;
}

.skirmish-history-row.defeat {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

.skirmish-history-row .result-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skirmish-history-row.victory .result-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.skirmish-history-row.defeat .result-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.skirmish-history-row .battle-info {
    flex: 1;
}

.skirmish-history-row .battle-info .opponent {
    display: block;
    color: #fff;
    font-size: 0.85rem;
}

.skirmish-history-row .battle-info .result-text {
    font-size: 0.75rem;
    font-weight: 600;
}

.skirmish-history-row.victory .result-text { color: #22c55e; }
.skirmish-history-row.defeat .result-text { color: #ef4444; }

.skirmish-history-row .battle-rewards .reward {
    color: #fbbf24;
    font-size: 0.85rem;
}

.skirmish-history-row .battle-rewards .damage {
    color: #ef4444;
    font-size: 0.85rem;
}

/* Arena Locked Overlay */
.arena-locked {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    border-radius: 20px;
    z-index: 10;
}

.arena-locked i {
    font-size: 3rem;
    margin-bottom: 15px;
    color: #64748b;
}

.arena-locked h3 {
    color: #fff;
    margin: 0 0 10px 0;
}

/* Attack Modal */
.attack-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.attack-modal {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(239, 68, 68, 0.5);
    border-radius: 20px;
    padding: 30px;
    max-width: 420px;
    width: 90%;
    position: relative;
    animation: slideUp 0.3s ease;
}

.attack-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.attack-modal .modal-close:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fff;
}

.attack-modal-header {
    text-align: center;
    margin-bottom: 25px;
}

.attack-modal-header i {
    font-size: 2rem;
    color: #ef4444;
    margin-bottom: 10px;
    display: block;
}

.attack-modal-header h2 {
    color: #fff;
    margin: 0;
    font-size: 1.5rem;
}

.attack-modal-target {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 14px;
    padding: 15px;
    margin-bottom: 20px;
}

.attack-modal-target img {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    border: 2px solid #a855f7;
}

.attack-modal-target .target-info h3 {
    color: #fff;
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.attack-modal-target .target-guild {
    color: #64748b;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
}

.attack-modal-target .target-stats {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.attack-modal-chance {
    text-align: center;
    margin-bottom: 20px;
}

.chance-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border: 4px solid;
}

.chance-circle.favorable {
    background: rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.chance-circle.neutral {
    background: rgba(251, 191, 36, 0.1);
    border-color: #fbbf24;
}

.chance-circle.risky {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

.chance-circle .chance-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.chance-circle .chance-label {
    font-size: 0.7rem;
    color: #94a3b8;
}

.chance-desc {
    font-size: 0.9rem;
}

.chance-desc i {
    margin-right: 5px;
}

.chance-circle.favorable + .chance-desc { color: #22c55e; }
.chance-circle.neutral + .chance-desc { color: #fbbf24; }
.chance-circle.risky + .chance-desc { color: #ef4444; }

.attack-modal-stakes {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.attack-modal-stakes .stake {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
}

.attack-modal-stakes .stake.win {
    background: rgba(34, 197, 94, 0.1);
}

.attack-modal-stakes .stake.lose {
    background: rgba(239, 68, 68, 0.1);
}

.attack-modal-stakes .stake.win i { color: #22c55e; }
.attack-modal-stakes .stake.lose i { color: #ef4444; }

.attack-modal-stakes .stake i {
    font-size: 1.2rem;
    margin-top: 2px;
}

.attack-modal-stakes .stake strong {
    display: block;
    color: #fff;
    font-size: 0.85rem;
    margin-bottom: 3px;
}

.attack-modal-stakes .stake span {
    color: #94a3b8;
    font-size: 0.8rem;
}

/* Attack Cost Warning */
.attack-cost-warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    animation: warningPulse 2s ease infinite;
}

@keyframes warningPulse {
    0%, 100% { border-color: rgba(239, 68, 68, 0.4); }
    50% { border-color: rgba(239, 68, 68, 0.8); }
}

.attack-cost-warning i {
    color: #a855f7;
    font-size: 1.3rem;
}

.attack-cost-warning span {
    color: #fca5a5;
    font-size: 1rem;
}

.attack-cost-warning strong {
    color: #fff;
}

.attack-cost-warning small {
    color: #94a3b8;
    font-size: 0.8rem;
}

.attack-modal-actions {
    display: flex;
    gap: 15px;
}

.attack-modal-actions .btn-cancel {
    flex: 1;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #94a3b8;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.attack-modal-actions .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.attack-modal-actions .btn-attack-confirm {
    flex: 1.5;
    padding: 14px 25px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.attack-modal-actions .btn-attack-confirm:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

/* =============================================
   BATTLE RESULT OVERLAY
   ============================================= */
.battle-result-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15000;
    animation: battleFadeIn 0.3s ease;
}

.battle-result-overlay.victory {
    background: radial-gradient(ellipse at center, rgba(34, 197, 94, 0.3) 0%, rgba(0, 0, 0, 0.95) 70%);
}

.battle-result-overlay.defeat {
    background: radial-gradient(ellipse at center, rgba(239, 68, 68, 0.3) 0%, rgba(0, 0, 0, 0.95) 70%);
}

.battle-result-overlay.closing {
    animation: battleFadeOut 0.3s ease forwards;
}

@keyframes battleFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes battleFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.battle-result-content {
    text-align: center;
    position: relative;
    animation: battleSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border-radius: 24px;
    padding: 40px 50px;
    max-width: 480px;
    width: 90%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.victory .battle-result-content {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 25px 80px rgba(34, 197, 94, 0.2), 0 0 100px rgba(34, 197, 94, 0.1);
}

.defeat .battle-result-content {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 25px 80px rgba(239, 68, 68, 0.2), 0 0 100px rgba(239, 68, 68, 0.1);
}

@keyframes battleSlideIn {
    from {
        opacity: 0;
        transform: scale(0.5) translateY(50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.battle-flash {
    position: fixed;
    inset: 0;
    background: white;
    animation: battleFlash 0.4s ease-out forwards;
    pointer-events: none;
}

@keyframes battleFlash {
    0% { opacity: 0.8; }
    100% { opacity: 0; }
}

.battle-result-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: battleIconPulse 1s ease infinite;
}

.victory .battle-result-icon {
    color: #fbbf24;
    text-shadow: 0 0 40px rgba(251, 191, 36, 0.8), 0 0 80px rgba(251, 191, 36, 0.4);
}

.defeat .battle-result-icon {
    color: #ef4444;
    text-shadow: 0 0 40px rgba(239, 68, 68, 0.8), 0 0 80px rgba(239, 68, 68, 0.4);
}

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

.battle-result-title {
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 8px;
    margin-bottom: 30px;
    animation: battleTitleGlow 2s ease infinite;
}

.victory .battle-result-title {
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.8), 0 4px 20px rgba(0, 0, 0, 0.5);
}

.defeat .battle-result-title {
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.8), 0 4px 20px rgba(0, 0, 0, 0.5);
}

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

.battle-stats {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    padding: 20px 30px;
    margin-bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.battle-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.battle-stat-row:last-child {
    border-bottom: none;
}

.battle-stat-row .stat-label {
    color: #94a3b8;
    font-size: 0.95rem;
}

.battle-stat-row .stat-value {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}

.battle-stat-row .stat-roll {
    color: #fbbf24;
    font-size: 0.9rem;
    padding: 4px 10px;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 20px;
}

.battle-outcome {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}

.reward-item, .penalty-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    animation: rewardPop 0.5s ease backwards;
}

.reward-item:nth-child(1) { animation-delay: 0.3s; }
.reward-item:nth-child(2) { animation-delay: 0.45s; }
.reward-item:nth-child(3) { animation-delay: 0.6s; }

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

.reward-item.shards {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(139, 92, 246, 0.2) 100%);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #c4b5fd;
}

.reward-item.shards i {
    color: #a855f7;
}

.reward-item.xp {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fde68a;
}

.reward-item.xp i {
    color: #fbbf24;
}

.reward-item.damage {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(22, 163, 74, 0.2) 100%);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #86efac;
}

.reward-item.damage i {
    color: #22c55e;
}

.penalty-item {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
    font-size: 1.3rem;
}

.penalty-item i {
    color: #ef4444;
    font-size: 1.5rem;
}

.penalty-item.shards {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3) 0%, rgba(139, 92, 246, 0.2) 100%);
    border: 1px solid rgba(168, 85, 247, 0.5);
}

.penalty-item.shards i {
    color: #a855f7;
}

.penalty-item.hp {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.2) 100%);
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.cost-breakdown {
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

.cost-breakdown small {
    color: #64748b;
    font-size: 0.85rem;
}

.penalty-note {
    width: 100%;
    color: #94a3b8;
    font-size: 1rem;
    font-style: italic;
}

.btn-close-result {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    color: white;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.defeat .btn-close-result {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.btn-close-result:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4);
}

.defeat .btn-close-result:hover {
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

/* Rest Confirmation Modal */
.rest-confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.rest-confirm-modal {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 20px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    position: relative;
    animation: slideUp 0.3s ease;
    text-align: center;
}

.rest-confirm-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rest-confirm-modal .modal-close:hover {
    background: rgba(99, 102, 241, 0.3);
    color: #fff;
}

.rest-modal-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.rest-confirm-modal h2 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.rest-info {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 20px;
}

.rest-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #86efac;
    margin-bottom: 10px;
}

.rest-benefit i {
    color: #22c55e;
}

.rest-cost {
    font-size: 1.5rem;
    font-weight: 700;
    color: #22c55e;
}

.rest-warnings {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
}

.rest-warnings .warning-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fca5a5;
    font-size: 0.9rem;
    padding: 6px 0;
}

.rest-warnings .warning-item i {
    color: #ef4444;
    font-size: 0.8rem;
}

.rest-actions {
    display: flex;
    gap: 15px;
}

.rest-actions .btn-cancel {
    flex: 1;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #94a3b8;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rest-actions .btn-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.rest-actions .btn-confirm-rest {
    flex: 1.5;
    padding: 12px 20px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.rest-actions .btn-confirm-rest:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

/* Paladin action buttons */
.btn-free-rest {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-free-rest:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
}

.btn-cancel-rest {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-cancel-rest:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4);
}

.btn-heal-shards {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-heal-shards:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(34, 197, 94, 0.4);
}

/* Heal Modal */
.heal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.heal-modal {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(34, 197, 94, 0.5);
    border-radius: 20px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    position: relative;
    animation: slideUp 0.3s ease;
}

.heal-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.heal-modal-header {
    text-align: center;
    margin-bottom: 20px;
}

.heal-modal-header i {
    font-size: 2.5rem;
    color: #22c55e;
    margin-bottom: 10px;
    display: block;
}

.heal-modal-header h2 {
    color: #fff;
    margin: 0;
}

.heal-desc {
    color: #94a3b8;
    text-align: center;
    margin-bottom: 25px;
}

.heal-options {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.heal-option {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.heal-option:hover {
    border-color: rgba(34, 197, 94, 0.5);
    transform: translateY(-3px);
}

.heal-option.recommended {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
}

.heal-option .recommended-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #22c55e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
}

.heal-option .heal-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 8px;
}

.heal-option .heal-cost {
    color: #fbbf24;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.heal-option .heal-label {
    color: #64748b;
    font-size: 0.75rem;
}

.heal-note {
    text-align: center;
    color: #64748b;
    font-size: 0.8rem;
    margin: 0;
}

.heal-note i {
    color: #3b82f6;
    margin-right: 5px;
}

/* =============================================
   RAIDS VIEW
   ============================================= */

.raids-header {
    text-align: center;
    margin-bottom: 30px;
}

.raids-header h2 {
    font-size: 1.8rem;
    color: #a855f7;
    margin-bottom: 10px;
}

.active-raid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 800px) {
    .active-raid {
        grid-template-columns: 1fr;
    }
}

.raid-boss-card {
    background: linear-gradient(145deg, #1e1b4b 0%, #0f172a 100%);
    border: 2px solid rgba(168, 85, 247, 0.3);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
}

.boss-image-wrapper {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #a855f7;
    margin: 0 auto 15px;
    background: linear-gradient(145deg, #1e293b, #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.boss-icon-fallback {
    font-size: 4rem;
    color: #a855f7;
    opacity: 0.8;
}

.boss-image-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.boss-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid #a855f7;
    margin-bottom: 15px;
    object-fit: cover;
}

.boss-info h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.boss-title {
    color: #a855f7;
    font-style: italic;
    display: block;
    margin-bottom: 10px;
}

.difficulty-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.difficulty-badge.normal { background: #22c55e; color: #fff; }
.difficulty-badge.hard { background: #f59e0b; color: #000; }
.difficulty-badge.nightmare { background: #ef4444; color: #fff; }
.difficulty-badge.legendary { background: linear-gradient(135deg, #fbbf24, #a855f7); color: #000; }
.difficulty-badge.easy { background: #3b82f6; color: #fff; }
.difficulty-badge.medium { background: #22c55e; color: #fff; }

.boss-health-bar {
    margin: 20px 0;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.boss-health-bar .health-fill {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.boss-health-bar span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.raid-timer {
    color: #fbbf24;
    margin: 15px 0;
}

.btn-attack-boss {
    padding: 15px 30px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-attack-boss:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}

.raid-participants {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    padding: 20px;
}

.raid-participants h4 {
    color: #fff;
    margin-bottom: 15px;
}

.participant-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
}

.participant-row .rank {
    width: 25px;
    height: 25px;
    background: rgba(168, 85, 247, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #a855f7;
}

.participant-row .name {
    flex: 1;
    color: #fff;
}

.participant-row .damage {
    color: #ef4444;
    font-weight: 600;
}

.no-active-raid {
    text-align: center;
    margin-bottom: 30px;
}

.no-active-raid h3 {
    color: #a855f7;
    margin-bottom: 15px;
}

.boss-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.boss-select-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.boss-select-card:hover {
    border-color: #a855f7;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.boss-select-card .boss-image-wrapper {
    width: 80px;
    height: 80px;
    border-width: 3px;
    margin-bottom: 10px;
}

.boss-select-card .boss-icon-fallback {
    font-size: 2rem;
}

.boss-select-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #a855f7;
    margin-bottom: 10px;
}

.boss-select-card h4 {
    color: #fff;
    margin-bottom: 8px;
}

.boss-stats {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
    font-size: 0.85rem;
    color: #94a3b8;
}

.btn-start-raid {
    padding: 8px 15px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

.raid-history-section {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    padding: 20px;
}

.raid-history-section h3 {
    color: #fff;
    margin-bottom: 15px;
}

.raid-history-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
}

.raid-history-row .boss-name {
    flex: 1;
    color: #fff;
}

.raid-history-row .status {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.raid-history-row .status.victory {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.raid-history-row .status.failed,
.raid-history-row .status.expired {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.raid-history-row .date {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* =============================================
   EPIC RAIDS VIEW - NEW DESIGN
   ============================================= */

.raids-epic-container {
    position: relative;
}

.raids-header-epic {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.raids-header-epic h2 {
    font-size: 2.2rem;
    color: #fff;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.8), 0 0 60px rgba(168, 85, 247, 0.5);
    letter-spacing: 3px;
    animation: raidTitlePulse 2s ease-in-out infinite;
}

.raids-header-epic h2 i {
    color: #ef4444;
    margin-right: 10px;
}

@keyframes raidTitlePulse {
    0%, 100% { text-shadow: 0 0 30px rgba(239, 68, 68, 0.8), 0 0 60px rgba(168, 85, 247, 0.5); }
    50% { text-shadow: 0 0 50px rgba(239, 68, 68, 1), 0 0 100px rgba(168, 85, 247, 0.8); }
}

.header-flames {
    width: 60px;
    height: 40px;
    background: linear-gradient(to top, #ef4444, #f97316, transparent);
    animation: flameFlicker 0.5s ease-in-out infinite alternate;
    border-radius: 50% 50% 20% 20%;
    opacity: 0.7;
}

.header-flames.left { transform: rotate(-15deg); }
.header-flames.right { transform: rotate(15deg); }

@keyframes flameFlicker {
    0% { transform: scaleY(1) scaleX(1); opacity: 0.7; }
    100% { transform: scaleY(1.2) scaleX(0.9); opacity: 0.9; }
}

.raids-subtitle {
    text-align: center;
    color: #94a3b8;
    margin-bottom: 30px;
    font-size: 1rem;
}

/* Epic Raid Arena */
.epic-raid-arena {
    position: relative;
    background: linear-gradient(180deg, #1a0a2e 0%, #0f0a1a 50%, #0a0510 100%);
    border-radius: 20px;
    padding: 40px 30px;
    overflow: hidden;
    border: 2px solid rgba(239, 68, 68, 0.3);
    box-shadow: 0 0 50px rgba(168, 85, 247, 0.2), inset 0 0 100px rgba(239, 68, 68, 0.1);
}

.raid-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.raid-particles {
    position: absolute;
    inset: 0;
}

.raid-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #ef4444;
    border-radius: 50%;
    animation: floatUp 5s linear infinite;
    opacity: 0.6;
    box-shadow: 0 0 10px #ef4444;
}

@keyframes floatUp {
    0% { transform: translateY(100%) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

.raid-lightning {
    position: absolute;
    inset: 0;
    background: transparent;
    animation: lightningFlash 8s ease-in-out infinite;
}

@keyframes lightningFlash {
    0%, 94%, 96%, 98%, 100% { background: transparent; }
    95%, 97% { background: rgba(168, 85, 247, 0.1); }
}

/* Boss Container */
.raid-boss-container {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    z-index: 2;
}

.boss-glow-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.3) 0%, transparent 70%);
    animation: bossGlow 3s ease-in-out infinite;
}

@keyframes bossGlow {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

.boss-avatar-epic {
    position: relative;
    display: inline-block;
}

.boss-health-ring {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: conic-gradient(
        #ef4444 0%,
        #ef4444 var(--health-percent, 100%),
        rgba(255, 255, 255, 0.1) var(--health-percent, 100%),
        rgba(255, 255, 255, 0.1) 100%
    );
    padding: 8px;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
    animation: healthRingPulse 2s ease-in-out infinite;
}

@keyframes healthRingPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 50px rgba(239, 68, 68, 0.8); }
}

.boss-image-container {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(145deg, #1e1b4b, #0f0a1a);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.boss-icon-epic {
    font-size: 5rem;
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.8);
    animation: bossBreath 3s ease-in-out infinite;
}

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

.boss-image-container img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.boss-health-text {
    margin-top: 15px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.raid-timer-epic {
    margin-top: 10px;
    color: #fbbf24;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.raid-timer-epic i {
    color: #f59e0b;
}

.raid-difficulty-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    padding: 8px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.raid-difficulty-badge.normal {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
}

.raid-difficulty-badge.hard {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
}

.raid-difficulty-badge.nightmare {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    animation: nightmarePulse 1s ease-in-out infinite;
}

.raid-difficulty-badge.legendary {
    background: linear-gradient(135deg, #fbbf24, #a855f7, #ec4899);
    background-size: 200% 200%;
    animation: legendaryShift 3s ease infinite;
    color: #000;
}

@keyframes nightmarePulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.8); }
}

@keyframes legendaryShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Raid Rewards Panel */
.raid-rewards-panel {
    margin-top: 20px;
    padding: 15px 25px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 15px;
    text-align: center;
}

.raid-rewards-panel h4 {
    color: #fbbf24;
    font-size: 1rem;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.raid-rewards-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.raid-reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    font-size: 0.9rem;
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.raid-reward-item i {
    font-size: 1rem;
}

.raid-reward-item .reward-item-img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

/* Battle Section */
.raid-battle-section {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 30px 0;
}

.raid-stats-panel {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.raid-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 25px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.raid-stat i {
    font-size: 1.5rem;
    color: #a855f7;
    margin-bottom: 8px;
}

.raid-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.raid-stat .stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Epic Attack Button */
.btn-raid-attack {
    position: relative;
    padding: 20px 50px;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.4);
}

.btn-raid-attack:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(239, 68, 68, 0.6);
}

.btn-raid-attack:disabled {
    background: linear-gradient(135deg, #374151, #1f2937);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-raid-attack .attack-icon {
    display: inline-block;
    margin-right: 10px;
    animation: fistPump 0.5s ease-in-out infinite;
}

@keyframes fistPump {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.btn-raid-attack .attack-glow {
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: attackGlowSweep 2s linear infinite;
    pointer-events: none;
}

@keyframes attackGlowSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Join Raid Button */
.btn-join-raid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 40px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    border: 2px solid #86efac;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-join-raid::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    animation: joinGlowSweep 3s infinite;
}

.btn-join-raid:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-join-raid:disabled {
    background: linear-gradient(180deg, #4b5563 0%, #374151 50%, #1f2937 100%);
    border-color: #6b7280;
    box-shadow: none;
    cursor: not-allowed;
}

@keyframes joinGlowSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.btn-join-raid .join-icon {
    font-size: 1.5rem;
}

.btn-join-raid .join-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    animation: joinGlowSweep 2s infinite;
}

.join-hint {
    color: #9ca3af;
    font-size: 0.85rem;
    margin-top: 10px;
    font-style: italic;
}

/* No Raid Paladins Empty State */
.no-raid-paladins {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    border: 1px dashed rgba(168, 85, 247, 0.3);
}

.no-raid-paladins i {
    font-size: 3rem;
    color: rgba(168, 85, 247, 0.4);
    margin-bottom: 15px;
}

.no-raid-paladins p {
    font-size: 1.1rem;
    color: #d1d5db;
    margin: 0 0 8px;
}

.no-raid-paladins span {
    font-size: 0.9rem;
    color: #9ca3af;
}

.cooldown-timer {
    margin-top: 15px;
    color: #f59e0b;
    font-size: 0.9rem;
}

.paladin-required-notice {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 10px;
    color: #a855f7;
}

/* Leaderboard */
.raid-leaderboard-epic {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.raid-leaderboard-epic h4 {
    color: #fbbf24;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.leaderboard-entry:hover {
    background: rgba(255, 255, 255, 0.08);
}

.leaderboard-entry.mvp {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.rank-badge {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #000;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    color: #fff;
}

.rank-badge.rank-4, .rank-badge.rank-5 {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.entry-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.5);
}

.entry-name {
    flex: 1;
    color: #fff;
    font-weight: 500;
}

.entry-damage {
    color: #ef4444;
    font-weight: 700;
    font-size: 0.95rem;
}

.no-attacks {
    color: #64748b;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* No Active Raid State */
.no-raid-epic {
    position: relative;
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(180deg, #1a0a2e 0%, #0f0a1a 100%);
    border-radius: 20px;
    border: 2px solid rgba(168, 85, 247, 0.2);
    overflow: hidden;
}

.no-raid-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.floating-embers {
    position: absolute;
    inset: 0;
}

.dragon-silhouette {
    position: relative;
    z-index: 2;
    margin-bottom: 20px;
}

.dragon-silhouette i {
    font-size: 6rem;
    color: rgba(168, 85, 247, 0.3);
    animation: dragonFloat 4s ease-in-out infinite;
}

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

.no-raid-epic h3 {
    position: relative;
    z-index: 2;
    color: #a855f7;
    font-size: 1.6rem;
    margin-bottom: 15px;
}

.no-raid-epic p {
    position: relative;
    z-index: 2;
    color: #94a3b8;
    max-width: 400px;
    margin: 0 auto 10px;
}

.no-raid-epic .hint-text {
    color: #64748b;
    font-size: 0.9rem;
}

/* Raid History Epic */
.raid-history-epic {
    margin-top: 30px;
    background: linear-gradient(145deg, #1e1b4b, #0f172a);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.raid-history-epic h3 {
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.raid-history-entry {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border-left: 4px solid transparent;
}

.raid-history-entry.victory {
    border-left-color: #22c55e;
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), transparent);
}

.raid-history-entry.failed,
.raid-history-entry.expired {
    border-left-color: #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), transparent);
}

.history-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.raid-history-entry.victory .history-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.raid-history-entry.failed .history-icon,
.raid-history-entry.expired .history-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.history-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.history-status {
    font-weight: 700;
    font-size: 0.95rem;
}

.history-status.victory { color: #22c55e; }
.history-status.failed, .history-status.expired { color: #ef4444; }

.history-date {
    color: #64748b;
    font-size: 0.8rem;
}

.badge-earned {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(168, 85, 247, 0.2));
    border-radius: 20px;
    color: #fbbf24;
    font-weight: 600;
    font-size: 0.85rem;
}

.badge-earned i {
    color: #fbbf24;
}

.no-history {
    color: #64748b;
    text-align: center;
    padding: 30px;
    font-style: italic;
}

/* Raid Damage Popup */
.raid-damage-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 10000;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.raid-damage-popup.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.damage-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.damage-main .crit-label {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
    animation: critShake 0.3s ease-in-out infinite;
    margin-bottom: 5px;
}

@keyframes critShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.damage-number {
    font-size: 4rem;
    font-weight: 900;
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.8), 0 4px 20px rgba(0, 0, 0, 0.5);
    animation: damagePopIn 0.5s ease-out;
}

.damage-main.critical .damage-number {
    font-size: 5rem;
    color: #fbbf24;
    text-shadow: 0 0 40px rgba(251, 191, 36, 1), 0 0 80px rgba(239, 68, 68, 0.8);
}

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

.counter-damage {
    margin-top: 15px;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 25px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.counter-damage i {
    color: #3b82f6;
    margin-right: 5px;
}

/* Raid Victory Overlay */
.raid-victory-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.raid-victory-overlay.show {
    opacity: 1;
}

.victory-content {
    text-align: center;
    position: relative;
}

.victory-particles {
    position: absolute;
    inset: -100px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
    animation: victoryGlow 2s ease-in-out infinite;
}

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

.victory-icon {
    position: relative;
    z-index: 2;
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: victoryBounce 0.6s ease-in-out infinite alternate;
    box-shadow: 0 0 50px rgba(251, 191, 36, 0.8);
}

.victory-icon i {
    font-size: 3.5rem;
    color: #000;
}

@keyframes victoryBounce {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.victory-content h2 {
    position: relative;
    z-index: 2;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 15px;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
    animation: victoryTextPulse 1s ease-in-out infinite;
}

@keyframes victoryTextPulse {
    0%, 100% { text-shadow: 0 0 30px rgba(251, 191, 36, 0.8); }
    50% { text-shadow: 0 0 60px rgba(251, 191, 36, 1), 0 0 100px rgba(168, 85, 247, 0.5); }
}

.victory-content p {
    position: relative;
    z-index: 2;
    color: #94a3b8;
    font-size: 1.2rem;
    margin-bottom: 25px;
}

.badge-reward {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(168, 85, 247, 0.3));
    border: 2px solid #fbbf24;
    border-radius: 15px;
    animation: badgeShine 2s linear infinite;
}

.badge-reward i {
    font-size: 2rem;
    color: #fbbf24;
}

.badge-reward span {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

@keyframes badgeShine {
    0% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 40px rgba(251, 191, 36, 0.6), 0 0 60px rgba(168, 85, 247, 0.3); }
    100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
}

/* ===== RAID PALADIN CARDS ===== */
.raid-paladins-section {
    position: relative;
    z-index: 2;
    margin-top: 25px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.raid-paladins-section h4 {
    color: #22c55e;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.raid-paladin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
}

.raid-paladin-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.raid-paladin-card.active {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.raid-paladin-card.idle {
    opacity: 0.7;
}

.raid-paladin-card.dead {
    opacity: 0.6;
    filter: grayscale(50%);
    border-color: rgba(107, 114, 128, 0.5);
}

.raid-paladin-card.dead .paladin-avatar-ring {
    background: rgba(107, 114, 128, 0.3) !important;
}

.raid-paladin-card:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 85, 247, 0.5);
}

.paladin-avatar-ring {
    width: 60px;
    height: 60px;
    margin: 0 auto 10px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(var(--health-color, #22c55e) var(--health-percent, 100%), rgba(255,255,255,0.1) 0);
    position: relative;
}

.paladin-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #1e293b;
}

.paladin-info {
    margin-bottom: 8px;
}

.paladin-name {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.paladin-level {
    color: #a855f7;
    font-size: 0.75rem;
    font-weight: 500;
}

.paladin-stats-mini {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.paladin-stats-mini span {
    font-size: 0.7rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 3px;
}

.paladin-stats-mini i {
    font-size: 0.65rem;
}

.paladin-health-bar {
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.paladin-health-bar .health-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
}

.paladin-health-bar .health-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.paladin-raid-contribution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #ef4444;
}

.paladin-raid-contribution i {
    color: #f97316;
}

.paladin-raid-contribution .attack-count {
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: normal;
}

.paladin-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    color: #64748b;
    font-size: 0.75rem;
}

.paladin-waiting i {
    animation: waitPulse 1.5s ease-in-out infinite;
}

@keyframes waitPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Dead Paladin Styles */
.dead-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dead-overlay i {
    color: #9ca3af;
    font-size: 1.5rem;
}

.dead-status {
    background: linear-gradient(135deg, #4b5563, #374151);
    color: #d1d5db;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.dead-status i {
    color: #ef4444;
}

.paladin-health-bar.depleted {
    background: rgba(107, 114, 128, 0.3);
}

.paladin-fallen {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    color: #9ca3af;
    font-size: 0.75rem;
    background: rgba(107, 114, 128, 0.2);
    border-radius: 6px;
}

.paladin-fallen i {
    color: #6b7280;
}

/* Level Badge in Raid Cards - more specific selector to override */
.raid-paladin-card .paladin-level-badge {
    position: static !important;
    display: inline-block;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 3px;
    width: auto;
    height: auto;
    border: none;
    box-shadow: none;
}

.raid-paladin-card .paladin-guild-name {
    display: block;
    color: #94a3b8;
    font-size: 0.7rem;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.loading-paladins, .no-paladins {
    color: #64748b;
    text-align: center;
    padding: 20px;
}

/* ===== RAID DAMAGE LOG ===== */
.raid-damage-log {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.raid-damage-log h4 {
    color: #ef4444;
    margin-bottom: 15px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.damage-log-entries {
    max-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.damage-log-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid rgba(239, 68, 68, 0.5);
    transition: all 0.2s ease;
}

.damage-log-entry:hover {
    background: rgba(255, 255, 255, 0.06);
}

.damage-log-entry.critical {
    border-left-color: #fbbf24;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), transparent);
}

.log-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(168, 85, 247, 0.4);
}

.log-name {
    flex: 1;
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
}

.log-damage {
    font-weight: 700;
    font-size: 0.95rem;
    color: #ef4444;
}

.log-damage.crit {
    color: #fbbf24;
}

.log-damage i {
    margin-right: 3px;
    animation: boltFlash 0.5s ease infinite;
}

@keyframes boltFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.log-counter {
    color: #3b82f6;
    font-size: 0.8rem;
}

.log-counter i {
    margin-right: 3px;
}

.log-time {
    color: #64748b;
    font-size: 0.75rem;
    min-width: 60px;
    text-align: right;
}

.no-log {
    color: #64748b;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* Guild Badge Stat */
.guild-stats-row .stat.badges {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(168, 85, 247, 0.1));
    border-radius: 8px;
    padding: 5px 10px;
}

.guild-stats-row .stat.badges i {
    color: #fbbf24;
}

.guild-stats-row .stat.badges span {
    color: #fbbf24;
    font-weight: 700;
}

/* Guild Badges Section in Detail View */
.guild-badges-section {
    background: linear-gradient(145deg, #1a0a2e 0%, #0f172a 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 20px;
}

.guild-badges-section h4 {
    color: #fbbf24;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
}

.badges-power-bonus {
    color: #a855f7;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.raid-badge {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(168, 85, 247, 0.3);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.raid-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.3);
}

.raid-badge.normal {
    border-color: rgba(34, 197, 94, 0.5);
}

.raid-badge.hard {
    border-color: rgba(245, 158, 11, 0.5);
}

.raid-badge.nightmare {
    border-color: rgba(239, 68, 68, 0.5);
    animation: nightmareBadgePulse 2s ease-in-out infinite;
}

.raid-badge.legendary {
    border-color: rgba(251, 191, 36, 0.8);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(168, 85, 247, 0.1));
    animation: legendaryBadgeShine 3s linear infinite;
}

@keyframes nightmareBadgePulse {
    0%, 100% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.5); }
}

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

.badge-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.raid-badge.normal .badge-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.raid-badge.hard .badge-icon {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.raid-badge.nightmare .badge-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.raid-badge.legendary .badge-icon {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(168, 85, 247, 0.3));
    color: #fbbf24;
}

.badge-icon i {
    font-size: 1.5rem;
}

.badge-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.badge-difficulty {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.raid-badge.normal .badge-difficulty { color: #22c55e; }
.raid-badge.hard .badge-difficulty { color: #f59e0b; }
.raid-badge.nightmare .badge-difficulty { color: #ef4444; }
.raid-badge.legendary .badge-difficulty { color: #fbbf24; }

.badge-date {
    font-size: 0.7rem;
    color: #64748b;
}

/* =============================================
   QUESTS VIEW
   ============================================= */

.quests-header {
    text-align: center;
    margin-bottom: 30px;
}

.quests-header h2 {
    font-size: 1.8rem;
    color: #22c55e;
    margin-bottom: 10px;
}

.active-quest-card {
    background: linear-gradient(145deg, #0f3528 0%, #0f172a 100%);
    border: 2px solid rgba(34, 197, 94, 0.3);
    border-radius: 16px;
    padding: 25px;
    margin-bottom: 30px;
}

.quest-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.quest-header i {
    font-size: 2rem;
    color: #22c55e;
}

.quest-header h3 {
    flex: 1;
    color: #fff;
    font-size: 1.4rem;
}

.quest-desc {
    color: #94a3b8;
    margin-bottom: 20px;
}

.quest-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.quest-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    color: #fff;
    font-size: 0.9rem;
}

.quest-rewards {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.quest-rewards span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.quest-rewards span:first-child { color: #fbbf24; }
.quest-rewards span:last-child { color: #a855f7; }

.quest-participants {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.quest-participant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 20px;
}

.quest-participant img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.quest-participant span {
    color: #fff;
    font-size: 0.9rem;
}

.quest-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-join-quest,
.btn-leave-quest,
.btn-begin-quest,
.btn-start-quest {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-join-quest {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.btn-leave-quest {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.5);
}

.btn-begin-quest {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
}

.btn-start-quest {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.quest-in-progress {
    padding: 15px 25px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    color: #fbbf24;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: pulse 2s ease infinite;
}

.no-active-quest {
    text-align: center;
    margin-bottom: 30px;
}

.no-active-quest h3 {
    color: #22c55e;
    margin-bottom: 15px;
}

.quest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.quest-select-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.quest-select-card:hover {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
    transform: translateY(-3px);
}

.quest-click-hint {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quest-select-card:hover .quest-click-hint {
    opacity: 1;
}

/* Quest Modal */
.quest-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.quest-modal {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 16px;
    padding: 0;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
    position: relative;
}

.quest-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.quest-modal-close:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fff;
}

.quest-modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px;
    border-bottom: 2px solid;
    border-color: #3b82f6;
}

.quest-modal-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.quest-modal-header h2 {
    color: #fff;
    font-size: 1.3rem;
    margin: 0;
}

.quest-modal-desc {
    color: #94a3b8;
    padding: 20px 25px;
    margin: 0;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quest-modal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quest-modal-stats .stat-item {
    text-align: center;
}

.quest-modal-stats .stat-item i {
    font-size: 1.2rem;
    color: #a855f7;
    margin-bottom: 8px;
    display: block;
}

.quest-modal-stats .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.quest-modal-stats .stat-label {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 3px;
}

.quest-modal-rewards {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.quest-modal-rewards h4 {
    color: #fff;
    margin: 0 0 15px 0;
    font-size: 1rem;
}

.quest-modal-rewards h4 i {
    color: #fbbf24;
    margin-right: 8px;
}

.quest-modal-rewards .rewards-grid {
    display: flex;
    gap: 20px;
}

.quest-modal-rewards .reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    border-radius: 8px;
}

.quest-modal-rewards .reward-item span {
    color: #e2e8f0;
    font-weight: 600;
}

.quest-modal-actions {
    padding: 25px;
    text-align: center;
}

.btn-quest-start-modal {
    width: 100%;
    padding: 15px 25px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-quest-start-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.4);
}

.quest-modal-note {
    color: #64748b;
    font-size: 0.8rem;
    margin: 15px 0 0 0;
}

.quest-modal-note i {
    color: #f59e0b;
    margin-right: 5px;
}

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

.quest-header-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.quest-header-mini i {
    color: #22c55e;
    font-size: 1.2rem;
}

.quest-header-mini h4 {
    color: #fff;
    font-size: 0.95rem;
}

.quest-mini-stats {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 0;
    font-size: 0.8rem;
    color: #94a3b8;
}

.quest-history-section {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    padding: 20px;
}

.quest-history-section h3 {
    color: #fff;
    margin-bottom: 15px;
}

.quest-history-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
}

.quest-history-row.success {
    background: rgba(34, 197, 94, 0.1);
}

.quest-history-row.failed {
    background: rgba(239, 68, 68, 0.1);
}

.quest-history-row .quest-name {
    flex: 1;
    color: #fff;
}

.quest-history-row .result {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.quest-history-row.success .result {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.quest-history-row.failed .result {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.quest-history-row .rewards {
    color: #fbbf24;
}

/* =============================================
   BOUNTIES VIEW
   ============================================= */

.bounties-header {
    text-align: center;
    margin-bottom: 30px;
}

.bounties-header h2 {
    font-size: 1.8rem;
    color: #f59e0b;
    margin-bottom: 10px;
}

.active-buffs-section {
    margin-bottom: 25px;
}

.active-buffs-section h3 {
    color: #fff;
    margin-bottom: 15px;
}

.buffs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.active-buff {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(124, 58, 237, 0.2));
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 10px;
    color: #fff;
}

.active-buff i {
    color: #a855f7;
}

.active-buff .expires {
    font-size: 0.75rem;
    color: #94a3b8;
}

.bounties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.bounty-card {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(245, 158, 11, 0.2);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.bounty-card:hover {
    border-color: rgba(245, 158, 11, 0.5);
}

.bounty-card.completed {
    border-color: #22c55e;
}

.bounty-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.bounty-header i {
    font-size: 1.5rem;
    color: #f59e0b;
}

.bounty-header h4 {
    flex: 1;
    color: #fff;
    font-size: 1.1rem;
}

.global-badge {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 700;
}

.bounty-desc {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.bounty-progress {
    margin-bottom: 15px;
}

.progress-bar {
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 5px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.progress-text {
    font-size: 0.85rem;
    color: #fff;
    text-align: right;
}

.bounty-reward {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    margin-bottom: 10px;
    color: #fbbf24;
    font-weight: 600;
}

.bounty-timer {
    font-size: 0.85rem;
    color: #94a3b8;
}

.btn-claim-bounty {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-claim-bounty:hover {
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
}

.claimed-badge {
    text-align: center;
    padding: 10px;
    margin-top: 15px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    color: #22c55e;
    font-weight: 600;
}

.bounty-leaderboard {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 12px;
    padding: 20px;
}

.bounty-leaderboard h3 {
    color: #fff;
    margin-bottom: 15px;
}

.bounty-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 8px;
}

.bounty-leaderboard-row.is-me {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.bounty-leaderboard-row .rank {
    width: 25px;
    height: 25px;
    background: rgba(245, 158, 11, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #f59e0b;
}

.bounty-leaderboard-row .guild-name {
    flex: 1;
    color: #fff;
}

.bounty-leaderboard-row .completed {
    color: #22c55e;
    font-weight: 600;
}

.no-bounties {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
}

.no-bounties i {
    font-size: 2.5rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* ==============================================
   EPIC BOUNTIES - RPG THEMED
   ============================================= */

.epic-bounties-container {
    padding: 10px 0;
}

.epic-bounties-header {
    margin-bottom: 30px;
}

.bounties-title-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.bounties-title-section > i {
    font-size: 3rem;
    color: #f59e0b;
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}

.bounties-title-section h2 {
    font-size: 2rem;
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.bounties-title-section p {
    color: #94a3b8;
    margin: 5px 0 0 0;
}

/* Active Buffs Section */
.epic-buffs-section {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.02));
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
}

.epic-buffs-section .section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.epic-buffs-section .section-header i {
    color: #a855f7;
    font-size: 1.3rem;
}

.epic-buffs-section .section-header h3 {
    color: #fff;
    font-family: 'Cinzel', serif;
    margin: 0;
}

.buffs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.epic-active-buff {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(168, 85, 247, 0.05));
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 12px;
    animation: buff-glow 2s ease infinite;
}

@keyframes buff-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
    50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.4); }
}

.epic-active-buff .buff-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}

.epic-active-buff .buff-info {
    display: flex;
    flex-direction: column;
}

.epic-active-buff .buff-name {
    color: #fff;
    font-weight: 600;
    text-transform: capitalize;
}

.epic-active-buff .buff-value {
    color: #a855f7;
    font-weight: 700;
    font-size: 1.1rem;
}

.epic-active-buff .buff-timer {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-left: auto;
}

.no-buffs-message {
    color: #64748b;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Bounties Grid */
.epic-bounties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

.epic-bounty-card {
    position: relative;
    background: linear-gradient(145deg, #1a1a2e 0%, #0f172a 100%);
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.epic-bounty-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 158, 11, 0.6);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.epic-bounty-card.halfway {
    border-color: rgba(34, 197, 94, 0.4);
}

.epic-bounty-card.completed {
    border-color: #22c55e;
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
}

.bounty-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: radial-gradient(ellipse at 50% 0%, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.epic-bounty-card.completed .bounty-card-glow {
    background: radial-gradient(ellipse at 50% 0%, rgba(34, 197, 94, 0.2) 0%, transparent 70%);
}

.bounty-card-content {
    position: relative;
    padding: 25px;
    z-index: 1;
}

.epic-bounty-header {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

.bounty-icon-container {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.3);
}

.epic-bounty-card.completed .bounty-icon-container {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.3);
}

.bounty-title-area {
    flex: 1;
}

.bounty-title-area h4 {
    color: #fff;
    font-size: 1.15rem;
    font-family: 'Cinzel', serif;
    margin: 0 0 8px 0;
}

.bounty-type-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 15px;
    font-size: 0.7rem;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.global-bounty-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border-radius: 20px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.epic-bounty-desc {
    color: #94a3b8;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
    padding-left: 15px;
    border-left: 2px solid rgba(245, 158, 11, 0.3);
}

/* Epic Progress Bar */
.epic-bounty-progress {
    margin-bottom: 20px;
}

.progress-numbers {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 8px;
}

.progress-numbers .current {
    font-size: 1.4rem;
    font-weight: 700;
    color: #f59e0b;
}

.epic-bounty-card.completed .progress-numbers .current {
    color: #22c55e;
}

.progress-numbers .divider {
    color: #64748b;
}

.progress-numbers .target {
    font-size: 1rem;
    color: #64748b;
}

.epic-progress-bar {
    position: relative;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.epic-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
    animation: progress-shimmer 3s linear infinite;
}

.epic-bounty-card.completed .epic-progress-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80, #22c55e);
}

.progress-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer-sweep 2s linear infinite;
}

@keyframes shimmer-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-percent {
    text-align: right;
    margin-top: 5px;
    font-size: 0.85rem;
    color: #94a3b8;
}

.user-contribution {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.3);
    border-radius: 10px;
    margin-bottom: 15px;
    color: #06b6d4;
    font-size: 0.85rem;
}

.user-contribution strong {
    color: #22d3ee;
}

/* Reward Box */
.epic-bounty-reward {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.02));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.epic-bounty-reward .reward-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.epic-bounty-reward .reward-value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fbbf24;
    font-size: 1.1rem;
    font-weight: 700;
}

.epic-bounty-reward .reward-value i {
    font-size: 1.2rem;
}

/* Footer */
.epic-bounty-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.epic-bounty-footer .bounty-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.85rem;
}

.epic-bounty-footer .bounty-timer.urgent {
    color: #ef4444;
    animation: pulse-urgent 1s ease infinite;
}

@keyframes pulse-urgent {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.btn-epic-claim {
    padding: 12px 25px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.3);
    animation: claim-pulse 2s ease infinite;
}

@keyframes claim-pulse {
    0%, 100% { box-shadow: 0 5px 20px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 5px 30px rgba(34, 197, 94, 0.6); }
}

.btn-epic-claim:hover {
    transform: scale(1.05);
}

.epic-claimed-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 10px;
    color: #22c55e;
    font-weight: 600;
}

/* No Bounties State */
.no-active-bounties {
    text-align: center;
    padding: 60px 30px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.5));
    border: 2px dashed rgba(245, 158, 11, 0.3);
    border-radius: 20px;
}

.empty-bounty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-bounty-icon i {
    font-size: 2.5rem;
    color: #f59e0b;
    opacity: 0.5;
}

.no-active-bounties h3 {
    color: #fff;
    font-family: 'Cinzel', serif;
    margin-bottom: 10px;
}

.no-active-bounties p {
    color: #64748b;
}

/* Leaderboard */
.epic-bounty-leaderboard {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 20px;
    overflow: hidden;
}

.leaderboard-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 25px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), transparent);
    border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}

.leaderboard-header i {
    font-size: 1.5rem;
    color: #fbbf24;
}

.leaderboard-header h3 {
    color: #fff;
    font-family: 'Cinzel', serif;
    margin: 0;
}

.leaderboard-list {
    padding: 15px;
}

.epic-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.epic-leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.epic-leaderboard-row.is-me {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.epic-leaderboard-row.top-three .rank-badge {
    width: 35px;
    height: 35px;
    font-size: 1rem;
}

.epic-leaderboard-row.rank-1 .rank-badge {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
}

.epic-leaderboard-row.rank-2 .rank-badge {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    color: #fff;
}

.epic-leaderboard-row.rank-3 .rank-badge {
    background: linear-gradient(135deg, #cd7f32, #a0522d);
    color: #fff;
}

.rank-badge {
    width: 30px;
    height: 30px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fbbf24;
    flex-shrink: 0;
}

.epic-leaderboard-row .guild-name {
    flex: 1;
    color: #fff;
    font-weight: 500;
}

.completed-count {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #22c55e;
    font-weight: 600;
}

.completed-count i {
    font-size: 0.9rem;
}

.no-data-message {
    color: #64748b;
    text-align: center;
    padding: 20px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .epic-bounties-grid {
        grid-template-columns: 1fr;
    }
    
    .bounties-title-section {
        flex-direction: column;
        text-align: center;
    }
    
    .epic-bounty-footer {
        flex-direction: column;
    }
    
    .btn-epic-claim {
        width: 100%;
        justify-content: center;
    }
}

/* Old territory map CSS removed – cities now render on main world map */

.no-data {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
}

/* =============================================
   MOBILE RESPONSIVENESS FOR FEATURES
   ============================================= */

@media (max-width: 768px) {
    .guild-sub-tabs {
        padding: 10px;
    }
    
    .guild-sub-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    .guild-sub-tab span {
        display: none;
    }
    
    .paladins-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .paladin-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }
    
    .stat-item {
        padding: 8px;
    }
    
    .stat-value {
        font-size: 1.1rem;
    }
    
    .skirmishes-layout {
        grid-template-columns: 1fr;
    }
    
    .active-raid {
        grid-template-columns: 1fr;
    }
    
    .boss-grid,
    .quest-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .bounties-grid {
        grid-template-columns: 1fr;
    }
    
    .quest-stats {
        flex-direction: column;
    }
    
    .quest-rewards {
        flex-direction: column;
        gap: 10px;
    }
}

/* =============================================
   FEATURE SETUP MESSAGE
   ============================================= */

.feature-setup-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    text-align: center;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));
    border: 2px dashed var(--guild-border);
    border-radius: 20px;
    min-height: 300px;
}

.feature-setup-message i {
    font-size: 4rem;
    color: var(--guild-primary);
    margin-bottom: 20px;
    opacity: 0.7;
    animation: pulse 2s ease-in-out infinite;
}

.feature-setup-message h3 {
    color: var(--guild-primary);
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-family: 'Cinzel', serif;
}

.feature-setup-message p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
    max-width: 400px;
}

.feature-setup-message .btn-setup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    background: linear-gradient(135deg, var(--guild-primary), var(--guild-secondary));
    color: #000;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.feature-setup-message .btn-setup:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px var(--guild-glow);
}

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

/* ==============================================
   EPIC CO-OP QUESTS - RPG THEMED
   ============================================= */

.epic-quests-header {
    margin-bottom: 30px;
}

.epic-quest-title-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.epic-quest-title-container > i {
    font-size: 3rem;
    color: #a855f7;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
}

.epic-quest-title-container h2 {
    font-size: 2rem;
    font-family: 'Cinzel', serif;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.epic-quest-title-container p {
    color: #94a3b8;
    margin: 5px 0 0 0;
}

.quest-warning-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    color: #fbbf24;
    font-size: 0.9rem;
}

.quest-warning-box i {
    font-size: 1.2rem;
}

/* Epic Quest Arena - Active Quest Display */
.epic-quest-arena {
    position: relative;
    background: linear-gradient(145deg, #1a0a2e 0%, #0f172a 50%, #1e1b4b 100%);
    border: 2px solid rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    padding: 30px;
    padding-bottom: 40px;
    margin-bottom: 30px;
    overflow: visible;
}

.epic-quest-arena.quest-recruiting {
    border-color: rgba(34, 197, 94, 0.5);
    animation: quest-recruiting-pulse 3s ease infinite;
}

.epic-quest-arena.quest-active {
    border-color: rgba(251, 191, 36, 0.5);
    animation: quest-active-glow 2s ease infinite;
}

@keyframes quest-recruiting-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 40px rgba(34, 197, 94, 0.4); }
}

@keyframes quest-active-glow {
    0%, 100% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 50px rgba(251, 191, 36, 0.5); }
}

.epic-quest-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.quest-particle {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #a855f7, transparent);
    border-radius: 50%;
    animation: quest-particle-float 5s linear infinite;
    opacity: 0;
}

@keyframes quest-particle-float {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0);
    }
    10% {
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
    90% {
        opacity: 0.5;
        transform: translateY(-300px) scale(0.5);
    }
    100% {
        opacity: 0;
        transform: translateY(-350px) scale(0);
    }
}

.epic-quest-ambient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(168, 85, 247, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Quest Banner */
.epic-quest-banner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    z-index: 1;
}

.quest-banner-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    flex-shrink: 0;
}

.quest-banner-info {
    flex: 1;
}

.quest-title {
    font-size: 1.6rem;
    font-family: 'Cinzel', serif;
    color: #fff;
    margin: 0 0 8px 0;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.quest-difficulty-epic {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quest-difficulty-epic.easy {
    background: linear-gradient(135deg, #059669, #047857);
    color: #fff;
}

.quest-difficulty-epic.medium {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}

.quest-difficulty-epic.hard {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #fff;
}

.quest-difficulty-epic.legendary {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
    color: #fff;
    animation: legendary-shimmer 2s ease infinite;
}

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

.quest-recruiting-badge,
.quest-inprogress-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.quest-recruiting-badge {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    animation: badge-pulse 2s ease infinite;
}

.quest-inprogress-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    animation: badge-pulse 1.5s ease infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.epic-quest-lore {
    position: relative;
    color: #cbd5e1;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.6;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid #a855f7;
    border-radius: 0 10px 10px 0;
    margin-bottom: 25px;
    z-index: 1;
}

/* Quest Stats Grid */
.epic-quest-stats-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    z-index: 1;
}

.epic-quest-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.epic-quest-stat:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.epic-quest-stat i {
    font-size: 1.5rem;
    color: #a855f7;
    margin-bottom: 8px;
}

.epic-quest-stat.reward i {
    color: #fbbf24;
}

.epic-quest-stat .stat-val {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.epic-quest-stat .stat-lbl {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Quest Progress Bar */
.epic-quest-progress {
    position: relative;
    margin-bottom: 25px;
    z-index: 1;
}

.quest-progress-bar {
    position: relative;
    height: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.quest-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
    border-radius: 10px;
    animation: progress-shimmer 2s linear infinite;
    transition: width 0.5s ease;
}

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

.quest-progress-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
    animation: glow-sweep 2s ease infinite;
}

@keyframes glow-sweep {
    0%, 100% { opacity: 0; transform: translateX(-100%); }
    50% { opacity: 1; transform: translateX(0); }
}

.quest-progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #fbbf24;
}

/* Quest Party Slots */
.epic-quest-party {
    position: relative;
    margin-bottom: 25px;
    z-index: 1;
}

.epic-quest-party h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.epic-quest-party .party-count {
    padding: 4px 12px;
    background: rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    font-size: 0.85rem;
    color: #a855f7;
}

.epic-quest-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.epic-quest-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    min-width: 100px;
    transition: all 0.3s ease;
}

.epic-quest-slot.filled {
    border-style: solid;
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.epic-quest-slot.empty {
    animation: slot-waiting 2s ease infinite;
}

@keyframes slot-waiting {
    0%, 100% { border-color: rgba(255, 255, 255, 0.2); }
    50% { border-color: rgba(34, 197, 94, 0.5); }
}

.epic-quest-slot img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #22c55e;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

.epic-quest-slot i {
    font-size: 2rem;
    color: #64748b;
}

.epic-quest-slot .slot-name {
    font-size: 0.85rem;
    color: #fff;
    text-align: center;
}

.epic-quest-slot.empty .slot-name {
    color: #64748b;
    font-style: italic;
}

.slot-ready-indicator {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
}

.epic-quest-slot.filled {
    position: relative;
}

/* Quest Actions */
.epic-quest-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    z-index: 1;
}

.btn-epic-join,
.btn-epic-leave,
.btn-epic-embark {
    padding: 15px 35px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-epic-join {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 5px 20px rgba(34, 197, 94, 0.4);
}

.btn-epic-join:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(34, 197, 94, 0.6);
}

.btn-epic-leave {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 2px solid #ef4444;
}

.btn-epic-leave:hover {
    background: rgba(239, 68, 68, 0.3);
}

.btn-epic-embark {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    box-shadow: 0 5px 25px rgba(168, 85, 247, 0.5);
    animation: embark-glow 2s ease infinite;
}

@keyframes embark-glow {
    0%, 100% { box-shadow: 0 5px 25px rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 5px 40px rgba(168, 85, 247, 0.8); }
}

.btn-epic-embark:hover {
    transform: translateY(-3px) scale(1.02);
}

.quest-journey-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 25px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 12px;
    color: #fbbf24;
    font-size: 1rem;
    animation: journey-pulse 2s ease infinite;
}

.quest-journey-status.observing {
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.4);
    color: #94a3b8;
    animation: none;
}

@keyframes journey-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.quest-journey-status i {
    font-size: 1.3rem;
    animation: compass-spin 4s linear infinite;
}

@keyframes compass-spin {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

.quest-call-to-arms {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 10px;
    color: #22c55e;
    font-weight: 600;
    animation: call-to-arms-pulse 2s ease infinite;
    z-index: 1;
}

@keyframes call-to-arms-pulse {
    0%, 100% { border-color: rgba(34, 197, 94, 0.4); }
    50% { border-color: rgba(34, 197, 94, 0.8); }
}

/* All Recruiting Quests Section */
.all-recruiting-quests {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.recruiting-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.recruiting-section-header i {
    font-size: 1.5rem;
    color: #3b82f6;
}

.recruiting-section-header h3 {
    font-size: 1.25rem;
    margin: 0;
    color: #fff;
    flex: 1;
}

.recruiting-count {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.recruiting-quests-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.recruiting-quest-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.recruiting-quest-card:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.recruiting-quest-card.joined {
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.1);
}

.recruiting-quest-card.full {
    opacity: 0.7;
}

.recruiting-quest-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    position: relative;
}

.recruiting-quest-icon {
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
}

.recruiting-quest-info {
    flex: 1;
    min-width: 0;
}

.recruiting-quest-info h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recruiting-quest-guild {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
}

.recruiting-quest-guild i {
    color: var(--guild-primary);
}

.recruiting-quest-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recruiting-quest-meta {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.recruiting-quest-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.recruiting-quest-meta i {
    color: #a855f7;
}

.recruiting-quest-slots {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slot-avatars {
    display: flex;
    align-items: center;
    gap: -6px;
}

.slot-avatars img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #1e293b;
    margin-left: -8px;
}

.slot-avatars img:first-child {
    margin-left: 0;
}

.slots-needed {
    background: rgba(251, 191, 36, 0.2);
    color: var(--guild-primary);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.slot-count {
    font-size: 0.9rem;
    font-weight: 600;
    color: #60a5fa;
}

.recruiting-quest-leader {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.recruiting-quest-leader i {
    color: var(--guild-primary);
    font-size: 0.7rem;
}

.recruiting-quest-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-join-quest {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-join-quest:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.btn-leave-quest {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    color: #ef4444;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.btn-leave-quest:hover {
    background: rgba(239, 68, 68, 0.3);
}

.quest-full-badge {
    background: rgba(100, 116, 139, 0.3);
    color: #94a3b8;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Start New Quest CTA Button */
.start-quest-cta {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.btn-start-new-quest {
    background: linear-gradient(135deg, var(--guild-primary), #f59e0b);
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    color: #000;
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
}

.btn-start-new-quest:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.5);
}

.btn-start-new-quest i {
    font-size: 1.2rem;
}

/* Quest Board - No Active Quest */
.epic-quest-board {
    background: linear-gradient(145deg, #2a1810 0%, #1a0f0a 100%);
    border: 4px solid #5c3d2e;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    position: relative;
    box-shadow: 
        inset 0 0 50px rgba(0, 0, 0, 0.5),
        0 10px 40px rgba(0, 0, 0, 0.4);
}

.epic-quest-board::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(139, 90, 43, 0.3);
    border-radius: 10px;
    pointer-events: none;
}

.quest-board-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.quest-board-header h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.8rem;
    color: #d4a574;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

.quest-board-lantern {
    width: 20px;
    height: 30px;
    background: radial-gradient(ellipse at center, #fbbf24, #f59e0b);
    border-radius: 50%;
    box-shadow: 0 0 20px #f59e0b, 0 0 40px rgba(251, 191, 36, 0.5);
    animation: lantern-flicker 3s ease infinite;
}

@keyframes lantern-flicker {
    0%, 100% { opacity: 1; box-shadow: 0 0 20px #f59e0b, 0 0 40px rgba(251, 191, 36, 0.5); }
    50% { opacity: 0.8; box-shadow: 0 0 15px #f59e0b, 0 0 30px rgba(251, 191, 36, 0.3); }
}

.quest-board-subtitle {
    text-align: center;
    color: #a08060;
    font-style: italic;
    margin-bottom: 25px;
}

.quest-board-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.epic-quest-board-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(139, 90, 43, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.epic-quest-board-item:hover {
    background: rgba(139, 90, 43, 0.2);
    border-color: #d4a574;
    transform: translateX(5px);
}

.quest-board-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    flex-shrink: 0;
}

.quest-board-content {
    flex: 1;
}

.quest-board-content h4 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 5px 0;
}

.quest-difficulty-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.quest-difficulty-tag.easy { background: #059669; color: #fff; }
.quest-difficulty-tag.medium { background: #2563eb; color: #fff; }
.quest-difficulty-tag.hard { background: #d97706; color: #fff; }
.quest-difficulty-tag.legendary { background: #9333ea; color: #fff; }

.quest-board-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: #94a3b8;
}

.quest-board-meta .quest-reward {
    color: #fbbf24;
}

.quest-board-arrow {
    color: #64748b;
    transition: all 0.3s ease;
}

.epic-quest-board-item:hover .quest-board-arrow {
    color: #d4a574;
    transform: translateX(5px);
}

/* Quest Chronicles (History) */
.epic-quest-chronicles {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 16px;
    padding: 25px;
}

.chronicles-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chronicles-header i {
    font-size: 1.5rem;
    color: #a855f7;
}

.chronicles-header h3 {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    margin: 0;
}

.chronicles-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.epic-quest-chronicle {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border-left: 3px solid;
    transition: all 0.3s ease;
}

.epic-quest-chronicle:hover {
    background: rgba(0, 0, 0, 0.3);
}

.epic-quest-chronicle.victory {
    border-left-color: #22c55e;
}

.epic-quest-chronicle.defeat {
    border-left-color: #ef4444;
}

.chronicle-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.epic-quest-chronicle.victory .chronicle-icon {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.epic-quest-chronicle.defeat .chronicle-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.chronicle-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.chronicle-name {
    color: #fff;
    font-weight: 600;
}

.chronicle-result {
    font-size: 0.8rem;
}

.epic-quest-chronicle.victory .chronicle-result {
    color: #22c55e;
}

.epic-quest-chronicle.defeat .chronicle-result {
    color: #ef4444;
}

.chronicle-rewards .reward-earned {
    color: #fbbf24;
    font-weight: 600;
}

.chronicle-rewards .reward-lost {
    color: #64748b;
    font-style: italic;
    font-size: 0.85rem;
}

/* Responsive */
@media (max-width: 768px) {
    .epic-quest-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .epic-quest-banner {
        flex-wrap: wrap;
    }
    
    .quest-recruiting-badge,
    .quest-inprogress-badge {
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
    
    .epic-quest-slots {
        justify-content: center;
    }
}

/* ==============================================
   EPIC QUEST MODAL
   ============================================= */

.epic-quest-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.epic-quest-modal {
    position: relative;
    background: linear-gradient(145deg, #1a0a2e 0%, #0f172a 50%, #1e1b4b 100%);
    border: 2px solid rgba(168, 85, 247, 0.5);
    border-radius: 20px;
    max-width: 520px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 0 60px rgba(168, 85, 247, 0.3),
        0 25px 80px rgba(0, 0, 0, 0.6);
    animation: epicModalSlideIn 0.4s ease;
}

@keyframes epicModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quest-modal-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    overflow: hidden;
    pointer-events: none;
}

.epic-quest-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #94a3b8;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
    font-size: 1.1rem;
}

.epic-quest-modal-close:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
    color: #fff;
    transform: rotate(90deg);
}

.epic-quest-modal-banner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    border-radius: 18px 18px 0 0;
}

.modal-quest-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.modal-quest-title h2 {
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.epic-quest-modal-body {
    padding: 25px 30px 30px;
}

.quest-lore-box {
    position: relative;
    padding: 20px;
    padding-left: 40px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    margin-bottom: 25px;
}

.quest-lore-box i {
    position: absolute;
    left: 15px;
    top: 15px;
    color: #a855f7;
    opacity: 0.5;
    font-size: 1.2rem;
}

.quest-lore-box p {
    color: #cbd5e1;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

.epic-quest-modal-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.modal-stat {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.modal-stat:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(168, 85, 247, 0.3);
}

.modal-stat-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(168, 85, 247, 0.1));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a855f7;
    font-size: 1.2rem;
}

.modal-stat-info {
    display: flex;
    flex-direction: column;
}

.modal-stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.modal-stat-label {
    font-size: 0.8rem;
    color: #94a3b8;
}

.epic-quest-modal-rewards {
    margin-bottom: 20px;
}

.epic-quest-modal-rewards h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fbbf24;
    font-size: 1rem;
    margin: 0 0 15px 0;
}

.modal-rewards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.modal-reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.modal-reward-item.shards {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.05));
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.modal-reward-item.shards i {
    color: #06b6d4;
}

.modal-reward-item.xp {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.modal-reward-item.xp i {
    color: #fbbf24;
}

.modal-reward-item i {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.modal-reward-item .reward-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.modal-reward-item .reward-type {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.epic-quest-modal-warning {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
    margin-bottom: 20px;
    color: #fbbf24;
    font-size: 0.85rem;
}

.epic-quest-modal-warning i {
    font-size: 1.1rem;
}

.epic-quest-modal-actions {
    text-align: center;
}

.btn-rally-heroes {
    width: 100%;
    padding: 16px 30px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 25px rgba(168, 85, 247, 0.4);
}

.btn-rally-heroes:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 35px rgba(168, 85, 247, 0.6);
}

.modal-action-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.modal-action-note i {
    color: #a855f7;
}

/* ========================================
   STYLED CONFIRM MODAL
   ======================================== */
.styled-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.styled-confirm-modal {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid rgba(99, 102, 241, 0.5);
    border-radius: 20px;
    padding: 30px;
    max-width: 420px;
    width: 90%;
    position: relative;
    animation: slideUp 0.3s ease;
    text-align: center;
}

.styled-confirm-modal .modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.styled-confirm-modal .modal-close:hover {
    background: rgba(99, 102, 241, 0.3);
    color: #fff;
}

.confirm-modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 2rem;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.styled-confirm-modal h2 {
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.confirm-modal-msg {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.confirm-modal-msg strong {
    color: #e2e8f0;
}

.confirm-details {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 25px;
    text-align: left;
}

.confirm-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cbd5e1;
    font-size: 0.9rem;
    padding: 6px 0;
}

.confirm-detail-item i {
    width: 18px;
    text-align: center;
    font-size: 0.85rem;
}

.confirm-actions {
    display: flex;
    gap: 15px;
}

.btn-confirm-cancel {
    flex: 1;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm-cancel:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btn-confirm-yes {
    flex: 1.5;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-confirm-yes:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    filter: brightness(1.1);
}

/* Quest Complete Button Pulse */
.quest-complete-btn {
    animation: questCompletePulse 1.5s ease-in-out infinite;
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

.quest-complete-btn:hover {
    animation: none;
    transform: translateY(-3px) !important;
}

@keyframes questCompletePulse {
    0%, 100% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 35px rgba(34, 197, 94, 0.6); }
}

.quest-journey-status.complete {
    color: #86efac !important;
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ========================================
   SKIRMISH TABS  
   ======================================== */

.skirmish-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 4px;
}

.skirmish-tab {
    flex: 1;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.skirmish-tab:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.05);
}

.skirmish-tab.active {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.loot-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    animation: lootBadgePulse 2s ease-in-out infinite;
}

@keyframes lootBadgePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(245, 158, 11, 0.3); }
    50% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.6); }
}

.skirmish-tab-content {
    animation: fadeIn 0.3s ease;
}

/* ========================================
   LOOT MISSIONS PAGE
   ======================================== */

.loot-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Guild Bonus Card */
.guild-bonus-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(79, 70, 229, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 14px;
    padding: 18px 22px;
}

.guild-bonus-icon {
    font-size: 28px;
    color: #818cf8;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    flex-shrink: 0;
}

.guild-bonus-info {
    flex: 1;
}

.guild-bonus-info h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
    color: #fff;
    font-weight: 600;
}

.guild-bonus-info p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

.guild-bonus-info p strong {
    color: #f59e0b;
}

.btn-claim-bonus {
    padding: 12px 24px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    animation: bonusPulse 2s ease-in-out infinite;
}

@keyframes bonusPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3); }
    50% { box-shadow: 0 4px 30px rgba(99, 102, 241, 0.6); }
}

.btn-claim-bonus:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
    animation: none;
}

.bonus-cooldown {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.bonus-cooldown i {
    color: rgba(255, 255, 255, 0.35);
}

/* Active Mission Card */
.active-mission-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 2px solid var(--mission-color, #ff9800);
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    position: relative;
    animation: missionGlow 3s ease-in-out infinite;
}

@keyframes missionGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 152, 0, 0.15); }
    50% { box-shadow: 0 0 35px rgba(255, 152, 0, 0.3); }
}

.active-mission-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 14px;
}

/* Active Mission Card Prize */
.active-mission-card-prize {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.12), transparent);
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffd700;
}

.active-mission-card-prize i {
    font-size: 1rem;
    color: #ff9800;
}

.mission-icon-large {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--mission-color, #ff9800);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    flex-shrink: 0;
}

.active-mission-info {
    flex: 1;
}

.mission-status-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 4px;
}

.mission-status-label.active {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

.mission-status-label.completed {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    animation: completePulse 1.5s ease-in-out infinite;
}

@keyframes completePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.5); }
}

.active-mission-info h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}

.stolen-count {
    font-size: 12px;
    color: #e91e63;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.active-mission-reward {
    text-align: center;
    padding: 10px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 12px;
}

.active-mission-reward i {
    color: #f59e0b;
    font-size: 14px;
}

.active-mission-reward span {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #f59e0b;
    text-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

/* Mission Progress Bar */
.mission-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 22px;
    border-radius: 3px;
    overflow: hidden;
}

.mission-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--mission-color, #ff9800), #ffd700);
    border-radius: 3px;
    transition: width 1s ease;
    position: relative;
}

.mission-progress-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
    animation: shimmer 1.5s ease-in-out infinite;
}

.mission-progress-fill.complete {
    background: linear-gradient(90deg, #22c55e, #4ade80);
    width: 100% !important;
}

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

.active-mission-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    gap: 12px;
}

.mission-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.mission-timer i {
    color: var(--mission-color, #ff9800);
}

.btn-claim-mission {
    padding: 12px 28px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
    animation: claimPulse 1.5s ease-in-out infinite;
}

@keyframes claimPulse {
    0%, 100% { box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3); transform: scale(1); }
    50% { box-shadow: 0 4px 30px rgba(34, 197, 94, 0.6); transform: scale(1.03); }
}

.btn-claim-mission:hover {
    animation: none;
    transform: translateY(-2px) scale(1.05);
    filter: brightness(1.1);
}

.btn-abandon-mission {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: rgba(239, 68, 68, 0.7);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-abandon-mission:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.6);
    color: #ef4444;
}

.mission-warning {
    padding: 10px 22px 14px;
    font-size: 12px;
    color: rgba(245, 158, 11, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(245, 158, 11, 0.06);
}

.mission-warning i {
    color: #f59e0b;
}

/* Available Missions Grid */
.missions-section h3 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-desc {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
}

.missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.mission-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--mission-color, #ff9800);
}

.mission-card:hover:not(.locked) {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    border-color: var(--mission-color, #ff9800);
}

.mission-card.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

.mission-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mission-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--mission-color, #ff9800);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.mission-risk-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 6px;
}

.mission-risk-badge.low { color: #4caf50; background: rgba(76, 175, 80, 0.15); }
.mission-risk-badge.medium { color: #ff9800; background: rgba(255, 152, 0, 0.15); }
.mission-risk-badge.high { color: #f44336; background: rgba(244, 67, 54, 0.15); }
.mission-risk-badge.extreme { color: #9c27b0; background: rgba(156, 39, 176, 0.15); }
.mission-risk-badge.legendary { color: #ffd700; background: rgba(255, 215, 0, 0.15); }

.mission-card h4 {
    margin: 0 0 6px 0;
    font-size: 15px;
    color: #fff;
    font-weight: 700;
}

.mission-card-desc {
    margin: 0 0 14px 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
}

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

.mission-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.mission-stat i {
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
}

.mission-stat.reward {
    color: #f59e0b;
    font-weight: 700;
}

.mission-stat.reward i {
    color: #f59e0b;
}

.mission-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 14px;
}

.mission-lock-overlay i {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.5);
}

.mission-lock-overlay span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
}

/* Enemy Mission Badge (on target cards) */
.enemy-mission-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(255, 152, 0, 0.2));
    border-top: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 11px;
    color: #fbbf24;
    font-weight: 600;
    z-index: 2;
}

.enemy-mission-badge .mission-reward {
    margin-left: auto;
    font-weight: 700;
    color: #f59e0b;
}

.enemy-mission-badge .mission-reward i {
    font-size: 10px;
}

/* Add bottom padding to cards with missions */
.skirmish-enemy-card:has(.enemy-mission-badge) {
    padding-bottom: 36px;
}

/* How it Works / Info Card */
.steal-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(99, 102, 241, 0.08));
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 12px;
    padding: 16px 20px;
}

.steal-info-card > i {
    font-size: 24px;
    color: #60a5fa;
    margin-top: 2px;
    flex-shrink: 0;
}

.steal-info-card strong {
    display: block;
    font-size: 15px;
    color: #fff;
    margin-bottom: 4px;
}

.steal-info-card p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.steal-info-card p strong {
    display: inline;
    color: #f59e0b;
    font-size: inherit;
}

/* Mission History */
.mission-history-section h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mission-history-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mission-history-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mission-history-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.mission-history-icon i {
    font-size: 16px;
}

.mission-history-row.claimed .mission-history-icon i {
    color: #22c55e;
}

.mission-history-row.failed .mission-history-icon i {
    color: #ef4444;
}

.mission-history-info {
    flex: 1;
    min-width: 0;
}

.mission-history-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    display: block;
}

.mission-history-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
}

.mission-history-meta em {
    color: #e91e63;
}

.mission-history-reward {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.mission-history-reward.claimed {
    color: #22c55e;
}

.mission-history-reward.failed {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: line-through;
}

.mission-history-reward i {
    font-size: 12px;
    margin-right: 2px;
}

/* Battle Result Mission Stolen */
.reward-item.stolen, .reward-item.stolen-reward {
    color: #e91e63 !important;
}

.reward-item.stolen i, .reward-item.stolen-reward i {
    color: #e91e63;
}

.loot-pool-note {
    margin-top: 8px;
    padding: 8px 14px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
}

.loot-pool-note i {
    color: #f59e0b;
}

.loot-pool-note strong {
    color: #f59e0b;
}

/* Mobile responsiveness for loot missions */
@media (max-width: 768px) {
    .guild-bonus-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .btn-claim-bonus {
        width: 100%;
        justify-content: center;
    }
    
    .active-mission-header {
        flex-wrap: wrap;
    }
    
    .active-mission-reward {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .active-mission-reward span {
        display: inline;
    }
    
    .active-mission-footer {
        flex-wrap: wrap;
    }
    
    .btn-claim-mission {
        width: 100%;
        justify-content: center;
    }
    
    .missions-grid {
        grid-template-columns: 1fr;
    }
    
    .steal-info-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    
    .skirmish-tabs {
        flex-direction: row;
    }
}