*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

/* ========== LOADER SCREEN ========== */
#loader-screen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #06060c;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease, visibility .5s ease;
}
#loader-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.loader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
.loader-logo {
    animation: loaderPulse 1.8s ease-in-out infinite;
}
@keyframes loaderPulse {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}
.loader-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}
.loader-bar-wrap {
    width: 220px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    overflow: hidden;
}
.loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb),0.6), var(--accent));
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width .3s ease;
    animation: loaderShimmer 2s infinite;
}
.loader-status {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.5px;
}
.loader-skip {
    margin-top: 8px;
    background: none;
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    padding: 6px 20px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
}
.loader-skip:hover {
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.7);
}

:root,
[data-theme="dark"] {
    --bg: #06060c;
    --surface: rgba(16, 16, 28, 0.85);
    --surface-2: rgba(24, 24, 42, 0.9);
    --accent-rgb: 139, 108, 255;
    --border: rgba(var(--accent-rgb), 0.08);
    --text: #f0f0f5;
    --text-dim: #8a8aaa;
    --accent: #8b6cff;
    --accent-2: #a78bfa;
    --accent-glow: rgba(var(--accent-rgb), 0.25);
    --green: #34d399;
    --red: #f87171;
    --orange: #fbbf24;
    --radius: 18px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --glass: rgba(16, 16, 28, 0.6);
    --glass-border: rgba(var(--accent-rgb), 0.12);
    --font: 'Inter', sans-serif;
    --blur: 12px;
    --glass-filter: blur(var(--blur)) saturate(1.4)
}

[data-theme="light"] {
    --bg: #f0f0f5;
    --surface: rgba(255, 255, 255, 0.85);
    --surface-2: rgba(235, 235, 245, 0.9);
    --border: rgba(var(--accent-rgb), 0.12);
    --text: #1a1a2e;
    --text-dim: #555568;
    --accent: #7c5ce7;
    --accent-2: #9775fa;
    --accent-glow: rgba(var(--accent-rgb), 0.2);
    --green: #22c55e;
    --red: #ef4444;
    --orange: #f59e0b;
    --glass: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(var(--accent-rgb), 0.15)
}

[data-theme="light"] body {
    background-image: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.08) 0%, transparent 60%)
}

[data-theme="light"] #navbar {
    background: rgba(255, 255, 255, 0.8)
}

[data-theme="light"] .modal {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.97), rgba(240, 240, 250, 0.98))
}

[data-theme="light"] .modal h2 {
    background: linear-gradient(135deg, #1a1a2e, var(--accent));
    -webkit-background-clip: text;
    background-clip: text
}

[data-theme="light"] .nav-brand {
    background: linear-gradient(135deg, var(--text) 30%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0.3px rgba(255, 255, 255, 0.2)
}

/* Dark mode: text shadows */
[data-theme="dark"] .nav-link,
[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-sub,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card p,
[data-theme="dark"] .card-cta,
[data-theme="dark"] .settings-header h3,
[data-theme="dark"] .lb-title,
[data-theme="dark"] .lb-tab,
[data-theme="dark"] .prof-name,
[data-theme="dark"] .prof-section-title,
[data-theme="dark"] .prof-badge-name,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15)
}
[data-theme="dark"] .nav-link.active,
[data-theme="dark"] .lb-tab.active,
[data-theme="dark"] .lb-time-filter .filter-btn.active,
[data-theme="dark"] .duel-challenge-btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35)
}
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-sm {
    text-shadow: none
}

/* Light mode: text shadows */
[data-theme="light"] .nav-link,
[data-theme="light"] .hero-title,
[data-theme="light"] .hero-sub,
[data-theme="light"] .card h3,
[data-theme="light"] .card p,
[data-theme="light"] .settings-header h3,
[data-theme="light"] .lb-title,
[data-theme="light"] .prof-name,
[data-theme="light"] h2,
[data-theme="light"] h3 {
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2)
}
[data-theme="light"] .nav-link.active,
[data-theme="light"] .lb-tab.active,
[data-theme="light"] .lb-time-filter .filter-btn.active,
[data-theme="light"] .btn-primary,
[data-theme="light"] .duel-challenge-btn {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25)
}

.hero-title, .clash-display {
    font-family: var(--font)
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    background-image: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb), 0.06) 0%, transparent 60%)
}

.mesh-gradient {
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: var(--bg)
}
.mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: blobDrift 20s ease-in-out infinite alternate;
    will-change: transform;
    contain: layout style;
}
.mesh-blob:nth-child(1) {
    width: 600px; height: 600px;
    background: var(--accent);
    top: -15%; left: -10%;
    animation-duration: 22s
}
.mesh-blob:nth-child(2) {
    width: 500px; height: 500px;
    background: rgba(var(--accent-rgb), 0.6);
    bottom: -20%; right: -10%;
    animation-duration: 18s;
    animation-delay: -5s
}
.mesh-blob:nth-child(3) {
    width: 400px; height: 400px;
    background: rgba(var(--accent-rgb), 0.5);
    top: 40%; left: 50%;
    animation-duration: 25s;
    animation-delay: -10s
}
@keyframes blobDrift {
    0% { transform: translate(0, 0) scale(1) }
    33% { transform: translate(40px, -30px) scale(1.05) }
    66% { transform: translate(-20px, 40px) scale(0.95) }
    100% { transform: translate(30px, 20px) scale(1.02) }
}
[data-theme="light"] .mesh-blob { opacity: 0.15 }
[data-theme="light"] .mesh-blob:nth-child(2) { background: rgba(var(--accent-rgb), 0.4) }

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px
}

#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    contain: layout paint
}

#navbar,
#content,
.modal-overlay {
    position: relative;
    z-index: 1
}

/* AUTH MODAL */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(6, 6, 12, 0.92);
    backdrop-filter: var(--glass-filter);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.5s ease;
    will-change: opacity, transform
}

.modal-overlay.hidden {
    display: none
}

.modal {
    background: linear-gradient(165deg, rgba(20, 20, 36, 0.95), rgba(12, 12, 22, 0.98));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 44px 40px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: modalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(var(--accent-rgb), 0.08);
    backdrop-filter: var(--glass-filter);
    will-change: opacity, transform
}

.modal h2 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 22px;
    background: linear-gradient(135deg, var(--text), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.modal input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    margin-bottom: 14px;
    outline: none;
    transition: var(--transition)
}

.modal input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow), 0 0 20px rgba(var(--accent-rgb), 0.1)
}

.modal input::placeholder {
    color: var(--text-dim)
}

@keyframes modalFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.94)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.auth-success {
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: var(--green);
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px
}

.auth-forgot {
    margin-top: 12px;
    font-size: 12px;
    text-align: right
}

.auth-forgot a {
    color: var(--text-dim);
    text-decoration: none;
    transition: var(--transition)
}

.auth-forgot a:hover {
    color: var(--accent)
}

.verify-notice {
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    text-align: center;
    animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.verify-notice p {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text)
}

/* BUTTONS */
.btn-primary {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2), #8b5cf6);
    color: #fff;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px var(--accent-glow), 0 0 20px rgba(var(--accent-rgb), 0.15);
    filter: brightness(1.1)
}

.btn-primary:hover::before {
    opacity: 1
}

.btn-primary:active {
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 4px 12px var(--accent-glow)
}

.auth-switch {
    margin-top: 18px;
    font-size: 13px;
    color: var(--text-dim)
}

.auth-switch a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition)
}

.auth-switch a:hover {
    text-shadow: 0 0 16px var(--accent-glow)
}

.auth-error {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--red);
    padding: 12px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
    animation: shake 0.4s ease
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0)
    }

    20% {
        transform: translateX(-8px)
    }

    40% {
        transform: translateX(8px)
    }

    60% {
        transform: translateX(-4px)
    }

    80% {
        transform: translateX(4px)
    }
}

/* NAVBAR */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 36px;
    height: 64px;
    background: rgba(6, 6, 12, 0.75);
    backdrop-filter: var(--glass-filter);
    border-bottom: 1px solid var(--glass-border)
}

.nav-brand {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--text) 30%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.15);
    transition: var(--transition)
}

.nav-brand:hover {
    filter: brightness(1.3);
    transform: scale(1.04)
}

.nav-links {
    display: flex;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

.nav-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: -2px;
    margin-right: 0;
    flex-shrink: 0
}

.nav-link {
    color: var(--text-dim);
    text-decoration: none;
    font-weight: 600;
    font-size: 0;
    padding: 8px 12px;
    border-radius: 10px;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap
}

.nav-link:hover {
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.08);
    transform: translateY(-1px)
}

.nav-link.active {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
}

.nav-link:active {
    transform: scale(0.95)
}

.nav-pill {
    position: absolute;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow: 0 4px 16px var(--accent-glow);
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    top: 50%;
    transform: translateY(-50%)
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 8px
}

#nav-username {
    font-size: 13px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--text));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.15)
}

.btn-sm {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    padding: 7px 14px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: var(--glass-filter);
    min-height: 44px
}

.btn-sm:hover {
    color: var(--text);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3)
}

.btn-sm:active {
    transform: translateY(1px) scale(0.97)
}

/* PAGES */
#content {
    padding-top: 64px;
    min-height: 100vh
}

.page {
    display: none
}

.page.active {
    display: block;
    animation: pageSlideIn 0.25s ease-out both;
    contain: layout style;
}

/* HERO */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 50px 20px;
    text-align: center;
    position: relative
}

.hero-glow {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15) 0%, rgba(var(--accent-rgb), 0.05) 40%, transparent 70%);
    pointer-events: none;
    filter: blur(80px);
    animation: glowPulse 5s ease-in-out infinite
}

@keyframes glowPulse {

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

    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.15)
    }
}

.hero-title {
    font-size: clamp(40px, 7vw, 72px);
    font-weight: 900;
    letter-spacing: -3px;
    line-height: 1.05;
    margin-bottom: 14px;
    position: relative;
    animation: titleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1), gradientShift 3s ease-in-out infinite;
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.5), 0 2px 4px rgba(0,0,0,0.6);
    background-size: 200% 200%
}
.beta-badge {
    display: inline-block;
    vertical-align: middle;
    font-size: clamp(14px, 2.5vw, 20px);
    font-weight: 800;
    letter-spacing: 3px;
    padding: 6px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.1));
    border: 2px solid rgba(var(--accent-rgb), 0.5);
    color: var(--accent);
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15), inset 0 0 15px rgba(var(--accent-rgb), 0.08);
    animation: betaPulse 2.5s ease-in-out infinite;
    position: relative;
    top: -4px;
    margin-left: 10px
}
@keyframes betaPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15), inset 0 0 15px rgba(var(--accent-rgb), 0.08); border-color: rgba(var(--accent-rgb), 0.5) }
    50% { box-shadow: 0 0 35px rgba(var(--accent-rgb), 0.3), inset 0 0 20px rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.8) }
}
.report-hint {
    display: inline-block;
    margin: 0 auto 14px;
    padding: 8px 18px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    color: var(--text-dim);
    font-size: 13px;
    font-family: var(--font);
    letter-spacing: 0.3px;
    backdrop-filter: blur(6px);
    animation: titleIn 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both
}
.report-hint kbd {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500
}
[data-theme="light"] .hero-title {
    color: #1a1a2e;
    text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.2)
}
[data-theme="light"] .card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(var(--accent-rgb), 0.12)
}
[data-theme="light"] .card:hover {
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.15), 0 0 60px rgba(var(--accent-rgb), 0.06)
}

.accent {
    background: linear-gradient(135deg, var(--accent), #fff, var(--accent));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease-in-out infinite
}

@keyframes gradientShift {

    0%,
    100% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.hero-sub {
    font-size: 17px;
    color: var(--text-dim);
    margin-bottom: 50px;
    animation: titleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both;
    letter-spacing: 0.3px
}

/* TEXT GLOW */
.text-glow {
    position: relative;
    transition: all 0.3s ease;
    cursor: default
}

.text-glow:hover {
    color: var(--text);
    text-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(var(--accent-rgb), 0.12)
}

@keyframes titleIn {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

/* CARDS */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 800px;
    width: 100%
}

.card {
    border-radius: var(--radius);
    padding: 30px 26px;
    text-align: left;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    opacity: 1;
    backdrop-filter: var(--glass-filter);
    --mx: 50%; --my: 50%;
    background: var(--glass);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    will-change: transform;
    contain: layout style;
}

@keyframes cardFadeIn {
    from { opacity: 0 }
    to { opacity: 1 }
}
.card:nth-child(1) { animation: cardFadeIn 0.3s 0.05s both }
.card:nth-child(2) { animation: cardFadeIn 0.3s 0.1s both }
.card:nth-child(3) { animation: cardFadeIn 0.3s 0.15s both }
.card:nth-child(4) { animation: cardFadeIn 0.3s 0.2s both }
.card:nth-child(5) { animation: cardFadeIn 0.3s 0.25s both }
.card:nth-child(6) { animation: cardFadeIn 0.3s 0.3s both }
.card:nth-child(7) { animation: cardFadeIn 0.3s 0.35s both }
.card:nth-child(8) { animation: cardFadeIn 0.3s 0.4s both }

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.2), transparent 60%);
    opacity: 0;
    transition: opacity 0.4s
}

.card:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 6px 12px rgba(var(--accent-rgb),0.15), 0 12px 24px rgba(var(--accent-rgb),0.1), 0 24px 48px rgba(0,0,0,0.15)
}

.card:hover::before {
    opacity: 1
}

.card:hover::after {
    opacity: 1
}

.card:active {
    transform: translateY(-3px) scale(0.98);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3)
}

/* Card style variations */
.card-solid {
    backdrop-filter: none;
    background: var(--surface);
    border-color: rgba(var(--accent-rgb), 0.15)
}
.card-solid:hover {
    background: var(--surface-2);
    border-color: rgba(var(--accent-rgb), 0.4)
}

.card-outline {
    backdrop-filter: none;
    background: transparent;
    border: 2px solid rgba(var(--accent-rgb), 0.25)
}
.card-outline:hover {
    border-color: rgba(var(--accent-rgb), 0.6);
    background: rgba(var(--accent-rgb), 0.05)
}

.card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.4));
    color: var(--accent)
}

.card-icon svg {
    width: 100%;
    height: 100%
}

.card:hover .card-icon {
    transform: scale(1.2) rotate(-8deg);
    filter: drop-shadow(0 4px 20px rgba(var(--accent-rgb), 0.5))
}

.settings-icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: -3px;
    margin-right: 4px
}

.card h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    position: relative;
    transition: var(--transition)
}

.card:hover h3 {
    color: var(--text);
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3)
}

.card p {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 14px;
    position: relative
}

.card-cta {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    position: relative;
    transition: all 0.35s ease;
    letter-spacing: 0.5px
}

.card:hover .card-cta {
    letter-spacing: 3px;
    text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3)
}

/* TEST WRAPPER */
.test-wrapper {
    max-width: 820px;
    margin: 0 auto;
    padding: 40px 20px;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    gap: 20px
}

/* REACTION */
#reaction-box {
    flex: 1;
    min-height: 320px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none
}

.reaction-idle {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-filter)
}

.reaction-idle:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 40px var(--accent-glow)
}

.reaction-waiting {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 1px solid transparent;
    animation: waitPulse 1.5s ease-in-out infinite
}

.reaction-go {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: 1px solid transparent;
    animation: goPop 0.15s ease;
    box-shadow: 0 0 60px rgba(34, 197, 94, 0.3)
}

.reaction-result-state {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    animation: resultIn 0.3s ease;
    backdrop-filter: var(--glass-filter)
}

.reaction-early {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: 1px solid transparent;
    animation: shake 0.4s ease
}

@keyframes waitPulse {

    0%,
    100% {
        box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0)
    }

    50% {
        box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.2)
    }
}

@keyframes goPop {
    from {
        transform: scale(0.97)
    }

    to {
        transform: scale(1)
    }
}

@keyframes resultIn {
    from {
        opacity: 0.8;
        transform: scale(0.99)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.reaction-shockwave {
    position: absolute;
    border-radius: 50%;
    border: 2px solid var(--green);
    pointer-events: none;
    animation: shockwave 0.6s ease-out forwards
}
@keyframes shockwave {
    0% { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%) }
    100% { width: 300px; height: 300px; opacity: 0; transform: translate(-50%, -50%) }
}

.reaction-content {
    text-align: center
}

.reaction-content h2 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 8px;
    transition: var(--transition);
    letter-spacing: -0.5px
}

.reaction-content p {
    font-size: 15px;
    opacity: 0.85
}

/* HISTORY */
.history-bar {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 18px 22px;
    transition: var(--transition);
    backdrop-filter: var(--glass-filter)
}

.history-bar:hover {
    border-color: rgba(var(--accent-rgb), 0.2)
}

.history-bar h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    margin-bottom: 12px;
    font-weight: 700
}

.history-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.history-tag {
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    animation: tagPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.25s ease
}

.history-tag:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    border-color: rgba(var(--accent-rgb), 0.2)
}

@keyframes tagPop {
    from {
        opacity: 0;
        transform: scale(0.7)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.avg-display {
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600
}

/* CPS */
#cps-box {
    flex: 1;
    min-height: 320px;
    border-radius: var(--radius);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    backdrop-filter: var(--glass-filter)
}

#cps-box:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 0 40px var(--accent-glow)
}

#cps-box:active {
    transform: scale(0.985);
    background: var(--surface-2);
    transition: all 0.05s ease
}

.cps-content {
    text-align: center
}

.cps-content h2 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 8px;
    letter-spacing: -0.5px
}

.cps-content p {
    font-size: 15px;
    color: var(--text-dim)
}

.big-counter {
    font-size: 78px;
    font-weight: 900;
    letter-spacing: -4px;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.7), rgba(var(--accent-rgb), 0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin: 10px 0;
    transition: transform 0.08s ease;
    filter: drop-shadow(0 4px 12px var(--accent-glow))
}

.cps-controls {
    display: flex;
    align-items: center;
    gap: 12px
}

.cps-controls label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim)
}

.duration-btns {
    display: flex;
    gap: 5px
}

.dur-btn {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    padding: 6px 14px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease
}

.dur-btn:hover {
    color: var(--text);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-2px)
}

.dur-btn:active {
    transform: scale(0.94)
}

.dur-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px var(--accent-glow)
}

.timer-ring {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 14px auto
}

.timer-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.ring-bg {
    fill: none;
    stroke: rgba(24, 24, 42, 0.8);
    stroke-width: 6
}

.ring-fg {
    fill: none;
    stroke: url(#ringGrad);
    stroke: var(--accent);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.1s linear;
    filter: drop-shadow(0 0 10px var(--accent-glow))
}

.timer-ring span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    font-weight: 900
}

/* MEMORY */
.memory-header {
    display: flex;
    align-items: center;
    gap: 20px
}

.memory-stat {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dim)
}

.memory-stat span {
    color: var(--text)
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%
}

.mem-card {
    aspect-ratio: 1;
    border-radius: 14px;
    cursor: pointer;
    font-size: 32px;
    user-select: none;
    perspective: 600px;
    background: transparent;
    border: none;
    box-shadow: none
}

.mem-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: 14px
}

.mem-card:hover .mem-card-inner {
    box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.3)
}

.mem-card:active .mem-card-inner {
    transform: scale(0.94)
}

.mem-card-front,
.mem-card-back {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.mem-card-front {
    background: linear-gradient(135deg, var(--accent), var(--accent-2), #8b5cf6);
    border: 2px solid rgba(var(--accent-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    z-index: 2
}

.mem-card-front::after {
    content: '?';
    font-size: 28px;
    font-weight: 700;
    color: rgba(255,255,255,0.5)
}

.mem-card-back {
    background: var(--surface-2);
    border: 2px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: rotateY(180deg)
}

.mem-card.flipped .mem-card-inner,
.mem-card.matched .mem-card-inner {
    transform: rotateY(180deg)
}

.mem-card.matched .mem-card-inner {
    transform: rotateY(180deg);
    pointer-events: none
}
.mem-card.matched {
    opacity: 0.85;
    transition: opacity 0.5s ease 0.4s
}

.mem-card.matched .mem-card-back {
    border-color: var(--green);
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.3)
}

.mem-result-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 34px;
    text-align: center;
    margin-top: 20px;
    animation: modalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: var(--glass-filter)
}

.mem-result-card h2 {
    font-size: 30px;
    margin-bottom: 12px;
    font-weight: 900
}

.mem-result-card p {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 18px
}

/* AIM */
.aim-stats {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.aim-arena {
    position: relative;
    width: 100%;
    min-height: 460px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: crosshair;
    user-select: none;
    backdrop-filter: var(--glass-filter);
    background-image: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
}

.aim-start-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    z-index: 2;
    text-align: center;
    gap: 14px
}

.aim-start-overlay h2 {
    font-size: 30px;
    font-weight: 900
}

.aim-start-overlay p {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 8px
}

.aim-target {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle, #f87171 30%, #ef4444 55%, #dc2626);
    border: 3px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transform: scale(0);
    animation: targetPop 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow: 0 0 24px rgba(248, 113, 113, 0.4), 0 0 48px rgba(248, 113, 113, 0.15), inset 0 0 12px rgba(255, 255, 255, 0.2)
}

.aim-target::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9)
}

.aim-target::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 2px solid rgba(248, 113, 113, 0.3);
    animation: targetRing 0.8s ease-in-out infinite
}

@keyframes targetPop {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@keyframes targetRing {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5
    }

    50% {
        transform: scale(1.35);
        opacity: 0
    }
}

.aim-hit {
    animation: aimHit 0.3s ease forwards
}

@keyframes aimHit {
    0% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(1.6);
        opacity: 0
    }
}

.aim-miss-marker {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: missFade 0.5s ease forwards
}

@keyframes missFade {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5)
    }
}

.aim-damage-num {
    position: absolute;
    font-size: 14px;
    font-weight: 800;
    color: var(--accent);
    pointer-events: none;
    z-index: 10;
    text-shadow: 0 0 8px var(--accent-glow);
    animation: damageFloat 0.8s ease-out forwards
}
@keyframes damageFloat {
    0% { transform: translateY(0) scale(1); opacity: 1 }
    100% { transform: translateY(-40px) scale(0.8); opacity: 0 }
}

/* LEADERBOARD */
.lb-title {
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 22px;
    letter-spacing: -0.5px
}

.lb-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 22px
}

.lb-tab {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    padding: 8px 14px;
    border-radius: 12px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease
}

.lb-tab:hover {
    color: var(--text);
    transform: translateY(-2px)
}

.lb-tab:active {
    transform: scale(0.94)
}

.lb-tab.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 20px var(--accent-glow)
}

.lb-table-wrap {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 22px;
    overflow: hidden;
    backdrop-filter: var(--glass-filter)
}

.lb-filters-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 8px;
}
.lb-time-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}
.lb-diff-filter {
    display: flex;
    gap: 4px;
}
.lb-diff-filter .filter-btn {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    padding: 5px 12px;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}
.lb-diff-filter .filter-btn:hover {
    color: var(--text);
    border-color: rgba(var(--accent-rgb), 0.25);
}
.lb-ranked-btn {
    border-color: rgba(255,215,0,0.3) !important;
    color: #ffd700 !important;
}
.lb-ranked-btn.active {
    background: linear-gradient(135deg, #ffd700, #ff8c00) !important;
    color: #1a1a2e !important;
    border-color: transparent !important;
}
.lb-ranked-btn:hover:not(.active) {
    border-color: #ffd700 !important;
    background: rgba(255,215,0,0.08) !important;
}
.lb-diff-filter .filter-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}
.lb-time-filter .filter-btn {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: var(--text-dim);
    padding: 7px 16px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease
}
.lb-time-filter .filter-btn:hover {
    color: var(--text);
    border-color: rgba(var(--accent-rgb), 0.25);
    background: rgba(var(--accent-rgb), 0.08)
}
.lb-time-filter .filter-btn.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px var(--accent-glow)
}

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

.lb-table th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 700
}

.lb-table td {
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.05);
    transition: background 0.25s
}

.lb-table tr:last-child td {
    border-bottom: none
}

.lb-table tr:hover td {
    background: rgba(var(--accent-rgb), 0.06)
}

.lb-table .rank {
    font-weight: 900;
    color: var(--accent);
    width: 40px
}

.lb-table .rank-1 {
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.5)
}

.lb-table .rank-2 {
    color: #c0c0c0;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.35)
}

.lb-table .rank-3 {
    color: #cd7f32;
    text-shadow: 0 0 10px rgba(205, 127, 50, 0.35)
}

#lb-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    padding: 34px
}

.card, .modal, .lb-table-wrap, .mem-result-card, .numgame-box, .visgame-box {
    border-top: 1px solid rgba(255, 255, 255, 0.06)
}
[data-theme="light"] .card, [data-theme="light"] .modal, [data-theme="light"] .lb-table-wrap {
    border-top: 1px solid rgba(0, 0, 0, 0.04)
}

.lb-podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 20px 0
}
.podium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    border-radius: 16px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-filter);
    transition: all 0.3s ease;
    min-width: 120px
}
.podium-card:hover { transform: translateY(-4px) }
.podium-card.rank-1 {
    padding: 28px 20px;
    background: linear-gradient(165deg, rgba(255, 215, 0, 0.08), var(--glass));
    border-color: rgba(255, 215, 0, 0.25);
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);
    order: 2
}
.podium-card.rank-2 {
    background: linear-gradient(165deg, rgba(192, 192, 192, 0.06), var(--glass));
    border-color: rgba(192, 192, 192, 0.2);
    order: 1
}
.podium-card.rank-3 {
    background: linear-gradient(165deg, rgba(205, 127, 50, 0.06), var(--glass));
    border-color: rgba(205, 127, 50, 0.2);
    order: 3
}
.podium-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
    border: 2px solid var(--glass-border)
}
.podium-card.rank-1 .podium-avatar {
    width: 60px; height: 60px;
    border-color: rgba(255, 215, 0, 0.4)
}
.podium-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.podium-crown {
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.4))
}
.podium-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.podium-score {
    font-weight: 800;
    font-size: 18px;
    background: linear-gradient(135deg, var(--text), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}
.podium-card.rank-1 .podium-score { font-size: 22px }
.podium-rank-num {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px
}

.hidden {
    display: none !important
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out;
    pointer-events: none
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0
    }
}

/* DUEL */
.duel-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 18px;
    backdrop-filter: var(--glass-filter)
}

.duel-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px
}

.duel-search-row input {
    flex: 1;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    transition: var(--transition)
}

.duel-search-row input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow)
}

.duel-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 220px;
    overflow-y: auto
}

.duel-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.25s ease
}

.duel-user-card:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05)
}

.duel-user-info {
    display: flex;
    align-items: center;
    gap: 10px
}

.duel-online-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
    flex-shrink: 0;
    animation: dotPulse 2s ease-in-out infinite
}

@keyframes dotPulse {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(52, 211, 153, 0.6)
    }

    50% {
        box-shadow: 0 0 16px rgba(52, 211, 153, 0.8)
    }
}

.duel-offline-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-dim);
    flex-shrink: 0
}

.duel-user-name {
    font-weight: 700;
    font-size: 14px
}

.duel-challenge-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    padding: 9px 18px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.3px
}

.duel-challenge-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--accent-glow)
}

.duel-game-select {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px
}

.duel-game-select label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim)
}

.duel-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 24px 0
}

.duel-player {
    text-align: center;
    flex: 1;
    padding: 24px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    transition: all 0.3s ease
}

.duel-player:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
}

.duel-player-name {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 10px
}

.duel-player-score {
    font-size: 26px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.duel-vs-text {
    font-size: 32px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--text-dim), rgba(var(--accent-rgb), 0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -2px
}

.duel-status {
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 14px;
    animation: pulse 1.5s ease-in-out infinite
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.4
    }
}

.duel-result-title {
    font-size: 34px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: -1px
}

.duel-win {
    color: var(--green);
    text-shadow: 0 0 24px rgba(52, 211, 153, 0.5)
}

.duel-lose {
    color: var(--red);
    text-shadow: 0 0 24px rgba(248, 113, 113, 0.5)
}

.duel-draw {
    color: var(--orange);
    text-shadow: 0 0 24px rgba(251, 191, 36, 0.5)
}

/* CLASH ANIMATION */
.clash-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
    perspective: 800px
}

.clash-player {
    text-align: center;
    flex: 1;
    padding: 24px 16px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    transition: all 0.3s ease
}

.clash-left {
    animation: clashSlideLeft 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both
}

.clash-right {
    animation: clashSlideRight 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both
}

@keyframes clashSlideLeft {
    0% { opacity: 0; transform: translateX(-120px) scale(0.7) }
    100% { opacity: 1; transform: translateX(0) scale(1) }
}

@keyframes clashSlideRight {
    0% { opacity: 0; transform: translateX(120px) scale(0.7) }
    100% { opacity: 1; transform: translateX(0) scale(1) }
}

.clash-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 12px;
    background: var(--surface-2);
    border: 3px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    overflow: hidden;
    box-shadow: 0 0 20px var(--accent-glow)
}

.clash-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.clash-name {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--text)
}

.clash-best {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
    min-height: 20px
}

.clash-vs-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.clash-vs {
    font-size: 42px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), #f87171, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -2px;
    animation: clashVsPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    filter: drop-shadow(0 0 12px var(--accent-glow))
}

@keyframes clashVsPop {
    0% { opacity: 0; transform: scale(0) rotate(-20deg) }
    60% { transform: scale(1.3) rotate(5deg) }
    100% { opacity: 1; transform: scale(1) rotate(0deg) }
}

.clash-game-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--accent);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: clashVsPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both
}

.clash-player:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4)
}

.challenge-popup {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    animation: popSlide 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
}

.challenge-popup.hidden {
    display: none !important
}

.challenge-popup-inner {
    background: linear-gradient(165deg, rgba(20, 20, 36, 0.97), rgba(12, 12, 22, 0.99));
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 22px 28px;
    min-width: 300px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 40px var(--accent-glow);
    text-align: center;
    backdrop-filter: var(--glass-filter)
}

.challenge-popup-inner h3 {
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 10px;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.challenge-popup-inner p {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 6px
}

@keyframes popSlide {
    from {
        opacity: 0;
        transform: translateX(120px) scale(0.9)
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1)
    }
}

.duel-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto
}

.duel-history-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    font-size: 13px;
    transition: all 0.2s ease
}

.duel-history-card:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    background: rgba(var(--accent-rgb), 0.04)
}

.duel-history-card .dh-players {
    font-weight: 700
}

.duel-history-card .dh-game {
    color: var(--text-dim);
    font-size: 12px
}

.duel-history-card .dh-result {
    font-weight: 900;
    font-size: 13px
}

.dh-win {
    color: var(--green)
}

.dh-lose {
    color: var(--red)
}

.dh-draw {
    color: var(--orange)
}

.duel-round-indicator {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 100;
    background: linear-gradient(165deg, var(--surface), rgba(12, 12, 22, 0.95));
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 10px 18px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow);
    font-size: 14px;
    font-weight: 800;
    color: var(--accent)
}

/* DUEL EMOJIS */
.duel-emojis{display:flex;gap:6px;justify-content:center;padding:8px;margin-top:8px}
.duel-emoji-btn{background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:6px 10px;font-size:20px;cursor:pointer;transition:all .2s ease}
.duel-emoji-btn:hover{transform:scale(1.2);border-color:var(--accent)}
.duel-emoji-btn:active{transform:scale(0.9)}
.duel-emoji-btn.cooldown{opacity:0.4;pointer-events:none}
.floating-emoji{position:fixed;bottom:40%;left:50%;font-size:48px;z-index:9999;pointer-events:none;opacity:1;transition:all 1.5s ease-out;transform:translateX(-50%)}
.floating-emoji.float-up{opacity:0;transform:translate(-50%,-120px) scale(1.5)}

/* PROFILE */
.profile-panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 30px;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
    backdrop-filter: var(--glass-filter)
}

.prof-group {
    margin-bottom: 20px
}

.prof-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 8px
}

.prof-group input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    outline: none;
    transition: var(--transition)
}

.prof-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow)
}

.prof-avatar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px
}

.prof-avatar {
    background: var(--glass);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 0;
    text-align: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none
}

.prof-avatar:hover {
    background: rgba(var(--accent-rgb), 0.1);
    transform: translateY(-2px)
}

.prof-avatar.selected {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 4px 16px var(--accent-glow)
}

.profile-radar-wrap {
    max-width: 400px;
    margin: 24px auto;
    padding: 20px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: var(--glass-filter)
}
.profile-radar-wrap canvas {
    max-width: 100%;
    max-height: 300px
}

/* NAV DROPDOWN */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-glow);
    backdrop-filter: var(--glass-filter);
    opacity: 0;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(10px);
}

.dropdown-item {
    display: block;
    padding: 10px 14px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--text);
}

.dropdown-item#logout-btn {
    color: var(--red);
}

.dropdown-item#logout-btn:hover {
    background: rgba(248, 113, 113, 0.15);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 0;
}

.nav-avatar-img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    border: 1px solid var(--border);
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 6px
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.2);
    border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.4)
}

/* THEME TOGGLE */
.theme-toggle {
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text);
    font-size: 16px
}

.theme-toggle:hover {
    border-color: var(--accent);
    transform: rotate(30deg) scale(1.1)
}

/* TOAST */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    max-width: 360px
}

.toast {
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font);
    color: #fff;
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    backdrop-filter: var(--glass-filter);
    max-width: 320px
}

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

.toast-info {
    background: linear-gradient(135deg, var(--accent), var(--accent-2))
}

.toast-success {
    background: linear-gradient(135deg, #22c55e, #16a34a)
}

.toast-error {
    background: linear-gradient(135deg, #ef4444, #dc2626)
}

/* SKELETON */
.skeleton-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px
}

.skeleton-row {
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 25%, rgba(var(--accent-rgb), 0.1) 50%, rgba(var(--accent-rgb), 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite
}

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

/* TYPING PROGRESS */
.typing-progress {
    height: 4px;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 4px;
    overflow: hidden
}

.typing-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    border-radius: 4px;
    transition: width 0.1s ease
}

/* SHARE BTN */
.share-btn {
    margin-bottom: 12px
}

.result-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 8px
}

/* NUMBER MEMORY */
.numgame-box {
    min-height: 400px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: var(--glass-filter);
    padding: 40px
}

.numgame-center {
    text-align: center;
    width: 100%
}

.numgame-center h2 {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 12px
}

.numgame-center p {
    color: var(--text-dim);
    font-size: 14px;
    margin-bottom: 16px
}

.numgame-number {
    font-size: clamp(36px, 8vw, 64px);
    font-weight: 900;
    letter-spacing: 8px;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.7), rgba(var(--accent-rgb), 0.5));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    animation: numberPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
}

@keyframes numberPop {
    from { transform: scale(0.8); opacity: 0 }
    to { transform: scale(1); opacity: 1 }
}

.numgame-level {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 700;
    margin-bottom: 12px
}

.numgame-answer {
    width: 100%;
    max-width: 300px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 6px;
    outline: none;
    transition: var(--transition)
}

.numgame-answer:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow)
}

/* VISUAL MEMORY */
.visgame-info {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-bottom: 20px
}

.visgame-grid {
    display: grid;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto;
    width: 100%
}

.visgame-tile {
    aspect-ratio: 1;
    border-radius: 10px;
    background: var(--surface-2);
    border: 2px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none
}

.visgame-tile:hover {
    border-color: rgba(var(--accent-rgb), 0.3)
}

.visgame-tile.highlight {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow)
}

.visgame-tile.correct {
    background: linear-gradient(135deg, var(--green), #16a34a);
    border-color: var(--green)
}

.visgame-tile.wrong {
    background: linear-gradient(135deg, var(--red), #dc2626);
    border-color: var(--red)
}

.visgame-tile.missed {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: var(--accent)
}

/* LB SEARCH */
.lb-search-row {
    margin-bottom: 16px
}

.lb-search-row input {
    width: 100%;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    transition: var(--transition)
}

.lb-search-row input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow)
}

.lb-search-results {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.lb-user-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease
}

.lb-user-result:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.06)
}

.lb-user-result span {
    font-weight: 700;
    font-size: 14px
}

.lb-score-bar-wrap {
    width: 80px;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--accent-rgb), 0.1);
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px
}
.lb-score-bar {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1)
}
.lb-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    font-size: 12px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid var(--glass-border);
    flex-shrink: 0
}
.lb-avatar img { width: 100%; height: 100%; object-fit: cover }
.lb-your-rank {
    text-align: center;
    padding: 12px;
    margin-top: 12px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    color: var(--accent)
}

/* CLICKABLE USER IN TABLE */
.lb-table .user-link {
    cursor: pointer;
    transition: color 0.2s;
    font-weight: 600
}

.lb-table .user-link:hover {
    color: var(--accent)
}
.lb-user-cell {
    display: flex;
    align-items: center;
    gap: 8px
}
.lb-row-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    flex-shrink: 0
}
.rank-1 .lb-row-avatar { border-color: #fbbf24 }
.rank-2 .lb-row-avatar { border-color: #c0c0c0 }
.rank-3 .lb-row-avatar { border-color: #cd7f32 }

/* PROFILE BANNER */
.prof-panel-full {
    max-width: 700px;
    padding: 0;
    overflow: hidden
}

.prof-banner {
    height: 160px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    background-size: cover;
    background-position: center
}

.prof-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s
}

.prof-banner:hover .prof-banner-overlay {
    opacity: 1
}

.banner-picker {
    padding: 16px 24px;
    background: var(--surface-2)
}

.banner-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
}

.banner-preset {
    height: 50px;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease
}

.banner-preset:hover {
    transform: scale(1.05);
    border-color: #fff
}

.banner-preset.selected {
    border-color: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3)
}
.banner-upload-row {
    margin-top: 10px;
    text-align: center
}
.banner-upload-label {
    cursor: pointer;
    display: inline-block;
    padding: 8px 18px;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px dashed rgba(var(--accent-rgb), 0.4);
    border-radius: 10px;
    color: var(--accent);
    font-weight: 600;
    transition: all 0.3s ease
}
.banner-upload-label:hover {
    background: rgba(var(--accent-rgb), 0.25);
    border-color: var(--accent)
}

.prof-header {
    display: flex;
    gap: 24px;
    padding: 0 30px;
    margin-top: -40px;
    position: relative;
    z-index: 2;
    flex-wrap: wrap
}

.prof-info-edit {
    flex: 1;
    min-width: 250px;
    padding-top: 50px
}

.prof-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 14px
}

.prof-badges-section {
    padding: 20px 30px;
}
.prof-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
.prof-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    transition: all 0.3s ease;
}
.prof-badge:hover {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.3);
    transform: translateY(-2px);
}
.prof-badge-icon {
    width: 22px;
    height: 22px;
    color: var(--accent);
    flex-shrink: 0
}
.prof-badge-icon svg {
    width: 100%;
    height: 100%
}
.prof-badge-info {
    display: flex;
    flex-direction: column;
}
.prof-badge-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
}
.prof-badge-desc {
    font-size: 10px;
    color: var(--text-dim);
}
.prof-badge.locked {
    opacity: 0.35;
    filter: grayscale(1);
}
.prof-badge.locked .prof-badge-icon {
    filter: brightness(0.5);
}

/* ========== ANIMATED BADGE EFFECTS ========== */
.badge-shimmer {
    position: relative;
    overflow: hidden;
}
.badge-shimmer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    animation: badgeShimmer 3s ease-in-out infinite;
}
@keyframes badgeShimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.badge-glow {
    animation: badgeGlow 2s ease-in-out infinite alternate;
}
@keyframes badgeGlow {
    0% { box-shadow: 0 0 5px var(--accent), 0 0 10px transparent; }
    100% { box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 30px rgba(var(--accent-rgb), 0.3); }
}

.badge-rainbow {
    background-size: 400% 400%;
    animation: badgeRainbow 4s linear infinite;
    border: 2px solid transparent;
    background-image: linear-gradient(var(--glass), var(--glass)), linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #0077ff, #8800ff, #ff0000);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
@keyframes badgeRainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.prof-stats-section {
    padding: 20px 30px
}

.prof-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px
}

.prof-stat-card {
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative
}
.prof-stat-rank {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-dim);
    background: rgba(var(--accent-rgb), 0.1);
    padding: 3px 8px;
    border-radius: 8px;
    font-family: var(--font)
}
.prof-stat-rank.rank-top {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.2)
}

.prof-stat-card:hover {
    border-color: rgba(var(--accent-rgb), 0.2);
    transform: translateY(-2px)
}

.prof-stat-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 6px;
    color: var(--accent)
}
.prof-stat-icon svg {
    width: 100%;
    height: 100%
}

.prof-stat-value {
    font-size: 20px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.prof-stat-label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px
}

.prof-save-btn {
    margin: 20px auto;
    width: calc(100% - 60px);
    display: block
}

.prof-msg {
    margin: 0 30px 20px;
    text-align: center;
    font-size: 13px
}

/* PROFILE VIEW ACTIONS (viewing other user) */
.prof-view-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 15px 30px 5px;
    flex-wrap: wrap
}
.prof-name-view {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0
}
.prof-bio-view {
    font-size: 13px;
    color: var(--text-dim);
    margin: 4px 0 0;
    white-space: pre-wrap;
    word-break: break-word
}
.viewing-other .prof-banner-overlay { display: none }
.viewing-other .prof-save-btn { display: none }
.viewing-other .prof-info-edit label { display: none }

/* PROFILE VIEW MODAL */
.profile-view-modal {
    max-width: 500px;
    padding: 0;
    overflow: hidden;
    text-align: left
}

.modal-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 22px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s
}

.modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1)
}

.pv-banner {
    height: 130px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center
}

.pv-body {
    padding: 0 28px 28px;
    text-align: center
}

.pv-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 3px solid var(--glass-border);
    margin: -40px auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    overflow: hidden
}

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

.pv-body h2 {
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--text), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.pv-bio {
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 18px
}

.pv-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 18px
}

.pv-stat {
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 10px;
    text-align: center
}

.pv-stat-value {
    font-size: 16px;
    font-weight: 900;
    color: var(--accent)
}

.pv-stat-label {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 700;
    text-transform: uppercase
}

.pv-actions {
    display: flex;
    gap: 10px;
    justify-content: center
}

/* PROFILE LAYOUT */
.prof-wrapper {
    max-width: 800px
}

.prof-layout {
    display: flex;
    gap: 30px;
    flex-wrap: wrap
}

.prof-left {
    flex: 1;
    min-width: 250px;
    text-align: center
}

.prof-pic-container {
    display: flex;
    flex-direction: column;
    align-items: center
}

.prof-pic-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 3px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    overflow: hidden
}

.prof-pic-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.prof-upload-label {
    display: inline-block;
    margin-top: 16px;
    cursor: pointer
}

.prof-right {
    flex: 2;
    min-width: 300px
}

.prof-textarea {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
    resize: vertical;
    min-height: 90px
}

.prof-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow)
}

.prof-save-btn {
    margin-top: 20px;
    width: 100%
}

.prof-msg {
    margin-top: 16px;
    text-align: center;
    font-size: 13px
}

/* TYPING TEST */
.typing-header {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.typing-display {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 28px 32px;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: 0.3px;
    user-select: none;
    backdrop-filter: var(--glass-filter);
    min-height: 120px
}

.typing-display .char {
    transition: color 0.05s ease
}

.typing-display .char.correct {
    color: var(--green)
}

.typing-display .char.incorrect {
    color: var(--red);
    text-decoration: underline
}

.typing-display .char.current {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 2px
}

.typing-display .char.pending {
    color: var(--text-dim)
}

.typing-input {
    width: 100%;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-family: var(--font);
    font-size: 16px;
    outline: none;
    transition: var(--transition);
    resize: none;
    min-height: 60px
}

.typing-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow)
}

/* HAMBURGER */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 101
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.3s ease
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px)
}

.hamburger.active span:nth-child(2) {
    opacity: 0
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px)
}

/* NAVBAR SCROLL SHADOW */
#navbar.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--accent-rgb), 0.05)
}

/* SCORE BADGE */
.score-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 8px;
    animation: badgePop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

@keyframes badgePop {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

.badge-insane { background: rgba(34, 197, 94, 0.15); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3) }
.badge-fast { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3) }
.badge-average { background: rgba(var(--accent-rgb), 0.15); color: var(--accent); border: 1px solid rgba(var(--accent-rgb), 0.3) }
.badge-slow { background: rgba(248, 113, 113, 0.15); color: #f87171; border: 1px solid rgba(248, 113, 113, 0.3) }

/* ANIMATED COUNTER */
.count-up {
    font-variant-numeric: tabular-nums
}

/* PARTICLE BURST */
.click-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: particleBurst 0.6s ease-out forwards
}

@keyframes particleBurst {
    0% { transform: translate(0, 0) scale(1); opacity: 1 }
    100% { opacity: 0 }
}

/* SEQUENCE MEMORY */
.seqgame-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 300px;
    margin: 0 auto;
    width: 100%
}

.seq-tile {
    aspect-ratio: 1;
    border-radius: 12px;
    background: var(--surface-2);
    border: 2px solid var(--glass-border);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none
}

.seq-tile:hover { border-color: rgba(var(--accent-rgb), 0.3) }
.seq-tile.seq-flash {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
    transform: scale(1.05)
}
.seq-tile.seq-correct {
    background: linear-gradient(135deg, var(--green), #16a34a);
    border-color: var(--green)
}
.seq-tile.seq-wrong {
    background: linear-gradient(135deg, var(--red), #dc2626);
    border-color: var(--red)
}

.seq-hint {
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    margin-top: 16px;
    animation: pulse 1.5s ease-in-out infinite
}

/* SETTINGS PANEL */
.settings-toggle {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent)));
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px var(--accent-glow), 0 0 0 0 var(--accent-glow);
    animation: settingsPulse 3s ease-in-out infinite;
}
@keyframes settingsPulse {
    0%, 100% { box-shadow: 0 4px 20px var(--accent-glow), 0 0 0 0 rgba(var(--accent-rgb),0.3); }
    50% { box-shadow: 0 4px 20px var(--accent-glow), 0 0 0 8px rgba(var(--accent-rgb),0); }
}

.settings-toggle:hover {
    transform: translateY(-50%) rotate(90deg) scale(1.15);
    box-shadow: 0 4px 28px var(--accent-glow);
    animation: none;
}

.settings-panel {
    position: fixed;
    right: -320px;
    top: 0;
    width: 300px;
    height: 100vh;
    z-index: 300;
    background: linear-gradient(180deg, rgba(12, 12, 22, 0.98), rgba(6, 6, 12, 0.99));
    border-left: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-filter);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4)
}

.settings-panel.open { right: 0 }

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border)
}

.settings-header h3 {
    font-size: 16px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.settings-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s
}

.settings-close:hover { color: var(--text); transform: scale(1.2) }

.settings-body {
    padding: 20px 24px;
    max-height: calc(100vh - 120px);
    overflow-y: auto
}

.setting-group {
    margin-bottom: 24px
}

.setting-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px
}

.setting-row {
    display: flex;
    align-items: center;
    gap: 12px
}

.setting-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.15);
    outline: none
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent-glow);
    transition: all 0.2s
}

.setting-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 16px var(--accent-glow)
}

.setting-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    min-width: 32px;
    text-align: right
}

.setting-label-sm {
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600
}

/* ========== FPS COUNTER ========== */
.fps-counter {
    position: absolute;
    top: -22px;
    left: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--green);
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(6, 6, 12, 0.7);
    pointer-events: none;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.fps-counter.hidden { display: none; }
.fps-counter #fps-value {
    min-width: 18px;
    display: inline-block;
    text-align: right;
}
.fps-counter.fps-warn #fps-value { color: var(--yellow, #fbbf24); }
.fps-counter.fps-bad #fps-value { color: var(--red); }

.color-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
}

.color-dot {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    max-width: 36px
}

.color-dot:hover { transform: scale(1.15); border-color: rgba(255, 255, 255, 0.3) }
.color-dot.selected { border-color: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) }

/* TOGGLE SWITCH */
.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0
}

.toggle-switch input { opacity: 0; width: 0; height: 0 }

.toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--glass-border)
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-dim);
    left: 2px;
    top: 2px;
    transition: all 0.3s ease
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent)
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: #fff
}

/* REDUCED MOTION */
.reduced-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important
}

/* Particle Size Setting */
.setting-row-inline {
    display: flex;
    align-items: center;
    gap: 10px
}

/* MID SCREENS - compact nav */
@media(max-width:1100px) {
    .nav-link { font-size: 0; padding: 6px 10px }
    .nav-link .nav-icon { width: 18px; height: 18px; margin-right: 0 }
    .nav-brand { font-size: 15px }
    .nav-xp-wrapper { gap: 4px; margin-right: 4px }
    .nav-xp-bar { width: 40px }
    .nav-xp-text { display: none }
    .nav-coins-wrapper { margin-right: 4px }
    #navbar { padding: 0 20px }
}

/* RESPONSIVE */
@media(max-width:768px) {
    .hamburger {
        display: flex
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        transform: none;
        background: rgba(6, 6, 12, 0.95);
        backdrop-filter: var(--glass-filter);
        flex-direction: column;
        padding: 16px;
        border-bottom: 1px solid var(--glass-border);
        gap: 4px
    }

    .nav-links.open {
        display: flex
    }

    .nav-link {
        font-size: 12px;
        padding: 7px 10px
    }

    .nav-link .nav-icon {
        width: 16px;
        height: 16px;
        margin-right: 6px
    }

    .nav-user {
        gap: 6px
    }

    #admin-link {
        font-size: 11px;
        padding: 5px 10px
    }

    #nav-username {
        display: none
    }
}

@media(max-width:600px) {
    #navbar {
        padding: 0 14px;
        height: 56px
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px
    }

    .memory-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px
    }

    .mem-card {
        font-size: 20px
    }

    .hero-title {
        letter-spacing: -1.5px
    }

    .duel-vs {
        gap: 12px;
        flex-direction: column
    }

    .clash-container {
        gap: 12px
    }

    .clash-avatar {
        width: 60px;
        height: 60px;
        font-size: 28px
    }

    .clash-vs {
        font-size: 32px
    }

    .clash-name {
        font-size: 15px
    }

    .prof-layout {
        flex-direction: column
    }

    .prof-left,
    .prof-right {
        min-width: unset
    }

    .typing-display {
        font-size: 15px;
        padding: 20px
    }

    .lb-tabs {
        flex-wrap: wrap
    }

    .settings-toggle {
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 16px
    }

    .settings-panel {
        width: 260px
    }
}

/* ========== PARTICLE STYLE BUTTONS ========== */
.style-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font)
}

.style-btn:hover {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.25);
    color: var(--text)
}

.style-btn.active {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.15)
}

.style-icon {
    font-size: 18px;
    line-height: 1
}

.style-name {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px
}

/* ========== CUSTOM COLOR PICKER ========== */
.color-picker-input {
    width: 36px;
    height: 36px;
    border: 2px solid var(--glass-border);
    border-radius: 50%;
    cursor: pointer;
    background: none;
    padding: 0;
    overflow: hidden
}

.color-picker-input::-webkit-color-swatch-wrapper { padding: 0 }
.color-picker-input::-webkit-color-swatch { border: none; border-radius: 50% }
.color-picker-input::-moz-color-swatch { border: none; border-radius: 50% }

/* ========== BORDER GLOW MODE ========== */
.border-glow .card,
.border-glow .modal,
.border-glow .settings-panel {
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15), 0 0 60px rgba(var(--accent-rgb), 0.05);
    border-color: rgba(var(--accent-rgb), 0.3)
}

/* ========== NO TILT MODE ========== */
.no-tilt .card { transform: none !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important }
.no-tilt .card:hover { transform: translateY(-6px) !important }

/* ========== LOFI RADIO PLAYER ========== */
.radio-player {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 16px;
    background: var(--glass);
    backdrop-filter: var(--glass-filter);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    opacity: 0.85
}
.radio-player:hover { opacity: 1; border-color: rgba(var(--accent-rgb), 0.3) }

.radio-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.1));
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0
}
.radio-toggle:hover { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.5), rgba(var(--accent-rgb), 0.2)); transform: scale(1.1) }
.radio-toggle.playing { background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.4)) }

.radio-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 70px;
    position: relative
}
.radio-station-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0
}
.radio-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: var(--font)
}
.radio-station-btn:hover .radio-label { color: var(--text) }
.radio-station-btn svg { color: var(--text-dim); flex-shrink: 0 }
.radio-station-dropdown {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 240px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4)
}
.radio-station-item {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: var(--font)
}
.radio-station-item:hover {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--text)
}
.radio-station-item.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08)
}
.radio-station-sep {
    height: 1px;
    background: rgba(var(--accent-rgb), 0.15);
    margin: 4px 10px
}
.radio-station-custom {
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease
}
.radio-station-custom.active .radio-custom-label {
    color: var(--accent)
}
.radio-custom-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    font-family: var(--font);
    width: 100%;
    margin-bottom: 2px
}
.radio-custom-input {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 11px;
    color: var(--text);
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s
}
.radio-custom-input:focus {
    border-color: var(--accent)
}
.radio-custom-input::placeholder {
    color: var(--text-dim);
    opacity: 0.5
}
.radio-custom-play {
    background: var(--accent);
    border: none;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
    flex-shrink: 0
}
.radio-custom-play:hover {
    opacity: 0.8
}

/* External player widgets (Spotify / Deezer) */
.radio-external-widget {
    position: fixed;
    bottom: 60px;
    right: 16px;
    width: 320px;
    z-index: 9999;
    border-radius: 12px;
    overflow: hidden;
    background: #181818;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: rewSlideUp 0.25s ease;
    transition: opacity 0.2s
}
.radio-external-widget.hidden {
    display: none
}
@keyframes rewSlideUp {
    from { opacity: 0; transform: translateY(12px) }
    to { opacity: 1; transform: translateY(0) }
}
.rew-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    cursor: move;
    user-select: none
}
.rew-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    font-family: var(--font)
}
.rew-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s
}
.rew-close:hover {
    color: #fff
}
@media (max-width: 500px) {
    .radio-external-widget {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 70px
    }
}

.radio-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px
}
.radio-visualizer .bar {
    width: 3px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    transition: height 0.15s ease
}
.radio-visualizer.active .bar {
    animation: radioBar 0.6s ease-in-out infinite alternate
}
.radio-visualizer.active .bar:nth-child(1) { animation-delay: 0s }
.radio-visualizer.active .bar:nth-child(2) { animation-delay: 0.12s }
.radio-visualizer.active .bar:nth-child(3) { animation-delay: 0.24s }
.radio-visualizer.active .bar:nth-child(4) { animation-delay: 0.08s }
.radio-visualizer.active .bar:nth-child(5) { animation-delay: 0.2s }
@keyframes radioBar {
    0% { height: 3px }
    100% { height: 14px }
}

.radio-volume {
    display: flex;
    align-items: center;
    gap: 6px
}
.radio-vol-icon {
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    opacity: 0.7;
    transition: opacity 0.2s
}
.radio-vol-icon:hover { opacity: 1 }
.radio-slider {
    -webkit-appearance: none;
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--accent-rgb), 0.2);
    outline: none
}
.radio-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
    transition: transform 0.2s
}
.radio-slider::-webkit-slider-thumb:hover { transform: scale(1.2) }

@media(max-width:600px){
    .radio-player { left: 12px; padding: 8px 12px; gap: 8px }
    .radio-slider { width: 50px }
    .radio-label { font-size: 10px }
}

/* ========== CPS CLICK FLASH (#28) ========== */
.cps-flash {
    position: absolute;
    inset: 0;
    background: rgba(var(--accent-rgb), 0.15);
    border-radius: inherit;
    pointer-events: none;
    animation: cpsFlash 0.15s ease-out forwards
}

@keyframes cpsFlash {
    from { opacity: 1 } to { opacity: 0 }
}

/* ========== SKELETON LOADER (#29) ========== */
.skeleton {
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.05) 25%, rgba(var(--accent-rgb), 0.12) 50%, rgba(var(--accent-rgb), 0.05) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease infinite;
    border-radius: 8px;
    min-height: 20px
}

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

.skeleton-row { display: flex; gap: 12px; margin-bottom: 12px }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50% }
.skeleton-line { flex: 1; height: 16px }
.skeleton-line.short { max-width: 60% }

/* ========== SETTINGS GEAR SPIN ON OPEN (#30) ========== */
.settings-toggle.open {
    transform: translateY(-50%) rotate(180deg) scale(1.1);
    border-color: var(--accent);
    box-shadow: 0 4px 24px var(--accent-glow)
}

/* ========== NUMBER MEMORY TIMER URGENCY (#33) ========== */
.num-timer-bar.urgent {
    background: linear-gradient(90deg, var(--red), var(--orange)) !important
}

/* ========== AUTH MODAL TRANSITION (#34) ========== */
#auth-username {
    transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
    overflow: hidden
}

#auth-username.hidden {
    max-height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important
}

/* ========== HEARTS FOR VISUAL MEMORY LIVES (#18) ========== */
.vis-lives { display: flex; gap: 4px; align-items: center; justify-content: center; margin: 10px 0 }

.vis-heart {
    font-size: 20px;
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.5))
}

.vis-heart.lost {
    opacity: 0.2;
    transform: scale(0.7);
    filter: none
}

/* ========== COLOR BLIND MODE (#50) ========== */
.color-blind .vis-tile.vis-active { background: #2563eb !important; border-color: #3b82f6 !important }
.color-blind .vis-tile.vis-wrong { background: #ea580c !important; border-color: #f97316 !important }
.color-blind .vis-tile.vis-correct { background: #2563eb !important; border-color: #3b82f6 !important }
.color-blind .seq-tile.seq-flash { background: #2563eb !important; border-color: #3b82f6 !important }
.color-blind .seq-tile.seq-wrong { background: #ea580c !important; border-color: #f97316 !important }
.color-blind .seq-tile.seq-correct { background: #2563eb !important; border-color: #3b82f6 !important }
.color-blind .mem-card.matched .mem-card-back { border-color: #2563eb !important }

/* ========== MOBILE BOTTOM SHEET FOR SETTINGS (#52) ========== */
@media (max-width: 768px) {
    .settings-panel {
        right: 0 !important;
        left: 0;
        top: auto;
        bottom: -100%;
        width: 100%;
        height: 70vh;
        border-left: none;
        border-top: 1px solid var(--glass-border);
        border-radius: 20px 20px 0 0;
        transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1)
    }

    .settings-panel.open {
        bottom: 0
    }

    .settings-toggle {
        right: 16px;
        bottom: 132px;
        top: auto;
        transform: none
    }

    .settings-toggle:hover { transform: rotate(90deg) scale(1.1) }
    .settings-toggle.open { transform: rotate(180deg) scale(1.1) }
}

/* ========== TYPING CURSOR BLINK (#16) ========== */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--accent);
    vertical-align: text-bottom;
    animation: cursorBlink 1s step-end infinite;
    margin-left: -1px
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1 }
    50% { opacity: 0 }
}

.typing-word-active {
    background: rgba(var(--accent-rgb), 0.08);
    border-radius: 3px;
    padding: 1px 0
}

.typing-char-correct { color: var(--green) }
.typing-char-wrong { color: var(--red); text-decoration: underline }
.typing-char-pending { color: var(--text-dim) }

/* ========== PERSONAL BEST BADGE ON CARDS (#12) ========== */
.card-pb {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    opacity: 0.7;
    letter-spacing: 0.3px
}

/* ========== SEQUENCE PROGRESS INDICATOR (#22) ========== */
.seq-progress {
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: 0.5px
}

/* ========== SEQUENCE TILES NO POINTER DURING PLAYBACK ========== */
.seq-grid.seq-locked .seq-tile {
    pointer-events: none;
    opacity: 0.85
}

/* ========== LEAVE GAME MODAL ========== */
.leave-game-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: fadeIn 0.2s ease
}
.leave-game-inner {
    background: var(--card-bg, #1a1a2e);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 16px;
    padding: 28px 32px;
    text-align: center;
    max-width: 340px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4)
}
.leave-game-icon {
    font-size: 36px;
    margin-bottom: 12px;
    color: var(--orange, #f59e0b)
}
.leave-game-inner h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text)
}
.leave-game-inner p {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 20px;
    line-height: 1.5
}
.leave-game-btns {
    display: flex;
    gap: 10px;
    justify-content: center
}
.leave-game-btns .btn-sm {
    flex: 1;
    padding: 10px 0;
    font-weight: 700
}
.leave-game-danger {
    flex: 1;
    padding: 10px 0 !important;
    background: var(--red, #ef4444) !important;
    border-color: var(--red, #ef4444) !important;
    color: #fff !important;
    font-weight: 700
}
.leave-game-danger:hover {
    filter: brightness(1.15)
}
.leave-game-modal.ranked .leave-game-icon {
    color: var(--red, #ef4444)
}

/* ========== BACK BUTTON ON GAME PAGES (#24) ========== */
.back-to-home {
    position: sticky;
    top: 80px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.25), rgba(var(--accent-rgb), 0.12));
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    padding: 10px 20px;
    border-radius: 12px;
    transition: all 0.25s ease;
    margin-bottom: 16px;
    font-family: var(--font);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.15)
}

.back-to-home:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.4), rgba(var(--accent-rgb), 0.2));
    border-color: rgba(var(--accent-rgb), 0.6);
    transform: translateX(-3px);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.2)
}

.back-to-home:active {
    transform: translateX(-1px) scale(0.97)
}

/* ========== AIM COUNTDOWN OVERLAY (#25) ========== */
.aim-countdown {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 72px;
    font-weight: 900;
    color: var(--accent);
    z-index: 10;
    background: rgba(0,0,0,0.4);
    border-radius: inherit;
    animation: countdownPop 0.4s ease;
    text-shadow: 0 0 30px var(--accent-glow)
}

@keyframes countdownPop {
    from { transform: scale(2); opacity: 0 }
    to { transform: scale(1); opacity: 1 }
}

/* ========== PERSONAL BEST CELEBRATION (#36) ========== */
.pb-banner {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), 0.8));
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    padding: 12px 28px;
    border-radius: 50px;
    z-index: 500;
    box-shadow: 0 8px 32px var(--accent-glow);
    animation: pbSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: none;
    letter-spacing: 0.5px
}

@keyframes pbSlideIn {
    from { transform: translateX(-50%) translateY(-40px) scale(0.8); opacity: 0 }
    to { transform: translateX(-50%) translateY(0) scale(1); opacity: 1 }
}

/* ========== GAME COUNTDOWN OVERLAY ========== */
.game-countdown-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: var(--glass-filter)
}

.game-countdown-num {
    font-size: 120px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 40px var(--accent-glow), 0 0 80px var(--accent-glow);
    animation: countdownPop 0.7s ease-out forwards
}

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

/* ========== PRACTICE MODE ========== */
.practice-toggle {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s
}

.practice-toggle.active {
    background: #f59e0b;
    color: #000;
    border-color: #f59e0b;
    font-weight: 600
}

/* practice-watermark: see later definition */

/* ========== FOCUS VISIBLE STYLES ========== */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px
}

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

/* ========== NUMBER MEMORY DIGIT GROUPING ========== */
.num-display-grouped { letter-spacing: 2px; word-spacing: 12px }

/* ========== SPARKLINE FOR HISTORY ========== */
.sparkline-wrap { display: inline-flex; align-items: flex-end; gap: 2px; height: 24px; margin-left: 8px; vertical-align: middle }

.sparkline-bar {
    width: 4px;
    border-radius: 2px;
    background: var(--accent);
    transition: height 0.3s ease;
    min-height: 3px
}

.sparkline-bar.best { background: var(--green) }
.sparkline-bar.worst { background: var(--red) }

/* ========== DROPDOWN CLICK-BASED FOR MOBILE (#35) ========== */
@media (max-width: 768px) {
    .nav-dropdown-menu {
        display: none !important
    }

    .nav-dropdown.open .nav-dropdown-menu {
        display: flex !important
    }
}

@media (max-width: 600px) {
    .lb-podium { gap: 8px; padding: 10px 0 }
    .podium-card { min-width: 90px; padding: 14px 10px }
    .podium-card.rank-1 { padding: 18px 14px }
    .podium-avatar { width: 36px; height: 36px }
    .podium-card.rank-1 .podium-avatar { width: 44px; height: 44px }
    .podium-score { font-size: 15px }
    .podium-card.rank-1 .podium-score { font-size: 18px }
}

/* ========== CUSTOM CURSOR ========== */
body.cursor-custom-active,
body.cursor-custom-active *,
body.cursor-custom-active a,
body.cursor-custom-active button,
body.cursor-custom-active input,
body.cursor-custom-active select,
body.cursor-custom-active textarea,
body.cursor-custom-active [role="button"],
body.cursor-custom-active .card,
body.cursor-custom-active .btn-sm,
body.cursor-custom-active .btn-primary,
body.cursor-custom-active .style-btn,
body.cursor-custom-active .nav-link,
body.cursor-custom-active .toggle-switch,
body.cursor-custom-active .color-dot { cursor: none !important }

.custom-cursor {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference
}
.cursor-dot {
    width: 8px; height: 8px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: -4px; left: -4px;
    transition: transform 0.1s ease
}
.cursor-ring {
    width: 36px; height: 36px;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    position: absolute;
    top: -18px; left: -18px;
    transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease, top 0.2s ease, left 0.2s ease, border-color 0.2s ease
}
.custom-cursor.hovering .cursor-ring {
    width: 50px; height: 50px;
    top: -25px; left: -25px;
    border-color: rgba(var(--accent-rgb), 0.8)
}
.custom-cursor.hovering .cursor-dot {
    transform: scale(0.5)
}
.custom-cursor.clicking .cursor-ring {
    transform: scale(0.8);
    border-color: var(--accent)
}

/* Cursor: Crosshair */
.custom-cursor.cursor-crosshair .cursor-dot { display: none }
.custom-cursor.cursor-crosshair .cursor-ring {
    width: 0; height: 0;
    border: none;
    top: 0; left: 0
}
.custom-cursor.cursor-crosshair::before,
.custom-cursor.cursor-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.7);
    transition: all 0.15s ease
}
.custom-cursor.cursor-crosshair::before {
    width: 1px; height: 24px;
    top: -12px; left: 0
}
.custom-cursor.cursor-crosshair::after {
    width: 24px; height: 1px;
    top: 0; left: -12px
}
.custom-cursor.cursor-crosshair.hovering::before { height: 32px; top: -16px; background: rgba(var(--accent-rgb), 0.9) }
.custom-cursor.cursor-crosshair.hovering::after { width: 32px; left: -16px; background: rgba(var(--accent-rgb), 0.9) }
.custom-cursor.cursor-crosshair.clicking::before,
.custom-cursor.cursor-crosshair.clicking::after { background: var(--accent) }

/* Cursor: Orb */
.custom-cursor.cursor-orb .cursor-dot {
    width: 20px; height: 20px;
    top: -10px; left: -10px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.6) 0%, rgba(var(--accent-rgb), 0.1) 60%, transparent 70%);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4), 0 0 30px rgba(var(--accent-rgb), 0.15)
}
.custom-cursor.cursor-orb .cursor-ring {
    width: 44px; height: 44px;
    top: -22px; left: -22px;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.1)
}
.custom-cursor.cursor-orb.hovering .cursor-dot {
    transform: scale(1.5);
    box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.6), 0 0 50px rgba(var(--accent-rgb), 0.2)
}
.custom-cursor.cursor-orb.hovering .cursor-ring {
    width: 56px; height: 56px;
    top: -28px; left: -28px;
    border-color: rgba(var(--accent-rgb), 0.4)
}
.custom-cursor.cursor-orb.clicking .cursor-dot { transform: scale(0.7) }

/* Cursor: Minimal */
.custom-cursor.cursor-minimal .cursor-ring { display: none }
.custom-cursor.cursor-minimal .cursor-dot {
    width: 6px; height: 6px;
    top: -3px; left: -3px;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5)
}
.custom-cursor.cursor-minimal.hovering .cursor-dot {
    transform: scale(2);
    background: rgba(var(--accent-rgb), 0.6)
}
.custom-cursor.cursor-minimal.clicking .cursor-dot { transform: scale(0.8) }

/* ========== CURSOR GLOW ========== */
.cursor-glow {
    position: fixed;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease
}

/* ========== CURSOR TRAIL ========== */
.trail-particle {
    position: fixed;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent);
    pointer-events: none;
    z-index: 99998;
    opacity: 0
}

/* ========== CLICK RIPPLE ========== */
.click-ripple {
    position: fixed;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.6);
    pointer-events: none;
    z-index: 99997;
    animation: rippleExpand 0.6s ease-out forwards
}
@keyframes rippleExpand {
    0% { width: 0; height: 0; opacity: 1; transform: translate(-50%, -50%) }
    100% { width: 150px; height: 150px; opacity: 0; transform: translate(-50%, -50%) }
}

/* ========== AURORA BACKGROUND ========== */
.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
    overflow: hidden
}
.aurora-bg.active { opacity: 1 }
.aurora-band {
    position: absolute;
    width: 200%;
    height: 40%;
    left: -50%;
    filter: blur(80px);
    opacity: 0.12;
    animation: auroraDrift 12s ease-in-out infinite alternate;
    will-change: transform;
    contain: layout style;
}
.aurora-band:nth-child(1) {
    top: -10%;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--accent-rgb), 0.6) 20%, rgba(52, 211, 153, 0.4) 40%, rgba(var(--accent-rgb), 0.5) 60%, transparent 80%);
    animation-duration: 14s
}
.aurora-band:nth-child(2) {
    top: 5%;
    background: linear-gradient(90deg, transparent 10%, rgba(56, 189, 248, 0.4) 30%, rgba(var(--accent-rgb), 0.5) 50%, rgba(167, 139, 250, 0.3) 70%, transparent 90%);
    animation-duration: 10s;
    animation-delay: -3s
}
.aurora-band:nth-child(3) {
    top: 15%;
    background: linear-gradient(90deg, transparent 5%, rgba(var(--accent-rgb), 0.3) 25%, rgba(52, 211, 153, 0.3) 50%, rgba(56, 189, 248, 0.3) 75%, transparent 95%);
    animation-duration: 16s;
    animation-delay: -7s
}
@keyframes auroraDrift {
    0% { transform: translateX(-15%) skewX(-5deg) }
    100% { transform: translateX(15%) skewX(5deg) }
}

/* ========== GRID WARP ========== */
#grid-warp {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
    contain: layout paint;
}

/* ========== IDLE ANIMATION ========== */
@keyframes idlePulse {
    0%, 100% { opacity: 0.85 }
    50% { opacity: 1 }
}

/* ========== ARCADE PIXEL FONT SPACING ========== */
.font-arcade { letter-spacing: 2px; word-spacing: 4px; font-size: 80%; line-height: 1.8 }
.font-arcade h1, .font-arcade .hero-title { letter-spacing: 4px; word-spacing: 6px; font-size: 2.5rem }
.font-arcade h2 { letter-spacing: 3px; font-size: 1.5rem }
.font-arcade h3 { letter-spacing: 2px; font-size: 1.1rem }
.font-arcade .card p, .font-arcade .text-glow { letter-spacing: 1px; line-height: 2; font-size: 0.7em }
.font-arcade .card h3 { letter-spacing: 2px; font-size: 0.85em }
.font-arcade .card-cta { letter-spacing: 2px; font-size: 0.75em }
.font-arcade .nav-link, .font-arcade .btn-primary, .font-arcade .btn-sm { letter-spacing: 1.5px; font-size: 0.75em }
.font-arcade .nav-brand { letter-spacing: 3px; font-size: 0.9em }
.font-arcade input, .font-arcade textarea, .font-arcade select { letter-spacing: 1px; font-size: 0.8em }
.font-arcade .hero-sub { letter-spacing: 2px; font-size: 0.8rem }
.font-arcade label, .font-arcade .setting-label-sm { letter-spacing: 1px; font-size: 0.65em }
.font-arcade .modal h2 { letter-spacing: 3px; font-size: 1.3rem }
.font-arcade .modal p, .font-arcade .modal input { letter-spacing: 1.5px; font-size: 0.8em }
/* Arcade font: settings panel fixes */
.font-arcade .settings-panel { font-size: 10px }
.font-arcade .settings-section-header { font-size: 10px; padding: 10px 12px; letter-spacing: 1px }
.font-arcade .setting-group label { font-size: 9px; letter-spacing: 0.5px }
.font-arcade .style-btn { font-size: 8px; padding: 6px 8px; letter-spacing: 0.5px }
.font-arcade .style-btn .style-name { font-size: 8px }
.font-arcade .style-btn .style-icon { font-size: 12px }
.font-arcade .setting-slider { height: 4px }
.font-arcade .setting-val { font-size: 9px }
.font-arcade .settings-body { gap: 4px }
.font-arcade .setting-group { margin-bottom: 8px }
.font-arcade .style-options { gap: 4px }
.font-arcade .color-dot { width: 22px; height: 22px }
.font-arcade .toggle-switch { transform: scale(0.85) }
.font-arcade .settings-panel .btn-sm { font-size: 9px; padding: 8px 10px; letter-spacing: 0.5px }
/* Arcade font: nav fixes */
.font-arcade .nav-link { font-size: 0; padding: 8px 12px; letter-spacing: 1px }
.font-arcade #nav-username { font-size: 9px }
.font-arcade .nav-avatar-img { width: 20px; height: 20px }
/* Arcade font: button overflow fix */
.font-arcade .btn-primary { font-size: 10px; padding: 12px; letter-spacing: 0.5px; white-space: nowrap }
.font-arcade .btn-sm { font-size: 9px; padding: 6px 10px }
.font-arcade .card-cta { font-size: 9px }
/* Arcade font: general overflow prevention */
.font-arcade .card { overflow: hidden }
.font-arcade .card h3 { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.font-arcade .card p { font-size: 9px }

@media (max-width: 768px) {
    .custom-cursor, .cursor-glow { display: none !important }
    body, a, button, input, select, textarea, .card { cursor: auto !important }
}

/* ========== COLLAPSIBLE SETTINGS SECTIONS ========== */
.settings-section {
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    border-radius: 12px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
    background: rgba(var(--accent-rgb), 0.02)
}
.settings-section:hover {
    border-color: rgba(var(--accent-rgb), 0.15)
}
.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
    transition: all 0.25s ease;
    user-select: none;
    border-left: 3px solid transparent
}
.settings-section-header:hover {
    background: rgba(var(--accent-rgb), 0.06);
    border-left-color: var(--accent)
}
.settings-section.open .settings-section-header {
    border-left-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.04)
}
.section-chevron {
    font-size: 10px;
    color: var(--text-dim);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)
}
.settings-section.open .section-chevron {
    transform: rotate(180deg)
}
.settings-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    padding: 0 16px
}
.settings-section.open .settings-section-content {
    max-height: 600px;
    overflow-y: auto;
    padding: 8px 16px 16px
}
.settings-section-content::-webkit-scrollbar {
    width: 4px
}
.settings-section-content::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.2);
    border-radius: 2px
}

/* ========== CRT SCANLINE OVERLAY ========== */
.crt-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    display: none;
    mix-blend-mode: multiply
}
.crt-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.06) 0px,
        rgba(0, 0, 0, 0.06) 1px,
        transparent 1px,
        transparent 3px
    )
}
.crt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.15) 100%);
    animation: crtFlicker 3s infinite alternate
}
body.crt-active .crt-overlay {
    display: block
}
@keyframes crtFlicker {
    0% { opacity: 0.97 }
    100% { opacity: 1 }
}

/* ========== HOLOGRAPHIC CARD EFFECT ========== */
body.holo-cards .card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        var(--holo-angle, 135deg),
        rgba(255, 0, 0, 0.08),
        rgba(255, 127, 0, 0.08),
        rgba(255, 255, 0, 0.08),
        rgba(0, 255, 0, 0.08),
        rgba(0, 127, 255, 0.08),
        rgba(139, 0, 255, 0.08),
        rgba(255, 0, 127, 0.08)
    );
    mix-blend-mode: color-dodge;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2
}
body.holo-cards .card:hover::after {
    opacity: 1;
    animation: holoShift 3s ease-in-out infinite
}
@keyframes holoShift {
    0% { --holo-angle: 135deg; filter: hue-rotate(0deg) }
    25% { filter: hue-rotate(90deg) }
    50% { --holo-angle: 315deg; filter: hue-rotate(180deg) }
    75% { filter: hue-rotate(270deg) }
    100% { --holo-angle: 135deg; filter: hue-rotate(360deg) }
}
body.holo-cards .card:hover {
    box-shadow:
        0 12px 40px rgba(var(--accent-rgb), 0.25),
        0 0 80px rgba(var(--accent-rgb), 0.1),
        0 0 30px rgba(255, 100, 200, 0.08),
        0 0 60px rgba(100, 200, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2)
}
/* Holographic shimmer */
body.holo-cards .card::before {
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, 0.15),
        rgba(var(--accent-rgb), 0.1) 30%,
        transparent 60%
    )
}

/* ========== GLITCH TEXT EFFECT ========== */
body.text-glitch .hero-title,
body.text-glitch .nav-brand {
    position: relative;
    animation: glitchText 2.5s infinite linear alternate-reverse
}
body.text-glitch .hero-title::before,
body.text-glitch .hero-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}
body.text-glitch .hero-title::before {
    color: #ff0040;
    animation: glitchBefore 3s infinite linear alternate-reverse;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-text-stroke: 0
}
body.text-glitch .hero-title::after {
    color: #00ffff;
    animation: glitchAfter 2s infinite linear alternate-reverse;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-text-stroke: 0
}
@keyframes glitchText {
    0%, 90%, 100% { transform: none; opacity: 1 }
    91% { transform: skewX(-2deg) translateX(-2px) }
    93% { transform: skewX(1deg) translateX(1px) }
    95% { transform: skewX(-1deg) translateX(-1px) }
}
@keyframes glitchBefore {
    0%, 80% { transform: none }
    81% { transform: translateX(-3px) }
    83% { transform: translateX(2px) }
    85% { transform: translateX(-1px) }
    87%, 100% { transform: none }
}
@keyframes glitchAfter {
    0%, 85% { transform: none }
    86% { transform: translateX(3px) }
    88% { transform: translateX(-2px) }
    90% { transform: translateX(1px) }
    92%, 100% { transform: none }
}

/* ========== GLOW TEXT EFFECT ========== */
body.text-glow-fx .hero-title,
body.text-glow-fx .nav-brand {
    animation: textGlowPulse 3s ease-in-out infinite
}
@keyframes textGlowPulse {
    0%, 100% {
        text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3),
                     0 0 20px rgba(var(--accent-rgb), 0.15),
                     0 0 40px rgba(var(--accent-rgb), 0.08);
        filter: brightness(1)
    }
    50% {
        text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6),
                     0 0 40px rgba(var(--accent-rgb), 0.3),
                     0 0 80px rgba(var(--accent-rgb), 0.15),
                     0 0 120px rgba(var(--accent-rgb), 0.06);
        filter: brightness(1.15)
    }
}

/* ========== WAVE TEXT EFFECT ========== */
body.text-wave .hero-title {
    display: inline-block;
    animation: textWave 4s ease-in-out infinite
}
@keyframes textWave {
    0%, 100% { transform: translateY(0) skewY(0deg) }
    25% { transform: translateY(-4px) skewY(-0.5deg) }
    50% { transform: translateY(0) skewY(0deg) }
    75% { transform: translateY(4px) skewY(0.5deg) }
}

/* ========== VANTA / FLUID BACKGROUND CONTAINERS ========== */
#vanta-bg {
    position: fixed;
    inset: 0;
    z-index: -1
}
#fluid-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    contain: layout paint
}

/* ========== ENHANCED MESH GRADIENT (animated blobs) ========== */
body.bg-mesh-animated .mesh-blob {
    animation-duration: 12s !important;
    opacity: 0.6 !important;
    filter: blur(60px) !important
}
body.bg-mesh-animated .mesh-blob:nth-child(1) {
    animation-name: meshDrift1;
    width: 700px; height: 700px
}
body.bg-mesh-animated .mesh-blob:nth-child(2) {
    animation-name: meshDrift2;
    width: 600px; height: 600px
}
body.bg-mesh-animated .mesh-blob:nth-child(3) {
    animation-name: meshDrift3;
    width: 500px; height: 500px
}
@keyframes meshDrift1 {
    0% { transform: translate(0, 0) scale(1); background: var(--accent) }
    25% { transform: translate(100px, -50px) scale(1.2); background: #f472b6 }
    50% { transform: translate(-30px, 80px) scale(0.9); background: #38bdf8 }
    75% { transform: translate(60px, 30px) scale(1.1); background: #fbbf24 }
    100% { transform: translate(0, 0) scale(1); background: var(--accent) }
}
@keyframes meshDrift2 {
    0% { transform: translate(0, 0) scale(1); background: rgba(var(--accent-rgb), 0.6) }
    33% { transform: translate(-80px, 60px) scale(1.15); background: #a78bfa }
    66% { transform: translate(50px, -40px) scale(0.85); background: #34d399 }
    100% { transform: translate(0, 0) scale(1); background: rgba(var(--accent-rgb), 0.6) }
}
@keyframes meshDrift3 {
    0% { transform: translate(0, 0) scale(1); background: rgba(var(--accent-rgb), 0.5) }
    50% { transform: translate(70px, 70px) scale(1.25); background: #f87171 }
    100% { transform: translate(0, 0) scale(1); background: rgba(var(--accent-rgb), 0.5) }
}

/* ========== GSAP SCROLL ANIMATIONS ========== */
.gsap-fade-up {
    opacity: 0;
    transform: translateY(30px)
}
.gsap-fade-up.gsap-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease
}

/* ========== ENHANCED RADIO VISUALIZER ========== */
.radio-visualizer.enhanced {
    gap: 2px
}
.radio-visualizer.enhanced .radio-bar {
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(to top, var(--accent), rgba(var(--accent-rgb), 0.4));
    transition: height 0.1s ease
}

/* ========== FRIENDS SYSTEM ========== */

/* Navbar Search */
.nav-search-wrapper {
    position: relative;
    display: flex;
    align-items: center
}
.nav-search-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 6px;
    transition: all 0.25s ease;
    border-radius: 50%
}
.nav-search-btn:hover {
    color: var(--text);
    background: rgba(var(--accent-rgb), 0.1)
}
.nav-search-input {
    width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    outline: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px
}
.nav-search-wrapper.active .nav-search-input {
    width: 180px;
    padding: 8px 14px;
    background: var(--glass);
    border: 1px solid var(--glass-border)
}
.nav-search-wrapper.active .nav-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow)
}
.nav-search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 280px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow);
    backdrop-filter: var(--glass-filter);
    z-index: 200;
    padding: 8px
}
.nav-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease
}
.nav-search-item:hover {
    background: rgba(var(--accent-rgb), 0.1)
}
.nav-search-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--glass-border)
}
.nav-search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.nav-search-name {
    font-weight: 600;
    font-size: 13px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.nav-search-add {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: var(--font)
}
.nav-search-add:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--accent-glow)
}
.nav-search-add.added {
    background: var(--glass);
    color: var(--text-dim);
    cursor: default
}

/* Notification Bell */
.nav-notif-wrapper {
    position: relative
}
.nav-notif-btn {
    background: none;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 16px;
    transition: all 0.25s ease;
    position: relative
}
.nav-notif-btn:hover {
    color: var(--text);
    border-color: var(--accent);
    transform: scale(1.1)
}
.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    font-family: var(--font);
    animation: notifPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.5)
}
.notif-badge-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 5px;
    margin-left: 6px;
    font-family: var(--font)
}
@keyframes notifPop {
    from { transform: scale(0) }
    to { transform: scale(1) }
}
.nav-notif-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 320px;
    max-height: 400px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 20px var(--accent-glow);
    backdrop-filter: var(--glass-filter);
    z-index: 200
}
.notif-header {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 800;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center
}
.notif-clear-btn{background:none;border:none;color:var(--text-dim);font-size:11px;cursor:pointer;text-transform:none;letter-spacing:0;font-weight:600}
.notif-clear-btn:hover{color:var(--accent)}
.notif-tabs{display:flex;gap:2px;padding:8px 12px 4px;border-bottom:1px solid var(--border)}
.notif-tab{background:none;border:none;color:var(--text-dim);font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;transition:all .2s}
.notif-tab:hover{color:var(--accent)}
.notif-tab.active{background:rgba(var(--accent-rgb),0.15);color:var(--accent)}
.notif-time{font-size:10px;color:var(--text-dim);opacity:0.6;margin-top:2px}
.notif-list {
    padding: 8px;
    max-height: 350px;
    overflow-y: auto
}
.notif-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 13px;
    padding: 20px
}
.notif-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    transition: all 0.2s ease;
    margin-bottom: 4px
}
.notif-item:hover {
    background: rgba(var(--accent-rgb), 0.06)
}
.notif-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--glass-border)
}
.notif-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.notif-info {
    flex: 1;
    min-width: 0
}
.notif-name {
    font-weight: 700;
    font-size: 13px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.notif-text {
    font-size: 11px;
    color: var(--text-dim)
}
.notif-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0
}
.notif-accept {
    background: var(--green) !important;
    color: #fff !important;
    border: none !important;
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.2s ease;
    padding: 0 !important
}
.notif-accept:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.4)
}
.notif-reject {
    background: rgba(248, 113, 113, 0.15) !important;
    color: var(--red) !important;
    border: none !important;
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.2s ease;
    padding: 0 !important
}
.notif-reject:hover {
    transform: scale(1.15);
    background: rgba(248, 113, 113, 0.3) !important
}

/* Friends Page */
.friends-tabs {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 22px
}
.friends-tab.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 16px var(--accent-glow)
}
.friends-tab-content {
    min-height: 200px
}
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}
.friend-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    backdrop-filter: var(--glass-filter);
    transition: all 0.25s ease
}
.friend-card:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3)
}
.friend-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid var(--glass-border)
}
.friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.friend-info {
    flex: 1;
    min-width: 0
}
.friend-name {
    font-weight: 700;
    font-size: 15px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
.friend-status {
    font-size: 12px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 6px
}
.friend-status .online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5)
}
.friend-status .offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim)
}
.friend-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0
}
.friend-actions .btn-sm {
    white-space: nowrap
}
.friends-requests-section {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 20px;
    backdrop-filter: var(--glass-filter)
}
.request-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(var(--accent-rgb), 0.04);
    margin-bottom: 8px;
    transition: all 0.2s ease
}
.request-card:hover {
    background: rgba(var(--accent-rgb), 0.08)
}
.request-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--glass-border)
}
.request-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.request-info {
    flex: 1;
    min-width: 0
}
.request-name {
    font-weight: 700;
    font-size: 14px
}
.request-actions {
    display: flex;
    gap: 6px
}

/* Mobile responsive */
@media (max-width: 768px) {
    .nav-search-wrapper { display: none }
    .nav-notif-dropdown { width: calc(100vw - 32px); right: -60px }
    .friend-card { flex-wrap: wrap }
    .friend-actions { width: 100%; justify-content: flex-end }
}

/* ========== ROSACE DRAWING ========== */
.rosace-container {
    max-width: 900px;
    margin: 0 auto;
}
.rosace-header {
    text-align: center;
    margin-bottom: 20px;
}
.rosace-header h2 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 6px;
}
.rosace-sub {
    color: var(--text-dim);
    font-size: 14px;
}
.rosace-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    margin-bottom: 16px;
}
.rosace-tool-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.rosace-tool-group label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.rosace-sym-btns {
    display: flex;
    gap: 4px;
}
.rosace-sym-btn {
    width: 36px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.rosace-sym-btn:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}
.rosace-sym-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.rosace-slider {
    width: 80px;
}
.rosace-colors {
    display: flex;
    gap: 6px;
    align-items: center;
}
.rosace-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.rosace-color-dot:hover {
    transform: scale(1.15);
}
.rosace-color-dot.active {
    border-color: var(--text);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3);
}
.rosace-color-picker {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    background: none;
    -webkit-appearance: none;
    appearance: none;
}
.rosace-color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}
.rosace-color-picker::-webkit-color-swatch {
    border: 2px solid var(--glass-border);
    border-radius: 50%;
}
.rosace-actions {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto;
}
.rosace-action-btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--surface-2);
    border: 1px solid var(--glass-border);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s ease;
}
.rosace-action-btn:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}
.rosace-action-btn.active {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: var(--accent);
    color: var(--accent);
}
.rosace-save-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff;
    border: none;
}
.rosace-save-btn:hover {
    opacity: 0.9;
}
.rosace-canvas-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #0a0a14;
    border: 1px solid var(--glass-border);
    aspect-ratio: 1;
    max-height: calc(100vh - 280px);
    margin: 0 auto;
}
.rosace-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
.rosace-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
[data-theme="light"] .rosace-canvas-wrap {
    background: #f0f0f5;
}

@media (max-width: 768px) {
    .rosace-toolbar {
        gap: 10px;
        padding: 10px 12px;
    }
    .rosace-tool-group label {
        font-size: 9px;
    }
    .rosace-sym-btn {
        width: 30px;
        height: 28px;
        font-size: 11px;
    }
    .rosace-slider {
        width: 60px;
    }
    .rosace-color-dot {
        width: 20px;
        height: 20px;
    }
    .rosace-actions {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    .rosace-canvas-wrap {
        max-height: calc(100vh - 320px);
    }
}

/* ========== CHAT WIDGET ========== */
.chat-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1001;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px var(--accent-glow);
    transition: all 0.3s ease
}
.chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px var(--accent-glow)
}
.chat-unread {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red, #f87171);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px
}
.chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1002;
    width: 360px;
    height: 480px;
    border-radius: 16px;
    background: rgba(12, 12, 24, 0.92);
    backdrop-filter: var(--glass-filter);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: chatSlideUp 0.3s ease
}
@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(20px) }
    to { opacity: 1; transform: translateY(0) }
}
.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 0;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
    background: rgba(var(--accent-rgb), 0.05);
    flex-shrink: 0
}
.chat-tabs {
    display: flex;
    gap: 0;
    flex: 1
}
.chat-tab {
    flex: 1;
    padding: 10px 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease
}
.chat-tab:hover { color: var(--text) }
.chat-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent)
}
.chat-tab-mod {
    color: var(--orange) !important;
}
.chat-tab-mod.active {
    color: var(--orange) !important;
    border-bottom-color: var(--orange) !important;
}
.chat-mod-msg .chat-msg-body {
    border-left: 2px solid var(--accent);
    padding-left: 8px;
}
.chat-minimize {
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0
}
.chat-minimize:hover { color: var(--text); background: rgba(var(--accent-rgb), 0.1) }
.chat-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0
}
.chat-panel {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0
}
.chat-panel.active {
    display: flex
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.2) transparent
}
.chat-messages::-webkit-scrollbar { width: 4px }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.2); border-radius: 2px }
.chat-msg {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: chatMsgIn 0.2s ease
}
@keyframes chatMsgIn {
    from { opacity: 0; transform: translateY(6px) }
    to { opacity: 1; transform: translateY(0) }
}
.chat-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.15);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}
.chat-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.chat-msg-body {
    flex: 1;
    min-width: 0
}
.chat-msg-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 1px
}
.chat-msg-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer
}
.chat-msg-name:hover { text-decoration: underline }
.chat-msg-del {
    background: none;
    border: none;
    color: var(--text-dim);
    opacity: 0;
    padding: 2px;
    border-radius: 4px;
    transition: all 0.15s ease;
    line-height: 0
}
.chat-msg:hover .chat-msg-del { opacity: 0.6 }
.chat-msg-del:hover { opacity: 1 !important; color: var(--red, #f87171); background: rgba(248,113,113,0.1) }
.chat-msg-text {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word
}
.chat-msg-time {
    font-size: 9px;
    color: var(--text-dim);
    opacity: 0.5;
    margin-top: 2px
}
.chat-msg.me .chat-msg-name { color: var(--green, #34d399) }
.chat-system {
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    padding: 4px 0;
    opacity: 0.6
}
.chat-input-wrap {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.08);
    flex-shrink: 0
}
.chat-input {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--text);
    font-size: 13px;
    font-family: var(--font);
    outline: none;
    transition: border-color 0.2s ease
}
.chat-input:focus { border-color: rgba(var(--accent-rgb), 0.4) }
.chat-send {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease
}
.chat-send:hover { transform: scale(1.05); box-shadow: 0 2px 12px var(--accent-glow) }
.chat-friends-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px
}
.chat-friend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.2s ease;
    cursor: pointer
}
.chat-friend-item:hover { background: rgba(var(--accent-rgb), 0.08) }
.chat-friend-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.15);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center
}
.chat-friend-avatar img { width: 100%; height: 100%; object-fit: cover }
.chat-friend-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--text)
}
.chat-friend-online {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green, #34d399);
    flex-shrink: 0
}
.chat-dm { flex: 1; display: flex; flex-direction: column; min-height: 0 }
.chat-dm-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
    font-size: 13px;
    font-weight: 700;
    color: var(--text)
}
.chat-dm-back {
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 4px;
    border-radius: 6px;
    transition: all 0.2s ease
}
.chat-dm-back:hover { color: var(--text); background: rgba(var(--accent-rgb), 0.1) }
.chat-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
    padding: 40px 16px;
    opacity: 0.6
}
@media(max-width:600px) {
    .chat-widget {
        width: calc(100vw - 16px);
        right: 8px;
        bottom: 130px;
        height: 350px
    }
    .chat-toggle { bottom: 80px; right: 12px; width: 42px; height: 42px }
}

/* ========== NAV XP BAR ========== */
.nav-xp-wrapper{display:flex;align-items:center;gap:6px;margin-right:8px}
.nav-level{font-size:11px;font-weight:800;color:var(--accent);white-space:nowrap}
.nav-xp-bar{width:60px;height:6px;background:var(--glass);border-radius:3px;overflow:hidden}
.nav-xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:3px;transition:width 0.5s ease;width:0}
.nav-xp-text{font-size:9px;color:var(--text-dim);white-space:nowrap}
.nav-coins-wrapper{display:flex;align-items:center;gap:3px;margin-right:8px;font-size:12px;font-weight:700;color:var(--orange)}
.nav-coins-icon{font-size:14px}
@media(max-width:768px){.nav-xp-wrapper{display:none}.nav-coins-wrapper{font-size:11px}}

/* ========== XP GAIN POPUP ========== */
.xp-gain-popup{position:fixed;top:80px;right:20px;background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:10px 18px;display:flex;align-items:center;gap:8px;z-index:10000;transform:translateX(120%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 20px rgba(var(--accent-rgb),0.3)}
.xp-gain-popup.xp-gain-show{transform:translateX(0)}
.xp-gain-amount{font-weight:800;color:var(--accent);font-size:16px}
.xp-gain-reason{font-size:11px;color:var(--text-dim)}

/* ========== LEVEL UP POPUP ========== */
.level-up-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);background:var(--surface-2);border:2px solid var(--accent);border-radius:20px;padding:40px 60px;text-align:center;z-index:10001;opacity:0;transition:all 0.5s cubic-bezier(0.4,0,0.2,1);box-shadow:0 0 60px rgba(var(--accent-rgb),0.5)}
.level-up-popup.level-up-show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.level-up-icon{font-size:48px;margin-bottom:8px}
.level-up-text{font-size:28px;font-weight:900;color:var(--accent);margin-bottom:4px}
.level-up-level{font-size:18px;color:var(--text-dim);font-weight:600}

/* ========== COIN GAIN POPUP ========== */
.coin-gain-popup{position:fixed;top:120px;right:20px;background:var(--surface);border:1px solid var(--orange);border-radius:12px;padding:8px 16px;z-index:10000;transform:translateX(120%);transition:transform 0.4s ease;box-shadow:0 4px 20px rgba(251,191,36,0.2)}
.coin-gain-popup.coin-gain-show{transform:translateX(0)}
.coin-gain-amount{font-weight:800;color:var(--orange);font-size:14px}

/* ========== PROFILE XP SECTION ========== */
.prof-xp-section{padding:16px 30px;display:flex;flex-direction:column;gap:6px}
.prof-xp-header{display:flex;justify-content:space-between;align-items:center}
.prof-level{font-size:18px;font-weight:900;color:var(--accent)}
.prof-coins-display{font-size:16px;font-weight:700;color:var(--orange)}
.prof-xp-bar-wrap{height:10px;background:var(--glass);border-radius:5px;overflow:hidden}
.prof-xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:5px;transition:width 0.5s ease;width:0}
.prof-xp-text{font-size:11px;color:var(--text-dim);text-align:center}
.prof-badge-count{font-size:12px;color:var(--text-dim);font-weight:600}

/* ========== SIDE TRIGGERS ========== */
.side-triggers{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:500;display:flex;flex-direction:column;gap:6px}
.side-trigger{width:44px;height:44px;border:none;border-radius:0 12px 12px 0;background:var(--surface-2);backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);border-left:none;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all 0.3s ease}
.side-trigger:hover{width:52px;color:var(--accent);background:rgba(var(--accent-rgb),0.12);border-color:rgba(var(--accent-rgb),0.3)}
.side-trigger-badge{position:absolute;top:-4px;right:-4px;background:var(--accent);color:#fff;font-size:8px;font-weight:800;padding:2px 5px;border-radius:10px;line-height:1}

/* ========== SIDE DRAWER ========== */
.side-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9000;opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.side-drawer-overlay.open{opacity:1;pointer-events:auto}
.side-drawer{position:fixed;left:-380px;top:50%;transform:translateY(-50%);width:350px;max-height:70vh;z-index:9001;background:var(--surface-2);backdrop-filter:var(--glass-filter);border:1px solid var(--glass-border);border-left:none;border-radius:0 20px 20px 0;padding:24px;overflow-y:auto;transition:left 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:8px 0 40px rgba(0,0,0,0.3)}
.side-drawer.open{left:0}
.side-drawer-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.side-drawer-header h3{font-size:16px;font-weight:800;color:var(--text);flex:1}
.side-drawer-close{background:none;border:none;color:var(--text-dim);font-size:22px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:all 0.2s ease;line-height:1}
.side-drawer-close:hover{color:var(--text);background:rgba(var(--accent-rgb),0.1)}

/* ========== DAILY CHALLENGES ========== */
.dc-badge{background:var(--accent);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px}
.dc-badge.all-done{background:var(--green)}
.daily-challenges-list{display:flex;flex-direction:column;gap:8px}
.daily-challenge-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-radius:12px;border:1px solid var(--glass-border);transition:all 0.2s ease}
.daily-challenge-item:hover:not(.completed){border-color:var(--accent);transform:translateX(4px)}
.daily-challenge-item.completed{opacity:0.6;border-color:var(--green)}
.daily-challenge-item.completed .dc-status{color:var(--green);font-size:18px;font-weight:700}
.dc-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0}
.dc-desc{flex:1;font-size:13px;color:var(--text);font-weight:500}
.dc-status{width:24px;text-align:center;flex-shrink:0}
.dc-progress-text{text-align:center;font-size:11px;color:var(--text-dim);margin-top:12px}

/* ========== WEEKLY QUESTS ========== */
.wq-item{padding:12px 16px;background:var(--surface);border-radius:12px;border:1px solid var(--glass-border);margin-bottom:8px;transition:all 0.2s ease}
.wq-item.completed{opacity:0.6;border-color:var(--green)}
.wq-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.wq-name{font-size:13px;font-weight:700;color:var(--accent-2)}
.wq-reward{font-size:10px;color:var(--text-dim);white-space:nowrap}
.wq-desc{font-size:12px;color:var(--text);margin-bottom:6px}
.wq-bar-wrap{height:6px;background:rgba(var(--accent-rgb),0.15);border-radius:3px;overflow:hidden}
.wq-bar{height:100%;background:var(--accent-2);border-radius:3px;transition:width 0.4s ease}
.wq-item.completed .wq-bar{background:var(--green)}
.wq-progress{font-size:10px;color:var(--text-dim);text-align:right;margin-top:4px}
.wq-item.completed .wq-progress{color:var(--green);font-weight:700}

/* ========== TOURNAMENT ========== */
.tournament-tabs{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.tournament-tab{background:var(--glass);border:1px solid var(--glass-border);color:var(--text-dim);font-size:11px;font-weight:600;padding:6px 14px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:all 0.2s ease}
.tournament-tab.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-color:transparent}
.tournament-leaderboard{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto}
.tournament-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface);border-radius:10px;border:1px solid transparent;transition:all 0.2s ease}
.tournament-row.tournament-me{border-color:var(--accent);background:rgba(var(--accent-rgb),0.08)}
.tournament-row.tournament-top{border-color:var(--orange)}
.tournament-rank{font-weight:800;font-size:14px;width:40px;flex-shrink:0;text-align:center}
.tournament-name{flex:1;font-size:13px;font-weight:600;color:var(--text)}
.tournament-score{font-size:13px;font-weight:700;color:var(--accent)}
.tournament-info{text-align:center;font-size:10px;color:var(--text-dim);margin-top:12px;opacity:0.7}
.tournament-timer{font-size:12px;color:var(--accent);font-weight:600;background:rgba(var(--accent-rgb),0.1);padding:4px 10px;border-radius:20px}

/* ========== PRIVATE TOURNAMENTS ========== */
.private-tour-section{margin-top:16px}
.private-tour-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.pvt-tour-join-row{display:flex;gap:6px}
.pvt-tour-input{background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:13px;width:100%}
.pvt-tour-input:focus{border-color:var(--accent);outline:none}
.pvt-tour-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:14px;margin-bottom:8px;cursor:pointer;transition:border-color 0.2s ease}
.pvt-tour-card:hover{border-color:var(--accent)}
.pvt-tour-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pvt-tour-card-game{font-weight:700;color:var(--text)}
.pvt-tour-card-code{font-family:monospace;font-size:14px;color:var(--accent);letter-spacing:2px}
.pvt-tour-card-time{font-size:11px;color:var(--text-dim)}
.pvt-tour-card-participants{font-size:11px;color:var(--text-dim);margin-top:4px}
.pvt-tour-leaderboard{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.pvt-tour-status-active{color:var(--green);font-size:11px;font-weight:600}
.pvt-tour-status-ended{color:var(--text-dim);font-size:11px;font-weight:600}

/* ========== SHOP PAGE ========== */
.shop-page-wrap{max-width:900px;margin:0 auto;padding:80px 24px 40px}
.shop-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.shop-page-title{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.shop-header-right{display:flex;align-items:center;gap:12px}
.shop-owned-toggle{background:var(--glass);border:1px solid var(--glass-border);border-radius:10px;padding:7px 14px;cursor:pointer;color:var(--text-dim);transition:all .25s ease;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.shop-owned-toggle:hover{border-color:var(--accent);color:var(--accent)}
.shop-owned-toggle.active{background:var(--accent);border-color:var(--accent);color:#fff}
.shop-coins-display{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:800;color:var(--orange)}
.shop-subtitle{font-size:13px;color:var(--text-dim);margin-bottom:24px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.shop-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:14px;padding:20px;text-align:center;transition:all 0.3s ease}
.shop-card:hover:not(.owned){border-color:var(--accent);transform:translateY(-2px)}
.shop-card.owned{opacity:0.6}
.shop-card-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.shop-card-desc{font-size:11px;color:var(--text-dim);margin-bottom:10px}
.shop-card-price{font-size:14px;font-weight:800;color:var(--orange);margin-bottom:10px}
.shop-category-bar{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.shop-cat-btn{background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;padding:6px 14px;color:var(--text-dim);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}
.shop-cat-btn:hover{border-color:var(--accent);color:var(--accent)}
.shop-cat-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.shop-card-type{display:inline-block;font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;opacity:0.7}
.shop-card-btns{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.shop-buy-btn{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;color:#fff!important;border:none!important;padding:8px 20px!important}
.shop-equip-btn{background:rgba(var(--accent-rgb),0.15)!important;color:var(--accent)!important;border:1px solid var(--accent)!important}
.shop-unequip-btn{background:rgba(239,68,68,0.15)!important;color:var(--red)!important;border:1px solid var(--red)!important}
.shop-preview-btn{font-size:10px!important;padding:5px 10px!important}
.shop-preview-btn.active{background:var(--orange)!important;color:#fff!important;border-color:var(--orange)!important}
.shop-equipped{border-color:var(--accent)!important;box-shadow:0 0 20px rgba(var(--accent-rgb),0.2)}
.shop-equipped .shop-card-price{color:var(--green)}
.shop-previewing{border-color:var(--orange)!important;box-shadow:0 0 16px rgba(251,191,36,0.2)}

/* ========== INVENTORY SHORTCUT ========== */
.inventory-shortcut{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:24px;padding:14px;background:var(--glass);border:1px dashed rgba(var(--accent-rgb),0.3);border-radius:12px;color:var(--accent);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease}
.inventory-shortcut:hover{background:rgba(var(--accent-rgb),0.1);border-style:solid;border-color:var(--accent);transform:translateY(-1px)}
.inventory-shortcut i{font-size:16px}

/* ========== INVENTORY PAGE ========== */
.inventory-page-wrap{max-width:900px;margin:0 auto;padding:80px 24px 40px}
.inventory-page-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.inventory-page-title{font-size:28px;font-weight:900;background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.inventory-page-title i{-webkit-text-fill-color:var(--accent);margin-right:4px}
.inventory-subtitle{font-size:13px;color:var(--text-dim);margin-bottom:20px}
.inv-section{margin-bottom:28px}
.inv-section-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.inv-section-title i{color:var(--accent);font-size:14px}
.inv-section-count{font-size:11px;font-weight:600;color:var(--text-dim);opacity:0.6}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.inv-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;padding:16px;text-align:center;transition:all .2s ease;cursor:pointer;position:relative}
.inv-card:hover{border-color:rgba(var(--accent-rgb),0.4);transform:translateY(-1px)}
.inv-card.inv-equipped{border-color:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),0.15)}
.inv-card-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.inv-card-desc{font-size:10px;color:var(--text-dim);margin-bottom:10px;line-height:1.4}
.inv-card-badge{position:absolute;top:8px;right:8px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:20px}
.inv-card-badge.equipped{background:var(--accent);color:#fff}
.inv-equip-btn{width:100%;padding:7px 0;border:1px solid rgba(var(--accent-rgb),0.3);background:rgba(var(--accent-rgb),0.08);color:var(--accent);border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s ease;font-family:inherit}
.inv-equip-btn:hover{background:rgba(var(--accent-rgb),0.18);border-color:var(--accent)}
.inv-equip-btn.inv-equipped-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
.inv-equip-btn.inv-equipped-btn:hover{opacity:0.85}
.inv-empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--text-dim);font-size:13px}
.inv-empty i{font-size:32px;display:block;margin-bottom:12px;opacity:0.3}
.inv-empty a{color:var(--accent);cursor:pointer;text-decoration:underline}
@media(max-width:768px){
    .inventory-page-wrap{padding:70px 16px 80px}
    .inv-grid{grid-template-columns:repeat(2,1fr)}
}

/* ========== BG EFFECT CANVAS ========== */
.bg-effect-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:1;contain:layout paint}

/* ========== TITLE DISPLAY ========== */
.prof-title-display{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);background:rgba(var(--accent-rgb),0.1);padding:3px 10px;border-radius:20px;margin-top:4px}

/* ========== ADMIN TITLE ========== */
.admin-title-badge{
    align-items:center;gap:6px;
    background:linear-gradient(135deg,#ff6b35,#f7c948,#ff6b35,#f7c948);
    background-size:300% 300%;
    animation:adminGradient 3s ease infinite,adminGlow 2s ease-in-out infinite;
    color:#fff!important;
    padding:5px 14px!important;
    border-radius:20px;
    font-size:12px!important;
    font-weight:900!important;
    letter-spacing:2px!important;
    border:1px solid rgba(255,180,50,0.4);
    box-shadow:0 0 12px rgba(255,107,53,0.3),0 0 30px rgba(247,201,72,0.15);
    text-shadow:none;
    position:relative;
}
.admin-title-icon{
    font-size:10px;
    filter:drop-shadow(0 0 4px rgba(255,200,100,0.6));
    animation:adminIconPulse 1.5s ease-in-out infinite;
}
.admin-title-text{
    background:linear-gradient(90deg,#fff,#ffe0a0,#fff);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:adminTextShine 2.5s linear infinite;
}
.admin-title-nav{
    position:relative;
}
.admin-title-nav .admin-title-text{
    font-size:10px;
    font-weight:900;
    letter-spacing:2px;
    background:linear-gradient(90deg,#ff6b35,#f7c948,#ff6b35);
    background-size:200% 100%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    animation:adminTextShine 2s linear infinite;
    filter:drop-shadow(0 0 6px rgba(255,150,50,0.4));
}
@keyframes adminGradient{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes adminGlow{
    0%,100%{box-shadow:0 0 12px rgba(255,107,53,0.3),0 0 30px rgba(247,201,72,0.15)}
    50%{box-shadow:0 0 20px rgba(255,107,53,0.5),0 0 45px rgba(247,201,72,0.25)}
}
@keyframes adminTextShine{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}
@keyframes adminIconPulse{
    0%,100%{transform:scale(1);opacity:0.8}
    50%{transform:scale(1.2);opacity:1}
}
.admin-title-lb{
    background:linear-gradient(90deg,#ff6b35,#f7c948,#ff6b35)!important;
    background-size:200% 100%!important;
    -webkit-background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    background-clip:text!important;
    animation:adminTextShine 2.5s linear infinite!important;
    opacity:1!important;
    font-weight:800!important;
    filter:drop-shadow(0 0 4px rgba(255,150,50,0.3));
}
.admin-title-lb i{
    -webkit-text-fill-color:#f7c948;
    font-size:8px;
    margin-right:2px;
}
.inv-admin-card{
    border-color:rgba(255,150,50,0.3)!important;
    background:linear-gradient(135deg,rgba(255,107,53,0.08),rgba(247,201,72,0.08))!important;
}
.inv-admin-card.inv-equipped{
    border-color:rgba(255,150,50,0.5)!important;
    box-shadow:0 0 20px rgba(255,107,53,0.15),0 0 40px rgba(247,201,72,0.08)!important;
}
.inv-admin-preview{
    font-size:28px;
    margin-bottom:8px;
    background:linear-gradient(135deg,#ff6b35,#f7c948);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 0 8px rgba(255,150,50,0.3));
    animation:adminIconPulse 1.5s ease-in-out infinite;
}
.inv-admin-card .inv-card-name{
    background:linear-gradient(90deg,#ff6b35,#f7c948);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-weight:900!important;
}
.inv-admin-card .inv-equip-btn{
    border-color:rgba(255,150,50,0.3)!important;
    color:#f7c948!important;
    background:rgba(255,107,53,0.1)!important;
}
.inv-admin-card .inv-equip-btn:hover{
    background:rgba(255,107,53,0.2)!important;
    border-color:rgba(255,150,50,0.5)!important;
}
.inv-admin-card .inv-equipped-btn{
    background:linear-gradient(135deg,#ff6b35,#f7c948)!important;
    color:#fff!important;
    border-color:transparent!important;
}
.pv-title{
    font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;
    color:var(--accent);background:rgba(var(--accent-rgb),0.1);
    padding:3px 10px;border-radius:20px;margin-top:4px;display:inline-block;
}
.pv-title.admin-title-badge{
    display:inline-flex;
}

/* ========== RAINBOW NAME ANIMATION ========== */
@keyframes rainbowShift{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ========== COMPARISON MODAL ========== */
.comparison-modal{max-width:500px;width:90%}
.cmp-header{display:flex;justify-content:center;align-items:center;gap:16px;padding:12px 0;margin-bottom:16px}
.cmp-player-name{font-size:16px;font-weight:700;color:var(--text)}
.cmp-vs{font-size:12px;font-weight:900;color:var(--accent);background:rgba(var(--accent-rgb),0.15);padding:4px 12px;border-radius:20px}
.cmp-body{display:flex;flex-direction:column;gap:4px}
.cmp-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:8px 12px;background:var(--surface);border-radius:8px}
.cmp-cell{font-size:13px;font-weight:600;color:var(--text-dim)}
.cmp-my{text-align:right}
.cmp-their{text-align:left}
.cmp-cell.cmp-winner{color:var(--green);font-weight:800}
.cmp-label{font-size:11px;color:var(--text-dim);text-align:center;font-weight:500;min-width:70px}
.cmp-summary{text-align:center;padding:16px 0;font-size:16px;font-weight:700}
.cmp-win{color:var(--green)}
.cmp-lose{color:var(--red)}
.cmp-tie{color:var(--orange)}
.cmp-radar-wrap{max-width:300px;margin:0 auto}

/* ========== MOBILE BOTTOM NAV ========== */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface-2);backdrop-filter:var(--glass-filter);border-top:1px solid var(--glass-border);z-index:9999;justify-content:space-around;padding:6px 0 env(safe-area-inset-bottom,6px);padding-bottom:env(safe-area-inset-bottom)}
.mob-nav-btn{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;color:var(--text-dim);font-size:10px;font-weight:500;padding:6px 12px;cursor:pointer;transition:color 0.2s ease;-webkit-tap-highlight-color:transparent}
.mob-nav-btn.active{color:var(--accent)}
.mob-nav-btn.active svg{stroke:var(--accent)}
.mob-nav-btn svg{transition:stroke 0.2s ease}
@media(max-width:768px){
    .mobile-bottom-nav{display:flex}
    body{padding-bottom:60px}
    .radio-player{bottom:68px;left:12px;padding:8px 12px;gap:8px}
    .settings-toggle{bottom:132px!important;right:12px!important}
    .chat-toggle{bottom:80px!important;right:12px!important}
    .chat-widget{bottom:130px!important}
    .friend-online-toast{bottom:136px;left:12px}
    .side-triggers{top:auto;bottom:70px;transform:none}
    .side-drawer{width:calc(100vw - 20px);max-width:350px;max-height:60vh}
    .shop-page-wrap{padding:70px 16px 80px}
    .shop-grid{grid-template-columns:repeat(2,1fr)}
}

/* ========== ONBOARDING ========== */
.onboarding-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99998}
.onboarding-tooltip{position:fixed;z-index:99999;background:var(--surface-2);border:1px solid var(--accent);border-radius:16px;padding:20px 24px;max-width:300px;box-shadow:0 8px 40px rgba(var(--accent-rgb),0.3);opacity:0;transform:translateY(8px);transition:all 0.3s ease}
.onboarding-tooltip.onboarding-show{opacity:1;transform:translateY(0)}
.onboarding-title{font-size:16px;font-weight:800;color:var(--text);margin-bottom:6px}
.onboarding-text{font-size:13px;color:var(--text-dim);line-height:1.5;margin-bottom:14px}
.onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.onboarding-progress{font-size:11px;color:var(--text-dim);font-weight:500}
.onboarding-skip{background:none;border:none;color:var(--text-dim);font-size:12px;cursor:pointer;padding:6px 10px}
.onboarding-skip:hover{color:var(--text)}
.onboarding-next{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;font-size:12px;font-weight:700;padding:8px 20px;border-radius:10px;cursor:pointer}
.onboarding-highlight{position:relative;z-index:99999;box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.5),0 0 20px rgba(var(--accent-rgb),0.3);border-radius:var(--radius)}

/* ========== FRIEND ONLINE TOAST ========== */
.friend-online-toast{position:fixed;bottom:80px;left:20px;background:var(--surface-2);border:1px solid var(--green);border-radius:14px;padding:10px 16px;display:flex;align-items:center;gap:8px;z-index:10000;transform:translateX(-120%);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 20px rgba(52,211,153,0.2)}
.friend-online-toast.fot-show{transform:translateX(0)}
.fot-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;animation:dotPulse 2s infinite}
.fot-name{font-weight:700;color:var(--text);font-size:13px}
.fot-text{color:var(--text-dim);font-size:12px}
.fot-challenge{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:none;font-size:11px;font-weight:700;padding:5px 12px;border-radius:8px;cursor:pointer;margin-left:8px}

/* ========== SHARE IMAGE BUTTON ========== */
.share-img-btn{font-size:11px;padding:4px 10px;border-radius:8px;background:var(--glass);border:1px solid var(--glass-border);color:var(--text-dim);cursor:pointer;transition:all 0.2s ease}
.share-img-btn:hover{color:var(--text);border-color:var(--accent)}

/* ========== TRANSACTION HISTORY ========== */
.history-section{margin-top:24px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px;backdrop-filter:var(--glass-filter)}
.history-tabs{display:flex;gap:6px;margin-bottom:16px}
.history-tab{background:var(--surface);border:1px solid var(--glass-border);border-radius:8px;padding:8px 20px;color:var(--text-dim);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:var(--font);letter-spacing:0.3px}
.history-tab:hover{background:var(--surface-2);color:var(--text)}
.history-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.history-list{max-height:300px;overflow-y:auto}
.history-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--glass-border);font-size:13px;font-family:var(--font)}
.history-item:last-child{border-bottom:none}
.history-amount{font-weight:700;min-width:80px}
.history-positive{color:#34d399}
.history-negative{color:#f87171}
.history-reason{flex:1;color:var(--text-dim);padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-date{color:var(--text-dim);font-size:11px;opacity:0.7}
.friend-title{font-size:9px;color:var(--accent);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;opacity:0.8;margin-left:6px}
.dh-title{font-size:9px;color:var(--accent);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;opacity:0.8;margin-left:4px}

/* ========== TITLE DISPLAY ========== */
.nav-title{display:block;font-size:10px;font-weight:600;color:var(--accent);text-align:center;letter-spacing:1px;text-transform:uppercase;opacity:0.8}
.lb-title{font-size:9px;color:var(--accent);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;opacity:0.7;display:block}
.chat-title{font-size:9px;color:var(--accent);font-weight:600;margin-left:4px}
.podium-title{font-size:9px;color:var(--accent);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;opacity:0.8;margin-top:2px}

/* ========== NAME NEON GLOW EFFECT ========== */
@keyframes neonPulse{
    0%,100%{text-shadow:0 0 4px rgba(var(--accent-rgb),0.6),0 0 8px rgba(var(--accent-rgb),0.4),0 0 16px rgba(var(--accent-rgb),0.2)}
    50%{text-shadow:0 0 8px rgba(var(--accent-rgb),0.9),0 0 16px rgba(var(--accent-rgb),0.6),0 0 32px rgba(var(--accent-rgb),0.3),0 0 48px rgba(var(--accent-rgb),0.15)}
}
.name-neon-glow{
    animation:neonPulse 2s ease-in-out infinite;
    color:var(--accent)!important;
}

/* ========== AVATAR FRAME STYLES ========== */
.avatar-frame-gold{
    border:3px solid #ffd700!important;
    box-shadow:0 0 8px rgba(255,215,0,0.4),0 0 16px rgba(255,215,0,0.15)!important;
    border-radius:50%;
}
@keyframes diamondRotate{
    0%{border-color:#b9f2ff}
    25%{border-color:#e0c3fc}
    50%{border-color:#b9f2ff}
    75%{border-color:#a8edea}
    100%{border-color:#b9f2ff}
}
.avatar-frame-diamond{
    border:3px solid #b9f2ff!important;
    box-shadow:0 0 10px rgba(185,242,255,0.4),0 0 20px rgba(185,242,255,0.15)!important;
    border-radius:50%;
    animation:diamondRotate 3s linear infinite;
}
@keyframes fireGlow{
    0%,100%{border-color:#ff4500;box-shadow:0 0 8px rgba(255,69,0,0.5),0 0 16px rgba(255,69,0,0.2)}
    33%{border-color:#ff6600;box-shadow:0 0 12px rgba(255,102,0,0.6),0 0 20px rgba(255,102,0,0.25)}
    66%{border-color:#ff8c00;box-shadow:0 0 10px rgba(255,140,0,0.5),0 0 18px rgba(255,140,0,0.2)}
}
.avatar-frame-fire{
    border:3px solid #ff4500!important;
    border-radius:50%;
    animation:fireGlow 1.5s ease-in-out infinite;
}

/* Frames on leaderboard row avatars */
.lb-row-avatar-wrap{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    border-radius:50%;
    margin-right:6px;
}
.lb-row-avatar-wrap .lb-row-avatar{
    border-radius:50%;
}
.lb-row-avatar-wrap.avatar-frame-gold,
.lb-row-avatar-wrap.avatar-frame-diamond,
.lb-row-avatar-wrap.avatar-frame-fire{
    padding:1px;
}

/* Frames on friend avatars */
.friend-avatar.avatar-frame-gold,
.friend-avatar.avatar-frame-diamond,
.friend-avatar.avatar-frame-fire{
    border-radius:50%;
}

/* Frames on podium avatars */
.podium-avatar.avatar-frame-gold,
.podium-avatar.avatar-frame-diamond,
.podium-avatar.avatar-frame-fire{
    border-radius:50%;
}

/* ========== ANIMATED PROFILE BACKGROUND ========== */
@keyframes profileBgShift{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.profilebg-animated .prof-card,
.profilebg-animated .prof-header{
    position:relative;
}
.profilebg-animated::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(var(--accent-rgb),0.05),rgba(var(--accent-rgb),0.15),rgba(var(--accent-rgb),0.05),rgba(var(--accent-rgb),0.1));
    background-size:400% 400%;
    animation:profileBgShift 8s ease infinite;
    border-radius:inherit;
    pointer-events:none;
    z-index:0;
}

/* ========== THEME SPECIFIC STYLES ========== */
.theme-cyberpunk{
    --glass-border:rgba(255,45,149,0.15);
}
.theme-cyberpunk *{
    font-family:'JetBrains Mono',monospace!important;
}
.theme-pastel{
    --glass-border:rgba(255,179,217,0.2);
}
.theme-pastel *{
    font-family:'Outfit',sans-serif!important;
}
.theme-midnight{
    --glass-border:rgba(255,215,0,0.12);
}
.theme-midnight *{
    font-family:'Inter',sans-serif!important;
}

/* ========== SHOP FRAME PREVIEW ========== */
.shop-frame-preview{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ========== CHIMP TEST ========== */
.chimp-grid{display:grid;gap:6px;max-width:500px;margin:20px auto;user-select:none}
.chimp-tile{aspect-ratio:1;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;cursor:pointer;transition:transform 0.15s,background 0.2s,opacity 0.2s;background:var(--accent);color:#fff;position:relative}
.chimp-tile:hover{transform:scale(1.05)}
.chimp-tile.hidden-num{background:var(--card-bg);border:2px solid var(--border)}
.chimp-tile.hidden-num:hover{background:var(--hover-bg)}
.chimp-tile.correct{background:#34d399;transform:scale(0.9);opacity:0.5;pointer-events:none}
.chimp-tile.wrong{background:#f87171;animation:shake 0.3s}
.chimp-tile.empty{visibility:hidden;pointer-events:none}

/* ========== STROOP TEST ========== */
.stroop-word{font-size:3.5rem;font-weight:800;text-align:center;margin:30px 0;min-height:80px;display:flex;align-items:center;justify-content:center;transition:transform 0.15s}
.stroop-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.stroop-btn{padding:14px 28px;border-radius:12px;border:2px solid transparent;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;color:#fff;min-width:100px;text-align:center}
.stroop-btn:hover{transform:scale(1.08);box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.stroop-timer-bar{height:6px;border-radius:3px;background:var(--accent);transition:width 0.1s linear;margin-top:16px}
.stroop-flash{animation:stroopFlash 0.3s}
@keyframes stroopFlash{0%,100%{background:transparent}50%{background:rgba(248,113,113,0.15)}}
.stroop-info{display:flex;justify-content:center;gap:24px;margin-bottom:16px;font-size:1.1rem}
.stroop-info .memory-stat{font-weight:600}

/* ========== VERBAL MEMORY ========== */
.verbal-word{font-size:3rem;font-weight:800;text-align:center;margin:40px 0;min-height:80px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.verbal-buttons{display:flex;gap:16px;justify-content:center;margin-top:20px}
.verbal-btn{padding:16px 40px;border-radius:12px;font-size:1.15rem;font-weight:700;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;border:2px solid var(--border);background:var(--card-bg);color:var(--text)}
.verbal-btn:hover{transform:scale(1.06);box-shadow:0 4px 20px rgba(0,0,0,0.2)}
.verbal-btn.seen{border-color:var(--accent);color:var(--accent)}
.verbal-btn.new-btn{border-color:#34d399;color:#34d399}
.verbal-btn.correct-flash{animation:correctPulse 0.3s}
.verbal-btn.wrong-flash{animation:wrongPulse 0.3s}
@keyframes correctPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 20px rgba(52,211,153,0.5)}}
@keyframes wrongPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 20px rgba(248,113,113,0.5)}}
.verbal-lives{display:flex;gap:6px;justify-content:center;margin-top:12px}
.verbal-heart{font-size:1.3rem;transition:transform 0.2s,opacity 0.2s}
.verbal-heart.lost{opacity:0.2;transform:scale(0.8)}
.verbal-info{display:flex;justify-content:center;gap:24px;margin-bottom:8px;font-size:1.1rem}

/* ========== NEW SETTINGS CSS ========== */
:root,[data-theme="dark"]{--letter-spacing:0px;--border-width:1px;--density-mult:1;--anim-speed-mult:1;--glow-mult:1;--parallax-depth:10}
body.custom-font-size .card h3,body.custom-font-size .card p,body.custom-font-size .nav-link,body.custom-font-size label,body.custom-font-size .btn-primary,body.custom-font-size .btn-sm,body.custom-font-size .hero-sub,body.custom-font-size .setting-label-sm,body.custom-font-size .lb-tab,body.custom-font-size .lb-table td,body.custom-font-size .lb-table th,body.custom-font-size p,body.custom-font-size span:not(.style-name):not(.toggle-slider):not(.section-chevron),body.custom-font-size input,body.custom-font-size select,body.custom-font-size textarea,body.custom-font-size button{font-size:calc(1em * var(--font-size-mult,1)) !important}
body.custom-letter-spacing{letter-spacing:var(--letter-spacing)}
body.text-transform-uppercase{text-transform:uppercase}
body.text-transform-capitalize{text-transform:capitalize}
body.bg-tinted::before{content:'';position:fixed;inset:0;background:rgba(var(--accent-rgb),var(--bg-tint-alpha,0));pointer-events:none;z-index:-1;mix-blend-mode:color}
body.custom-radius .card,body.custom-radius .modal,body.custom-radius .settings-section,body.custom-radius .btn-primary,body.custom-radius .btn-sm,body.custom-radius .setting-slider::-webkit-slider-thumb{border-radius:var(--radius) !important}
body.density-compact .card{padding:14px}
body.density-compact .setting-group{margin-bottom:14px}
body.density-compact .style-options{gap:4px}
body.density-compact .settings-section-content{padding:10px 14px}
body.density-spacious .card{padding:32px}
body.density-spacious .setting-group{margin-bottom:32px}
body.density-spacious .style-options{gap:10px}
body.density-spacious .settings-section-content{padding:20px 22px}
body.shadow-none .card{box-shadow:none !important}
body.shadow-subtle .card{box-shadow:0 2px 8px rgba(0,0,0,0.15)}
body.shadow-strong .card{box-shadow:0 8px 32px rgba(0,0,0,0.4),0 0 12px rgba(0,0,0,0.2)}
body.shadow-neon .card{box-shadow:0 0 16px rgba(var(--accent-rgb),0.4),0 0 40px rgba(var(--accent-rgb),0.15),0 4px 16px rgba(0,0,0,0.3)}
body.custom-border-width .card,body.custom-border-width .settings-section,body.custom-border-width .modal{border-width:var(--border-width) !important;border-style:solid}
body.custom-anim-speed .card,body.custom-anim-speed .btn-primary,body.custom-anim-speed .btn-sm,body.custom-anim-speed .settings-section,body.custom-anim-speed .modal{transition-duration:calc(0.35s * var(--anim-speed-mult)) !important}
body.custom-glow .card:hover{box-shadow:0 0 calc(20px * var(--glow-mult)) var(--accent-glow),0 0 calc(60px * var(--glow-mult)) rgba(var(--accent-rgb),0.08) !important}
body.noise-subtle::after,body.noise-strong::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px;mix-blend-mode:overlay}
body.noise-subtle::after{opacity:0.06}
body.noise-strong::after{opacity:0.18}
body.chromatic-on h1,body.chromatic-on h2,body.chromatic-on h3,body.chromatic-on .hero-title,body.chromatic-on .card-title{text-shadow:-1.5px 0 rgba(255,0,0,0.35),1.5px 0 rgba(0,200,255,0.35)}
body.high-contrast-mode{--bg:#000000 !important;--surface:rgba(0,0,0,0.95) !important;--surface-2:rgba(10,10,10,0.95) !important;--text:#ffffff !important;--text-dim:#cccccc !important;--border:rgba(255,255,255,0.3) !important;--glass:rgba(0,0,0,0.9) !important;--glass-border:rgba(255,255,255,0.25) !important}
body.high-contrast-mode .card{border:2px solid rgba(255,255,255,0.4) !important}
body.large-text-mode .card h3,body.large-text-mode .card p,body.large-text-mode .nav-link,body.large-text-mode label,body.large-text-mode .btn-primary,body.large-text-mode .btn-sm,body.large-text-mode .hero-sub,body.large-text-mode .setting-label-sm,body.large-text-mode .lb-tab,body.large-text-mode .lb-table td,body.large-text-mode .lb-table th,body.large-text-mode p,body.large-text-mode span,body.large-text-mode input,body.large-text-mode select,body.large-text-mode textarea,body.large-text-mode button{font-size:calc(1em * 1.2) !important}
body.large-text-mode .hero-title{font-size:clamp(48px,8vw,86px) !important}
.meta-select{background:var(--surface);color:var(--text);border:1px solid var(--glass-border);border-radius:8px;padding:8px 12px;font-family:var(--font);font-size:13px;outline:none;cursor:pointer}
.meta-select:focus{border-color:var(--accent)}
.meta-select option{background:var(--bg);color:var(--text)}
.meta-input{background:var(--surface);color:var(--text);border:1px solid var(--glass-border);border-radius:8px;padding:8px 12px;font-family:var(--font);font-size:13px;outline:none}
.meta-input:focus{border-color:var(--accent)}
.meta-input::placeholder{color:var(--text-dim)}
.section-reset-btn{font-size:11px !important;opacity:0.6;padding:6px 12px !important}
.section-reset-btn:hover{opacity:1}

/* ========== SKELETON LOADER ========== */
@keyframes skeletonPulse {
    0% { opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { opacity: 0.6; }
}
.skeleton-loader {
    background: var(--border);
    border-radius: 8px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border);
    animation: skeletonPulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}
.skeleton-line {
    height: 14px;
    background: var(--border);
    border-radius: 6px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-line.w80 { width: 80%; }

/* ========== NOTIFICATION BADGE PULSE ========== */
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}
.notif-badge.pulse {
    animation: badgePulse 0.6s ease;
}

/* ========== LEVEL-UP SCREEN SHAKE ========== */
@keyframes levelUpShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}
.level-up-shake {
    animation: levelUpShake 0.5s ease;
}

/* ========== SCORE FLOAT ========== */
@keyframes scoreFloat {
    0% { transform: translateY(0) scale(0); opacity: 0; }
    20% { transform: translateY(-10px) scale(1.3); opacity: 1; }
    40% { transform: translateY(-20px) scale(1); opacity: 1; }
    100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}
.score-float {
    position: fixed;
    z-index: 9999;
    font-size: 24px;
    font-weight: 900;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6);
    pointer-events: none;
    animation: scoreFloat 1.2s ease-out forwards;
}

/* ========== DUEL SCORE FLASH ========== */
@keyframes scoreFlashGreen {
    0% { background: rgba(52, 211, 153, 0.3); }
    100% { background: transparent; }
}
@keyframes scoreFlashRed {
    0% { background: rgba(248, 113, 113, 0.3); }
    100% { background: transparent; }
}
.score-flash-win { animation: scoreFlashGreen 1s ease-out; }
.score-flash-lose { animation: scoreFlashRed 1s ease-out; }

/* ========== PURCHASE CONFIRMATION MODAL ========== */
.confirm-purchase-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.confirm-purchase-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px;
    max-width: 320px;
    width: 90%;
    text-align: center;
    font-family: var(--font);
}
.confirm-purchase-card h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--text);
}
.confirm-purchase-card .cp-item-name {
    font-size: 15px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 4px;
}
.confirm-purchase-card .cp-price {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 16px;
}
.confirm-purchase-card .cp-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.confirm-purchase-card .cp-btns button {
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font);
    font-size: 14px;
}
.confirm-purchase-card .cp-buy {
    background: var(--accent);
    color: #fff;
}
.confirm-purchase-card .cp-cancel {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ========== DUEL COUNTDOWN TIMER ========== */
.challenge-countdown {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    margin-top: 6px;
}

/* ========== GAME CARD BADGES ========== */
.game-card-badges {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.game-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.game-badge-easy { background: rgba(52, 211, 153, 0.15); color: #34d399; }
.game-badge-medium { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.game-badge-hard { background: rgba(248, 113, 113, 0.15); color: #f87171; }
.game-badge-duration { background: rgba(var(--accent-rgb), 0.1); color: var(--accent); }

/* ========== PRACTICE MODE WATERMARK ========== */
.practice-watermark {
    position: fixed;
    top: 80px;
    right: 20px;
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    z-index: 999;
    pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ========== STATS DASHBOARD ========== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    backdrop-filter: var(--glass-filter);
}
.stat-card-value {
    font-size: 28px;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 4px;
}
.stat-card-label {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.stat-card-sub {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}
.stats-suggestion {
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.stats-suggestion i {
    color: var(--accent);
    font-size: 18px;
}

/* ========== ACHIEVEMENTS ========== */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.achievement-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    backdrop-filter: var(--glass-filter);
    transition: transform 0.2s, border-color 0.2s;
}
.achievement-card:hover {
    transform: translateY(-2px);
}
.achievement-card.locked {
    opacity: 0.45;
    filter: grayscale(0.8);
}
.achievement-card.unlocked {
    border-color: var(--accent);
}
.achievement-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-rgb), 0.1);
    border-radius: 12px;
    flex-shrink: 0;
}
.achievement-info {
    flex: 1;
    min-width: 0;
}
.achievement-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}
.achievement-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.achievement-date {
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.7;
}
.achievement-progress {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.achievement-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}


/* ========== UNREAD DM BADGE ========== */
.dm-unread-badge {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* ========== LAST SEEN ========== */
.last-seen {
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.7;
}

/* ========== STATUS LABEL (ACCESSIBILITY) ========== */
.status-label {
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
}
.status-label.online { color: #34d399; }
.status-label.offline { color: var(--text-dim); }

/* ========== TOURNAMENT REWARD BADGES ========== */
.tournament-reward {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    white-space: nowrap;
}
.tour-badge-gold { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
.tour-badge-silver { background: rgba(192, 192, 192, 0.15); color: #c0c0c0; }
.tour-badge-bronze { background: rgba(205, 127, 50, 0.15); color: #cd7f32; }

/* ========== ACHIEVEMENT UNLOCKED TAG ========== */
.achievement-unlocked-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ========== PERFORMANCE / POTATO MODE ========== */
body.perf-mode *,
body.perf-mode *::before,
body.perf-mode *::after {
    animation: none !important;
    transition: none !important;
}
body.perf-mode {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.perf-mode #navbar,
body.perf-mode .glass-card,
body.perf-mode .modal-content,
body.perf-mode .chat-widget,
body.perf-mode .settings-panel,
body.perf-mode [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.perf-mode #aurora-bg,
body.perf-mode #vanta-bg,
body.perf-mode #fluid-bg,
body.perf-mode .aurora-bg,
body.perf-mode .vanta-bg,
body.perf-mode .fluid-bg,
body.perf-mode #tsparticles,
body.perf-mode canvas.particles-canvas,
body.perf-mode .crt-overlay,
body.perf-mode .noise-overlay,
body.perf-mode .cursor-trail,
body.perf-mode .mesh-blob,
body.perf-mode .chromatic-aberration-overlay {
    display: none !important;
}
body.perf-mode .nav-pill {
    transition: none !important;
}
body.perf-mode .card-3d,
body.perf-mode .card {
    transform: none !important;
    opacity: 1 !important;
}
body.perf-mode .border-glow,
body.perf-mode .card {
    box-shadow: none !important;
}
body.perf-mode .text-glitch,
body.perf-mode .text-glow-fx {
    text-shadow: none !important;
}
body.perf-mode .holo-card::before,
body.perf-mode .holo-card::after {
    display: none !important;
}
.setting-desc {
    font-size: 11px;
    color: var(--text-dim);
    margin: 2px 0 8px;
    line-height: 1.4;
}

/* ========== DESIGN IMPROVEMENTS ========== */

/* Smooth theme transition */
body, .glass, .card, nav, .modal-content {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Form input validation glow */
.modal input:focus:invalid {
    border-color: var(--red, #f87171);
    box-shadow: 0 0 0 3px rgba(248,113,113,0.2);
}
.modal input:focus:valid {
    border-color: var(--green, #34d399);
    box-shadow: 0 0 0 3px rgba(52,211,153,0.15);
}

/* Leaderboard medal animation */
.lb-rank-1 .lb-medal, .lb-rank-2 .lb-medal, .lb-rank-3 .lb-medal {
    display: inline-block;
    animation: medalFloat 2s ease-in-out infinite;
}
@keyframes medalFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.1); }
}

/* Loader bar shimmer */
@keyframes loaderShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Nav link underline hover effect */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

/* Skeleton loading text/avatar helpers */
.skeleton-text { height: 14px; margin: 8px 0; width: 80%; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; }

/* ========== REACTION WHEEL ========== */
.rwheel-canvas-wrap{display:flex;justify-content:center;align-items:center;margin:20px auto;position:relative}
#rwheel-canvas{max-width:100%;height:auto;cursor:pointer;border-radius:50%}
.rwheel-info{display:flex;justify-content:center;gap:24px;margin-bottom:16px;font-size:1.1rem;flex-wrap:wrap}
.rwheel-info .memory-stat{font-weight:600}
.rwheel-combo-stat{position:relative}
#rwheel-combo-display{display:inline-block;transition:transform 0.15s}
.rwheel-multiplier{font-weight:800;margin-left:4px;transition:color 0.2s}
.rwheel-mult-2{color:#fbbf24}
.rwheel-mult-3{color:#f87171;animation:rwheelMultPulse 0.5s ease infinite alternate}
@keyframes rwheelMultPulse{0%{transform:scale(1)}100%{transform:scale(1.15)}}
@media(max-width:500px){
    #rwheel-canvas{width:300px;height:300px}
}

/* ========== COLOR BLIND TEST ========== */
.cb-canvas-wrap{display:flex;justify-content:center;align-items:center;margin:16px auto;position:relative}
#cb-canvas{max-width:100%;height:auto;cursor:pointer;border-radius:12px;border:2px solid var(--glass-border);transition:border-color 0.3s}
#cb-canvas:hover{border-color:var(--accent)}
.cb-info{display:flex;justify-content:center;gap:24px;margin-bottom:12px;font-size:1.1rem;flex-wrap:wrap}
.cb-info .memory-stat{font-weight:600}
@media(max-width:500px){
    #cb-canvas{width:300px;height:300px}
}

/* ========== FRIEND HIGHLIGHTS ========== */
.friend-highlights {
    margin-top: 32px;
    padding: 0 8px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.highlights-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.highlights-title i {
    color: var(--accent);
    font-size: 14px;
}
.highlights-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.highlight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}
.highlight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.15);
}
.highlight-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.hl-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: var(--glass);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.hl-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.hl-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hl-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hl-detail {
    font-size: 12px;
    color: var(--text-dim);
}
.hl-scores {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 13px;
}
.hl-new-score {
    font-weight: 700;
    color: var(--accent);
}
.hl-vs {
    font-size: 11px;
    color: var(--text-dim);
    opacity: 0.6;
}
.hl-old-score {
    color: var(--text-dim);
    text-decoration: line-through;
    opacity: 0.7;
}
.hl-arrow-up {
    font-size: 10px;
    color: var(--green, #34d399);
}
.hl-arrow-down {
    font-size: 10px;
    color: var(--green, #34d399);
}
.hl-game-badge {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .friend-highlights {
        margin-top: 24px;
        padding: 0 4px;
    }
    .highlight-card {
        padding: 10px 12px;
    }
    .hl-avatar {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
    .hl-name {
        font-size: 13px;
    }
    .hl-scores {
        font-size: 12px;
    }
}


/* ========== REMEMBER ME ========== */
.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.8;
    cursor: pointer;
    margin: -4px 0 8px;
    user-select: none;
}
.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* ========== CARD SHORTCUT KEY BADGE ========== */
.card-shortcut {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 10px;
    opacity: 0.4;
    font-weight: 700;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
}

/* ========== ACCESSIBILITY MODE ========== */
body.a11y-mode {
    font-size: 16px !important;
}
body.a11y-mode * {
    font-size: inherit;
}
body.a11y-mode h1 { font-size: 2em !important; }
body.a11y-mode h2 { font-size: 1.5em !important; }
body.a11y-mode h3 { font-size: 1.2em !important; }
body.a11y-mode *:focus {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}
body.a11y-mode *, body.a11y-mode *::before, body.a11y-mode *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

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

/* ========== DUEL STATS ========== */
.duel-stats-content {
    padding: 0 4px;
}
.duel-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}
.duel-stat-box {
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 14px 8px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.06);
}
.duel-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}
.duel-stat-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.duel-most-dueled {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 13px;
}
.duel-most-dueled-name {
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}
.duel-most-dueled-name:hover {
    text-decoration: underline;
}
.duel-most-dueled-count {
    color: var(--text-dim);
    font-size: 12px;
}
@media(max-width:500px){
    .duel-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ========== ACHIEVEMENT SHOWCASE ========== */
.prof-showcase-section {
    padding: 10px 0 0;
}
.prof-showcase-slots {
    display: flex;
    gap: 12px;
    padding: 12px 30px;
    justify-content: center;
}
.showcase-slot {
    width: 100px;
    min-height: 100px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 2px dashed rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}
.showcase-slot.empty {
    opacity: 0.5;
}
.showcase-slot.empty i {
    font-size: 20px;
    color: var(--text-dim);
}
.showcase-slot.empty span {
    font-size: 11px;
    color: var(--text-dim);
}
.showcase-slot.filled {
    border-style: solid;
    border-color: rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.05);
    opacity: 1;
}
.showcase-slot .showcase-icon {
    font-size: 24px;
    color: var(--accent);
}
.showcase-slot .showcase-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}
.showcase-slot .showcase-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(239,68,68,0.8);
    color: #fff;
    border: none;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.showcase-slot:hover .showcase-remove {
    opacity: 1;
}
.showcase-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.showcase-picker {
    background: var(--glass-bg, rgba(20,20,40,0.95));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px;
    max-width: 500px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
}
.showcase-picker h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 16px;
}
.showcase-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.showcase-pick-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}
.showcase-pick-card:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}
.showcase-pick-card .pick-icon {
    font-size: 24px;
    margin-bottom: 6px;
    color: var(--accent);
}
.showcase-pick-card .pick-name {
    font-size: 12px;
    font-weight: 700;
}
.showcase-pick-card .pick-desc {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

/* ========== GAME STATS MODAL ========== */
.game-stats-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.game-stats-modal {
    background: var(--glass-bg, rgba(20,20,40,0.95));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
}
.game-stats-modal h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}
.game-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.game-stat-item {
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}
.game-stat-item .gs-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}
.game-stat-item .gs-label {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

/* ========== DESIGN ENHANCEMENTS (anime.js + glassmorphism + micro-interactions) ========== */

/* --- 1. Glassmorphism cards (higher specificity, no !important) --- */
/* Glassmorphism: use CSS var so glassBlur slider still works */
#content .card-grid .card:not(.card-solid):not(.card-outline) {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.06), rgba(var(--accent-rgb), 0.02)), var(--glass);
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
}
#content .card-grid .card:not(.card-solid):not(.card-outline):hover {
    box-shadow: 0 6px 12px rgba(var(--accent-rgb),0.15), 0 12px 24px rgba(var(--accent-rgb),0.1), 0 24px 48px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.08);
}
/* Border glow must override glassmorphism hover shadow */
.border-glow #content .card-grid .card,
.border-glow #content .card-grid .card:hover {
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15), 0 0 60px rgba(var(--accent-rgb), 0.05);
    border-color: rgba(var(--accent-rgb), 0.3);
}
[data-theme="light"] #content .card-grid .card:not(.card-solid):not(.card-outline) {
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
    box-shadow: 0 8px 32px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .border-glow #content .card-grid .card,
[data-theme="light"] .border-glow #content .card-grid .card:hover {
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.15), 0 0 60px rgba(var(--accent-rgb), 0.05);
    border-color: rgba(var(--accent-rgb), 0.3);
}

/* --- 2. Card shine sweep on hover (only when holo-cards NOT active) --- */
body:not(.holo-cards) #content .card:not(.card-solid):not(.card-outline)::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.03) 45%,
        rgba(255,255,255,0.08) 50%,
        rgba(255,255,255,0.03) 55%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}
body:not(.holo-cards) #content .card:not(.card-solid):not(.card-outline):hover::after {
    transform: translateX(100%);
}
[data-theme="light"] body:not(.holo-cards) #content .card:not(.card-solid):not(.card-outline)::after {
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(0,0,0,0.02) 45%,
        rgba(0,0,0,0.04) 50%,
        rgba(0,0,0,0.02) 55%,
        transparent 60%
    );
}

/* --- 3. Button micro-interactions (enhanced hover lift + press) --- */
#content .btn-primary,
.modal .btn-primary {
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
#content .btn-primary:hover,
.modal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.35), 0 0 20px rgba(var(--accent-rgb), 0.15);
}
#content .btn-primary:active,
.modal .btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.2);
}

/* --- 4. Hero accent glow text --- */
.hero-title .accent {
    text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.4), 0 0 60px rgba(var(--accent-rgb), 0.2);
}
[data-theme="light"] .hero-title .accent {
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.2), 0 0 40px rgba(var(--accent-rgb), 0.1);
}

/* --- 5. Card icon float animation on hover --- */
@keyframes iconFloat {
    0%, 100% { transform: translateY(0) scale(1.2) rotate(-8deg); }
    50%      { transform: translateY(-6px) scale(1.2) rotate(-8deg); }
}
#content .card:hover .card-icon {
    animation: iconFloat 1.5s ease-in-out infinite;
    filter: drop-shadow(0 4px 20px rgba(var(--accent-rgb), 0.5));
}

/* --- 6. Toast glass enhancement --- */
.toast-container .toast {
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}
.toast-container .toast-info {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.85), rgba(var(--accent-rgb), 0.65));
}
.toast-container .toast-success {
    background: linear-gradient(135deg, rgba(34,197,94,0.85), rgba(22,163,106,0.75));
}
.toast-container .toast-error {
    background: linear-gradient(135deg, rgba(239,68,68,0.85), rgba(220,38,38,0.75));
}

/* --- 7. Section / page heading gradient underline --- */
.page .section-title,
.page > h2,
.leaderboard-page h2,
.profile-page h2,
.social-page h2,
.duel-page h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}
.page .section-title::after,
.page > h2::after,
.leaderboard-page h2::after,
.profile-page h2::after,
.social-page h2::after,
.duel-page h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), 0.2));
    transition: width 0.3s ease;
}
.page .section-title:hover::after,
.page > h2:hover::after,
.leaderboard-page h2:hover::after,
.profile-page h2:hover::after,
.social-page h2:hover::after,
.duel-page h2:hover::after {
    width: 100%;
}

/* --- 8. Smooth selection color --- */
::selection {
    background: rgba(var(--accent-rgb), 0.3);
    color: var(--text);
}
::-moz-selection {
    background: rgba(var(--accent-rgb), 0.3);
    color: var(--text);
}

/* --- 9. Modal entrance enhancement --- */
#content .modal,
.modal-overlay .modal {
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 80px rgba(var(--accent-rgb), 0.06), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* --- 10. Card text content layering above shine effect --- */
#content .card .card-icon,
#content .card h3,
#content .card p,
#content .card .card-tag {
    position: relative;
    z-index: 2;
}

/* ========== SKELETON LOADERS ========== */
.skeleton {
    position: relative;
    overflow: hidden;
    background: rgba(var(--accent-rgb), 0.06);
    border-radius: 8px;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.08), transparent);
    animation: skeletonShimmer 1.5s infinite;
}
@keyframes skeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.long { width: 95%; }
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.skeleton-card {
    height: 180px;
    border-radius: var(--radius);
}
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
}
.skeleton-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}
[data-theme="light"] .skeleton {
    background: rgba(0,0,0,0.06);
}
[data-theme="light"] .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent);
}

/* ============================================
   PAGE SLIDE TRANSITIONS
   ============================================ */
@keyframes pageSlideIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ============================================
   LEADERBOARD ROW ENTRANCE ANIMATION
   ============================================ */
@keyframes lbRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.lb-body tr, .lb-body .lb-row {
    animation: lbRowIn 0.3s ease-out both;
}
.lb-body tr:nth-child(1), .lb-body .lb-row:nth-child(1) { animation-delay: 0.03s; }
.lb-body tr:nth-child(2), .lb-body .lb-row:nth-child(2) { animation-delay: 0.06s; }
.lb-body tr:nth-child(3), .lb-body .lb-row:nth-child(3) { animation-delay: 0.09s; }
.lb-body tr:nth-child(4), .lb-body .lb-row:nth-child(4) { animation-delay: 0.12s; }
.lb-body tr:nth-child(5), .lb-body .lb-row:nth-child(5) { animation-delay: 0.15s; }
.lb-body tr:nth-child(6), .lb-body .lb-row:nth-child(6) { animation-delay: 0.18s; }
.lb-body tr:nth-child(7), .lb-body .lb-row:nth-child(7) { animation-delay: 0.21s; }
.lb-body tr:nth-child(8), .lb-body .lb-row:nth-child(8) { animation-delay: 0.24s; }
.lb-body tr:nth-child(9), .lb-body .lb-row:nth-child(9) { animation-delay: 0.27s; }
.lb-body tr:nth-child(10), .lb-body .lb-row:nth-child(10) { animation-delay: 0.30s; }

/* ============================================
   DARK/LIGHT MODE CIRCULAR REVEAL
   ============================================ */
.theme-transition-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 99999;
    pointer-events: none;
    clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%));
    transition: clip-path 0.6s ease-out;
}
.theme-transition-overlay.expanding {
    clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%));
}

/* ============================================
   DAILY SPIN WHEEL
   ============================================ */
.spin-section {
    text-align: center;
    padding: 20px;
    margin: 20px 0;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    backdrop-filter: var(--glass-filter);
}
.spin-section h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
}
#spin-canvas {
    width: 280px;
    height: 280px;
    margin: 0 auto 16px;
    display: block;
    border-radius: 50%;
}
#spin-btn {
    margin-top: 8px;
}
.spin-cooldown {
    color: var(--text-dim);
    font-size: 13px;
    margin-top: 8px;
}

/* ============================================
   MATCHMAKING
   ============================================ */
.matchmaking-section {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 20px;
    margin: 16px 0;
    text-align: center;
    backdrop-filter: var(--glass-filter);
}
.matchmaking-section h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
}
#matchmaking-elo {
    font-size: 24px;
    font-weight: 900;
    color: var(--accent);
    margin-bottom: 12px;
}
#matchmaking-btn {
    min-width: 160px;
}
#matchmaking-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}
@keyframes matchPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); }
}
#matchmaking-btn:disabled {
    animation: matchPulse 1.5s infinite;
}
.matchmaking-cancel {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-dim);
    cursor: pointer;
    text-decoration: underline;
}
.matchmaking-cancel:hover {
    color: var(--red, #f87171);
}
.matchmaking-cancel-btn {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.matchmaking-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #f87171;
}
.matchmaking-cancel-btn i {
    margin-right: 4px;
}

/* ============================================
   RANKED MATCH PANEL
   ============================================ */
.ranked-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.ranked-game-badge {
    background: var(--accent);
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}
.ranked-round-badge {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}
.ranked-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 16px;
}
.ranked-player {
    text-align: center;
    flex: 1;
    max-width: 160px;
}
.ranked-player-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto 8px;
    overflow: hidden;
    background: var(--glass);
    border: 2px solid rgba(var(--accent-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim)
}
.ranked-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}
.ranked-me .ranked-player-avatar {
    border-color: var(--accent)
}
.ranked-player-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ranked-player-elo {
    font-size: 13px;
    color: var(--text-dim);
}
.ranked-player-elo i {
    color: var(--accent);
    margin-right: 2px;
}
.ranked-vs {
    font-size: 22px;
    font-weight: 900;
    color: var(--accent);
    flex-shrink: 0;
}
.ranked-score-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 14px;
}
.ranked-score-table th {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    padding: 6px 8px;
    border-bottom: 1px solid var(--glass-border);
    text-align: center;
}
.ranked-score-table td {
    padding: 8px;
    text-align: center;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ranked-score-table tr:last-child td {
    border-bottom: none;
}

/* ============================================
   DIFFICULTY SELECTOR
   ============================================ */
.difficulty-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 16px;
}
.difficulty-btn {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--text-dim);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.difficulty-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.difficulty-btn:hover:not(.active) {
    border-color: var(--accent);
    color: var(--text);
}

/* ============================================
   GIFTING MODAL
   ============================================ */
.gift-modal-content {
    padding: 24px;
    max-width: 360px;
    margin: 0 auto;
}
.gift-amount-input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 16px;
    text-align: center;
    margin: 12px 0;
}
.gift-preview {
    text-align: center;
    padding: 12px;
    background: rgba(var(--accent-rgb), 0.08);
    border-radius: 8px;
    margin: 12px 0;
    font-size: 14px;
    color: var(--text);
}

/* ============================================
   PRESTIGE BADGE
   ============================================ */
.prestige-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}
.prestige-badge i {
    font-size: 10px;
}

/* ============================================
   SPIN WHEEL
   ============================================ */
.spin-wheel-section {
    margin-bottom: 28px;
    text-align: center;
    padding: 20px;
    background: var(--glass);
    border-radius: 16px;
    border: 1px solid var(--border);
}
.spin-wheel-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
}
.spin-wheel-title i {
    color: var(--accent);
}
.spin-wheel-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
#spin-wheel-canvas {
    border-radius: 50%;
    border: 3px solid var(--accent);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}
.spin-wheel-btn {
    width: auto;
    padding: 10px 32px;
    font-size: 15px;
}
.spin-wheel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.spin-wheel-result {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    animation: fadeInUp 0.4s ease;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   MASTER VOLUME (near radio)
   ============================================ */
.rew-volume-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-radius: 0 0 12px 12px;
    color: rgba(255,255,255,0.6);
}
.rew-volume-slider {
    flex: 1;
    height: 4px;
    accent-color: var(--accent);
    cursor: pointer;
}
.rew-volume-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
}

/* ============================================
   MATCHMAKING SPINNER
   ============================================ */
.matchmaking-status {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-dim);
}
.matchmaking-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.matchmaking-elo-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}
.matchmaking-elo-label {
    color: var(--text-dim);
    font-weight: 500;
}
.matchmaking-elo-value {
    font-weight: 700;
    font-size: 20px;
    color: var(--accent);
}
.matchmaking-btn {
    width: auto;
    padding: 10px 28px;
}