/* ========================================
   Navigation
   ======================================== */

.navbar {
    background: rgba(10, 14, 23, 0.95);
    border-bottom: 1px solid var(--border-light);
    padding: 0;
    position: sticky;
    top: 0; /* keep sticky behavior; actual visual offset provided by padding */
    z-index: 1000;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    /* Keep compact default padding; iOS PWA safe-area adjustments applied only when needed */
    padding: calc(var(--spacing-xs)) var(--spacing-xs) var(--spacing-xs);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.nav-brand h1 {
    font-size: 1.75rem;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
    margin: 0;
}

/* Prevent site title from wrapping when navbar gets crowded */
.nav-brand {
    white-space: nowrap;
    flex: 0 0 auto;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-lg);
    transition: var(--transition);
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    position: relative;
}

.nav-link:hover {
    background: var(--surface-elevated);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.nav-link.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.5),
                0 4px 12px rgba(0, 217, 255, 0.3);
}

/* Container for navigation links so user/level cards stay aligned to the right */
.nav-links {
    display: flex;
    /* increased horizontal spacing between nav link items */
    gap: 1.25rem; /* ~20px */
    align-items: center;
    flex: 1 1 auto;
}

/* User Info Desktop (outer wrapper — themed by grouped rule) */
.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0.5rem 0.75rem;
    margin-left: var(--spacing-md);
}

/* Small avatar used inside navbar user card */
.nav-avatar {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.06);
}

.nav-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    gap: 8px;
    padding: 4px 6px;
    max-width: 260px; /* prevent the profile card from growing too wide */
    flex: 0 0 auto;
    /* inner container should be transparent — outer `.user-info` provides the card chrome */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Themed glassy card style for profile (outer), multiplier and outer level card wrapper */
.user-info,
.nav-level-card,
.nav-multiplier-card {
    background: linear-gradient(180deg, rgba(12,14,23,0.55), rgba(18,21,30,0.45));
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6), 0 2px 8px rgba(0,0,0,0.6);
}

/* hover effects removed for static cards */
.nav-user-card:hover, .nav-level-card:hover, .nav-multiplier-card:hover {
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}


.nav-username {
    display: inline-block;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
}

.nav-multiplier {
    margin: 0 8px;
    font-weight: 900;
    font-size: 1.02rem;
    color: var(--primary-color);
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Container holding username + multiplier inline */
.nav-user-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 80px;
    max-width: 140px;
    overflow: hidden;
}

/* Multiplier badge inside navbar user card */
.nav-multiplier-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}


/* Level Badge Styles */
.user-info .cur8-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    min-width: 260px;
    max-width: 480px;
    color: white;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 0 10px rgba(179, 136, 255, 0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Level card: keep pointer but remove hover animation */
.level-badge-container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    /* make inner badge transparent so only the outer nav-level-card shows the theme */
    background: transparent;
    border-radius: 10px;
    border: none;
    box-shadow: none;
    min-width: 180px;
    max-width: 480px;
    flex: 0 0 auto;
    cursor: pointer;
}

.level-badge-container:hover {
    transform: none !important;
    transition: none !important;
}

/* subtle pulse when XP increases can be triggered by adding .xp-pulse */
.xp-pulse { animation: pulse 1.2s ease-in-out; }

.user-info #userName,
.nav-username {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Reset any inner widget chrome so the outer card provides the visual frame */
.level-badge-container > * {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.level-badge-container .level-multiplier {
    position: absolute;
    right: 12px;
    top: 10px;
    font-weight: 900;
    color: var(--primary-color);
    font-size: 1rem;
    background: transparent;
}

@media (max-width: 768px) {
    .level-badge-container .level-multiplier {
        position: static;
        margin-left: 8px;
        margin-top: 6px;
    }
}

/* Standalone level card in navbar (separate from user profile card) */
.nav-level-card {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1.25rem;
    padding: 10px 12px;
    min-width: 120px;
    height: 64px;
    /* Gradiente dinamico con colore del livello */
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--level-color, #6366f1) 35%, transparent) 0%, 
        color-mix(in srgb, var(--level-color, #6366f1) 20%, transparent) 50%,
        rgba(12,14,23,0.6) 100%) !important;
    border: 1px solid color-mix(in srgb, var(--level-color, #6366f1) 30%, transparent) !important;
    box-shadow: 0 8px 30px color-mix(in srgb, var(--level-color, #6366f1) 12%, rgba(2,6,23,0.6)), 
                0 2px 8px rgba(0,0,0,0.6) !important;
    position: relative;
}

/* When the badge container is inside the navbar-level card, center its children
   and neutralize absolute positioning used elsewhere to avoid visual offset. */
.nav-level-card #levelBadgeContainer,
.nav-level-card .level-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
    min-width: 0;
    position: relative;
    z-index: 2;
}

/* Prevent inner multiplier from using absolute positioning inside the nav card */
.nav-level-card .level-multiplier {
    position: static !important;
    right: auto !important;
    top: auto !important;
    margin-left: 8px;
}

/* Slightly reduce the swatch margin when displayed in the compact nav card */
.nav-level-card .level-color-swatch {
    margin-right: 8px;
}

/* Multiplier moved into level card */
.level-multiplier {
    font-weight: 900;
    color: var(--primary-color);
    font-size: 1rem;
    white-space: nowrap;
    margin-left: 10px;
}

/* When multiplier is placed inside the badge container, align it to the right area */
#levelBadgeContainer {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* New multiplier card styles */

.nav-multiplier-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    min-width: 120px;
    height: 64px;
    /* Gradiente cyan elegante come "Cur8 Games" text */
    background: linear-gradient(135deg, 
        rgba(0, 200, 255, 0.35) 0%,
        rgba(0, 150, 220, 0.3) 50%,
        rgba(12,14,23,0.6) 100%) !important;
    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    box-shadow: 0 8px 30px rgba(0, 200, 255, 0.15), 0 2px 8px rgba(0,0,0,0.6) !important;
    position: relative;
    text-align: left;
}

/* Center the multiplier title and value horizontally and vertically */

.nav-multiplier-card .multiplier-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* left-align the two-line title */
    justify-content: center;
    text-align: left;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.95);
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.nav-multiplier-card .multiplier-value {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 900;
    color: #00d4ff;
    text-shadow: 0 2px 8px rgba(0, 212, 255, 0.4);
    position: relative;
    z-index: 1;
}

/* Increase horizontal spacing between links and the nav cards on desktop */
@media (min-width: 769px) {
    .nav-multiplier-card {
        margin-left: 1.25rem;
    }
    .nav-level-card {
        margin-left: 1.25rem;
    }
}

.nav-multiplier-card .multiplier-title span:first-child {
    font-size: 12px;
}

.nav-multiplier-card .multiplier-title span:last-child {
    font-weight: 700;
}

@media (max-width: 768px) {
    .nav-multiplier-card { display: none; }
}

@media (max-width: 768px) {
    .level-multiplier {
        display: block;
        margin: 6px 0 0 0;
        font-size: 1rem;
    }
}

.level-badge-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* Small colored swatch used to show level color without coloring the whole badge */
.level-color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    margin-right: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
    flex: 0 0 auto;
    /* use CSS variable for dynamic color */
    background-color: var(--level-color, #6366f1);
    position: relative;
}

/* Glow / subtle overlap derived from swatch color */
.level-color-swatch::after {
    content: '';
    position: absolute;
    width: 72px;
    height: 52px;
    left: -16px;
    top: -6px;
    border-radius: 10px;
    background-color: var(--level-color, transparent);
    opacity: 0.10;
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
}

.level-color-swatch > .level-badge-icon {
    position: relative;
    z-index: 1;
    color: white;
}

.level-badge-info {
    flex: 1 1 auto;
    min-width: 0;
}

.level-badge-title {
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Overrides: remove residual chrome/contour ONLY from the navbar user profile area
   The multiplier and level cards should keep their gradient backgrounds */
#userInfo,
#userInfo .nav-user-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.level-badge-number {
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
}

.level-badge-separator {
    color: rgba(255, 255, 255, 0.6);
}

.level-badge-progress-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}

.level-badge-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.level-badge-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    transition: width 0.3s ease;
    /* width controlled via CSS variable set on container */
    width: var(--progress-percent, 0%);
}

.level-badge-progress-text {
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    min-width: 40px;
    text-align: right;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Shimmer (mirror) effect on hover for Level and Multiplier cards */
.nav-level-card, .nav-multiplier-card {
    position: relative;
    overflow: hidden; /* contain the shimmer */
}

.nav-level-card::before, .nav-multiplier-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    filter: blur(6px);
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
}

.nav-level-card:hover::before, .nav-multiplier-card:hover::before {
    /* start immediately and run once on hover (no repeat) - faster duration */
    animation: shimmer-slide 400ms linear 1;
    animation-delay: 0s;
    opacity: 1;
}

@keyframes shimmer-slide {
    0% { left: -120%; opacity: 0; }
    20% { opacity: 0.85; }
    60% { opacity: 0.95; }
    100% { left: 120%; opacity: 0; }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .user-info .cur8-badge {
        min-width: 160px;
        max-width: 300px;
        padding: 4px 8px;
        font-size: 0.8rem;
    }

    .level-badge-container {
        min-width: 180px;
        max-width: 100%;
        padding: 6px 8px;
    }

    .level-badge-progress-text {
        min-width: 36px;
        font-size: 10px;
    }
}

/* Nav Logout section */
.nav-logout {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.nav-username-top {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.user-info #logoutBtn,
.btn-logout {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--error), #dc2626);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(255, 61, 113, 0.3);
}

.user-info #logoutBtn:hover,
.btn-logout:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 61, 113, 0.4);
}

/* Hide auth-required links by default */
.nav-link.auth-required {
    display: none;
}

/* Quest Notification Badge */
.quest-notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, var(--secondary-color), #ff6b9d);
    color:var(--text-primary);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(255, 61, 113, 0.6),
                0 0 30px rgba(255, 61, 113, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 10;
    animation: badge-appear 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#questsLink {
    position: relative;
}

@keyframes badge-appear {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 61, 113, 0.6),
                    0 0 30px rgba(255, 61, 113, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 25px rgba(255, 61, 113, 0.8),
                    0 0 50px rgba(255, 61, 113, 0.5),
                    0 0 75px rgba(255, 61, 113, 0.2);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 61, 113, 0.5);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 61, 113, 0.8),
                     0 0 25px rgba(255, 61, 113, 0.5);
    }
}

/* Box/inner glow animation used to illuminate the interior of the Quests button */
@keyframes glow-box {
    0%, 100% {
        box-shadow: 0 0 6px rgba(255,193,7,0.28), inset 0 0 6px rgba(255,193,7,0.12);
    }
    50% {
        box-shadow: 0 0 20px rgba(255,193,7,0.7), inset 0 0 16px rgba(255,193,7,0.28);
    }
}

.pulse-animation {
    animation: pulse 2s ease-in-out infinite;
}

#questsLink:has(.quest-notification-badge) {
    /* existing text glow + a box/inner glow so the button itself lights up */
    animation: glow-pulse 2s ease-in-out infinite, glow-box 2s ease-in-out infinite;
    /* subtle tinted background so the inner glow is visible */
    background: linear-gradient(135deg, rgba(255,193,7,0.04), rgba(255,193,7,0.015));
    box-shadow: 0 0 6px rgba(255,193,7,0.28), inset 0 0 6px rgba(255,193,7,0.12);
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 2;
}

/* ── Community Chat Notification Badge ──────────────────────────────────── */
#communityLink {
    position: relative;
}

.community-notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: linear-gradient(135deg, #00d4aa, #00b4d8);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 212, 170, 0.6),
                0 0 30px rgba(0, 212, 170, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 10;
    animation: badge-appear 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.community-notification-badge.pulse-animation {
    animation: community-badge-pulse 2s ease-in-out infinite;
}

@keyframes community-badge-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(0, 212, 170, 0.6),
                    0 0 30px rgba(0, 212, 170, 0.3);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 25px rgba(0, 212, 170, 0.8),
                    0 0 50px rgba(0, 212, 170, 0.5),
                    0 0 75px rgba(0, 212, 170, 0.2);
    }
}

@keyframes community-glow-pulse {
    0%, 100% {
        text-shadow: 0 0 5px rgba(0, 212, 170, 0.5);
    }
    50% {
        text-shadow: 0 0 15px rgba(0, 212, 170, 0.8),
                     0 0 25px rgba(0, 212, 170, 0.5);
    }
}

@keyframes community-glow-box {
    0%, 100% {
        box-shadow: 0 0 6px rgba(0, 212, 170, 0.28), inset 0 0 6px rgba(0, 212, 170, 0.12);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 212, 170, 0.7), inset 0 0 16px rgba(0, 212, 170, 0.28);
    }
}

#communityLink:has(.community-notification-badge) {
    animation: community-glow-pulse 2s ease-in-out infinite, community-glow-box 2s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.04), rgba(0, 212, 170, 0.015));
    box-shadow: 0 0 6px rgba(0, 212, 170, 0.28), inset 0 0 6px rgba(0, 212, 170, 0.12);
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 2;
}

/* Also make the hamburger/menu toggle glow when quests are claimable
   (matches when the nav menu contains the quests link with a badge). */
.nav-menu:has(#questsLink:has(.quest-notification-badge)) + .nav-toggle,
.nav-toggle:has(.quest-notification-badge) {
    animation: glow-pulse 2s ease-in-out infinite;
}

.nav-menu:has(#questsLink:has(.quest-notification-badge)) + .nav-toggle {
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.12);
}

.nav-menu:has(#questsLink:has(.quest-notification-badge)) + .nav-toggle span {
    /* tint the lines slightly and add soft glow */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.18);
}

/* Also make the hamburger/menu toggle glow when community has unread messages */
.nav-menu:has(#communityLink:has(.community-notification-badge)) + .nav-toggle,
.nav-toggle:has(.community-notification-badge) {
    animation: community-glow-pulse 2s ease-in-out infinite;
}

.nav-menu:has(#communityLink:has(.community-notification-badge)) + .nav-toggle {
    box-shadow: 0 0 18px rgba(0, 212, 170, 0.12);
}

.nav-menu:has(#communityLink:has(.community-notification-badge)) + .nav-toggle span {
    background: linear-gradient(135deg, #00d4aa, #00b4d8);
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.18);
}

/* Hamburger Menu */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--spacing-sm);
    z-index: 1001;
    position: relative;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
    transform-origin: center;
}

/* Badge shown on the hamburger/menu toggle (mobile) */
.nav-toggle .quest-notification-badge {
    position: absolute;
    /* tight top-right placement on the toggle */
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    padding: 0;
    background: linear-gradient(135deg, var(--secondary-color), #ff6b9d);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(255, 61, 113, 0.55);
    border: 1px solid rgba(255,255,255,0.14);
    z-index: 11002;
    overflow: hidden;
}

/* Badge shown on the hamburger/menu toggle (mobile) – community variant */
.nav-toggle .community-notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    min-width: 12px;
    padding: 0;
    background: linear-gradient(135deg, #00d4aa, #00b4d8);
    color: var(--text-primary);
    border-radius: 50%;
    font-size: 0.55rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(0, 212, 170, 0.55);
    border: 1px solid rgba(255,255,255,0.14);
    z-index: 11002;
    overflow: hidden;
}

.nav-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
    }
    
    /* Add padding to main content to account for fixed header */
    main {
        padding-top: calc(60px + var(--spacing-xl));
    }
    
    .nav-toggle {
        display: flex;
    }
    
    .navbar .container {
        flex-wrap: nowrap;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: 0;
        /* Use transform for GPU-accelerated sliding and opacity for a softer feel */
        transform: translateX(100%);
        will-change: transform, opacity;
        opacity: 0;
        height: 100vh;
        width: 280px;
        flex-direction: column;
        align-items: stretch;
        background: rgba(26, 26, 26, 0.98);
        padding: 80px var(--spacing-lg) var(--spacing-lg);
        gap: 0;
        transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease-out;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
        border-left: 1px solid var(--border);
        overflow-y: auto;
        z-index: 999;
        pointer-events: none;
    }
    /* On mobile make nav-links stack vertically and not stretch horizontally */
    .nav-links {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
        flex: none;
        width: 100%;
    }

    /* Make level card full width inside the mobile menu and remove left margin */
    .nav-level-card {
        margin-left: 0 !important;
        width: 100%;
        justify-content: center;
        padding: 10px 12px;
    }

    /* Allow username to wrap and free space on mobile to avoid truncation */
    .nav-user-meta {
        max-width: none;
        width: auto;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }

    .nav-username {
        white-space: normal;
        overflow-wrap: anywhere;
        max-width: none;
    }

    /* Make level badge itself fluid on mobile to avoid forcing horizontal width */
    .level-badge-container {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
    
    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }
    
    .nav-link {
        text-align: left;
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-xs);
        border-radius: var(--radius-md);
    }
    
    /* Quest notification badge adjustments for mobile */
    .quest-notification-badge {
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }

    /* Ensure badge inside nav toggle keeps a small circular appearance */
    .nav-toggle .quest-notification-badge {
        top: 4px;
        right: 4px;
        min-width: 12px;
        height: 12px;
        padding: 0;
        font-size: 0.55rem;
    }

    .nav-toggle .community-notification-badge {
        top: 4px;
        right: 4px;
        min-width: 12px;
        width: 12px;
        height: 12px;
        padding: 0;
        font-size: 0.55rem;
    }
    
    .user-info {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        background: var(--surface);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-lg);
        margin-left: 0 !important;
    }

    /* Mobile stacking: ensure cards and logout are visually separated and full-width */
    .nav-multiplier-card,
    .nav-level-card,
    .user-info,
    .nav-logout {
        width: 100%;
        margin-bottom: var(--spacing-md);
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-multiplier-card {
        display: flex !important;
        justify-content: center; /* center horizontally on mobile */
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        text-align: center;
        margin-top: var(--spacing-lg);
        margin-bottom: var(--spacing-lg); /* add more space before profile */
        margin-left: 0 !important; /* remove any left margin */
    }

    .nav-multiplier-card .multiplier-title {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* Separate logout with a subtle divider and make its button full-width */
    .nav-logout {
        border-top: 1px solid rgba(255,255,255,0.04);
        padding-top: 12px;
        margin-top: 6px;
        display: flex;
        justify-content: center;
        margin-left: 0 !important;
    }

    .nav-logout #logoutBtn,
    .nav-logout .btn-logout {
        width: 100%;
        max-width: 240px;
        display: block;
        padding: var(--spacing-sm);
    }


    #levelBadgeContainer, .level-badge-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding-right: 12px;
    }

    /* Make the profile card full width too */
    .nav-user-card {
        width: 100%;
        justify-content: center;
        margin-left: 0 !important;
    }
    
    .user-info #userName {
        font-weight: 600;
        color: var(--text-primary);
    }
    
    .user-info .cur8-badge {
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--primary-color);
        border-radius: var(--radius-sm);
        text-align: center;
    }
    
    .user-info #logoutBtn {
        width: 100%;
        padding: var(--spacing-sm);
        background: var(--error);
        border: none;
        border-radius: var(--radius-md);
        color: white;
        cursor: pointer;
        transition: var(--transition);
    }
    
    .user-info #logoutBtn:hover {
        background: #dc2626;
    }
}

@media (max-width: 480px) {
    .nav-brand h1 {
        font-size: 1.2rem;
    }
    
    /* Keep the same transform-based slide animation on very small screens */
    .nav-menu {
        width: 100%;
        right: 0; /* anchor to right, but use transform to hide */
        transform: translateX(100%);
        opacity: 0;
        pointer-events: none;
    }

    .nav-menu.active {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* ensure profile row stays compact on very small screens */
    .nav-user-card {
        gap: 6px;
    }

    .nav-avatar {
        width: 48px;
        height: 48px;
    }
}

/* Ensure the JS placeholder for user info remains invisible in the UI
   while staying addressable by scripts. */
#userInfo,
#userInfo * {
    display: none !important;
    visibility: hidden !important;
}

/* iOS PWA: ensure navbar sits above the status bar and is fully tappable */
body.ios-pwa .navbar,
html.ios-standalone .navbar,
body.display-standalone .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 11000;
    /* keep navbar itself compact; apply safe-area offset to inner container only */
    padding-top: 0px;
    min-height: auto;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

/* keep inner content tappable inside the safe area */
body.ios-pwa .navbar .container,
html.ios-standalone .navbar .container,
body.display-standalone .navbar .container {
    padding-top: calc(env(safe-area-inset-top, 0px));
}

/* slide-out menu positioning is default (no iOS-only overrides) */