/

===================================

## BATTLE PASS SYSTEM

## ENHANCED CSS

## Versione 3.0

## Ottimizzato - Stile Enrolled Courses

===================================

/

/* =================================== VARIABILI E FONDAMENTI =================================== */ 
:root { 
    /* Colori primari - nuovo schema blu scuro */
    --primary-dark: #061527; 
    --primary: #0a2b57; 
    --primary-light: #0d3369; 
    --accent: #3198ff; 
    --accent-dark: #0954a5; 
    --text-light: #ffffff; 
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-dark: #000000; /* Nuovo colore per testo scuro */

    /* Crediti colori */
    --gold-color: #ffd700;
    --gem-color: #00d0ff;
    --emerald-color: #50c878;

    /* Gradiente principale */ 
    --main-gradient: linear-gradient(135deg, #061527, #0a2b57, #0d3369); 
    --card-gradient: linear-gradient(145deg, rgba(13, 25, 53, 0.8), rgba(16, 35, 73, 0.6)); 
    --accent-gradient: linear-gradient(135deg, #0954a5, #3198ff);

    /* Ombreggiature */ 
    --main-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 100px rgba(49, 152, 255, 0.2); 
    --card-shadow: 0 8px 16px rgba(0,0,0,0.3); 
    --button-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    --hover-shadow: 0 15px 30px rgba(0,0,0,0.4); 
    --popup-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 100px rgba(49, 152, 255, 0.3);

    /* Arrotondamenti */
    --border-radius-sm: 8px;
    --border-radius: 15px; 
    --border-radius-lg: 20px; 
    --border-radius-xl: 25px;

    /* Transizioni */
    --transition-fast: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/

===================================

## ANIMAZIONI

===================================

/

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes shine {
    0% { background-position: 100% 50%; }
    50% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes pulse { 
    0% { opacity: 0.8; } 
    50% { opacity: 1; } 
    100% { opacity: 0.8; } 
}

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

@keyframes shakeEmoji { 
    0%, 100% { transform: rotate(0deg); } 
    25% { transform: rotate(10deg); } 
    75% { transform: rotate(-10deg); } 
}

@keyframes pulseHalo { 
    0%, 100% { opacity: 0.3; transform: scale(1); } 
    50% { opacity: 0.6; transform: scale(1.1); } 
}

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

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

@keyframes glowText { 
    0% { text-shadow: 0 0 5px rgba(49, 152, 255, 0.3); } 
    100% { text-shadow: 0 0 15px rgba(49, 152, 255, 0.7); } 
}

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

@keyframes bounceIn { 
    0% { opacity: 0; transform: scale(0.3); } 
    50% { opacity: 1; transform: scale(1.05); } 
    70% { transform: scale(0.9); } 
    100% { transform: scale(1); } 
}

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

@keyframes glow { 
    0%, 100% { box-shadow: 0 0 5px rgba(49, 152, 255, 0.3); } 
    50% { box-shadow: 0 0 20px rgba(49, 152, 255, 0.7); } 
}

/* =================================== CONTAINER PRINCIPALE =================================== */ 
.battle-pass-container { 
    position: relative; 
    max-width: 1000px; 
    margin: 40px auto; 
    padding: 30px; 
    background: var(--main-gradient);
    background-size: 300% 300%; 
    animation: gradientShift 15s ease infinite; 
    border-radius: var(--border-radius-lg); 
    color: var(--text-light); 
    box-shadow: var(--main-shadow); 
    border: 1px solid rgba(49, 152, 255, 0.1);
    overflow: visible !important; 
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    
}

/* Particelle di sfondo con overlay */ 
.battle-pass-container::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect fill="none" width="100" height="100"/><rect fill="rgba(255,255,255,0.05)" width="1" height="1" x="14" y="30"/><rect fill="rgba(255,255,255,0.05)" width="2" height="2" x="41" y="62"/><rect fill="rgba(255,255,255,0.05)" width="1" height="1" x="5" y="11"/><rect fill="rgba(255,255,255,0.05)" width="1" height="1" x="89" y="85"/><rect fill="rgba(255,255,255,0.05)" width="1" height="1" x="68" y="23"/><rect fill="rgba(255,255,255,0.05)" width="1" height="1" x="33" y="56"/><rect fill="rgba(255,255,255,0.05)" width="1" height="1" x="45" y="92"/></svg>'); 
    z-index: 0; 
    opacity: 0.4; 
}

/* =================================== HEADER E INFORMAZIONI STAGIONE =================================== */ 
.battle-pass-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 30px; 
    padding-bottom: 20px; 
    border-bottom: 1px solid rgba(49, 152, 255, 0.1);
    position: relative; 
    z-index: 1; 
}

.battle-pass-title { 
    font-size: 32px; 
    font-weight: 800; 
    color: var(--text-light); 
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(49, 152, 255, 0.5);
    letter-spacing: 1px; 
    text-transform: uppercase; 
    margin: 0; 
    background: linear-gradient(to right, #ffffff, #3198ff);
    -webkit-background-clip: text; 
    background-clip: text; 
    color: transparent; 
    animation: shine 3s ease-in-out infinite; 
}

.season-info { 
    background: rgba(13, 25, 53, 0.5);
    padding: 12px 18px; 
    border-radius: var(--border-radius); 
    border: 1px solid rgba(49, 152, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.season-info p { 
    margin: 0; 
    font-size: 14px; 
    font-weight: 500; 
    color: var(--text-light) !important; /* Assicuriamo che il testo sia bianco */
    text-shadow: 0 0 10px rgba(49, 152, 255, 0.3);
    display: flex; 
    align-items: center; 
}

#season-countdown { 
    background: rgba(0, 0, 0, 0.2); 
    padding: 2px 8px; 
    border-radius: 12px; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); 
    color: var(--accent);
    animation: pulse 2s ease-in-out infinite; 
}

.countdown-urgent {
    color: #ff4d4d !important;
    animation: urgentPulse 1s ease-in-out infinite !important;
}

/

===================================

## USER AVATAR E POPUP

===================================

/

.user-avatar {
    position: relative;
    cursor: pointer !important;
    display: inline-block;
    transition: transform 0.3s ease;
    z-index: 100;
}

.user-avatar img { 
    border: 3px solid var(--accent);
    border-radius: 50%; 
    width: 80px; 
    height: 80px; 
    object-fit: cover; 
    box-shadow: 0 0 15px rgba(49, 152, 255, 0.7), 0 0 30px rgba(49, 152, 255, 0.4);
    transition: var(--transition); 
    background-color: rgba(13, 25, 53, 0.3);
}

.user-avatar:hover {
    transform: scale(1.05);
}

.user-avatar:hover img { 
    box-shadow: 0 0 20px rgba(49, 152, 255, 0.9), 0 0 40px rgba(49, 152, 255, 0.5);
}

.user-avatar::after { 
    content: "👑"; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    background: var(--accent-gradient);
    width: 24px; 
    height: 24px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    border: 2px solid var(--primary-dark); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
    animation: shakeEmoji 2s ease-in-out infinite; 
}

/* POPUP UTENTE - VERSIONE CORRETTA */ 
.user-info-popup {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    width: 50% !important;
    height: 50% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
}

.user-info-popup.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Inline style for content to match your current popup */
.user-info-popup {
    width: 80% !important;
    max-width: 400px !important;
    background: linear-gradient(160deg, #0a1b36, #061527) !important;
    border: 1px solid rgba(49, 152, 255, 0.3) !important;
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px rgba(49, 152, 255, 0.3) !important;
    color: white !important;
    animation: bounceIn 0.5s !important;
    max-height: 90vh !important;
    overflow-y: visible !important;
    text-align: center !important;
}

.popup-close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 25px !important;
    height: 25px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    color: #3198ff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10002 !important;
    line-height: 24px !important;
    transition: all 0.2s ease !important;
}

.popup-close-btn:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(90deg) !important;
}

/* User rank icon */
.popup-level-icon {
    text-align: center !important;
    margin-bottom: 10px !important;
}

.popup-level-icon img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    border: 3px solid #3198ff !important;
    box-shadow: 0 0 15px rgba(49, 152, 255, 0.6) !important;
    padding: 5px !important;
    background-color: rgba(10, 27, 54, 0.6) !important;
    animation: glow 2s infinite alternate !important;
}

/* User rank title */
.popup-rank-title {
    font-size: 22px !important;
    color: white !important;
    margin: 0 0 10px 0 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
}

.popup-user-email {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 20px !important;
}

/* Credits section styling */
.user-credits {
    display: flex !important;
    justify-content: space-around !important;
    margin: 15px 0 !important;
    padding: 12px !important;
    background: rgba(10, 30, 60, 0.3) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(49, 152, 255, 0.1) !important;
}

.credit-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
}

.credit-item:hover {
    transform: translateY(-3px) !important;
}

.credit-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 5px !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)) !important;
}

.gold-credit .credit-value {
    color: #ffd700 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
    font-size: 14px !important;
}

.gem-credit .credit-value {
    color: #00d0ff !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(0, 208, 255, 0.6) !important;
    font-size: 14px !important;
}

.emerald-credit .credit-value {
    color: #50c878 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 8px rgba(80, 200, 120, 0.6) !important;
    font-size: 14px !important;
}

/* Requirements section heading */
.next-rank-requirements h4 {
    font-size: 16px !important;
    color: #3198ff !important;
    margin: 20px 0 10px 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Requirements styling */
.requirements-list {
    text-align: left !important;
}

.requirement-item {
    padding: 10px !important;
    margin-bottom: 10px !important;
    background: rgba(10, 30, 60, 0.4) !important;
    border-radius: 8px !important;
    border-left: 3px solid #3198ff !important;
}

.requirement-label {
    display: flex !important;
    justify-content: space-between !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 13px !important;
    margin-bottom: 6px !important;
}

.requirement-progress-bar {
    height: 6px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid rgba(49, 152, 255, 0.1) !important;
}

.requirement-progress-fill {
    height: 100% !important;
    background: linear-gradient(to right, #0954a5, #3198ff) !important;
    border-radius: 3px !important;
    position: relative !important;
}

.requirement-progress-fill::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%) !important;
    animation: progressShine 2s infinite !important;
}
.max-rank { 
    color: var(--accent) !important;
    text-align: center !important; 
    font-weight: 600 !important; 
    font-size: 16px !important; 
    padding: 10px !important; 
    background: rgba(13, 25, 53, 0.5) !important;
    border-radius: var(--border-radius-sm) !important; 
    animation: glowText 2s infinite alternate !important; 
}

/

===================================

## NAVIGAZIONE TABS

===================================

/

.tab-menu {
    display: flex;
    justify-content: center;
    margin: 25px 0;
    gap: 18px;
    position: relative;
    z-index: 1;
}

.tab-button { 
    padding: 12px 28px; 
    background: rgba(13, 25, 53, 0.4);
    color: var(--text-light) !important; /* Assicurarsi che il testo sia bianco */
    border: 1px solid rgba(49, 152, 255, 0.15);
    border-radius: var(--border-radius); 
    cursor: pointer; 
    font-size: 16px; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
    transition: var(--transition); 
    box-shadow: var(--button-shadow); 
    position: relative; 
    overflow: hidden; 
    outline: none; 
}

.tab-button::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}

.tab-button:hover {
    background: linear-gradient(90deg, rgba(30, 30, 60, 0.8), rgba(40, 40, 80, 0.8)) !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.2) !important;
}

.tab-button:hover::before {
    opacity: 1;
}

.tab-button:active { 
    transform: translateY(2px); 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
}

.tab-button.active { 
    background: rgba(13, 25, 53, 0.4);
    color: var(--text-light) !important;
    border-color: var(--accent);
    box-shadow: none;
}

/* Rimuovere qualsiasi effetto dopo per la tab attiva */
.tab-button.active::after {
    display: none !important;
}


.tab-content { 
    display: none; 
    padding: 30px; 
    background: rgba(13, 25, 53, 0.3);
    border-radius: var(--border-radius-lg); 
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); 
    border: 1px solid rgba(49, 152, 255, 0.1);
    color: var(--text-light); 
    position: relative; 
    z-index: 1; 
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.4s ease-out;
}

/* =================================== SUBTABS ACHIEVEMENT =================================== */ 
.achievement-subtab-menu { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin: 0 0 25px 0; 
    gap: 12px; 
}

.achievement-subtab-button { 
    padding: 10px 20px; 
    background: rgba(13, 25, 53, 0.4);
    color: var(--text-light) !important; /* Assicurarsi che il testo sia bianco */
    border: 1px solid rgba(49, 152, 255, 0.15);
    border-radius: 30px; 
    cursor: pointer; 
    font-size: 14px; 
    font-weight: 500; 
    transition: var(--transition); 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); 
    position: relative; 
    overflow: hidden; 
    outline: none; 
}

.achievement-subtab-button::before { 
    content: ""; 
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%; 
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%); 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    transform: scale(0.5); 
}

.achievement-subtab-button:hover::before { 
    opacity: 1; 
    transform: scale(1); 
    transition: transform 0.5s ease, opacity 0.3s ease; 
}

.achievement-subtab-button:hover { 
    background: linear-gradient(90deg, rgba(30, 30, 60, 0.8), rgba(40, 40, 80, 0.8)) !important;
    border-color: #ffd700 !important;
    color: #ffd700 !important;
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.2) !important;
    transform: translateY(-1px); 
}

.achievement-subtab-button.active { 
    background: rgba(13, 25, 53, 0.4);
    color: var(--text-light) !important;
    border-color: var(--accent);
    box-shadow: none;
}


/* Rimuovere qualsiasi effetto dopo per la subtab attiva */
.achievement-subtab-button.active::after {
    display: none !important;
}

.achievement-subtab-content {
    display: none;
    animation: fadeIn 0.4s ease-out;
    position: relative;
}

.achievement-subtab-content.active {
    display: block !important;
    z-index: 10 !important;
    position: relative !important;
}

.achievement-subtab-content h3 { 
    font-size: 24px; 
    color: var(--accent);
    margin-bottom: 20px; 
    text-align: center; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
    letter-spacing: 0.5px; 
    position: relative; 
    display: inline-block; 
    width: 100%; 
}

.achievement-subtab-content h3::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 3px;
}

/* =================================== SEZIONI MISSIONI =================================== */ 
.missions-section { 
    position: relative !important; 
    margin-bottom: 35px; 
    background: rgba(13, 25, 53, 0.3) !important;
    border-radius: var(--border-radius-lg); 
    padding: 25px 25px; /* Ridotto il padding laterale */
    border: 1px solid rgba(49, 152, 255, 0.08);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
    transition: var(--transition); 
    z-index: 5 !important; 
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
}
.missions-section:hover { 
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important; 
    transform: translateY(-2px) !important; 
    background: rgba(30, 20, 75, 0.4) !important;
    border-color: rgba(255, 215, 0, 0.2) !important;
}


.missions-section h4 { 
    font-size: 20px; 
    color: var(--text-light); 
    margin-bottom: 20px; 
    border-bottom: 1px solid rgba(49, 152, 255, 0.1);
    padding-bottom: 10px; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); 
    position: relative; 
}

.missions-section h4::before {
    content: "";
    display: none;
}


.missions-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 25px;
    overflow-x: hidden !important;
    padding: 15px 5px;
    position: relative;
    scroll-behavior: smooth !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    opacity: 1 !important;
    visibility: visible !important;
}

.missions-grid::-webkit-scrollbar {
    display: none;
}

/* Style speciali per diverse categorie di missioni */ 
.missions-section:nth-child(3n+1) { 
    background: linear-gradient(145deg, rgba(13, 25, 53, 0.3), rgba(16, 35, 73, 0.15));
}

.missions-section:nth-child(3n+2) { 
    background: linear-gradient(145deg, rgba(13, 25, 53, 0.25), rgba(16, 35, 73, 0.1));
}

.missions-section:nth-child(3n+3) { 
    background: linear-gradient(145deg, rgba(13, 25, 53, 0.2), rgba(16, 35, 73, 0.05));
}

/* Missioni completate */ 
.missions-section .no-items-message { 
    color: rgba(255, 255, 255, 0.5); 
    text-align: center; 
    font-style: italic; 
    padding: 30px 0; 
    background: rgba(0, 0, 0, 0.2); 
    border-radius: var(--border-radius); 
    margin: 20px 0; 
}

.missions-cards {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/

===================================

## FRECCE DI NAVIGAZIONE

===================================
/

.missions-nav-arrows {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -5px !important;
    right: -5px !important;
    width: calc(100% + 10px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

.missions-section { 
    padding: 25px 40px !important;
    overflow: visible !important;
    position: relative !important;
    /* Rimuoviamo il clip-path da qui per evitare il taglio delle frecce */
    clip-path: none !important;
}

/* Container esterno con clip-path */
.tab-content {
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%);
    overflow: visible !important;
}

/* Override diretto per le frecce */
.missions-nav-arrow.left-arrow {
    position: absolute !important;
    left: 10px !important; /* Posizione all'interno del contenitore */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10000 !important;
}

.missions-nav-arrow.right-arrow {
    position: absolute !important;
    right: 10px !important; /* Posizione all'interno del contenitore */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 10000 !important;
}

/* Assicuriamoci che le frecce siano completamente visibili */
.missions-nav-arrow {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background-color: rgba(9, 84, 165, 0.8) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}



.missions-nav-arrow { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    background-color: rgba(9, 84, 165, 0.7);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); 
    cursor: pointer; 
    position: relative; 
    transition: var(--transition); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: none; 
    overflow: visible; 
    pointer-events: auto; 
    z-index: 150; 
}

/* Correzione posizione specifica */
.missions-nav-arrow.left-arrow {
    margin-left: 0;
}

.missions-nav-arrow.right-arrow {
    margin-right: 0;
}


.missions-nav-arrow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 11;
}

.missions-nav-arrow svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
    pointer-events: none;
}

.missions-nav-arrow:hover { 
    transform: scale(1.1); 
    background-color: rgba(49, 152, 255, 0.5);
}

.missions-nav-arrow.disabled {
    opacity: 0.3;
    cursor: default !important;
}

.missions-nav-arrow:active {
    transform: scale(0.95);
}

/* =================================== CARD MISSIONI E BADGE =================================== */ 
.gamipress-achievement { 
    width: 300px !important; 
    min-width: 300px !important; 
    max-width: 300px !important; 
    height: 270px !important; 
    min-height: 270px !important; 
    max-height: 270px !important; 
    background: var(--card-gradient);
    border-radius: var(--border-radius); 
    padding: 15px; 
    margin: 10px; 
    box-shadow: var(--card-shadow); 
    position: relative !important; 
    overflow: hidden; 
    box-sizing: border-box; 
    flex-shrink: 0; 
    flex-grow: 0; 
    transition: var(--transition); 
    border: 1px solid rgba(49, 152, 255, 0.05);
    transform-style: preserve-3d; 
    perspective: 1000px; 
    z-index: 6 !important; 
    display: flex !important; 
    opacity: 1 !important; 
    visibility: visible !important; 
}

.gamipress-achievement::before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.1) 100%); 
    opacity: 0; 
    transition: opacity 0.5s; 
    z-index: 1; 
}

.gamipress-achievement {
    transition: all 0.4s ease !important;
}

.gamipress-achievement:hover { 
    transform: translateY(-10px) rotateX(5deg) !important; 
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 5px 15px rgba(0, 0, 0, 0.3) !important; 
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: rgba(45, 25, 90, 0.6) !important;
}



.gamipress-achievement:hover::before {
    opacity: 1;
}

.gamipress-achievement-thumbnail {
    text-align: center;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.gamipress-achievement-thumbnail img { 
    width: 80px !important; 
    height: 80px !important; 
    object-fit: contain !important; 
    display: block !important; 
    margin: 0 auto !important; 
    border-radius: 50% !important; 
    opacity: 1 !important; 
    background: none !important; 
    filter: none !important; 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
    border: 3px solid var(--accent);
}

.gamipress-achievement:hover .gamipress-achievement-thumbnail img {
    transform: scale(1.1) rotate(5deg);
}

.gamipress-achievement-title {
    position: absolute !important;
    top: 100px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    height: 45px !important;
    overflow: hidden !important;
    padding: 0 10px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2;
}

.gamipress-achievement-title h4 { 
    color: var(--text-light) !important; /* Testo bianco per migliorare la leggibilità */
    font-size: 16px !important; 
    margin: 20 !important; 
    padding: 0 !important; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important; 
    line-height: 1.2 !important; 
    width: 100% !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    text-align: center !important; 
    font-weight: 600 !important; 
    transition: var(--transition) !important; 
}

.gamipress-achievement:hover .gamipress-achievement-title h4 {
    color: var(--text-light) !important; /* Mantiene il testo bianco */
}

.gamipress-achievement-excerpt {
    position: absolute !important;
    top: 150px !important;
    left: 0 !important;
    right: 0 !important;
    height: 65px !important;
    overflow: hidden !important;
    padding: 0 15px !important;
    z-index: 2;
}

.gamipress-achievement-excerpt p { 
    color: rgba(255, 255, 255, 0.8) !important; 
    font-size: 12px !important; 
    margin: 0 !important; 
    padding: 0 !important; 
    text-align: center !important; 
    display: -webkit-box !important; 
    -webkit-line-clamp: 3 !important; 
    -webkit-box-orient: vertical !important; 
    overflow: hidden !important; 
    line-height: 1.3 !important; 
    transition: var(--transition) !important; 
}

.gamipress-achievement:hover .gamipress-achievement-excerpt p { 
    color: rgba(255, 255, 255, 1) !important; 
}

.gamipress-achievement-points {
    position: absolute !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    height: 30px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 2;
}

.gamipress-achievement-points span { 
    color: var(--text-light) !important; /* Colore bianco per leggibilità */
    font-weight: bold !important; 
    font-size: 14px !important; 
    display: inline-block !important; 
    padding: 5px 15px !important; 
    background: rgba(0, 0, 0, 0.3) !important; 
    border-radius: 20px !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
    max-width: 90% !important; 
    transition: var(--transition) !important; 
    border: 1px solid rgba(255, 215, 0, 0.3) !important; 
}

.gamipress-achievement:hover .gamipress-achievement-points span { 
    background: rgba(0, 0, 0, 0.5) !important; 
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3) !important; 
    transform: scale(1.05) !important; 
}

/* Missioni completate */ 
.gamipress-achievement.user-has-earned { 
    background: linear-gradient(145deg, rgba(13, 25, 53, 0.8), rgba(16, 35, 73, 0.6));
    border: 1px solid rgba(49, 152, 255, 0.3) !important;
}

.gamipress-achievement.user-has-earned::after { 
    content: "✓"; 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    width: 25px; 
    height: 25px; 
    background: #3198ff;
    color: white; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 14px; 
    font-weight: bold; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); 
    z-index: 3; 
}

.gamipress-achievement.user-has-earned .gamipress-achievement-points span { 
    background: rgba(49, 152, 255, 0.2) !important;
    border-color: rgba(49, 152, 255, 0.3) !important;
}

/* =================================== RANK CARDS E PROGRESSIONE =================================== */ 
.rank-progress-section h2 { 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); 
    font-size: 24px; 
    margin-bottom: 25px; 
    text-align: center; 
    color: var(--accent);
    position: relative; 
    display: inline-block; 
    width: 100%; 
}

.rank-progress-section h2::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 3px;
}

.rank-slider { 
    position: relative; 
    display: flex; 
    overflow-x: auto; 
    scroll-behavior: smooth; 
    gap: 20px; 
    padding: 20px 5px 30px 5px; 
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); 
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); 
    scrollbar-width: thin; 
    scrollbar-color: var(--accent) rgba(0, 0, 0, 0.3);
}

.rank-slider::-webkit-scrollbar {
    height: 8px;
}

.rank-slider::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    border-radius: 4px;
}

.rank-slider::-webkit-scrollbar-track { 
    background-color: rgba(0, 0, 0, 0.3); 
    border-radius: 4px; 
}

.rank-cards {
    display: flex;
    padding: 10px;
    gap: 30px;
    position: relative;
}

.rank-cards::after { 
    content: ""; 
    position: absolute; 
    top: 60%; 
    left: 0; 
    right: 0; 
    height: 3px; 
    background: rgba(49, 152, 255, 0.1);
    z-index: 0; 
}

.rank-card {
    padding: 20px;
    border-radius: var(--border-radius-lg);
    text-align: center;
    position: relative;
    min-width: 140px;
    transition: var(--transition-bounce);
    z-index: 1;
    cursor: pointer;
}

.rank-card::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: inherit;
    border-right: inherit;
    border-bottom: inherit;
    border-top: 0;
    border-left: 0;
    z-index: -1;
}

.rank-card.unlocked { 
    background: rgba(13, 25, 53, 0.8);
    border: 2px solid #3198ff;
    box-shadow: 0 5px 15px rgba(49, 152, 255, 0.3);
}

.rank-card.current { 
    background: rgba(16, 35, 73, 0.9);
    border: 2px solid var(--accent);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(49, 152, 255, 0.4);
    transform: scale(1.08); 
    z-index: 3; 
}

.rank-card.locked {
    background: rgba(255,255,255,0.05);
    border: 2px solid #888;
    color: #888 !important;
    cursor: pointer;
    filter: grayscale(80%) brightness(0.8);
}

.rank-card .gamipress-rank-image img { 
    display: block; 
    max-width: 80px; 
    margin: 0 auto; 
    border-radius: 50%; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
    transition: var(--transition); 
}

.rank-card.unlocked:hover .gamipress-rank-image img { 
    transform: scale(1.1); 
    box-shadow: 0 0 15px rgba(49, 152, 255, 0.7);
}

.rank-card.unlocked { 
    transition: all 0.4s ease !important;
}

.rank-card.unlocked:hover {
    border-color: #ffd700 !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5) !important;
    background: rgba(20, 35, 70, 0.8) !important;
}

.rank-card.current {
    transition: all 0.4s ease !important;
}

.rank-card.current:hover {
    transform: scale(1.12) translateY(-5px) !important;
    border-color: #ffd700 !important;
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5) !important;
}


.rank-card .gamipress-rank-title h3 {
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.rank-card.locked .gamipress-rank-title h3 { 
    color: rgba(255, 255, 255, 0.5); 
}

/* RANK DETAILS POPUP - STYLED LIKE MISSION DETAILS */
.rank-details-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
}

.rank-details-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.rank-details-content {
    position: relative !important;
    width: 80% !important;
    max-width: 350px !important; /* Adjusted to match your screenshot size */
    background: linear-gradient(160deg, #0a1b36, #061527) !important; /* Matching your blue */
    border: 1px solid rgba(49, 152, 255, 0.3) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 50px rgba(49, 152, 255, 0.3) !important;
    color: white !important;
    z-index: 10001 !important;
    animation: bounceIn 0.5s !important;
    max-height: 90vh !important;
    overflow-y: visible !important;
    text-align: center !important; /* Matching your centered content */
}

.rank-details-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    width: 25px !important;
    height: 25px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    color: #3198ff !important;
    font-size: 18px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10002 !important;
    line-height: 24px !important;
    transition: all 0.2s ease !important;
}

.rank-details-close:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(90deg) !important;
}

/* Rank detail title - matches your existing style but enhanced */
.rank-detail-title {
    text-align: center !important;
    font-size: 22px !important;
    margin: 0 0 20px 0 !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Rank detail image - matches your circular image with glow */
.rank-detail-image {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.rank-detail-image img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    border: 2px solid #3198ff !important;
    box-shadow: 0 0 15px rgba(49, 152, 255, 0.6) !important;
    padding: 5px !important;
    background-color: rgba(10, 27, 54, 0.6) !important;
    animation: glow 2s infinite alternate !important;
}

/* Requirements section header */
.rank-detail-requirements h3 {
    font-size: 16px !important;
    color: #3198ff !important;
    margin: 20px 0 10px 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Requirements list styling */
.rank-detail-requirements ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 15px 0 !important;
    text-align: left !important;
}

.rank-detail-requirements li {
    padding: 10px 15px !important;
    margin-bottom: 10px !important;
    background: rgba(10, 30, 60, 0.4) !important;
    border-radius: 8px !important;
    border-left: 3px solid #3198ff !important;
    text-align: left !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
}

.rank-detail-requirements li:hover {
    background: rgba(10, 30, 60, 0.6) !important;
    transform: translateX(2px) !important;
}

/* Status text styling */
.rank-detail-requirements .status {
    display: inline-block !important;
    padding: 5px 15px !important;
    background: rgba(49, 152, 255, 0.2) !important;
    color: #3198ff !important;
    border-radius: 15px !important;
    margin: 5px 0 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
}

/* Rewards section header */
.rank-detail-rewards h3 {
    font-size: 16px !important;
    color: #3198ff !important;
    margin: 20px 0 10px 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* Description text */
.rank-detail-requirements p,
.rank-detail-rewards p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 10px 0 !important;
    text-align: center !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .rank-details-content {
        width: 90% !important;
        padding: 20px 15px !important;
    }
    
    .rank-detail-title {
        font-size: 20px !important;
    }
}

@media (max-width: 576px) {
    .rank-details-content {
        width: 95% !important;
        padding: 15px !important;
    }
    
    .rank-detail-image img {
        width: 70px !important;
        height: 70px !important;
    }
    
    .rank-detail-title {
        font-size: 18px !important;
    }
}






===================================

## SFONDO ANIMATO DI STELLE

===================================

/

#stars-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.8;
}

/

===================================

## CLASSI ADDIZIONALI

===================================

/

/* Animazione notifica nuove missioni */

.gamipress-achievement.new-mission::before {
    content: "NEW";
    position: absolute;
    top: 0;
    right: 0;
    background: var(--accent);
    color: var(--primary-dark);
    padding: 3px 8px;
    font-size: 10px;
    font-weight: bold;
    border-top-right-radius: var(--border-radius);
    z-index: 3;
    animation: pulse 2s infinite;
}

/* Tooltip per ulteriori informazioni */

.tooltip {
    position: relative;
}

.tooltip::after { 
    content: attr(data-tooltip); 
    position: absolute; 
    bottom: 100%; 
    left: 50%; 
    transform: translateX(-50%); 
    padding: 5px 10px; 
    background: rgba(0, 0, 0, 0.8); 
    color: white; 
    border-radius: 4px; 
    font-size: 12px; 
    white-space: nowrap; 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease; 
    z-index: 100; 
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 5px);
}

/* Indicatori di quasi completato */ 
.almost-complete::after { 
    content: "QUASI COMPLETATO"; 
    position: absolute; 
    top: 10px; 
    left: -40px; 
    background: var(--accent);
    color: var(--primary-dark);
    transform: rotate(-45deg); 
    padding: 3px 40px; 
    font-size: 10px; 
    font-weight: bold; 
    z-index: 3; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
}

/* Classe per missioni preferite */

.favorite-mission {
    border: 2px solid var(--accent) !important;
}

.favorite-mission::after {
    content: "★";
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--accent);
    font-size: 18px;
    z-index: 3;
}

/* Applica animazioni agli elementi che appaiono */ 
.gamipress-achievement.appear { 
    animation: bounceIn 0.5s; 
}

/

===================================

## RESPONSIVE DESIGN

===================================

/

@media (max-width: 992px) {
    .battle-pass-container {
        padding: 25px 20px;
    }
    
    .tab-content {
        padding: 20px;
    }
    
    .missions-section {
        padding: 20px 20px; /* Ridotto per mantenere le frecce visibili */
    }
    
    .rank-card {
        min-width: 120px;
        padding: 15px;
    }
}

@media (max-width: 768px) {
    .battle-pass-container {
        margin: 20px 10px;
        padding: 20px 15px;
    }
    
    .battle-pass-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .user-avatar {
        margin-bottom: 15px;
    }
    
    .user-info-popup {
        width: 30px;
        left: 50%;
        transform: translate(-50%, -50%) !important;
    }
    
    .tab-menu {
        flex-wrap: wrap;
    }
    
    .tab-button {
        flex: 1 0 40%;
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .achievement-subtab-menu {
        gap: 8px;
    }
    
    .achievement-subtab-button {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .missions-section {
        padding: 15px 15px; /* Ridotto per mantenere le frecce visibili */
    }
    
    .missions-nav-arrow {
        width: 35px;
        height: 35px;
    }
    
    .gamipress-achievement {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }
}

@media (max-width: 576px) {
    .battle-pass-title {
        font-size: 24px;
    }
    
    .tab-button {
        flex: 1 0 100%;
        margin-bottom: 8px;
    }
    
    .missions-section {
        padding: 15px 15px; /* Ridotto per mantenere le frecce visibili */
    }
    
    .missions-section h3 {
        font-size: 20px;
    }
    
    .missions-section h4 {
        font-size: 16px;
    }
    
    .rank-card {
        padding: 12px;
        min-width: 100px;
    }
    
    .rank-card .gamipress-rank-image img {
        max-width: 60px;
    }
    
    .user-info-popup {
        width: 90vw !important;
        padding: 20px 15px !important;
    }
    
    .gamipress-achievement {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
    
    .gamipress-achievement-thumbnail img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .gamipress-achievement-title {
        top: 80px !important;
    }
    
    .gamipress-achievement-excerpt {
        top: 115px !important;
    }
}

/* Nuovo stile per ricompense compatte */ 
.reward-compact { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background: var(--accent-gradient) !important;
    border-radius: 30px !important; 
    padding: 6px 14px !important; 
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important; 
    max-width: fit-content !important; 
    margin: 0 auto !important; 
    color: var(--text-light) !important;
    border: none !important;
}

.reward-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px !important;
}

.reward-amount {
    font-weight: bold !important;
    font-size: 14px !important;
    color: var(--text-light) !important;
}

.gold-reward { 
    background: var(--accent-gradient) !important; 
    border: none !important;
}

.gem-reward { 
    background: var(--accent-gradient) !important;
    border: none !important;
}

.emerald-reward { 
    background: var(--accent-gradient) !important;
    border: none !important;
}

.completed-badge {
    margin-left: 5px !important;
    color: #ffffff !important;
    font-weight: bold !important;
}







/* ===================================
   OTTIMIZZAZIONE MOBILE PER BATTLE PASS
   =================================== */

/* Tablet (fino a 992px) */
@media (max-width: 992px) {
    /* Container principale più compatto */
    .battle-pass-container {
        padding: 20px 15px;
        margin: 20px auto;
    }
    
    /* Header più compatto */
    .battle-pass-title {
        font-size: 24px;
    }
    
    /* Regolazione padding delle sezioni */
    .missions-section {
        padding: 20px 15px;
    }
    
    /* Riduzione dimensione card */
    .gamipress-achievement {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
}

/* Smartphone (fino a 768px) */
@media (max-width: 768px) {
    /* Layout header verticale */
    .battle-pass-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    /* Titolo più piccolo */
    .battle-pass-title {
        font-size: 22px;
    }
    
    /* Menu tab a larghezza piena */
    .tab-menu {
        flex-direction: column;
        gap: 10px;
    }
    
    .tab-button {
        width: 100%;
        text-align: center;
    }
    
    /* Menu subtab in due colonne */
    .achievement-subtab-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    
    .achievement-subtab-button {
        padding: 8px 5px;
        font-size: 13px;
        width: 100%;
        text-align: center;
    }
    
    /* Ottimizzazione delle card missioni */
    .gamipress-achievement {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
    }
    
    /* Aggiustamento titoli e testi card */
    .gamipress-achievement-title {
        top: 80px !important; 
    }
    
    .gamipress-achievement-excerpt {
        top: 110px !important;
    }
    
    /* Miglioramento navigazione frecce */
    .missions-nav-arrow {
        transform: scale(1.2);
        background-color: rgba(9, 84, 165, 0.8);
    }
    
    /* Miglioramento rank card */
    .rank-card {
        min-width: 110px;
        padding: 12px;
    }
    
    .rank-card .gamipress-rank-image img {
        max-width: 60px;
    }
}

/* Smartphone piccoli (fino a 576px) */
@media (max-width: 576px) {
    /* Container più compatto */
    .battle-pass-container {
        padding: 15px 10px;
        margin: 10px auto;
    }
    
    /* Header più semplice */
    .battle-pass-header {
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    
    /* Content più compatto */
    .tab-content {
        padding: 15px;
    }
    
    /* Subtabs in colonna singola */
    .achievement-subtab-menu {
        grid-template-columns: 1fr;
    }
    
    /* Ottimizzazione ulteriore card */
    .gamipress-achievement {
        width: 185px !important;
        min-width: 185px !important;
        max-width: 185px !important;
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
        padding: 12px !important;
    }
    
    /* Card più leggibile */
    .gamipress-achievement-thumbnail img {
        width: 50px !important;
        height: 50px !important;
    }
    
    .gamipress-achievement-title h4 {
        font-size: 14px !important;
    }
    
    .gamipress-achievement-excerpt p {
        font-size: 11px !important;
    }
    
    /* Popup utente più compatto */
    .user-info-popup {
        width: 90vw !important;
        padding: 20px 15px !important;
    }
}

/* Ottimizzazioni touch specifiche */
@media (hover: none) {
    /* Miglioramento uso touch per le card */
    .gamipress-achievement:hover {
        transform: translateY(-5px);
    }
    
    /* Pulsanti più spaziati per il touch */
    .tab-button, 
    .achievement-subtab-button,
    .missions-nav-arrow {
        padding: 12px 15px;
        min-height: 44px; /* Migliore area tocco */
    }
    
    /* Feedback visivo al touch */
    .gamipress-achievement:active,
    .tab-button:active,
    .achievement-subtab-button:active {
        opacity: 0.8;
        transition: opacity 0.1s;
    }
    
    /* Nascondi tooltip su mobile */
    .tooltip::after {
        display: none;
    }
}

/* Rimpicciolisci testo overflow nelle sezioni missioni */
@media (max-width: 992px) {
    .gamipress-achievement-title h4,
    .gamipress-achievement-excerpt p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }
}



/* Miglioramento navigazione frecce su mobile */
@media (max-width: 768px) {
    .missions-nav-arrows {
        width: 120% !important;
        left: -10% !important;
    }
    
    .missions-nav-arrow {
        width: 44px !important;
        height: 44px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
        opacity: 0.9 !important;
    }
    
    .missions-nav-arrow.left-arrow {
        left: 2px !important;
    }
    
    .missions-nav-arrow.right-arrow {
        right: 2px !important;
    }
    
    .missions-nav-arrow svg {
        width: 24px;
        height: 24px;
    }
}










/* =================================== 
   DETTAGLI MISSIONE OVERLAY 
   =================================== */
.gamipress-achievement {
    cursor: pointer !important;
}

.gamipress-achievement-thumbnail img {
    cursor: pointer !important;
}

.gamipress-achievement-title,
.gamipress-achievement-excerpt {
    cursor: pointer !important;
}

.mission-details-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    transition: all 0.3s ease !important;
}

.mission-details-content {
    position: relative !important;
    width: 80% !important;
    max-width: 500px !important;
    background: linear-gradient(160deg, #061527, #0a2b57) !important;
    border: 2px solid #3198ff !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), 0 0 100px rgba(49, 152, 255, 0.3) !important;
    color: white !important;
    z-index: 10001 !important;
    animation: bounceIn 0.5s !important;
    clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}

.mission-details-close {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    color: #3198ff !important;
    font-size: 24px !important;
    font-weight: bold !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10002 !important;
    line-height: 24px !important;
    transition: all 0.2s ease !important;
}

.mission-details-close:hover {
    background: rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
    transform: scale(1.1) rotate(90deg) !important;
}

.mission-detail-image {
    text-align: center !important;
    margin-bottom: 20px !important;
}

.mission-detail-image img {
    width: 100px !important;
    height: 100px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    border: 3px solid #3198ff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 30px rgba(49, 152, 255, 0.4) !important;
    background-color: rgba(13, 25, 53, 0.3) !important;
    padding: 10px !important;
    animation: glow 2s infinite alternate !important;
}

.mission-detail-title {
    text-align: center !important;
    font-size: 24px !important;
    margin: 0 0 15px 0 !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding: 0 20px !important;
}

.mission-detail-description {
    margin-bottom: 25px !important;
    background: rgba(13, 25, 53, 0.3) !important;
    border-radius: 10px !important;
    padding: 15px !important;
    border: 1px solid rgba(49, 152, 255, 0.1) !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2) !important;
}

.mission-detail-description p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-height: none !important;
}

.mission-detail-progress {
    margin: 25px 0 !important;
}

.mission-status {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 15px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s ease !important;
}

.mission-status.completed {
    background: rgba(80, 200, 120, 0.2) !important;
    border: 1px solid rgba(80, 200, 120, 0.4) !important;
}

.mission-status.pending {
    background: rgba(255, 215, 0, 0.2) !important;
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
}

.status-icon {
    font-size: 24px !important;
    margin-bottom: 10px !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.mission-status.completed .status-icon {
    background: rgba(80, 200, 120, 0.4) !important;
    color: #ffffff !important;
}

.mission-status.pending .status-icon {
    background: rgba(255, 215, 0, 0.4) !important;
    color: #ffffff !important;
}

.status-text {
    font-weight: bold !important;
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
}

.mission-status.completed .status-text {
    color: #50c878 !important;
    text-shadow: 0 0 10px rgba(80, 200, 120, 0.5) !important;
}

.mission-status.pending .status-text {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

.mission-detail-progress h3,
.mission-detail-rewards h3 {
    font-size: 18px !important;
    color: #3198ff !important;
    margin: 20px 0 15px 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
}

.mission-detail-progress h3::after,
.mission-detail-rewards h3::after {
    content: "" !important;
    position: absolute !important;
    bottom: -8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 2px !important;
    background: linear-gradient(to right, rgba(49, 152, 255, 0.1), rgba(49, 152, 255, 0.6), rgba(49, 152, 255, 0.1)) !important;
    border-radius: 2px !important;
}

.mission-progress-bar {
    height: 15px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 15px 0 !important;
    border: 1px solid rgba(49, 152, 255, 0.1) !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

.mission-progress-fill {
    height: 100% !important;
    background: linear-gradient(to right, #0954a5, #3198ff) !important;
    border-radius: 8px !important;
    transition: width 1s cubic-bezier(0.19, 1, 0.22, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.mission-progress-fill::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.2) 50%,
        rgba(255,255,255,0) 100%) !important;
    animation: progressShine 2s infinite !important;
}

.mission-progress-text {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    line-height: 15px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    color: white !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) !important;
}

.mission-rewards-container {
    display: flex !important;
    justify-content: center !important;
    margin: 15px 0 !important;
}

.mission-reward {
    display: flex !important;
    align-items: center !important;
    padding: 15px 20px !important;
    background: rgba(13, 25, 53, 0.5) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(49, 152, 255, 0.1) !important;
    transition: transform 0.3s ease !important;
}

.mission-reward:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

.reward-icon-large {
    width: 48px !important;
    height: 48px !important;
    margin-right: 15px !important;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
    animation: floatUpDown 3s ease-in-out infinite !important;
}

.reward-details {
    display: flex !important;
    flex-direction: column !important;
}

.reward-amount-large {
    font-size: 28px !important;
    font-weight: bold !important;
}

.gold-reward .reward-amount-large {
    color: #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
}

.gem-reward .reward-amount-large {
    color: #00d0ff !important;
    text-shadow: 0 0 8px rgba(0, 208, 255, 0.6) !important;
}

.emerald-reward .reward-amount-large {
    color: #50c878 !important;
    text-shadow: 0 0 8px rgba(80, 200, 120, 0.6) !important;
}

.reward-type {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 5px !important;
}

/* Responsive design per il popup delle missioni */
@media (max-width: 768px) {
    .mission-details-content {
        width: 90% !important;
        padding: 25px 20px !important;
    }
    
    .mission-detail-image img {
        width: 80px !important;
        height: 80px !important;
    }
    
    .mission-detail-title {
        font-size: 20px !important;
    }
    
    .mission-detail-description p {
        font-size: 14px !important;
    }
    
    .mission-reward {
        padding: 12px 15px !important;
    }
    
    .reward-icon-large {
        width: 40px !important;
        height: 40px !important;
    }
    
    .reward-amount-large {
        font-size: 22px !important;
    }
    
    .mission-details-close {
        top: 10px !important;
        right: 10px !important;
    }
}

@media (max-width: 576px) {
    .mission-details-content {
        width: 95% !important;
        padding: 20px 15px !important;
    }
    
    .mission-detail-image img {
        width: 70px !important;
        height: 70px !important;
    }
    
    .mission-detail-title {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    .mission-detail-description {
        padding: 12px !important;
    }
    
    .mission-detail-description p {
        font-size: 13px !important;
    }
    
    .mission-reward {
        padding: 10px 12px !important;
    }
    
    .reward-icon-large {
        width: 36px !important;
        height: 36px !important;
        margin-right: 10px !important;
    }
    
    .reward-amount-large {
        font-size: 20px !important;
    }
    
    .status-icon {
        width: 35px !important;
        height: 35px !important;
    }
    
    .status-text {
        font-size: 14px !important;
    }
    
    .mission-detail-progress h3,
    .mission-detail-rewards h3 {
        font-size: 16px !important;
    }
}