/* ================= Header Ghost Button Base ================= */
.header-ghost-btn,
#info-btn, #zip-pin-btn, #leaderboard-btn, #adventure-btn, #donate-btn, #login-btn, #logout-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
/* ================= Immersion Mode Slider Styling ================= */
.immersion-slider {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Track styling for WebKit browsers (Chrome, Safari, Edge) */
.immersion-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(90deg, 
        rgba(12,25,41,0.85) 0%, 
        rgba(56,184,248,0.25) 50%, 
        rgba(12,25,41,0.85) 100%);
    border-radius: 3px;
    border: 1px solid rgba(99,179,237,0.35);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 12px rgba(56,189,248,0.15);
}

/* Thumb styling for WebKit browsers */
.immersion-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -5px;
    background: radial-gradient(ellipse at 35% 25%, 
        rgba(255,255,255,0.98) 0%, 
        rgba(224,231,255,0.95) 25%, 
        rgba(165,180,252,1) 65%, 
        rgba(99,102,241,1) 100%);
    border: 2px solid rgba(165,180,252,0.8);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(165,180,252,0.7), 
                0 0 24px rgba(99,102,241,0.4), 
                0 2px 6px rgba(0,0,0,0.45),
                inset 0 -2px 4px rgba(30,58,138,0.4);
    transition: all 0.15s ease;
}

.immersion-slider::-webkit-slider-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 0 20px rgba(165,180,252,0.9), 
                0 0 35px rgba(99,102,241,0.55), 
                0 3px 8px rgba(0,0,0,0.5),
                inset 0 -2px 4px rgba(30,58,138,0.4);
    border-color: rgba(224,231,255,0.95);
}

.immersion-slider::-webkit-slider-thumb:active {
    transform: scale(1.05);
    background: radial-gradient(ellipse at 35% 25%, 
        rgba(255,255,255,1) 0%, 
        rgba(224,231,255,1) 25%, 
        rgba(165,180,252,1) 65%, 
        rgba(79,82,221,1) 100%);
}

/* Track styling for Firefox */
.immersion-slider::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg, 
        rgba(12,25,41,0.85) 0%, 
        rgba(56,184,248,0.25) 50%, 
        rgba(12,25,41,0.85) 100%);
    border-radius: 3px;
    border: 1px solid rgba(99,179,237,0.35);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5), 0 0 12px rgba(56,189,248,0.15);
}

/* Thumb styling for Firefox */
.immersion-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: radial-gradient(ellipse at 35% 25%, 
        rgba(255,255,255,0.98) 0%, 
        rgba(224,231,255,0.95) 25%, 
        rgba(165,180,252,1) 65%, 
        rgba(99,102,241,1) 100%);
    border: 2px solid rgba(165,180,252,0.8);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(165,180,252,0.7), 
                0 0 24px rgba(99,102,241,0.4), 
                0 2px 6px rgba(0,0,0,0.45),
                inset 0 -2px 4px rgba(30,58,138,0.4);
    transition: all 0.15s ease;
}

.immersion-slider::-moz-range-thumb:hover {
    transform: scale(1.12);
    box-shadow: 0 0 20px rgba(165,180,252,0.9), 
                0 0 35px rgba(99,102,241,0.55), 
                0 3px 8px rgba(0,0,0,0.5),
                inset 0 -2px 4px rgba(30,58,138,0.4);
}

/* Focus ring for accessibility */
.immersion-slider:focus-visible {
    outline: 2px solid rgba(165,180,252,0.75);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ================= Immersion Panel Styling ================= */
#immersion-radius-panel,
#immersion-abs-panel {
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Compact constellation checkboxes and labels for toggle bar */
.constellation-checkbox-label {
    font-size: 10px !important;
    padding: 0 2px !important;
    margin: 0 1px !important;
    display: flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}
.constellation-checkbox-input {
    width: 9px !important;
    height: 9px !important;
    cursor: pointer;
    margin: 0 1px 0 0;
    vertical-align: middle;
}
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#atlas-app-shell {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
}

#atlas-app-shell > header,
#atlas-app-shell > #constellation-toggles,
#atlas-app-shell > #controls-toolbar {
    flex: 0 0 auto;
}

#atlas-app-shell > #chart-container {
    flex: 1 1 auto;
}

/* ================= User Greeting (header top-left) ================= */
.ca-user-greeting {
    position: absolute;
    left: 14px;
    top: 6px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 9px;
    pointer-events: none;
    min-width: 0;
    max-width: min(300px, calc(100vw - 150px));
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.22,1,.36,1);
}
.ca-user-greeting.visible {
    opacity: 1;
    transform: translateY(0);
}

.ca-user-greeting-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(99,102,241,0.45);
    border-radius: 50%;
    background: radial-gradient(circle at 38% 33%, rgba(165,180,252,0.22), rgba(17,24,79,0.55));
    box-shadow: 0 0 14px -4px rgba(165,180,252,0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    color: #e0e7ff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.ca-user-greeting-avatar:hover {
    transform: translateY(-1px) scale(1.03);
    border-color: rgba(165,180,252,0.75);
    box-shadow: 0 0 18px -3px rgba(165,180,252,0.55);
}

.ca-user-greeting-avatar:focus-visible {
    outline: 2px solid rgba(165,180,252,0.7);
    outline-offset: 2px;
}

.ca-user-greeting-avatar-glyph {
    font-size: 17px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}

.ca-user-greeting-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ca-user-greeting .greeting-nick {
    font-size: 13px;
    font-weight: 700;
    color: #e0e7ff;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10px rgba(165,180,252,0.22);
}

.ca-user-greeting .greeting-uid {
    font-size: 9px;
    color: rgba(148,163,184,0.82);
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Consolas, 'Courier New', monospace;
}

@media (max-width: 700px) {
    .ca-user-greeting {
        max-width: min(220px, calc(100vw - 110px));
    }
    .ca-user-greeting .greeting-nick {
        font-size: 12px;
    }
}

/* ================= Atlas Title Gradient Text (Reusable) ================= */
.atlas-gradient-text {
    background: linear-gradient(180deg, #ffffff 0%, #e0e7ff 40%, #a5b4fc 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(165, 180, 252, 0.4), 0 0 80px rgba(99, 102, 241, 0.2);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.atlas-title-text {
    letter-spacing: 0.12em;
    font-size: 2.2rem;
    line-height: 1.1;
    display: inline-block;
    font-weight: 700;
}

.stationed-gradient-label {
    font: 650 11px Segoe UI, Arial, sans-serif;
    letter-spacing: 0.03em;
}

/* ================= Header Donate Button (Ghost Style) ================= */
.donate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0;
    color: rgba(255,212,230,0.85);
    text-decoration: none;
    font: 700 16px Segoe UI Emoji, Segoe UI, Arial, sans-serif;
    border: 1px solid rgba(236,72,153,0.22);
    background: rgba(236,72,153,0.06);
    box-shadow: 0 0 8px -3px rgba(236,72,153,0.15);
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    appearance: none;
}

.donate-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255,170,200,0.5);
    background: linear-gradient(135deg, #3f1025 0%, #8a1e4f 45%, #ec4899 100%);
    box-shadow: 0 2px 14px -4px rgba(236,72,153,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    color: #ffd4e6;
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

.donate-btn:active {
    transform: translateY(0);
}

.donate-btn:focus-visible {
    outline: 2px solid rgba(236,72,153,0.6);
    outline-offset: 2px;
}

.donate-btn-emoji {
    line-height: 1;
    text-shadow: 0 0 6px rgba(236,72,153,0.3);
}

@media (max-width: 520px) {
    .donate-btn { font-size: 15px; }
}

/* ================= Donation Modal ================= */
.atlas-donation-overlay {
    position: fixed;
    inset: 0;
    z-index: 14000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow-y: auto;
}

.atlas-donation-overlay[hidden] {
    display: none !important;
}

.atlas-donation-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(173, 144, 255, 0.16), transparent 30%),
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.12), transparent 20%),
        radial-gradient(circle at 50% 85%, rgba(216, 88, 147, 0.15), transparent 34%),
        rgba(8, 8, 18, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.atlas-donation-modal {
    position: relative;
    width: min(540px, calc(100vw - 16px));
    max-height: min(90vh, 820px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: 24px;
    border: 1px solid rgba(224, 214, 255, 0.18);
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 28%),
        radial-gradient(circle at 100% 0%, rgba(174, 132, 255, 0.16), transparent 24%),
        radial-gradient(circle at 0% 100%, rgba(236, 92, 154, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(20, 18, 36, 0.98) 0%, rgba(31, 24, 58, 0.98) 46%, rgba(36, 20, 48, 0.98) 100%);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 0 60px rgba(146, 104, 255, 0.14);
    color: #f7f4ff;
    padding: 18px 18px 16px;
    scrollbar-gutter: stable;
}

.atlas-donation-modal::before,
.atlas-donation-modal::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(2px);
}

.atlas-donation-modal::before {
    width: 180px;
    height: 180px;
    top: -46px;
    right: -38px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 70%, transparent 76%);
}

.atlas-donation-modal::after {
    width: 210px;
    height: 210px;
    bottom: -92px;
    left: -54px;
    background: radial-gradient(circle, rgba(223, 97, 162, 0.18) 0%, rgba(223, 97, 162, 0.02) 70%, transparent 78%);
}

.atlas-donation-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(233, 223, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #f8f5ff;
    font: 700 18px/1 Segoe UI, Arial, sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.atlas-donation-close:hover {
    transform: scale(1.04);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}

.atlas-donation-close:focus-visible {
    outline: 2px solid rgba(225, 204, 255, 0.7);
    outline-offset: 2px;
}

.atlas-donation-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.atlas-donation-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(185, 157, 255, 0.08));
    border: 1px solid rgba(233, 223, 255, 0.14);
    color: rgba(249, 246, 255, 0.92);
    font: 700 11px Segoe UI, Arial, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.atlas-donation-balance {
    display: inline-grid;
    flex-direction: column;
    gap: 3px;
    min-width: 128px;
    padding: 9px 11px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border: 1px solid rgba(233, 223, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.atlas-donation-balance-label {
    color: rgba(225, 219, 244, 0.72);
    font: 700 0.62rem Segoe UI, Arial, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.atlas-donation-balance-value {
    color: #ffffff;
    font: 800 1rem Segoe UI, Arial, sans-serif;
}

.atlas-donation-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.atlas-donation-tier {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 205, 223, 0.16);
    background: linear-gradient(135deg, rgba(113, 40, 84, 0.82), rgba(166, 52, 92, 0.78) 50%, rgba(248, 241, 247, 0.1) 100%);
    color: #fff9fc;
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.atlas-donation-tier::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 60%, rgba(255,255,255,0.12) 100%);
    pointer-events: none;
}

.atlas-donation-tier:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 223, 237, 0.34);
    box-shadow: 0 12px 24px rgba(17, 8, 24, 0.28);
}

.atlas-donation-tier[data-selected="true"] {
    background: linear-gradient(135deg, rgba(151, 50, 95, 0.96), rgba(208, 66, 116, 0.92) 52%, rgba(255, 242, 247, 0.18) 100%);
    border-color: rgba(255, 236, 244, 0.54);
    box-shadow: 0 14px 28px rgba(77, 18, 44, 0.36), inset 0 1px 0 rgba(255,255,255,0.12);
}

.atlas-donation-tier:focus-visible {
    outline: 2px solid rgba(255, 223, 237, 0.76);
    outline-offset: 2px;
}

.atlas-donation-tier-price {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    white-space: nowrap;
    font: 800 0.94rem Segoe UI, Arial, sans-serif;
    letter-spacing: 0.02em;
}

.atlas-donation-tier-coins {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin-left: auto;
    white-space: nowrap;
    color: rgba(255, 244, 248, 0.96);
    font: 700 0.82rem Segoe UI, Arial, sans-serif;
    text-align: right;
}

.atlas-donation-custom {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(33, 24, 53, 0.9), rgba(66, 28, 74, 0.76));
    border: 1px solid rgba(223, 213, 255, 0.12);
}

.atlas-donation-custom-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    color: #f8f4ff;
    font: 700 0.86rem Segoe UI, Arial, sans-serif;
}

.atlas-donation-custom-hint {
    color: rgba(220, 212, 243, 0.68);
    font-size: 0.74rem;
}

.atlas-donation-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(223, 213, 255, 0.12);
}

.atlas-donation-input-currency {
    font: 800 0.95rem Segoe UI, Arial, sans-serif;
    color: #f9f6ff;
}

.atlas-donation-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #fff6fb;
    font: 700 0.96rem Segoe UI, Arial, sans-serif;
}

.atlas-donation-input::placeholder {
    color: rgba(223, 213, 255, 0.4);
}

.atlas-donation-input:focus {
    outline: none;
}

.atlas-donation-summary {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(223, 213, 255, 0.12);
}

.atlas-donation-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.88rem;
    color: rgba(238, 234, 249, 0.9);
}

.atlas-donation-summary-row strong {
    color: #fffefe;
    font-size: 0.94rem;
}

.atlas-donation-status {
    position: relative;
    z-index: 1;
    min-height: 22px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: rgba(238, 234, 249, 0.84);
    font-size: 0.84rem;
    line-height: 1.45;
}

.atlas-donation-status[data-tone="error"] {
    color: #ffd6e6;
}

.atlas-donation-status[data-tone="success"] {
    color: #fff3f9;
}

.atlas-donation-status[data-tone="muted"] {
    color: rgba(255, 213, 230, 0.68);
}

.atlas-donation-success-card {
    display: grid;
    gap: 6px;
    padding: 12px 13px;
    border-radius: 14px;
    border: 1px solid rgba(255, 221, 235, 0.22);
    background: linear-gradient(145deg, rgba(209, 75, 128, 0.24), rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.atlas-donation-success-headline {
    font: 800 0.92rem Segoe UI, Arial, sans-serif;
    color: #fff8fc;
}

.atlas-donation-success-meta {
    color: rgba(255, 234, 242, 0.84);
    font-size: 0.8rem;
}

.atlas-donation-auth,
.atlas-donation-fallback {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    padding: 12px 13px;
    border-radius: 16px;
    border: 1px solid rgba(223, 213, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.atlas-donation-auth[hidden],
.atlas-donation-fallback[hidden] {
    display: none !important;
}

.atlas-donation-auth-title,
.atlas-donation-fallback-title {
    color: #fff8fd;
    font: 800 0.88rem Segoe UI, Arial, sans-serif;
}

.atlas-donation-auth-copy,
.atlas-donation-fallback-copy {
    color: rgba(233, 228, 245, 0.8);
    font-size: 0.82rem;
    line-height: 1.5;
}

.atlas-donation-paypal-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(223, 213, 255, 0.12);
}

.atlas-donation-paypal-title {
    color: #fff8fd;
    font: 800 0.88rem Segoe UI, Arial, sans-serif;
}

.atlas-donation-paypal-copy {
    color: rgba(234, 229, 245, 0.76);
    font-size: 0.8rem;
    line-height: 1.45;
}

.atlas-donation-paypal-loader {
    color: rgba(234, 229, 245, 0.72);
    font-size: 0.8rem;
}

.atlas-donation-paypal-buttons {
    min-height: 46px;
}

.atlas-donation-paypal-buttons:empty {
    display: none;
}

.atlas-donation-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 223, 237, 0.2);
    background: linear-gradient(135deg, rgba(176, 69, 117, 0.34), rgba(224, 92, 138, 0.24));
    color: #fff5fa;
    text-decoration: none;
    font: 700 0.84rem Segoe UI, Arial, sans-serif;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.atlas-donation-link:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 232, 242, 0.34);
    background: linear-gradient(135deg, rgba(176, 69, 117, 0.44), rgba(224, 92, 138, 0.32));
}

.atlas-donation-link:focus-visible {
    outline: 2px solid rgba(255, 223, 237, 0.76);
    outline-offset: 2px;
}

@media (max-width: 720px) {
    .atlas-donation-modal {
        width: min(100vw - 14px, 540px);
        padding: 16px 12px 14px;
        border-radius: 20px;
    }

    .atlas-donation-header {
        align-items: stretch;
        flex-direction: column;
    }

    .atlas-donation-tier {
        padding: 10px 12px;
    }

    .atlas-donation-tier-price {
        font-size: 0.9rem;
    }

    .atlas-donation-tier-coins {
        font-size: 0.76rem;
    }
}

@media (max-width: 460px) {
    .atlas-donation-grid {
        grid-template-columns: 1fr;
    }
}

/* Dual toolbar polish */
#constellation-toggles,
#controls-toolbar {
    background: rgba(15, 18, 30, 0.55);
    box-shadow: 0 6px 18px -10px rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
}
#constellation-toggles {
    margin-top: 0px;
    min-height: 16px;
    height: 16px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#controls-toolbar { margin-top: 0px; }
#constellation-toggles .constellation-checkbox-label { opacity: 0.95; }
#zoom-indicator-box { transition: background 0.2s ease; }
#zoom-indicator-box:hover { background: rgba(0,0,0,0.6); }
#star-count-box { transition: background 0.2s ease; }
#star-count-box:hover { background: rgba(0,0,0,0.6); }

/* Keep toolbar content compact on small widths */
@media (max-width: 900px) {
    #constellation-toggles { padding: 4px 6px 2px; }
    #controls-toolbar { padding: 4px 6px 2px; }
}

#celestial-chart {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: none !important;
    background-color: transparent;
}

#celestial-chart-3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

#chart-container {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 0;
    touch-action: none;
    overflow: hidden;
}

/* Star-themed toggle switch styling */
.star-toggle {
    position: relative;
    background: linear-gradient(135deg,#26073a 0%,#431068 40%,#6e23aa 72%,#9d4dff 100%);
    color: #f5f3ff !important;
    border: 1px solid rgba(210,190,255,0.85) !important;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 18px 4px rgba(150,90,255,0.55), inset 0 0 18px rgba(200,120,255,0.55);
    overflow: hidden;
    padding-left: 0px;
    padding-right: 0px;
    font-size: 9px;
    min-height: 20px;
    height: 20px;
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, transform 0.25s ease;
    backdrop-filter: blur(2px);
}
.star-toggle {
    text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 3px #000, 0 0 10px #000;
}
.star-toggle:hover {
    box-shadow: 0 4px 14px -2px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 16px rgba(160,90,255,0.55);
    transform: translateY(-1px);
}
.star-toggle:active {
    transform: translateY(0);
}
.star-toggle.active {
    background: linear-gradient(135deg,#14041e 0%,#2b0d40 45%,#4c1380 70%,#6d2bb5 100%);
    border-color: rgba(190,170,255,0.45) !important;
    box-shadow: 0 3px 10px -2px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 12px rgba(130,60,255,0.35);
}
.star-toggle.active {
    text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 3px #000, 0 0 10px #000;
}

/* Subtle star speckles via layered radial gradients */
.star-toggle::before,
.star-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,0.9) 0 1px, transparent 3px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,0.75) 0 1.2px, transparent 3px),
        radial-gradient(circle at 35% 70%, rgba(255,255,255,0.65) 0 1px, transparent 3px),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,0.5) 0 1.1px, transparent 3px),
        radial-gradient(circle at 55% 15%, rgba(255,255,255,0.4) 0 1px, transparent 3px),
        /* Extra stars for All Stars mode */
        radial-gradient(circle at 25% 60%, rgba(255,255,255,0.8) 0 0.9px, transparent 2.5px),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.7) 0 0.8px, transparent 2.2px),
        radial-gradient(circle at 60% 85%, rgba(255,255,255,0.6) 0 0.7px, transparent 2px),
        /* Two additional speckles */
        radial-gradient(circle at 42% 48%, rgba(255,255,255,0.75) 0 0.85px, transparent 2.4px),
        radial-gradient(circle at 88% 62%, rgba(255,255,255,0.65) 0 0.75px, transparent 2.2px);
    background-repeat: no-repeat;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.65;
    transition: opacity 0.5s ease;
}
.star-toggle::after {
    animation: twinkle 6s linear infinite;
    opacity: 0.0;
}
.star-toggle.active::before {
    /* Remove extra stars in BSC Only mode and drop one base star */
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,0.9) 0 1px, transparent 3px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,0.75) 0 1.2px, transparent 3px),
        radial-gradient(circle at 35% 70%, rgba(255,255,255,0.65) 0 1px, transparent 3px),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,0.5) 0 1.1px, transparent 3px);
}
.star-toggle.active::after {
    opacity: 0.75;
}
@keyframes twinkle {
    0%, 100% { filter: brightness(1); }
    25% { filter: brightness(1.25); }
    50% { filter: brightness(0.9); }
    75% { filter: brightness(1.4); }
}

/* Focus ring enhancement */
.star-toggle:focus-visible {
    outline: 2px solid rgba(190,160,255,0.85);
    outline-offset: 2px;
}
.star-toggle.off {
    background: rgba(0, 0, 0, 0.50) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
}
.star-toggle.off::before,
.star-toggle.off::after { opacity: 0 !important; }

/* Override: refine speckle distribution so extras appear ONLY in All Stars (non-active) mode */
.star-toggle { /* reinforced text shadow for readability */
    text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 3px #000, 0 0 10px #000;
}
.star-toggle.active { /* ensure active retains shadow */
    text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 3px #000, 0 0 10px #000;
}
.star-toggle.gaia {
    background: linear-gradient(135deg, #230706 0%, #4d110f 34%, #74231a 68%, #9a3a2b 100%) !important;
    color: #ffe8e0 !important;
    border-color: rgba(255, 148, 126, 0.78) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 18px 2px rgba(164, 58, 39, 0.38),
        0 0 32px 5px rgba(110, 26, 15, 0.22),
        inset 0 0 18px rgba(255, 143, 111, 0.12) !important;
}
.star-toggle.gaia:hover {
    border-color: rgba(255, 171, 154, 0.88) !important;
    box-shadow:
        0 4px 16px -2px rgba(0,0,0,0.82),
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 24px 5px rgba(180, 76, 56, 0.46),
        0 0 40px 8px rgba(117, 28, 18, 0.28),
        inset 0 0 18px rgba(255, 158, 130, 0.2) !important;
}
.star-toggle.gaia::before {
    background:
        radial-gradient(circle at 18% 28%, rgba(255,236,228,0.95) 0 1px, transparent 3px),
        radial-gradient(circle at 68% 38%, rgba(255,211,194,0.78) 0 1.1px, transparent 3px),
        radial-gradient(circle at 36% 72%, rgba(255,184,162,0.72) 0 1px, transparent 3px),
        radial-gradient(circle at 83% 74%, rgba(255,148,126,0.56) 0 1px, transparent 3px),
        radial-gradient(circle at 54% 16%, rgba(255,198,179,0.42) 0 1px, transparent 3px);
}
.star-toggle.gaia::after {
    background:
        radial-gradient(circle at 24% 60%, rgba(255,204,187,0.82) 0 0.9px, transparent 2.5px),
        radial-gradient(circle at 80% 22%, rgba(255,182,158,0.76) 0 0.8px, transparent 2.2px),
        radial-gradient(circle at 61% 84%, rgba(255,151,126,0.68) 0 0.7px, transparent 2px),
        radial-gradient(circle at 42% 48%, rgba(255,222,210,0.76) 0 0.85px, transparent 2.4px),
        radial-gradient(circle at 89% 63%, rgba(255,168,140,0.7) 0 0.75px, transparent 2.2px);
    opacity: 0.72;
    animation: twinkle 5.5s linear infinite;
}
/* Base stars only */
.star-toggle::before {
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,0.9) 0 1px, transparent 3px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,0.75) 0 1.2px, transparent 3px),
        radial-gradient(circle at 35% 70%, rgba(255,255,255,0.65) 0 1px, transparent 3px),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,0.5) 0 1.1px, transparent 3px),
        radial-gradient(circle at 55% 15%, rgba(255,255,255,0.4) 0 1px, transparent 3px);
}
/* Active (BSC Only) drops one base star */
.star-toggle.active::before {
    background:
        radial-gradient(circle at 15% 25%, rgba(255,255,255,0.9) 0 1px, transparent 3px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,0.75) 0 1.2px, transparent 3px),
        radial-gradient(circle at 35% 70%, rgba(255,255,255,0.65) 0 1px, transparent 3px),
        radial-gradient(circle at 82% 78%, rgba(255,255,255,0.5) 0 1.1px, transparent 3px);
}
/* Extras only when NOT active */
.star-toggle:not(.active)::after {
    background:
        radial-gradient(circle at 25% 60%, rgba(255,255,255,0.8) 0 0.9px, transparent 2.5px),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.7) 0 0.8px, transparent 2.2px),
        radial-gradient(circle at 60% 85%, rgba(255,255,255,0.6) 0 0.7px, transparent 2px),
        radial-gradient(circle at 42% 48%, rgba(255,255,255,0.75) 0 0.85px, transparent 2.4px),
        radial-gradient(circle at 88% 62%, rgba(255,255,255,0.65) 0 0.75px, transparent 2.2px);
    opacity: 0.75;
    animation: twinkle 6s linear infinite;
}
/* Hide extras in active mode */
.star-toggle.active::after {
    background: none;
    opacity: 0;
}
.star-toggle.gaia:not(.active)::after {
    background:
        radial-gradient(circle at 24% 60%, rgba(255,204,187,0.82) 0 0.9px, transparent 2.5px),
        radial-gradient(circle at 80% 22%, rgba(255,182,158,0.76) 0 0.8px, transparent 2.2px),
        radial-gradient(circle at 61% 84%, rgba(255,151,126,0.68) 0 0.7px, transparent 2px),
        radial-gradient(circle at 42% 48%, rgba(255,222,210,0.76) 0 0.85px, transparent 2.4px),
        radial-gradient(circle at 89% 63%, rgba(255,168,140,0.7) 0 0.75px, transparent 2.2px);
    opacity: 0.72;
    animation: twinkle 5.5s linear infinite;
}

/* ================= Galaxies Toggle ================= */
.galaxy-toggle {
    position: relative;
    background: linear-gradient(135deg, #0a0612 0%, #150d28 30%, #1a1040 60%, #2a1860 85%, #3d2080 100%);
    color: #f0e8ff !important;
    border: 1px solid rgba(200,160,255,0.7) !important;
    border-radius: 6px;
    box-shadow: 
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 20px 3px rgba(160,100,255,0.4),
        0 0 40px 6px rgba(100,60,200,0.2),
        inset 0 0 20px rgba(180,140,255,0.25);
    text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 12px rgba(0,0,0,0.9), 0 1px 5px #000, 0 0 16px rgba(0,0,0,0.7);
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, transform 0.25s ease, filter 0.3s ease;
    backdrop-filter: blur(2px);
    font-size: 9px;
    min-height: 20px;
    height: 20px;
    padding-left: 0px;
    padding-right: 0px;
}
.galaxy-toggle:hover:not(.off) {
    box-shadow: 
        0 4px 16px -2px rgba(0,0,0,0.8),
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 25px 5px rgba(180,120,255,0.5),
        0 0 50px 8px rgba(120,80,220,0.25),
        inset 0 0 18px rgba(200,160,255,0.35);
    transform: translateY(-1px);
    border-color: rgba(220,180,255,0.85) !important;
}
.galaxy-toggle:active:not(.off) { transform: translateY(0); }
.galaxy-toggle.off {
    background: linear-gradient(135deg,#353535 0%,#3d3d3d 50%,#454545 100%);
    color: #b5b5b5 !important;
    border-color: rgba(120,120,120,0.6) !important;
    box-shadow: none;
    filter: grayscale(1) brightness(0.7);
    text-shadow: none;
    cursor: pointer;
}
.galaxy-toggle.off::before,
.galaxy-toggle.off::after { opacity: 0; }

/* Spiral galaxy decoration - beautiful swirl effect */
.galaxy-toggle::before,
.galaxy-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.galaxy-toggle::before {
    background:
        /* Galactic core — toned down so text stays readable */
        radial-gradient(ellipse 16% 20% at 50% 50%, rgba(220,200,180,0.45) 0%, rgba(200,170,130,0.3) 35%, rgba(180,140,100,0.15) 60%, transparent 100%),
        /* Core glow halo — softer */
        radial-gradient(ellipse 30% 35% at 50% 50%, rgba(200,180,160,0.22) 0%, rgba(160,120,200,0.1) 50%, transparent 100%),
        /* Spiral arm 1 - static orientation */
        conic-gradient(from 45deg at 50% 50%, 
            transparent 0deg, rgba(180,200,255,0.35) 20deg, rgba(150,180,255,0.2) 40deg, transparent 70deg,
            transparent 180deg, rgba(200,180,255,0.3) 200deg, rgba(170,150,255,0.18) 230deg, transparent 260deg),
        /* Spiral arm 2 (offset) */
        conic-gradient(from 135deg at 50% 50%, 
            transparent 0deg, rgba(220,200,255,0.25) 25deg, rgba(180,160,255,0.15) 50deg, transparent 80deg,
            transparent 180deg, rgba(200,220,255,0.22) 205deg, rgba(160,180,255,0.1) 235deg, transparent 270deg);
    mix-blend-mode: screen;
    opacity: 0.75;
    filter: blur(0.3px);
    /* No animation - static spiral */
}
.galaxy-toggle::after {
    background:
        /* Star clusters in arms — reduced brightness for text readability */
        radial-gradient(circle at 30% 35%, rgba(200,180,255,0.55) 0 0.7px, transparent 1.8px),
        radial-gradient(circle at 68% 62%, rgba(200,180,255,0.5) 0 0.8px, transparent 2px),
        radial-gradient(circle at 25% 65%, rgba(180,200,255,0.5) 0 0.6px, transparent 1.8px),
        radial-gradient(circle at 75% 38%, rgba(220,200,180,0.45) 0 0.7px, transparent 1.8px),
        radial-gradient(circle at 42% 25%, rgba(200,200,255,0.45) 0 0.5px, transparent 1.5px),
        radial-gradient(circle at 58% 75%, rgba(180,170,220,0.45) 0 0.6px, transparent 1.6px),
        /* Faint outer stars */
        radial-gradient(circle at 15% 50%, rgba(200,200,255,0.3) 0 0.4px, transparent 1.2px),
        radial-gradient(circle at 85% 48%, rgba(200,200,255,0.28) 0 0.4px, transparent 1.2px),
        radial-gradient(circle at 50% 15%, rgba(180,160,220,0.25) 0 0.35px, transparent 1px),
        radial-gradient(circle at 48% 85%, rgba(160,180,220,0.25) 0 0.35px, transparent 1px);
    mix-blend-mode: screen;
    opacity: 0.7;
    /* No animation - static stars */
}

/* ================= HyperLEDA Galaxy Mode ================= */
.galaxy-toggle.hyperleda {
    position: relative;
    background: linear-gradient(135deg, #020810 0%, #061228 25%, #0a1a3a 50%, #0d2248 75%, #102a58 100%);
    color: #b0e0ff !important;
    border: 1px solid rgba(80,200,255,0.6) !important;
    border-radius: 6px;
    box-shadow: 
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 20px 3px rgba(40,180,255,0.4),
        0 0 40px 6px rgba(20,120,200,0.2),
        inset 0 0 20px rgba(60,200,255,0.25);
    text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 12px rgba(0,0,0,0.9), 0 1px 5px #000, 0 0 16px rgba(0,0,0,0.7);
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, transform 0.25s ease, filter 0.3s ease;
    backdrop-filter: blur(2px);
    font-size: 9px;
    min-height: 20px;
    height: 20px;
}
.galaxy-toggle.hyperleda:hover {
    box-shadow: 
        0 4px 16px -2px rgba(0,0,0,0.8),
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 25px 5px rgba(60,210,255,0.5),
        0 0 50px 8px rgba(30,140,220,0.25),
        inset 0 0 18px rgba(80,220,255,0.35);
    transform: translateY(-1px);
    border-color: rgba(120,220,255,0.85) !important;
}
.galaxy-toggle.hyperleda:active { transform: translateY(0); }

/* HyperLEDA cosmic web / data network decoration — dense, busy look */
.galaxy-toggle.hyperleda::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        /* Dense filament network — many crossing strands */
        linear-gradient(25deg,  transparent 38%, rgba(60,200,255,0.22) 42%, rgba(90,230,255,0.38) 50%, rgba(60,200,255,0.22) 58%, transparent 62%),
        linear-gradient(155deg, transparent 32%, rgba(40,180,255,0.2)  36%, rgba(70,210,255,0.33) 50%, rgba(40,180,255,0.2)  64%, transparent 68%),
        linear-gradient(75deg,  transparent 26%, rgba(80,190,240,0.15) 31%, rgba(110,220,255,0.28) 50%, rgba(80,190,240,0.15) 69%, transparent 74%),
        linear-gradient(110deg, transparent 34%, rgba(50,170,240,0.14) 39%, rgba(80,200,255,0.24) 50%, rgba(50,170,240,0.14) 61%, transparent 66%),
        linear-gradient(0deg,   transparent 30%, rgba(70,195,255,0.12) 38%, rgba(90,215,255,0.2)  50%, rgba(70,195,255,0.12) 62%, transparent 70%),
        linear-gradient(60deg,  transparent 42%, rgba(55,185,245,0.1)  46%, rgba(75,205,255,0.18) 50%, rgba(55,185,245,0.1)  54%, transparent 58%),
        /* Diffuse web glow */
        radial-gradient(ellipse 55% 65% at 50% 50%, rgba(60,200,255,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 25% 40%, rgba(50,180,255,0.1)  0%, transparent 60%),
        radial-gradient(ellipse 40% 50% at 75% 60%, rgba(50,180,255,0.1)  0%, transparent 60%);
    mix-blend-mode: screen;
    opacity: 0.95;
    animation: hyperledaPulse 5s ease-in-out infinite;
}
.galaxy-toggle.hyperleda::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        /* Hub nodes — bright intersection points */
        radial-gradient(circle at 50% 50%, rgba(140,245,255,0.95) 0 1.2px, rgba(80,200,255,0.45) 2px,   transparent 3.5px),
        radial-gradient(circle at 20% 30%, rgba(110,230,255,0.9)  0 1px,   rgba(60,190,255,0.4)  1.6px, transparent 3px),
        radial-gradient(circle at 80% 65%, rgba(120,235,255,0.85) 0 1px,   rgba(70,200,255,0.4)  1.6px, transparent 3px),
        radial-gradient(circle at 35% 72%, rgba(90,215,255,0.8)   0 0.9px, transparent 2.5px),
        radial-gradient(circle at 70% 25%, rgba(100,220,255,0.8)  0 0.9px, transparent 2.5px),
        radial-gradient(circle at 12% 55%, rgba(80,200,255,0.7)   0 0.7px, transparent 2px),
        radial-gradient(circle at 88% 42%, rgba(85,205,255,0.65)  0 0.7px, transparent 2px),
        /* Dense scattered catalog points */
        radial-gradient(circle at 28% 18%, rgba(70,195,255,0.55)  0 0.5px, transparent 1.4px),
        radial-gradient(circle at 60% 82%, rgba(60,190,255,0.5)   0 0.5px, transparent 1.4px),
        radial-gradient(circle at 45% 38%, rgba(100,220,255,0.5)  0 0.5px, transparent 1.4px),
        radial-gradient(circle at 55% 60%, rgba(90,210,255,0.48)  0 0.5px, transparent 1.3px),
        radial-gradient(circle at 8%  40%, rgba(60,185,255,0.4)   0 0.4px, transparent 1.1px),
        radial-gradient(circle at 92% 58%, rgba(65,190,255,0.4)   0 0.4px, transparent 1.1px),
        radial-gradient(circle at 40% 12%, rgba(75,200,255,0.38)  0 0.4px, transparent 1px),
        radial-gradient(circle at 62% 88%, rgba(70,195,255,0.38)  0 0.4px, transparent 1px),
        radial-gradient(circle at 18% 75%, rgba(55,180,255,0.35)  0 0.35px, transparent 0.9px),
        radial-gradient(circle at 82% 20%, rgba(60,185,255,0.35)  0 0.35px, transparent 0.9px),
        radial-gradient(circle at 48% 48%, rgba(80,205,255,0.3)   0 0.3px, transparent 0.8px),
        radial-gradient(circle at 33% 55%, rgba(70,195,255,0.3)   0 0.3px, transparent 0.8px),
        radial-gradient(circle at 72% 48%, rgba(75,200,255,0.28)  0 0.3px, transparent 0.8px);
    mix-blend-mode: screen;
    opacity: 0.9;
    animation: hyperledaGlow 4s ease-in-out infinite;
}

/* ================= HyperLEDA Extended Galaxy Mode ================= */
.galaxy-toggle.hyperleda-ext {
    position: relative;
    background: linear-gradient(135deg, #04110f 0%, #08201c 25%, #0d3a33 50%, #106055 75%, #16a085 100%);
    color: #d5fff8 !important;
    border: 1px solid rgba(94,234,212,0.65) !important;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 20px 3px rgba(45,212,191,0.35),
        0 0 42px 6px rgba(16,185,129,0.18),
        inset 0 0 20px rgba(110,231,183,0.22);
    text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 12px rgba(0,0,0,0.9), 0 1px 5px #000, 0 0 16px rgba(0,0,0,0.7);
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, transform 0.25s ease, filter 0.3s ease;
    backdrop-filter: blur(2px);
    font-size: 9px;
    min-height: 20px;
    height: 20px;
}
.galaxy-toggle.hyperleda-ext:hover {
    box-shadow:
        0 4px 16px -2px rgba(0,0,0,0.8),
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 25px 5px rgba(94,234,212,0.4),
        0 0 52px 8px rgba(16,185,129,0.22),
        inset 0 0 18px rgba(167,243,208,0.26);
    transform: translateY(-1px);
    border-color: rgba(153,246,228,0.86) !important;
}
.galaxy-toggle.hyperleda-ext:active { transform: translateY(0); }

.galaxy-toggle.hyperleda-ext::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(22deg, transparent 34%, rgba(94,234,212,0.18) 41%, rgba(153,246,228,0.32) 50%, rgba(94,234,212,0.18) 59%, transparent 66%),
        linear-gradient(148deg, transparent 28%, rgba(45,212,191,0.14) 36%, rgba(103,232,249,0.26) 50%, rgba(45,212,191,0.14) 64%, transparent 72%),
        linear-gradient(78deg, transparent 22%, rgba(110,231,183,0.12) 31%, rgba(153,246,228,0.22) 50%, rgba(110,231,183,0.12) 69%, transparent 78%),
        radial-gradient(ellipse 58% 70% at 50% 50%, rgba(45,212,191,0.16) 0%, transparent 72%),
        radial-gradient(ellipse 36% 42% at 24% 42%, rgba(16,185,129,0.12) 0%, transparent 62%),
        radial-gradient(ellipse 36% 42% at 76% 58%, rgba(14,165,233,0.11) 0%, transparent 62%);
    mix-blend-mode: screen;
    opacity: 0.95;
    animation: hyperledaExtPulse 5.5s ease-in-out infinite;
}
.galaxy-toggle.hyperleda-ext::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(220,255,248,0.92) 0 1.15px, rgba(94,234,212,0.42) 1.9px, transparent 3.2px),
        radial-gradient(circle at 22% 32%, rgba(167,243,208,0.84) 0 0.95px, rgba(45,212,191,0.36) 1.55px, transparent 2.8px),
        radial-gradient(circle at 78% 64%, rgba(153,246,228,0.8) 0 0.95px, rgba(34,211,238,0.34) 1.55px, transparent 2.8px),
        radial-gradient(circle at 35% 74%, rgba(110,231,183,0.72) 0 0.8px, transparent 2.3px),
        radial-gradient(circle at 70% 22%, rgba(103,232,249,0.74) 0 0.8px, transparent 2.3px),
        radial-gradient(circle at 14% 58%, rgba(45,212,191,0.5) 0 0.55px, transparent 1.5px),
        radial-gradient(circle at 86% 40%, rgba(153,246,228,0.48) 0 0.55px, transparent 1.5px),
        radial-gradient(circle at 44% 18%, rgba(110,231,183,0.45) 0 0.45px, transparent 1.3px),
        radial-gradient(circle at 60% 84%, rgba(103,232,249,0.42) 0 0.45px, transparent 1.3px),
        radial-gradient(circle at 30% 48%, rgba(167,243,208,0.34) 0 0.35px, transparent 1px),
        radial-gradient(circle at 72% 50%, rgba(94,234,212,0.3) 0 0.35px, transparent 1px);
    mix-blend-mode: screen;
    opacity: 0.88;
    animation: hyperledaExtGlow 4.5s ease-in-out infinite;
}

/* ================= HyperLEDA MAX Galaxy Mode ================= */
.galaxy-toggle.hyperleda-max {
    position: relative;
    background: linear-gradient(135deg, #120306 0%, #25070c 28%, #4a0f16 56%, #6b1623 78%, #8f2430 100%);
    color: #ffe2e2 !important;
    border: 1px solid rgba(255,120,120,0.68) !important;
    border-radius: 6px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 20px 3px rgba(180,40,55,0.34),
        0 0 42px 6px rgba(120,18,28,0.22),
        inset 0 0 20px rgba(255,125,125,0.16);
    text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 12px rgba(0,0,0,0.9), 0 1px 5px #000, 0 0 16px rgba(0,0,0,0.7);
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, transform 0.25s ease, filter 0.3s ease;
    backdrop-filter: blur(2px);
    font-size: 9px;
    min-height: 20px;
    height: 20px;
}
.galaxy-toggle.hyperleda-max:hover {
    box-shadow:
        0 4px 16px -2px rgba(0,0,0,0.8),
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 25px 5px rgba(255,110,110,0.34),
        0 0 52px 8px rgba(168,32,46,0.26),
        inset 0 0 18px rgba(255,160,160,0.2);
    transform: translateY(-1px);
    border-color: rgba(255,170,170,0.88) !important;
}
.galaxy-toggle.hyperleda-max:active { transform: translateY(0); }

.galaxy-toggle.hyperleda-max::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(24deg, transparent 34%, rgba(255,128,128,0.18) 42%, rgba(255,188,188,0.3) 50%, rgba(255,128,128,0.18) 58%, transparent 66%),
        linear-gradient(150deg, transparent 28%, rgba(220,72,72,0.14) 36%, rgba(255,166,166,0.24) 50%, rgba(220,72,72,0.14) 64%, transparent 72%),
        linear-gradient(80deg, transparent 22%, rgba(255,150,150,0.1) 31%, rgba(255,205,205,0.2) 50%, rgba(255,150,150,0.1) 69%, transparent 78%),
        radial-gradient(ellipse 58% 70% at 50% 50%, rgba(220,72,72,0.16) 0%, transparent 72%),
        radial-gradient(ellipse 36% 42% at 24% 42%, rgba(127,29,29,0.16) 0%, transparent 62%),
        radial-gradient(ellipse 36% 42% at 76% 58%, rgba(153,27,27,0.13) 0%, transparent 62%);
    mix-blend-mode: screen;
    opacity: 0.95;
    animation: hyperledaMaxPulse 5.5s ease-in-out infinite;
}
.galaxy-toggle.hyperleda-max::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,240,240,0.9) 0 1.15px, rgba(255,128,128,0.42) 1.9px, transparent 3.2px),
        radial-gradient(circle at 22% 32%, rgba(255,210,210,0.82) 0 0.95px, rgba(220,72,72,0.34) 1.55px, transparent 2.8px),
        radial-gradient(circle at 78% 64%, rgba(255,190,190,0.78) 0 0.95px, rgba(185,28,28,0.3) 1.55px, transparent 2.8px),
        radial-gradient(circle at 35% 74%, rgba(255,160,160,0.66) 0 0.8px, transparent 2.3px),
        radial-gradient(circle at 70% 22%, rgba(255,205,205,0.72) 0 0.8px, transparent 2.3px),
        radial-gradient(circle at 14% 58%, rgba(220,72,72,0.5) 0 0.55px, transparent 1.5px),
        radial-gradient(circle at 86% 40%, rgba(255,210,210,0.48) 0 0.55px, transparent 1.5px),
        radial-gradient(circle at 44% 18%, rgba(255,160,160,0.44) 0 0.45px, transparent 1.3px),
        radial-gradient(circle at 60% 84%, rgba(255,190,190,0.42) 0 0.45px, transparent 1.3px),
        radial-gradient(circle at 30% 48%, rgba(255,220,220,0.34) 0 0.35px, transparent 1px),
        radial-gradient(circle at 72% 50%, rgba(255,140,140,0.3) 0 0.35px, transparent 1px);
    mix-blend-mode: screen;
    opacity: 0.9;
    animation: hyperledaMaxGlow 4.6s ease-in-out infinite;
}

@keyframes hyperledaPulse {
    0%, 100% { opacity: 0.9; filter: brightness(1) blur(0.2px); }
    50% { opacity: 1; filter: brightness(1.2) blur(0.1px); }
}
@keyframes hyperledaGlow {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.015); }
}
@keyframes hyperledaExtPulse {
    0%, 100% { opacity: 0.9; filter: brightness(1) blur(0.18px); }
    50% { opacity: 1; filter: brightness(1.18) blur(0.08px); }
}
@keyframes hyperledaExtGlow {
    0%, 100% { opacity: 0.82; transform: scale(1); }
    50% { opacity: 0.98; transform: scale(1.018); }
}
@keyframes hyperledaMaxPulse {
    0%, 100% { opacity: 0.9; filter: brightness(1) blur(0.18px); }
    50% { opacity: 1; filter: brightness(1.16) blur(0.08px); }
}
@keyframes hyperledaMaxGlow {
    0%, 100% { opacity: 0.84; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.016); }
}

/* ================= Superclusters Toggle ================= */
.supercluster-toggle {
    position: relative;
    background: linear-gradient(135deg, #030508 0%, #0a1018 25%, #101828 50%, #182438 75%, #1e3048 100%);
    color: #d0e8ff !important;
    border: 1px solid rgba(100,180,255,0.6) !important;
    border-radius: 6px;
    box-shadow: 
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 18px 3px rgba(60,140,220,0.35),
        0 0 35px 5px rgba(40,100,180,0.15),
        inset 0 0 15px rgba(80,160,255,0.2);
    text-shadow: 0 0 3px #000, 0 0 6px #000, 0 1px 4px #000, 0 0 12px rgba(0,0,0,0.8);
    transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, transform 0.25s ease, filter 0.3s ease;
    backdrop-filter: blur(2px);
    font-size: 9px;
    min-height: 20px;
    height: 20px;
    padding-left: 0px;
    padding-right: 0px;
}
.supercluster-toggle:hover:not(.off) {
    box-shadow: 
        0 4px 16px -2px rgba(0,0,0,0.8),
        0 0 0 1px rgba(255,255,255,0.1),
        0 0 22px 4px rgba(80,160,255,0.45),
        0 0 45px 8px rgba(50,120,200,0.2),
        inset 0 0 18px rgba(100,180,255,0.3);
    transform: translateY(-1px);
    border-color: rgba(140,200,255,0.8) !important;
}
.supercluster-toggle:active:not(.off) { transform: translateY(0); }
.supercluster-toggle.off {
    background: linear-gradient(135deg,#353535 0%,#3d3d3d 50%,#454545 100%);
    color: #b5b5b5 !important;
    border-color: rgba(120,120,120,0.6) !important;
    box-shadow: none;
    filter: grayscale(1) brightness(0.7);
    text-shadow: none;
    cursor: pointer;
}
.supercluster-toggle.off::before,
.supercluster-toggle.off::after { opacity: 0; }

/* Cosmic web / filament decoration - interconnected nodes */
.supercluster-toggle::before,
.supercluster-toggle::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.supercluster-toggle::before {
    background:
        /* Cosmic filaments - glowing threads connecting clusters */
        linear-gradient(25deg, transparent 0%, transparent 42%, rgba(80,180,255,0.25) 44%, rgba(100,200,255,0.4) 50%, rgba(80,180,255,0.25) 56%, transparent 58%, transparent 100%),
        linear-gradient(155deg, transparent 0%, transparent 38%, rgba(60,160,255,0.2) 40%, rgba(90,180,255,0.35) 50%, rgba(60,160,255,0.2) 60%, transparent 62%, transparent 100%),
        linear-gradient(85deg, transparent 0%, transparent 30%, rgba(100,180,220,0.15) 35%, rgba(120,200,255,0.25) 50%, rgba(100,180,220,0.15) 65%, transparent 70%, transparent 100%),
        linear-gradient(-30deg, transparent 0%, transparent 45%, rgba(70,150,220,0.2) 48%, rgba(90,170,240,0.3) 52%, rgba(70,150,220,0.2) 55%, transparent 58%, transparent 100%),
        /* Subtle large-scale structure glow */
        radial-gradient(ellipse 80% 60% at 50% 50%, rgba(60,140,220,0.15) 0%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.9;
    animation: filamentPulse 6s ease-in-out infinite;
}
.supercluster-toggle::after {
    background:
        /* Major cluster nodes - bright intersections */
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0 1.5px, rgba(150,200,255,0.6) 2.5px, transparent 5px),
        radial-gradient(circle at 25% 35%, rgba(255,255,255,0.9) 0 1.2px, rgba(120,180,255,0.5) 2px, transparent 4px),
        radial-gradient(circle at 75% 65%, rgba(255,255,255,0.85) 0 1.1px, rgba(130,190,255,0.45) 2px, transparent 4px),
        radial-gradient(circle at 20% 70%, rgba(200,230,255,0.8) 0 1px, rgba(100,160,255,0.4) 1.8px, transparent 3.5px),
        radial-gradient(circle at 80% 30%, rgba(220,240,255,0.75) 0 0.9px, rgba(110,170,255,0.35) 1.6px, transparent 3px),
        /* Secondary nodes */
        radial-gradient(circle at 40% 22%, rgba(180,220,255,0.7) 0 0.7px, transparent 2px),
        radial-gradient(circle at 60% 78%, rgba(170,210,255,0.65) 0 0.7px, transparent 2px),
        radial-gradient(circle at 35% 55%, rgba(160,200,255,0.6) 0 0.6px, transparent 1.8px),
        radial-gradient(circle at 65% 45%, rgba(150,190,255,0.55) 0 0.6px, transparent 1.8px),
        /* Distant faint clusters */
        radial-gradient(circle at 12% 48%, rgba(140,180,255,0.4) 0 0.4px, transparent 1.2px),
        radial-gradient(circle at 88% 52%, rgba(130,170,255,0.35) 0 0.4px, transparent 1.2px),
        radial-gradient(circle at 50% 12%, rgba(120,160,255,0.3) 0 0.35px, transparent 1px),
        radial-gradient(circle at 48% 88%, rgba(110,150,255,0.25) 0 0.35px, transparent 1px);
    mix-blend-mode: screen;
    opacity: 0.8;
    animation: clusterGlow 5s ease-in-out infinite;
}
@keyframes filamentPulse {
    0%, 100% { opacity: 0.9; filter: brightness(1) blur(0.2px); }
    50% { opacity: 1; filter: brightness(1.15) blur(0.1px); }
}
@keyframes clusterGlow {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.02); }
}

/* Leaderboard overlay enhancements */
#leaderboard-overlay {
    animation: fadeInLB 0.4s ease;
}
#leaderboard-overlay::-webkit-scrollbar { width: 10px; }
#leaderboard-overlay::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
#leaderboard-overlay::-webkit-scrollbar-thumb { background: linear-gradient(135deg,#431068,#6e23aa); border-radius: 6px; }
@keyframes fadeInLB { from { opacity:0 } to { opacity:1 } }

/* Leaderboard revamped UI */
.lb-header {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 14px 18px 10px;
    background: linear-gradient(135deg, rgba(25,20,45,0.85) 0%, rgba(18,16,30,0.85) 60%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.55), inset 0 0 22px -6px rgba(110,70,170,0.35);
    backdrop-filter: blur(6px);
}
.lb-title-back {
    display: flex;
    align-items: center;
    padding: 8px 22px 10px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(70,50,120,0.35), rgba(40,30,70,0.55));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
}
.lb-title {
    margin: 0;
    font: 800 26px/1.15 'Segoe UI', Arial, sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(90deg,#6dd5fa,#60a5fa,#a78bfa 55%,#f472b6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(120,140,255,0.35)) drop-shadow(0 0 12px rgba(180,120,255,0.25));
}
.lb-back-btn {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, rgba(50,30,90,0.7) 0%, rgba(80,45,130,0.8) 100%);
    color: #f5f3ff;
    border: 1px solid rgba(160,100,220,0.35);
    border-radius: 6px;
    padding: 8px 16px;
    font: 600 13px 'Segoe UI', Arial, sans-serif;
    cursor: pointer;
    letter-spacing: 0.04em;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 10px -3px rgba(100,50,150,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
    transition: all 0.25s ease;
}
.lb-back-btn:hover { 
    background: linear-gradient(135deg, rgba(70,40,120,0.85) 0%, rgba(100,55,160,0.9) 100%);
    border-color: rgba(180,120,255,0.5);
    box-shadow: 0 4px 16px -4px rgba(120,60,180,0.5), 0 0 20px -5px rgba(150,90,255,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    transform: translateY(-52%);
}
.lb-back-btn:active { transform: translateY(-50%); background: linear-gradient(135deg, rgba(45,25,80,0.9) 0%, rgba(70,40,120,0.95) 100%); }

.lb-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 20px 4px;
}
.lb-tabs {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto 0 auto;
}
.lb-metrics { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lb-metrics.hidden { display: none; }

.lb-button {
    position: relative;
    background: linear-gradient(135deg, rgba(50,30,90,0.55), rgba(70,40,120,0.65));
    color: #f5f3ff;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 8px 20px;
    font: 600 13px 'Segoe UI', Arial, sans-serif;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: 0 2px 10px -3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.25s ease;
    min-width: 95px;
}
.lb-tab {
    min-width: 140px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #3a1c71 0%, #d76d77 100%);
    border: 1px solid rgba(180,100,220,0.3);
    border-radius: 6px;
    color: #fff;
    box-shadow: 0 2px 12px -4px rgba(167,139,250,0.3);
    margin: 0 6px;
    padding: 10px 24px;
    outline: none;
}
.lb-tab.active {
    background: linear-gradient(135deg, #7b2ff2 0%, #f357a8 100%);
    border: 1px solid rgba(123,47,242,0.6);
    color: #fff;
    box-shadow: 0 4px 18px -4px rgba(123,47,242,0.5), 0 0 25px -5px rgba(150,90,255,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}
.lb-tab:hover:not(.active) {
    background: linear-gradient(135deg, #4a2591 0%, #e77d87 100%);
    border-color: rgba(200,120,240,0.45);
}
.lb-button:hover { box-shadow: 0 4px 16px -4px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08); transform: translateY(-2px); }
.lb-button:active { transform: translateY(0); }
.lb-button.active {
    background: linear-gradient(135deg,#2d0a46,#5a1e91 55%,#7a34c8);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 18px -4px rgba(60,20,100,0.6), inset 0 0 18px rgba(170,120,255,0.45);
}
.lb-button.disabled { opacity: 0.4; cursor: default; }
.lb-button.disabled:hover { transform: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.04); }

.lb-order { margin-left: auto; }

.lb-content {
    flex: 1;
    overflow-y: auto;
    padding: 6px 22px 34px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lb-content::-webkit-scrollbar { width: 10px; }
.lb-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.lb-content::-webkit-scrollbar-thumb { background: linear-gradient(135deg,#431068,#6e23aa); border-radius: 6px; }

.lb-placeholder {
    margin-top: 34px;
    font-size: 16px;
    text-align: center;
    opacity: 0.8;
    font-weight: 500;
}

/* ─── Explorer Tab ─── */
.lb-tab.lb-tab-explorer {
    min-width: 140px;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(135deg, #0d1b2a 0%, #1b2838 50%, #0a4d3c 100%);
    border: 1px solid rgba(0,255,170,0.25);
    border-radius: 8px;
    color: #b4ffd8;
    box-shadow: 0 2px 14px -4px rgba(0,255,170,0.15), inset 0 1px 0 rgba(0,255,170,0.08);
    margin-left: 32px;
    padding: 10px 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0,255,170,0.3);
}
.lb-tab.lb-tab-explorer.active {
    background: linear-gradient(135deg, #0a4d3c 0%, #00c896 50%, #0d7a5f 100%);
    border: 1px solid rgba(0,255,170,0.6);
    color: #fff;
    text-shadow: 0 0 12px rgba(0,255,170,0.5);
    box-shadow: 0 4px 22px -4px rgba(0,200,150,0.5), 0 0 30px -5px rgba(0,255,170,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.lb-tab.lb-tab-explorer:hover:not(.active) {
    background: linear-gradient(135deg, #122a3a 0%, #1f3a4a 50%, #0d5e47 100%);
    border-color: rgba(0,255,170,0.4);
    text-shadow: 0 0 10px rgba(0,255,170,0.4);
}
.lb-explorer-mode-tabs {
    justify-content: center;
    gap: 12px;
}
.lb-tab.lb-explorer-mode-tab {
    min-width: 170px;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Explorer mode overlay theme override */
#leaderboard-overlay.explorer-theme {
    background: radial-gradient(ellipse at 30% 20%, rgba(10,50,42,0.94), rgba(8,18,28,0.96) 70%);
}
#leaderboard-overlay.explorer-theme .lb-header {
    background: linear-gradient(135deg, rgba(8,30,25,0.92) 0%, rgba(10,20,30,0.9) 60%);
    border-bottom: 1px solid rgba(0,255,170,0.1);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.6), inset 0 0 22px -6px rgba(0,200,150,0.2);
}
#leaderboard-overlay.explorer-theme .lb-title-back {
    background: linear-gradient(145deg, rgba(0,80,60,0.3), rgba(10,40,35,0.5));
    border: 1px solid rgba(0,255,170,0.12);
    box-shadow: 0 4px 14px -4px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,255,170,0.06);
}
#leaderboard-overlay.explorer-theme .lb-title {
    background: linear-gradient(90deg, #00ffa8, #00d4aa, #40e0d0, #7fffd4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0,255,170,0.3)) drop-shadow(0 0 12px rgba(0,200,150,0.2));
}
#leaderboard-overlay.explorer-theme .lb-back-btn {
    background: linear-gradient(135deg, rgba(10,40,35,0.7) 0%, rgba(0,80,60,0.65) 100%);
    border: 1px solid rgba(0,255,170,0.25);
    box-shadow: 0 2px 10px -3px rgba(0,200,150,0.3), inset 0 1px 0 rgba(0,255,170,0.06);
}
#leaderboard-overlay.explorer-theme .lb-back-btn:hover {
    background: linear-gradient(135deg, rgba(15,55,45,0.85) 0%, rgba(0,100,75,0.8) 100%);
    border-color: rgba(0,255,170,0.5);
    box-shadow: 0 4px 16px -4px rgba(0,200,150,0.4), 0 0 20px -5px rgba(0,255,170,0.25);
}
#leaderboard-overlay.explorer-theme .lb-toolbar {
    border-bottom: 1px solid rgba(0,255,170,0.06);
}
#leaderboard-overlay.explorer-theme .lb-tab.lb-explorer-mode-tab {
    background: linear-gradient(135deg, rgba(10,40,35,0.82) 0%, rgba(0,65,48,0.78) 100%);
    border: 1px solid rgba(0,255,170,0.18);
    color: #b4ffd8;
    box-shadow: 0 2px 12px -4px rgba(0,200,150,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
#leaderboard-overlay.explorer-theme .lb-tab.lb-explorer-mode-tab.active {
    background: linear-gradient(135deg, #0a4d3c 0%, #00a87e 55%, #00d49f 100%);
    border-color: rgba(0,255,170,0.55);
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0,255,170,0.35);
    box-shadow: 0 4px 20px -4px rgba(0,200,150,0.38), 0 0 22px -8px rgba(0,255,170,0.3);
}
#leaderboard-overlay.explorer-theme .lb-tab.lb-explorer-mode-tab:hover:not(.active) {
    background: linear-gradient(135deg, rgba(14,54,44,0.92) 0%, rgba(0,88,64,0.86) 100%);
    border-color: rgba(0,255,170,0.34);
}
#leaderboard-overlay.explorer-theme .lb-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #0a4d3c, #00c896);
}

/* Explorer metric buttons in explorer theme */
#leaderboard-overlay.explorer-theme .lb-button.lb-metric {
    background: linear-gradient(135deg, rgba(10,40,35,0.55), rgba(0,60,45,0.6));
    border: 1px solid rgba(0,255,170,0.15);
    color: #b4ffd8;
}
#leaderboard-overlay.explorer-theme .lb-button.lb-metric.active {
    background: linear-gradient(135deg, #0a4d3c, #00896a 55%, #00c896);
    box-shadow: 0 0 0 1px rgba(0,255,170,0.12), 0 4px 18px -4px rgba(0,80,60,0.5), inset 0 0 18px rgba(0,255,170,0.3);
    color: #fff;
}
#leaderboard-overlay.explorer-theme .lb-button.lb-metric:hover {
    box-shadow: 0 4px 16px -4px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,255,170,0.12);
}

/* Explorer entry rows */
.lb-explorer-row {
    display: grid;
    grid-template-columns: 52px 48px 1fr 120px;
    align-items: center;
    padding: 8px 14px;
    border-radius: 10px;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    gap: 6px;
}
.lb-explorer-row:hover {
    transform: translateX(4px);
}

/* Explorer avatar */
.lb-explorer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: #f8fafc;
}
.lb-explorer-avatar svg {
    width: 28px;
    height: 28px;
}

/* Medal colors */
.lb-explorer-row.rank-gold {
    background: linear-gradient(135deg, rgba(255,215,0,0.12) 0%, rgba(184,134,11,0.08) 100%);
    border: 1px solid rgba(255,215,0,0.3);
    border-left: 4px solid rgba(255,215,0,0.7);
    box-shadow: 0 2px 12px -3px rgba(255,215,0,0.2), inset 0 0 20px -10px rgba(255,215,0,0.1);
}
.lb-explorer-row.rank-gold .lb-explorer-rank { color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.4); }
.lb-explorer-row.rank-gold .lb-explorer-avatar { background: radial-gradient(circle, rgba(255,215,0,0.2), rgba(184,134,11,0.15)); border: 2px solid rgba(255,215,0,0.5); }

.lb-explorer-row.rank-silver {
    background: linear-gradient(135deg, rgba(192,192,192,0.1) 0%, rgba(169,169,169,0.06) 100%);
    border: 1px solid rgba(192,192,192,0.25);
    border-left: 4px solid rgba(192,192,192,0.6);
    box-shadow: 0 2px 10px -3px rgba(192,192,192,0.15), inset 0 0 18px -10px rgba(192,192,192,0.08);
}
.lb-explorer-row.rank-silver .lb-explorer-rank { color: #c0c0c0; text-shadow: 0 0 8px rgba(192,192,192,0.3); }
.lb-explorer-row.rank-silver .lb-explorer-avatar { background: radial-gradient(circle, rgba(192,192,192,0.15), rgba(169,169,169,0.1)); border: 2px solid rgba(192,192,192,0.45); }

.lb-explorer-row.rank-bronze {
    background: linear-gradient(135deg, rgba(205,127,50,0.1) 0%, rgba(184,115,51,0.06) 100%);
    border: 1px solid rgba(205,127,50,0.22);
    border-left: 4px solid rgba(205,127,50,0.55);
    box-shadow: 0 2px 10px -3px rgba(205,127,50,0.12), inset 0 0 16px -10px rgba(205,127,50,0.07);
}
.lb-explorer-row.rank-bronze .lb-explorer-rank { color: #cd7f32; text-shadow: 0 0 6px rgba(205,127,50,0.3); }
.lb-explorer-row.rank-bronze .lb-explorer-avatar { background: radial-gradient(circle, rgba(205,127,50,0.15), rgba(184,115,51,0.1)); border: 2px solid rgba(205,127,50,0.4); }

.lb-explorer-row.rank-default {
    background: linear-gradient(135deg, rgba(80,90,100,0.08) 0%, rgba(60,65,70,0.05) 100%);
    border: 1px solid rgba(120,130,140,0.12);
    border-left: 4px solid rgba(120,130,140,0.25);
    box-shadow: 0 1px 6px -2px rgba(0,0,0,0.2);
}
.lb-explorer-row.rank-default .lb-explorer-rank { color: rgba(160,170,180,0.7); }
.lb-explorer-row.rank-default .lb-explorer-avatar { background: rgba(60,70,80,0.3); border: 2px solid rgba(120,130,140,0.2); }

.lb-explorer-rank {
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-align: center;
}
.lb-explorer-nick {
    font-weight: 600;
    font-size: 14px;
    color: #e0f0e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-explorer-nick-main {
    font-weight: 700;
    font-size: 14px;
    color: #eaf8f1;
    letter-spacing: 0.01em;
}
.lb-explorer-uid {
    font-weight: 500;
    font-size: 11px;
    color: rgba(128, 150, 160, 0.85);
    letter-spacing: 0.08em;
    margin-left: 7px;
    vertical-align: baseline;
    text-transform: uppercase;
}
.lb-explorer-value {
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    color: rgba(0,255,170,0.85);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}