/* ===== reCAPTCHA badge: hide (Google allows this as long as the legal text
   is shown in the footer, which we do). On localhost the badge would
   otherwise display "Localhost not supported by site key". ===== */
.grecaptcha-badge { visibility: hidden !important; }

/* ===== Clickable stat boxes ===== */
.stat-link {
    display: block;
    border-radius: 8px;
    padding: 4px 8px;
    transition: background 0.2s ease;
    cursor: pointer;
}
.stat-link:hover {
    background: rgba(212,168,70,0.05);
}

/* ===== Navigation ===== */
.invite-nav-link {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: rgba(156,163,175,0.85);
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
    position: relative;
    padding: 4px 0;
}
.invite-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #d4a846;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.invite-nav-link:hover { color: #f0d078; }
.invite-nav-link[aria-current="true"] {
    color: #d4a846;
}
.invite-nav-link[aria-current="true"]::after {
    transform: scaleX(1);
}

.invite-nav-link-mobile {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    color: rgba(209,213,219,0.85);
    letter-spacing: 0.05em;
    padding: 10px 4px;
    border-bottom: 1px solid rgba(75,85,99,0.15);
    transition: color 0.2s ease;
}
.invite-nav-link-mobile:last-child { border-bottom: none; }
.invite-nav-link-mobile:hover { color: #f0d078; }
.invite-nav-link-mobile[aria-current="true"] { color: #f0d078; }

/* ===== Wave membership badge (above the stats grid, subtle pill) ===== */
.wave-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 13px;
    margin-bottom: 2rem;
    background: rgba(212,168,70,0.04);
    border: 1px solid rgba(212,168,70,0.13);
    border-radius: 9999px;
    font-size: 12px;
    color: rgba(156,163,175,0.65);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.5;
    white-space: nowrap;
}
/* Center the pill horizontally above the stats grid */
.wave-badge-centered {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
.wave-badge[hidden] { display: none; }
.wave-badge strong {
    color: rgba(240,208,120,0.85);
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.wave-badge-suffix { color: rgba(156,163,175,0.55); }

/* ===== New-signup banner (one-time, after lookup auto-registers) ===== */
.signup-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    background: linear-gradient(180deg, rgba(212,168,70,0.16), rgba(212,168,70,0.06));
    border: 1px solid rgba(212,168,70,0.45);
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(212,168,70,0.15);
    animation: signup-banner-fade 0.4s ease-out both;
}
@keyframes signup-banner-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.signup-banner-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212,168,70,0.22);
    color: #f0d078;
}
.signup-banner-icon svg { width: 18px; height: 18px; }
.signup-banner-text { flex: 1; min-width: 0; }
.signup-banner-title {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 700;
    color: #f0d078;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
@media (min-width: 640px) {
    .signup-banner-title { font-size: 16px; }
}
.signup-banner-subtitle {
    font-size: 12px;
    color: rgba(229,231,235,0.85);
    line-height: 1.45;
}
@media (min-width: 640px) {
    .signup-banner-subtitle { font-size: 13px; }
}
.signup-banner-close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: rgba(212,168,70,0.7);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
.signup-banner-close:hover {
    color: #f0d078;
    background: rgba(212,168,70,0.12);
}

/* ===== Welcome panel (collapsible) ===== */
.welcome-collapsible {
    background: linear-gradient(180deg, rgba(212,168,70,0.06), rgba(26,26,46,0.3));
    border: 1px solid rgba(212,168,70,0.18);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}
.welcome-collapsible:hover { border-color: rgba(212,168,70,0.3); }
.welcome-collapsible[open] { border-color: rgba(212,168,70,0.3); }

.welcome-summary {
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    user-select: none;
}
.welcome-summary::-webkit-details-marker { display: none; }
.welcome-summary::marker { display: none; }
@media (min-width: 640px) {
    .welcome-summary { padding: 16px 22px; }
}

.welcome-summary-text { flex: 1; min-width: 0; }
.welcome-title {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    color: #f0d078;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}
@media (min-width: 640px) {
    .welcome-title { font-size: 18px; }
}
.welcome-subtitle {
    font-size: 11.5px;
    color: rgba(156,163,175,0.85);
}
@media (min-width: 640px) {
    .welcome-subtitle { font-size: 12.5px; }
}

.welcome-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(156,163,175,0.75);
    transition: color 0.2s ease;
}
.welcome-summary:hover .welcome-toggle { color: #f0d078; }
.welcome-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}
.welcome-collapsible[open] .welcome-chevron { transform: rotate(180deg); }
.welcome-toggle-label-closed { display: inline; }
.welcome-toggle-label-open { display: none; }
.welcome-collapsible[open] .welcome-toggle-label-closed { display: none; }
.welcome-collapsible[open] .welcome-toggle-label-open { display: inline; }

.welcome-body {
    padding: 0 14px 16px;
    border-top: 1px solid rgba(212,168,70,0.12);
    padding-top: 14px;
}
@media (min-width: 640px) {
    .welcome-body { padding: 14px 22px 18px; }
}

/* Compact mini cards inside welcome */
.reward-stream-card-mini {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(10,10,18,0.4);
    border: 1px solid rgba(75,85,99,0.2);
    border-radius: 10px;
    transition: border-color 0.25s ease;
}
.reward-stream-card-mini:hover { border-color: rgba(212,168,70,0.3); }
.reward-stream-mini-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
    background: rgba(212,168,70,0.08);
    border: 1px solid rgba(212,168,70,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}
.reward-stream-mini-title {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 700;
    color: #f0d078;
    letter-spacing: 0.03em;
    margin-bottom: 3px;
}
.reward-stream-mini-desc {
    font-size: 11.5px;
    color: rgba(209,213,219,0.8);
    line-height: 1.45;
}

/* ===== Three Ways to Earn cards ===== */
.reward-stream-card {
    position: relative;
    background: rgba(26,26,46,0.55);
    border: 1px solid rgba(212,168,70,0.18);
    border-radius: 14px;
    padding: 22px 18px 24px;
    text-align: center;
    transition: border-color 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}
.reward-stream-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(212,168,70,0.08), transparent 65%);
    pointer-events: none;
}
.reward-stream-card:hover {
    border-color: rgba(212,168,70,0.45);
    transform: translateY(-2px);
}
.reward-stream-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: rgba(212,168,70,0.08);
    border: 1px solid rgba(212,168,70,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.reward-stream-title {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 700;
    color: #f0d078;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    position: relative;
}
.reward-stream-desc {
    font-size: 12.5px;
    color: rgba(209,213,219,0.85);
    line-height: 1.55;
    margin-bottom: 14px;
    position: relative;
}
.reward-stream-tag {
    display: inline-block;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 4px 10px;
    border-radius: 9999px;
    background: rgba(212,168,70,0.12);
    border: 1px solid rgba(212,168,70,0.3);
    color: #f0d078;
    font-weight: 600;
    position: relative;
}

/* ===== FAQ items ===== */
.faq-item {
    background: rgba(26,26,46,0.4);
    border: 1px solid rgba(75,85,99,0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}
.faq-item:hover { border-color: rgba(212,168,70,0.25); }
.faq-item[open] { border-color: rgba(212,168,70,0.35); }

.faq-summary {
    cursor: pointer;
    padding: 14px 18px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: rgba(229,231,235,0.95);
    letter-spacing: 0.03em;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    user-select: none;
    transition: color 0.2s ease;
}
@media (min-width: 640px) {
    .faq-summary { padding: 16px 22px; font-size: 14px; }
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { display: none; }
.faq-summary:hover { color: #f0d078; }
.faq-item[open] .faq-summary { color: #f0d078; }
.faq-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    color: rgba(156,163,175,0.7);
}
.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: rgba(212,168,70,0.9);
}
.faq-body {
    padding: 0 18px 16px 18px;
    font-size: 13px;
    color: rgba(209,213,219,0.85);
    line-height: 1.6;
    border-top: 1px solid rgba(75,85,99,0.15);
    padding-top: 14px;
}
@media (min-width: 640px) {
    .faq-body { padding: 14px 22px 18px 22px; font-size: 14px; }
}

/* ===== Loading dots animation ===== */
.loading-dots {
    font-size: 0.7em;
    color: rgba(156,163,175,0.6);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
}
.loading-dots::after {
    content: '';
    animation: invite-loading-dots 1.2s steps(4, end) infinite;
}
@keyframes invite-loading-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}
/* When loading-dots is inside a button, inherit the button's color and size */
button .loading-dots {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* ===== Base ===== */
::selection { background: rgba(212,168,70,0.3); color: #fff; }
body { background-color: #0a0a12; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a12; }
::-webkit-scrollbar-thumb { background: rgba(212,168,70,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,168,70,0.4); }
html { scroll-behavior: smooth; }

/* Email autofill */
#lookup-email:focus { outline: none; }
#lookup-email:-webkit-autofill,
#lookup-email:-webkit-autofill:hover,
#lookup-email:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgba(26,26,46,1) inset;
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    transition: background-color 5000s ease-in-out 0s;
}

/* ===== Info icon tooltip ===== */
.info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
    color: rgba(156,163,175,0.6);
    transition: color 0.2s ease;
}
.info-icon:hover { color: rgba(212,168,70,0.9); }
.info-icon::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 8px 10px;
    background: rgba(10,10,20,0.97);
    border: 1px solid rgba(212,168,70,0.3);
    border-radius: 6px;
    color: rgba(229,231,235,0.9);
    font-size: 10px;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 50;
    white-space: normal;
}
.info-icon:hover::before {
    opacity: 1;
}

/* ===== Share buttons (icon-only, single row) ===== */
.share-icon-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.share-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(26,26,46,0.6);
    border: 1px solid rgba(75,85,99,0.3);
    border-radius: 9999px;
    color: rgba(209,213,219,0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}
.share-icon-btn:hover {
    background: rgba(212,168,70,0.1);
    border-color: rgba(212,168,70,0.55);
    color: #f0d078;
    transform: translateY(-1px);
}
.share-icon-btn:active { transform: translateY(0); }
.share-icon-btn svg { flex-shrink: 0; }
.share-icon-btn.copied {
    background: rgba(34,197,94,0.15);
    border-color: rgba(34,197,94,0.6);
    color: rgb(74,222,128);
}
@media (min-width: 640px) {
    .share-icon-btn { width: 42px; height: 42px; }
    .share-icon-btn svg { width: 18px; height: 18px; }
}

/* ===== Tier ladder ===== */
.tier-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 10px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(26,26,46,0.45);
    border: 1px solid rgba(75,85,99,0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
@media (min-width: 640px) {
    .tier-row {
        grid-template-columns: 100px minmax(180px, 1fr) minmax(180px, 280px);
        grid-template-rows: auto;
        padding: 16px 22px;
        column-gap: 22px;
        row-gap: 0;
    }
}

/* Progress bar area:
   - Mobile: row 2, spans both columns (full width below icon + info)
   - Desktop: column 3, single row */
.tier-progress-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: 1 / -1;
}
@media (min-width: 640px) {
    .tier-progress-area { grid-column: auto; }
}
.tier-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Inter', sans-serif;
}
.tier-progress-percent {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: var(--tier-color, #f0d078);
    font-size: 16px;
    line-height: 1;
}
.tier-progress-fraction {
    font-size: 11px;
    color: rgba(156,163,175,0.85);
}
.tier-progress-track {
    height: 6px;
    background: rgba(75,85,99,0.25);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}
.tier-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--tier-glow, rgba(212,168,70,0.5)), var(--tier-color, #f0d078));
    border-radius: 9999px;
    transition: width 0.6s ease;
    box-shadow: 0 0 8px var(--tier-glow, rgba(212,168,70,0.4));
}
.tier-row[data-state="unlocked"] .tier-progress-track {
    background: rgba(34,197,94,0.15);
}
.tier-row[data-state="unlocked"] .tier-progress-fill {
    background: linear-gradient(90deg, rgba(34,197,94,0.5), rgb(74,222,128));
    box-shadow: 0 0 10px rgba(34,197,94,0.4);
}

/* Locked state - default */
.tier-row[data-state="locked"] .tier-icon {
    filter: grayscale(0.85) brightness(0.45);
    opacity: 0.55;
}
.tier-row[data-state="locked"] .tier-name {
    color: rgba(156,163,175,0.6);
}
.tier-row[data-state="locked"] .tier-reward {
    color: rgba(107,114,128,0.6);
}

/* Unlocked state */
.tier-row[data-state="unlocked"] {
    border-color: rgba(212,168,70,0.4);
    background: rgba(26,26,46,0.85);
    box-shadow: 0 0 24px rgba(212,168,70,0.06);
}
.tier-row[data-state="unlocked"] .tier-icon {
    filter: drop-shadow(0 0 12px var(--tier-glow, rgba(212,168,70,0.6)));
    animation: tier-pulse 3s ease-in-out infinite;
}
@keyframes tier-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px var(--tier-glow, rgba(212,168,70,0.4))); }
    50% { filter: drop-shadow(0 0 16px var(--tier-glow, rgba(212,168,70,0.7))); }
}

/* Fluctuating - tier was reached but count dropped */
.tier-row[data-state="fluctuating"] {
    border-color: rgba(245,158,11,0.4);
}
.tier-row[data-state="fluctuating"] .tier-icon {
    filter: grayscale(0.5) brightness(0.7);
}
.tier-row[data-state="fluctuating"] .fluctuating-warning {
    display: inline-block;
    color: rgba(245,158,11,0.95);
}

.tier-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    transition: filter 0.3s ease;
}
@media (min-width: 640px) {
    .tier-icon { width: 100px; height: 100px; }
}

.tier-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tier-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(107,114,128,0.85);
}
.tier-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: color 0.3s ease;
    color: var(--tier-color, #cbd5e1);
}
.tier-reward {
    font-size: 12px;
    color: rgba(209,213,219,0.85);
    line-height: 1.4;
    margin-top: 2px;
}
.tier-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.tier-status-claimed {
    background: rgba(34,197,94,0.15);
    color: rgb(74,222,128);
    border: 1px solid rgba(34,197,94,0.3);
}
.tier-status-locked {
    background: rgba(75,85,99,0.2);
    color: rgba(156,163,175,0.7);
    border: 1px solid rgba(75,85,99,0.3);
}
.fluctuating-warning {
    display: none;
    font-size: 10px;
    margin-top: 4px;
}

/* Founder tier - special spacing */
.tier-row[data-tier="founder"] {
    margin-top: 12px;
    background: linear-gradient(135deg, rgba(26,26,46,0.7), rgba(127,29,29,0.18));
    border-color: rgba(239,68,68,0.25);
}
.tier-row[data-tier="founder"][data-state="unlocked"] {
    background: linear-gradient(135deg, rgba(127,29,29,0.3), rgba(239,68,68,0.1));
    border-color: rgba(239,68,68,0.6);
    box-shadow: 0 0 32px rgba(239,68,68,0.15);
}

/* Tier color CSS variables */
.tier-row[data-tier="common"] { --tier-color: #cbd5e1; --tier-glow: rgba(203,213,225,0.5); }
.tier-row[data-tier="uncommon"] { --tier-color: #4ade80; --tier-glow: rgba(34,197,94,0.5); }
.tier-row[data-tier="rare"] { --tier-color: #60a5fa; --tier-glow: rgba(59,130,246,0.5); }
.tier-row[data-tier="epic"] { --tier-color: #c084fc; --tier-glow: rgba(168,85,247,0.5); }
.tier-row[data-tier="legendary"] { --tier-color: #fbbf24; --tier-glow: rgba(245,158,11,0.6); }
.tier-row[data-tier="founder"] { --tier-color: #f87171; --tier-glow: rgba(239,68,68,0.7); }

/* Founder unlocked - extra particle effect */
.tier-row[data-tier="founder"][data-state="unlocked"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(239,68,68,0.7), transparent),
        radial-gradient(1.5px 1.5px at 60% 60%, rgba(248,113,113,0.5), transparent),
        radial-gradient(2px 2px at 85% 25%, rgba(239,68,68,0.6), transparent);
    pointer-events: none;
    animation: founder-sparkle 4s ease-in-out infinite;
}
@keyframes founder-sparkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ===== Leaderboard =====
   Mobile grid: rank | code | invites | rewards (tier hidden, rewards wrap to 2-3 rows)
   Desktop grid: rank | code | tier | invites | rewards (single row) */
.lb-row {
    display: grid;
    grid-template-columns: 38px 1fr 44px 56px;
    gap: 8px;
    align-items: center;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(75,85,99,0.15);
    transition: background 0.2s ease;
    font-size: 13px;
}
@media (min-width: 640px) {
    .lb-row {
        grid-template-columns: 90px 1fr 110px 100px 220px;
        padding: 12px 22px;
        gap: 16px;
        font-size: 14px;
        align-items: center;
    }
}
.lb-header {
    background: rgba(10,10,18,0.45);
    border-bottom: 1px solid rgba(75,85,99,0.4);
}
.lb-header > div { padding-top: 2px; padding-bottom: 2px; }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(212,168,70,0.04); }

.lb-rank {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: rgba(209,213,219,0.9);
    white-space: nowrap;
    font-size: 12px;
}
@media (min-width: 640px) {
    .lb-rank { font-size: inherit; }
}
.lb-code {
    font-family: 'Inter', monospace;
    color: rgba(209,213,219,0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Allow the code to wrap if absolutely necessary, but tighter letter-spacing
       and a smaller rewards column should keep it on one line in most cases. */
    overflow: hidden;
    word-break: break-all;
    line-height: 1.25;
}
@media (min-width: 640px) {
    .lb-code {
        letter-spacing: 0.05em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}
.lb-invites {
    text-align: right;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #f0d078;
}
/* Tier pill column on desktop (hidden on mobile) */
.lb-tier-cell {
    display: none;
}
@media (min-width: 640px) {
    .lb-tier-cell { display: flex; align-items: center; }
}
.lb-tier-pill {
    display: inline-block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 9999px;
    background: rgba(75,85,99,0.18);
    border: 1px solid rgba(75,85,99,0.3);
    font-weight: 600;
    white-space: nowrap;
}
.lb-tier-pill.lb-tier-common { color: rgba(203,213,225,0.95); border-color: rgba(203,213,225,0.3); background: rgba(203,213,225,0.08); }
.lb-tier-pill.lb-tier-uncommon { color: rgb(74,222,128); border-color: rgba(74,222,128,0.3); background: rgba(34,197,94,0.08); }
.lb-tier-pill.lb-tier-rare { color: rgb(96,165,250); border-color: rgba(96,165,250,0.3); background: rgba(59,130,246,0.08); }
.lb-tier-pill.lb-tier-epic { color: rgb(192,132,252); border-color: rgba(192,132,252,0.3); background: rgba(168,85,247,0.08); }
.lb-tier-pill.lb-tier-legendary { color: rgb(251,191,36); border-color: rgba(251,191,36,0.3); background: rgba(245,158,11,0.08); }
.lb-tier-pill.lb-tier-founder { color: rgb(248,113,113); border-color: rgba(248,113,113,0.4); background: rgba(239,68,68,0.1); }
.lb-rewards {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    /* Mobile: wrap to multiple rows so the rewards column stays narrow.
       Up to 3 rewards per row at 14px = ~50px, so 7 rewards = 3 rows max. */
    flex-wrap: wrap;
    align-content: center;
    max-width: 100%;
}
.lb-rewards img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(245,158,11,0.4));
}
@media (min-width: 640px) {
    .lb-rewards {
        flex-wrap: nowrap;
        gap: 2px;
    }
    .lb-rewards img {
        width: 22px;
        height: 22px;
    }
}
.lb-rewards-empty {
    font-size: 10px;
    color: rgba(107,114,128,0.5);
    text-align: right;
}

/* Top 20 - rewarded zone */
.lb-row[data-rewarded="true"] {
    background: linear-gradient(90deg, rgba(212,168,70,0.06) 0%, transparent 80%);
    border-left: 2px solid rgba(212,168,70,0.5);
}
.lb-row[data-rewarded="true"] .lb-rank {
    color: #f0d078;
}
.lb-row[data-rewarded="true"]:hover {
    background: linear-gradient(90deg, rgba(212,168,70,0.12) 0%, rgba(212,168,70,0.02) 80%);
}

/* Top 3 special — SVG medals (gold trophy / silver medal / bronze award)
   replace the emoji 🥇🥈🥉. Same site stroke-icon style as the rest of the page,
   consistent rendering across all OS/browsers (no emoji-style variation).
   Hidden on mobile to keep rank column narrow. */
@media (min-width: 640px) {
    .lb-row[data-rank="1"] .lb-rank::before,
    .lb-row[data-rank="2"] .lb-rank::before,
    .lb-row[data-rank="3"] .lb-rank::before {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 5px;
        vertical-align: -2px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    /* Same Lucide trophy shape across all three; differentiated by metal color
       (Olympic gold/silver/bronze convention — same prize, different rank). */
    /* Rank 1 — Gold #f0d078 */
    .lb-row[data-rank="1"] .lb-rank::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d078' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>");
    }
    /* Rank 2 — Silver #c0c5d0 */
    .lb-row[data-rank="2"] .lb-rank::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0c5d0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>");
    }
    /* Rank 3 — Bronze #b87333 */
    .lb-row[data-rank="3"] .lb-rank::before {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b87333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/><path d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/><path d='M4 22h16'/><path d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/><path d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/><path d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/></svg>");
    }
}

/* User's own row */
.lb-row[data-self="true"] {
    background: linear-gradient(90deg, rgba(34,197,94,0.10) 0%, transparent 80%) !important;
    border-left: 2px solid rgba(34,197,94,0.7);
}
.lb-row[data-self="true"]:hover {
    background: linear-gradient(90deg, rgba(34,197,94,0.18) 0%, transparent 80%) !important;
}
.lb-row[data-self="true"] .lb-rank {
    color: #4ade80;
}
.lb-row[data-self="true"] .lb-code::after {
    content: 'YOU';
    margin-left: 8px;
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.4);
    border-radius: 9999px;
    color: rgb(74,222,128);
    letter-spacing: 0.1em;
    font-weight: 600;
    vertical-align: middle;
}

/* User row pinned at bottom (rank > 50) */
.lb-row.lb-row-pinned {
    border-top: 2px solid rgba(34,197,94,0.4);
    background: linear-gradient(90deg, rgba(34,197,94,0.10) 0%, transparent 80%) !important;
    border-bottom: none;
    margin-top: 4px;
    border-left: 2px solid rgba(34,197,94,0.7);
}

/* Tier color text in leaderboard */
.lb-tier-common { color: rgba(203,213,225,0.85); }
.lb-tier-uncommon { color: rgb(74,222,128); }
.lb-tier-rare { color: rgb(96,165,250); }
.lb-tier-epic { color: rgb(192,132,252); }
.lb-tier-legendary { color: rgb(251,191,36); }
.lb-tier-founder { color: #f87171; font-weight: 700; }

/* Loading skeleton */
.lb-loading {
    text-align: center;
    padding: 40px 20px;
    color: rgba(156,163,175,0.6);
    font-size: 13px;
}

/* ===== Share template cards ===== */
.template-card {
    background: rgba(10,10,20,0.6);
    border: 1px solid rgba(75,85,99,0.3);
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 11px;
    color: rgba(209,213,219,0.85);
    line-height: 1.5;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.template-card:hover {
    border-color: rgba(212,168,70,0.4);
    background: rgba(26,26,46,0.8);
    color: #f0d078;
}
.template-card:active {
    transform: scale(0.98);
}

/* ===== Refresh icon spinning ===== */
.refresh-spinning {
    animation: refresh-spin 0.6s linear;
}
@keyframes refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}