/* ============================================================================
   SOONIE-VERSE STYLESHEET
   ============================================================================
   
   TABLE OF CONTENTS
   -----------------
   1.  BASE & VARIABLES .................. CSS custom properties and resets
   2.  GLOBAL STYLES ..................... Scroll progress, particles, preloader
   3.  TYPOGRAPHY ........................ Headings, text utilities, links
   4.  HEADER & NAVIGATION ............... Fixed header, nav controls, socials
   5.  PRICE TICKER ...................... Live price display component
   6.  HERO SECTION ...................... Hero banner, glitch text, CA button
   7.  CLICKER GAME ...................... Score, combo, animations, particles
   8.  LEADERBOARD ....................... Global stats, rankings
   9.  ACHIEVEMENTS ...................... Notification popups
   10. ABOUT SECTION ..................... CA box, share buttons
   11. CHART SECTION ..................... Dexscreener embed
   12. SHOP SYSTEM ....................... Modal, items, prestige
   13. PROFILE ........................... User stats, achievements list
   14. COMBO TIERS ....................... Color-coded combo effects
   15. GALLERY ........................... Grid, filters, tilt effects
   16. LIGHTBOX .......................... Full-screen image viewer
   17. MEME EDITOR ....................... Canvas-based meme creator
   18. RESPONSIVE ........................ Mobile/tablet breakpoints
   19. UTILITIES ......................... Back-to-top, skip-to-content

   ============================================================================ */


/* ============================================================================
   1. BASE & VARIABLES
   ============================================================================ */

:root {
    --primary-gold: #D4AF37;
    --primary-gold-dim: #AA8C2C;
    --bg-dark: #0F172A;
    --bg-darker: #020617;
    --text-light: #F8FAFC;
    --text-dim: #94A3B8;
    --font-heading: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;
    --spacing-container: 1200px;
    --transition-speed: 0.3s;
    --success-color: #10B981;
    --error-color: #EF4444;
    --primary-gold-rgb: 212, 175, 55;
    /* Overlay backgrounds for modals */
    --overlay-bg: rgba(0, 0, 0, 0.95);
    --overlay-bg-soft: rgba(0, 0, 0, 0.8);
}

/* Light Mode Theme */
body.light-mode {
    --bg-dark: #F1F5F9;
    --bg-darker: #E2E8F0;
    --text-light: #1E293B;
    --text-dim: #475569;
    /* Light mode overlays need semi-transparent dark backgrounds for contrast */
    --overlay-bg: rgba(30, 41, 59, 0.95);
    --overlay-bg-soft: rgba(30, 41, 59, 0.8);
}


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

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-gold) var(--bg-darker);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-gold-dim);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

body {
    background-color: var(--bg-dark);
    color: var(--text-light);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* ============================================================================
   2. GLOBAL STYLES
   ============================================================================ */

/* Scroll Progress */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(to right, var(--primary-gold), var(--primary-gold-dim));
    z-index: 9998;
    transition: width 0.1s ease;
}

/* Noise Overlay */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9997;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Particles Background */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--primary-gold);
    border-radius: 50%;
    opacity: 0.3;
    animation: float 10s infinite ease-in-out;
}

@keyframes float {

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

    25% {
        transform: translateY(-20px) translateX(10px);
    }

    50% {
        transform: translateY(-40px) translateX(-10px);
    }

    75% {
        transform: translateY(-20px) translateX(5px);
    }
}


/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-dark);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    text-align: center;
}

.preloader-text {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--primary-gold);
    margin-bottom: 2rem;
    letter-spacing: 4px;
}

.preloader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--primary-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cursor Particle */
.cursor-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--primary-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.5s ease, opacity 0.5s ease;
    box-shadow: 0 0 5px var(--primary-gold);
}

/* Custom Cursor Main Element */
#custom-cursor {
    position: fixed;
    pointer-events: none;
    width: 20px;
    height: 20px;
    border: none;
    /* Invisible */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s, width 0.2s, height 0.2s;
    z-index: 10000;
    display: none;
}

@media (min-width: 992px) {
    #custom-cursor {
        display: block;
    }
}

#custom-cursor.active {
    width: 40px;
    height: 40px;
    background-color: transparent;
    /* Invisible */
    border-color: transparent;
}

/* Skip to Content */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-gold);
    color: var(--bg-dark);
    padding: 0.5rem 1rem;
    z-index: 10001;
    transition: top 0.3s;
}

.skip-to-content:focus {
    top: 0;
}

/* Container */
.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Loading Leaderboard */
.loading-leaderboard {
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
    padding: 2rem;
}

/* Shop Upgrades */
.shop-upgrades {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


/* ============================================================================
   3. TYPOGRAPHY
   ============================================================================ */

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.section-intro-container {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.intro-lead {
    font-size: 1.4rem;
    color: var(--text-light);
    font-family: var(--font-heading);
    line-height: 1.4;
}

.intro-body {
    font-size: 1.1rem;
    color: var(--text-dim);
    line-height: 1.8;
}

.intro-cta {
    font-size: 1.2rem;
    color: var(--primary-gold);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.highlight {
    color: var(--primary-gold);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed) ease;
}

/* ============================================================================
   4. HEADER & NAVIGATION
   ============================================================================ */

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.5rem 2rem;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.95), transparent);
    backdrop-filter: blur(10px);
}

body.light-mode header {
    background: linear-gradient(to bottom, rgba(241, 245, 249, 0.95), transparent);
}

nav {
    max-width: var(--spacing-container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary-gold);
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.nav-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.control-btn {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
    transform: scale(1.1);
}

.control-btn.muted {
    color: var(--error-color);
    border-color: var(--error-color);
}

/* Sound Control Wrapper */
.sound-control-wrapper {
    position: relative;
    display: inline-block;
}

/* Volume Popup */
.volume-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease 1.5s, transform 0.3s ease;
    backdrop-filter: blur(10px);
    z-index: 1000;
    min-width: 150px;
}

body.light-mode .volume-popup {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.sound-control-wrapper:hover .volume-popup,
.volume-popup:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, visibility 0s, transform 0.3s ease;
}

#volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

body.light-mode #volume-slider {
    background: rgba(255, 255, 255, 0.4);
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--primary-gold);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    transition: transform 0.2s ease;
}

#volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

#volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--primary-gold);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

#volume-value {
    color: var(--primary-gold);
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 35px;
    text-align: right;
}

.socials {
    display: flex;
    gap: 1rem;
}

.socials a {
    font-size: 1.2rem;
    color: var(--text-light);
    transition: all var(--transition-speed) ease;
}

.socials a:hover {
    color: var(--primary-gold);
    transform: translateY(-2px);
}

/* ============================================================================
   5. PRICE TICKER
   ============================================================================ */

/* Price Ticker */
.price-ticker {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    font-family: var(--font-body);
    cursor: help;
    transition: all var(--transition-speed) ease;
}

.price-ticker:hover {
    border-color: var(--primary-gold);
    background: rgba(212, 175, 55, 0.05);
}

.price-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.token-logo {
    height: 24px;
    width: auto;
    border-radius: 50%;
    object-fit: contain;
}

.price-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 1px;
}

.price-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
    font-family: 'Courier New', monospace;
}

.price-change {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
}

.price-change.positive {
    color: var(--success-color);
    background: rgba(16, 185, 129, 0.1);
}

.price-change.negative {
    color: var(--error-color);
    background: rgba(239, 68, 68, 0.1);
}

.change-icon {
    font-size: 0.7rem;
}

.price-loading,
.price-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.price-error .price-value {
    color: var(--text-dim);
}

/* ============================================================================
   6. HERO SECTION
   ============================================================================ */

/* Hero Section */
#hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 2rem;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

h1.glitch {
    font-size: 5rem;
    color: var(--primary-gold);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    margin-bottom: 0.5rem;
    position: relative;
    animation: glitch 3s infinite;
}

@keyframes glitch {

    0%,
    90%,
    100% {
        text-shadow:
            0 0 20px rgba(212, 175, 55, 0.3),
            0 0 30px rgba(212, 175, 55, 0.2);
    }

    92%,
    94%,
    96% {
        text-shadow:
            -2px 0 rgba(212, 175, 55, 0.8),
            2px 2px rgba(170, 140, 44, 0.8),
            0 0 40px rgba(212, 175, 55, 0.5);
        transform: skew(-0.5deg);
    }

    93%,
    95% {
        text-shadow:
            2px 0 rgba(212, 175, 55, 0.8),
            -2px -2px rgba(170, 140, 44, 0.8),
            0 0 40px rgba(212, 175, 55, 0.5);
        transform: skew(0.5deg);
    }
}

.subtitle {
    font-size: 1.2rem;
    letter-spacing: 6px;
    color: var(--text-dim);
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.ticker-box {
    animation: fadeInUp 1s ease-out 0.6s both;
}

.ticker-box span {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
    font-family: var(--font-heading);
    letter-spacing: 2px;
    transition: all var(--transition-speed) ease;
}

.ticker-box span:hover {
    background: rgba(212, 175, 55, 0.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    filter: sepia(20%) contrast(110%);
}

.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, var(--bg-dark) 90%);
}

.hero-ca-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
    padding: 1rem 2rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    animation: fadeInUp 1s ease-out 0.6s both;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 90vw;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hero-ca-btn:hover {
    background: var(--primary-gold);
    color: var(--bg-dark);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.hero-ca-btn:active {
    transform: scale(0.95);
}

.hero-ca-btn.copied {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--success-color);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}

.hero-ca-btn.copied .ca-text {
    color: var(--success-color);
}

.hero-ca-btn.copied i {
    color: var(--success-color);
}

.hero-ca-btn .ca-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-copy-feedback {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-gold);
    color: var(--bg-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-family: var(--font-body);
    font-weight: bold;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.hero-copy-feedback.show {
    top: -30px;
    opacity: 1;
}


/* ============================================================================
   7. CLICKER GAME
   ============================================================================ */

/* Clicker Section */
#clicker {
    padding: 4rem 2rem;
    background-color: var(--bg-dark);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 10;
}

#clicker h2 {
    font-size: 3rem;
    color: var(--primary-gold);
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.clicker-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.score-board {
    font-family: var(--font-heading);
    font-size: 4rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    font-weight: 700;
}

.score-board span {
    color: var(--primary-gold);
    transition: transform 0.2s ease;
    display: inline-block;
}

.score-board span.score-bump {
    animation: scoreBump 0.3s ease;
}

@keyframes scoreBump {

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

    50% {
        transform: scale(1.2);
    }
}

/* Combo Indicator */
.combo-indicator {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--primary-gold);
    margin-bottom: 1.5rem;
    opacity: 0;
    transition: opacity var(--transition-speed) ease, color 0.3s, text-shadow 0.3s, transform 0.1s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.combo-indicator.active {
    opacity: 1;
    animation: comboPulse 0.5s ease;
}

@keyframes comboPulse {

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

    50% {
        transform: scale(1.1);
    }
}

.clicker-area {
    margin-bottom: 2rem;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
    display: inline-block;
}

.clicker-area:active {
    transform: scale(0.95);
}

.clicker-area img {
    max-width: 100%;
    width: 750px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.1));
    transition: filter var(--transition-speed) ease;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.clicker-area:hover img {
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.3));
}

/* Floating Text Animation */
.floating-text {
    position: fixed;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-gold);
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 100;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

/* Golden Soonie Floating Text */
.floating-text-gold {
    font-size: 2.5rem;
    color: gold;
    text-shadow:
        0 0 10px gold,
        0 0 20px gold,
        0 0 30px rgba(255, 215, 0, 0.5);
}

/* Click Particles */
.click-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: var(--primary-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: particleExplode 0.8s ease-out forwards;
    z-index: 99;
}

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

    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
    }
}

/* Global Stats */
.global-stats {
    margin: 3rem 0;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.global-stats h3 {
    color: var(--primary-gold);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.global-count {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--text-light);
    font-weight: 700;
}

/* ============================================================================
   8. LEADERBOARD
   ============================================================================ */

/* Leaderboard */
.leaderboard-container {
    max-width: 600px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(212, 175, 55, 0.2);
    padding: 2rem;
    border-radius: 8px;
}

.leaderboard-container h3 {
    color: var(--primary-gold);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    letter-spacing: 2px;
}

.leaderboard-list {
    text-align: left;
}

.leaderboard-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: var(--font-body);
    font-weight: 600;
    transition: background var(--transition-speed) ease;
}

.leaderboard-item:hover {
    background: rgba(212, 175, 55, 0.05);
}

.leaderboard-item:last-child {
    border-bottom: none;
}

.leaderboard-item .country {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light);
}

.leaderboard-item .rank {
    font-size: 0.9rem;
    color: var(--text-dim);
    min-width: 30px;
}

.leaderboard-item.top-1 .rank {
    color: #FFD700;
    font-size: 1.2rem;
}

.leaderboard-item.top-2 .rank {
    color: #C0C0C0;
    font-size: 1.1rem;
}

.leaderboard-item.top-3 .rank {
    color: #CD7F32;
    font-size: 1.05rem;
}

.leaderboard-item .count {
    color: var(--primary-gold);
    font-family: 'Courier New', monospace;
}

.leaderboard-item.highlight {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
}



/* ============================================================================
   9. ACHIEVEMENTS
   ============================================================================ */

/* Achievement Notification */
.achievement-notification {
    position: fixed;
    top: 100px;
    right: -400px;
    width: 350px;
    background: rgba(15, 23, 42, 0.98);
    border: 2px solid var(--primary-gold);
    border-radius: 8px;
    padding: 1.5rem;
    z-index: 1000;
    display: flex;
    gap: 1rem;
    align-items: center;
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.3);
    transition: right 0.5s ease;
}

body.light-mode .achievement-notification {
    background: rgba(241, 245, 249, 0.98);
}

.achievement-notification.show {
    right: 20px;
}

.achievement-icon {
    font-size: 3rem;
    color: var(--primary-gold);
}

.achievement-content h4 {
    color: var(--primary-gold);
    margin-bottom: 0.25rem;
    font-size: 1.1rem;
}

.achievement-content p {
    color: var(--text-dim);
    font-size: 0.9rem;
}

/* ============================================================================
   10. ABOUT SECTION
   ============================================================================ */

/* About Section */
#about {
    padding: 6rem 2rem;
    text-align: center;
    background-color: var(--bg-darker);
    position: relative;
    z-index: 10;
}



#about h2 {
    font-size: 2.5rem;
    color: var(--primary-gold);
    margin-bottom: 2rem;
}

#about p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dim);
    max-width: 800px;
    margin: 0 auto 3rem;
}


.ca-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 3rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    transition: all var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.ca-box:hover {
    border-color: var(--primary-gold);
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.2), inset 0 0 20px rgba(212, 175, 55, 0.05);
    transform: translateY(-5px);
}

.ca-box .label {
    font-size: 0.9rem;
    letter-spacing: 4px;
    color: var(--primary-gold);
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ca-box code {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    color: var(--text-light);
    word-break: break-all;
    text-align: center;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.ca-box:hover code {
    border-color: rgba(212, 175, 55, 0.3);
    color: #fff;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

#copy-btn {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    padding: 0.5rem 1.5rem;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    border-radius: 4px;
    position: relative;
}

#copy-btn:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
    transform: translateY(-2px);
}

.copy-feedback {
    position: absolute;
    bottom: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--primary-gold);
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    white-space: nowrap;
}

.copy-feedback.show {
    opacity: 1;
}

/* Share Buttons */
.share-buttons {
    margin-top: 3rem;
}

.share-buttons h3 {
    color: var(--primary-gold);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.share-btn {
    background: transparent;
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
    padding: 0.75rem 2rem;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.share-btn:hover {
    background: var(--primary-gold);
    color: var(--bg-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

/* ============================================================================
   11. CHART SECTION
   ============================================================================ */

/* Chart Section */
#chart {
    padding: 2rem 1rem;
    background-color: var(--bg-darker);
    text-align: center;
}

#chart h2 {
    font-size: 2.5rem;
    color: var(--primary-gold);
    margin-bottom: 2rem;
}

.chart-wrapper {
    position: relative;
    max-width: var(--spacing-container);
    margin: 0 auto;
}

.chart-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-gold);
    font-size: 1.5rem;
    z-index: 1;
}

.chart-loading.hidden {
    display: none;
}

.chart-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    border: 2px solid #131722;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(212, 175, 55, 0.15);
    overflow: hidden;
    background: #131722;
}

.chart-container iframe {
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 0 !important;
    outline: none;
    background: #131722;
    display: block;
    margin: -1px;
    padding: 0;
}

/* Shop Toggle Button */
.shop-toggle-btn {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    border: 2px solid var(--primary-gold);
    color: var(--primary-gold);
    padding: 1rem 2rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 2px;
    transition: all var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}

.shop-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.2));
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

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

/* Gallery Controls */
.gallery-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.gallery-tab {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all var(--transition-speed) ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gallery-tab:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
    transform: translateY(-2px);
}

.gallery-tab.active {
    background: var(--primary-gold);
    color: var(--bg-dark);
    border-color: var(--primary-gold);
}

.gallery-tab i {
    font-size: 1rem;
}


/* Footer */
footer {
    padding: 3rem 2rem;
    text-align: center;
    background-color: var(--bg-darker);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

footer p {
    color: var(--text-dim);
    margin-bottom: 1rem;
}

.footer-links {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.footer-links a {
    color: var(--text-dim);
    transition: color var(--transition-speed) ease;
}

.footer-links a:hover {
    color: var(--primary-gold);
}


/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--primary-gold);
    border: none;
    border-radius: 50%;
    color: var(--bg-dark);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-speed) ease;
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.5);
}


/* ============================================================================
   12. SHOP SYSTEM
   ============================================================================ */

/* Shop Modal Styles */
.shop-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.shop-modal.active {
    display: flex;
    opacity: 1;
    pointer-events: all;
}

.shop-content {
    background: var(--bg-darker);
    border: 2px solid var(--primary-gold);
    border-radius: 12px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.shop-modal.active .shop-content {
    transform: translateY(0);
}

.shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(212, 175, 55, 0.3);
}

.shop-header h2 {
    color: var(--primary-gold);
    margin: 0;
    font-size: 1.8rem;
}

.shop-close {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.shop-close:hover {
    color: var(--primary-gold);
}

.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.shop-item:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}

.shop-item-icon {
    font-size: 2rem;
    color: var(--primary-gold);
    margin-right: 1rem;
    min-width: 50px;
    text-align: center;
}

.shop-item-info {
    flex: 1;
}

.shop-item-info h4 {
    color: var(--text-light);
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.shop-item-info p {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.4;
}

.level-badge {
    display: inline-block;
    background: rgba(212, 175, 55, 0.2);
    color: var(--primary-gold);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.current-bonus {
    color: var(--primary-gold);
    font-size: 0.8rem;
    font-style: italic;
}

.shop-item-buy {
    background: transparent;
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    transition: all 0.2s;
    min-width: 120px;
    white-space: nowrap;
}

.shop-item-buy:hover:not(:disabled) {
    background: var(--primary-gold);
    color: var(--bg-dark);
}

.shop-item-buy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--text-dim);
    color: var(--text-dim);
}

.shop-item-buy.shake {
    animation: shake 0.5s ease;
}

@keyframes shake {

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

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Prestige Section - Exclusive VIP Styling */
.prestige-section {
    margin-top: 2rem;
    padding: 2rem;
    background: linear-gradient(145deg,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(20, 15, 5, 0.9) 50%,
            rgba(0, 0, 0, 0.8) 100%);
    border: 2px solid transparent;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

/* Animated gold border */
.prestige-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(45deg,
            #D4AF37, #FFD700, #FFA500, #FFD700, #D4AF37);
    background-size: 300% 300%;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: borderGlow 3s ease-in-out infinite;
}

/* Shimmer overlay effect */
.prestige-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 40%,
            rgba(255, 215, 0, 0.05) 45%,
            rgba(255, 215, 0, 0.1) 50%,
            rgba(255, 215, 0, 0.05) 55%,
            transparent 60%);
    animation: shimmer 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes borderGlow {

    0%,
    100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
    }

    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

.prestige-header {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.prestige-header h3 {
    color: transparent;
    background: linear-gradient(135deg, #FFD700, #FFA500, #FFD700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0 0 0.5rem 0;
    font-size: 1.8rem;
    animation: textShine 3s linear infinite;
    letter-spacing: 3px;
}

@keyframes textShine {
    to {
        background-position: 200% center;
    }
}

.prestige-header p {
    color: #E8D5A3;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.prestige-info {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.prestige-info p {
    color: #B8A67A;
    margin: 0.5rem 0;
    font-size: 1rem;
}

.prestige-info .requirement {
    color: #FFD700;
    font-weight: bold;
    font-size: 1.2rem;
    margin-top: 1rem;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.prestige-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2417 50%, #1a1a1a 100%);
    color: #FFD700;
    border: 2px solid #D4AF37;
    padding: 1.2rem 2rem;
    border-radius: 50px;
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 4px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.2);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.prestige-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transition: left 0.5s ease;
}

.prestige-btn:hover:not(:disabled)::before {
    left: 100%;
}

.prestige-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2d2417 0%, #3d3020 50%, #2d2417 100%);
    border-color: #FFD700;
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(212, 175, 55, 0.4), 0 0 60px rgba(255, 215, 0, 0.3);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.prestige-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(50%);
}

/* Leaderboard Controls */
.leaderboard-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.filter-btn.active {
    background: var(--primary-gold);
    color: var(--bg-dark);
    border-color: var(--primary-gold);
}


/* =========================================
   Profile Styles
   ========================================= */
.profile-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profile-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.profile-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* User Info */
.user-info {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.avatar-container {
    position: relative;
}

.avatar {
    width: 80px;
    height: 80px;
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--primary-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--primary-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

.name-input-container {
    flex: 1;
}

.name-input-container label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}

.input-wrapper {
    display: flex;
    gap: 0.5rem;
}

#username-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    width: 100%;
    transition: border-color 0.3s;
}

#username-input:focus {
    outline: none;
    border-color: var(--primary-gold);
}

#save-name-btn {
    background: transparent;
    border: 1px solid var(--primary-gold);
    color: var(--primary-gold);
    width: 40px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

#save-name-btn:hover {
    background: var(--primary-gold);
    color: var(--bg-dark);
}

#save-name-btn.success {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.stat-value {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    color: var(--primary-gold);
    font-weight: bold;
}

/* Achievements */
.achievements-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 0.5;
    filter: grayscale(1);
    transition: all 0.3s;
}

.achievement-item.unlocked {
    opacity: 1;
    filter: grayscale(0);
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
}

.ach-icon {
    font-size: 1.5rem;
    color: var(--primary-gold);
    width: 40px;
    text-align: center;
}

.ach-info h4 {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-light);
}

.ach-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* =========================================
   Combo Tier Styles
   ========================================= */

/* Low (Base) */
.combo-low {
    color: var(--primary-gold);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Medium - Bright Gold */
.combo-medium {
    color: #FFD700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

/* High - Burning Orange */
.combo-high {
    color: #FF8C00;
    text-shadow: 0 0 20px rgba(255, 140, 0, 0.6);
    animation: pulse 0.5s infinite alternate;
}

/* Super - Fiery Red */
.combo-super {
    color: #FF4500;
    text-shadow: 0 0 25px rgba(255, 69, 0, 0.8);
    animation: shake 0.5s infinite;
}

/* Hyper - Plasma Blue */
.combo-hyper {
    color: #00BFFF;
    text-shadow: 0 0 30px rgba(0, 191, 255, 0.9);
    animation: shake 0.4s infinite, pulse 0.3s infinite alternate;
}

/* God Mode - Iridescent */
.combo-god {
    background: linear-gradient(to right, #FFD700, #FF4500, #00BFFF, #FFD700);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
    animation: shine 2s linear infinite, shake 0.3s infinite;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

/* God Mode Body Effect */
body.god-mode {
    animation: godModeFlash 2s infinite;
}

@keyframes godModeFlash {

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

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

/* =========================================
   Responsive Design
   ========================================= */

/* Combo Timer Bar - Added for visual feedback */
#combo-timer-bar {
    width: 0%;
    max-width: 150px;
    height: 4px;
    background: var(--primary-gold);
    border-radius: 2px;
    box-shadow: 0 0 10px var(--primary-gold);
    margin-top: 0.25rem;
}



#combo-text {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 2px;
}

/* Timer bar color per combo tier */
.combo-low #combo-timer-bar {
    background: #D4AF37;
    box-shadow: 0 0 8px #D4AF37;
}

.combo-medium #combo-timer-bar {
    background: #FFD700;
    box-shadow: 0 0 10px #FFD700;
}

.combo-high #combo-timer-bar {
    background: #FF8C00;
    box-shadow: 0 0 12px #FF8C00;
}

.combo-super #combo-timer-bar {
    background: #FF4500;
    box-shadow: 0 0 15px #FF4500;
}

.combo-hyper #combo-timer-bar {
    background: #00BFFF;
    box-shadow: 0 0 18px #00BFFF;
}

.combo-god #combo-timer-bar {
    background: linear-gradient(to right, #FFD700, #FF4500, #00BFFF);
    box-shadow: 0 0 20px #FFD700;
}



/* Gallery 3-Column Grid Override */

/* ============================================
   GALLERY - Consolidated Styles
   ============================================ */

/* Gallery Section */
#gallery {
    padding: 6rem 2rem;
    background-color: var(--bg-dark);
    position: relative;
    z-index: 10;
}

#gallery .container {
    position: relative;
    overflow: visible;
}

#gallery h2 {
    font-size: 2.5rem;
    color: var(--primary-gold);
    margin-bottom: 3rem;
    text-align: center;
}

/* 3x3 Horizontal Scrolling Grid */
.gallery-grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    /* Each "page" is 3 columns, so grid-auto-columns = ~30% (leaving room for gap) */
    grid-auto-columns: calc((90% - 2rem) / 3);
    /* 3 columns fit in 90% of container */
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1rem 5% 1.5rem 5%;
    /* 5% padding creates centered effect with ~5% peek */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-gold) rgba(255, 255, 255, 0.1);
    max-height: 600px;
    max-width: var(--spacing-container);
    margin: 0 auto;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.gallery-grid::-webkit-scrollbar {
    height: 8px;
}

.gallery-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.gallery-grid::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 4px;
}

/* Gallery Items */
.gallery-item {
    position: relative;
    min-width: 100%;
    /* Fill the column */
    max-width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    cursor: pointer;
    scroll-snap-align: center;
    /* Center snap for peek effect */
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.03, 0.98, 0.52, 0.99),
        box-shadow 0.4s ease,
        border-color 0.3s ease;
}

.gallery-item:hover {
    border-color: var(--primary-gold);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.2);
    z-index: 10;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-speed) ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Gallery Caption */
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    color: var(--text-light);
    padding: 1.5rem 1rem 0.75rem;
    font-size: 0.9rem;
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
}

/* Gallery Filter Animation */
.rotate-out {
    transform: rotateY(90deg);
    opacity: 0;
    transition: all 0.5s ease;
}

.rotate-in {
    transform: rotateY(0deg);
    opacity: 1;
    transition: all 0.5s ease;
}

/* Gallery Scroll Arrow Buttons */
.gallery-scroll-arrow {
    position: absolute;
    top: calc(50% + 14rem);
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border: 2px solid rgba(212, 175, 55, 0.6);
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    animation: subtlePulse 2s ease-in-out infinite;
}

/* Right arrow positioning (default) */
.gallery-scroll-arrow-right {
    right: 0;
}

/* Left arrow positioning */
.gallery-scroll-arrow-left {
    left: 0;
}

/* Right arrow icon */
.gallery-scroll-arrow-right::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 14px solid rgba(212, 175, 55, 0.8);
    margin-left: 3px;
    transition: all 0.3s ease;
}

/* Left arrow icon (mirrored) */
.gallery-scroll-arrow-left::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 14px solid rgba(212, 175, 55, 0.8);
    margin-right: 3px;
    transition: all 0.3s ease;
}

.gallery-scroll-arrow:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.15));
    border-color: var(--primary-gold);
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

.gallery-scroll-arrow-right:hover::before {
    border-left-color: var(--primary-gold);
}

.gallery-scroll-arrow-left:hover::before {
    border-right-color: var(--primary-gold);
}

@keyframes subtlePulse {

    0%,
    100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

    50% {
        box-shadow: 0 4px 25px rgba(212, 175, 55, 0.3);
    }
}

/* ============================================
   LIGHTBOX - Consolidated Styles
   ============================================ */

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.lightbox.active {
    display: flex;
}

/* Lightbox Header with Download & Close */
.lightbox-header {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    z-index: 10001;
}

.lightbox-close,
.lightbox-download {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--primary-gold);
    color: var(--primary-gold);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.lightbox-download:hover,
.lightbox-close:hover {
    background: var(--primary-gold);
    color: var(--bg-dark);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* Lightbox Share Button */
.lightbox-share-btn {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #1da1f2;
    color: #1da1f2;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(8px);
}

.lightbox-share-btn:hover {
    background: #1da1f2;
    color: white;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(29, 161, 242, 0.5);
}

.lightbox-share-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Lightbox share button group - side by side */
.lightbox-share-group {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

/* Arena share button variant */
.arena-share-btn {
    border-color: #ff6b35;
    color: #ff6b35;
}

.arena-share-btn:hover {
    background: #ff6b35;
    color: white;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
}

/* Arena icon styling */
.arena-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

/* Meme Editor Arena button */
.meme-action-btn.share-arena {
    background: linear-gradient(135deg, #ff6b35, #f7931a);
    border: none;
    color: white;
}

.meme-action-btn.share-arena:hover {
    background: linear-gradient(135deg, #ff8555, #ffb33a);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

/* Lightbox Navigation */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(212, 175, 55, 0.2);
    border: none;
    color: var(--primary-gold);
    width: 60px;
    height: 60px;
    cursor: pointer;
    font-size: 2rem;
    transition: all var(--transition-speed) ease;
    backdrop-filter: blur(10px);
}

.lightbox-nav:hover {
    background: rgba(212, 175, 55, 0.4);
}

.lightbox-prev {
    left: 2rem;
}

.lightbox-next {
    right: 2rem;
}

/* Lightbox Image - Near Full Screen */
#lightbox-img {
    max-width: calc(100vw - 120px);
    max-height: calc(100vh - 80px);
    object-fit: contain;
    border-radius: 8px;
}

/* Responsive Gallery & Lightbox */


/* Fix: Ensure gallery-item receives mouse events for 3D tilt */
.gallery-item {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
}

.gallery-item img,
.gallery-item .gallery-caption,
.gallery-item .overlay {
    pointer-events: none;
}

/* Skip to Content - Accessibility */
.skip-to-content {
    position: fixed;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-gold);
    color: var(--bg-dark);
    padding: 1rem 2rem;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.3s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 2px solid var(--white);
    outline-offset: 2px;
}




/* =====================================================
   MEME EDITOR STYLES
   ===================================================== */

.meme-editor-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    overflow: auto;
}

.meme-editor-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.meme-editor-container {
    background: var(--bg-dark);
    border: 1px solid var(--primary-gold);
    border-radius: 16px;
    max-width: 900px;
    width: 95%;
    max-height: 95vh;
    max-height: 95vh;
    overflow: visible;
    /* Allow popups to extend outside */
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 50px rgba(212, 175, 55, 0.3);
}

.meme-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), transparent);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

.meme-editor-header h2 {
    font-family: var(--font-heading);
    color: var(--primary-gold);
    font-size: 1.5rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meme-close-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s;
}

.meme-close-btn:hover {
    color: var(--primary-gold);
}

.meme-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    align-items: center;
}

.meme-tool-btn {
    background: var(--primary-gold);
    color: var(--bg-dark);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.meme-tool-btn:hover {
    background: var(--gold-light);
    transform: scale(1.05);
}

.meme-tool-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.meme-tool-group label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.meme-tool-group select,
.meme-tool-group input[type="range"] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    color: var(--white);
    padding: 0.3rem;
}

.meme-tool-group select {
    padding: 0.3rem 0.5rem;
}

.meme-tool-group input[type="color"] {
    width: 40px;
    height: 30px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}

.meme-tool-group input[type="range"] {
    width: 80px;
}

#meme-size-value {
    color: var(--primary-gold);
    font-weight: 600;
    min-width: 30px;
}

.meme-editor-workspace {
    flex: 1;
    overflow: auto;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: repeating-conic-gradient(#1a1a2e 0% 25%, #16162a 0% 50%) 50% / 20px 20px;
}

.meme-canvas-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: 60vh;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

#meme-base-image {
    max-width: 100%;
    max-height: 60vh;
    display: block;
}

.meme-text-layers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.meme-text-layer {
    position: absolute;
    padding: 8px 16px;
    font-family: Impact, sans-serif;
    font-size: 48px;
    color: #ffffff;
    text-transform: uppercase;
    cursor: move;
    pointer-events: auto;
    outline: none;
    min-width: 50px;
    text-align: center;
    user-select: none;
    border: 2px dashed transparent;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.meme-text-layer:hover,
.meme-text-layer:focus {
    border-color: rgba(212, 175, 55, 0.5);
}

.meme-text-layer.active {
    border-color: var(--primary-gold);
}

.meme-text-layer.dragging {
    opacity: 0.8;
    cursor: grabbing;
}

.meme-layer-delete {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    background: #e74c3c;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meme-text-layer:hover .meme-layer-delete,
.meme-text-layer.active .meme-layer-delete {
    opacity: 1;
}

.meme-layer-delete:hover {
    transform: scale(1.2);
    background: #c0392b;
}

.meme-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.meme-action-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}



/* Lightbox Create Meme Button */
.lightbox-meme-btn {
    background: linear-gradient(135deg, var(--primary-gold), #f0c14b);
    color: var(--bg-dark);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
    font-size: 1rem;
}

.lightbox-meme-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

/* Mobile Responsive */

/* MEME EDITOR IMPROVEMENTS - Premium Look */

/* Fix dropdown white on white issue */
.meme-tool-group select {
    background: var(--bg-dark);
    color: var(--white);
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
}

.meme-tool-group select option {
    background: var(--bg-dark);
    color: var(--white);
    padding: 0.5rem;
}

.meme-tool-group select:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* Premium container styling */
.meme-editor-container {
    background: linear-gradient(180deg, var(--bg-darker) 0%, var(--bg-dark) 100%);
    border: 2px solid var(--primary-gold);
    border-radius: 20px;
    box-shadow:
        0 0 60px rgba(212, 175, 55, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Premium header */
.meme-editor-header {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    padding: 1.25rem 1.5rem;
}

.meme-editor-header h2 {
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--primary-gold), #f4d03f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glowing toolbar */
.meme-editor-toolbar {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding: 1.25rem 1.5rem;
    gap: 1.25rem;
}

.meme-tool-btn {
    background: linear-gradient(135deg, var(--primary-gold), #f4d03f);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
}

.meme-tool-btn:hover {
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.5);
}

/* Better color inputs */
.meme-tool-group input[type="color"] {
    width: 45px;
    height: 35px;
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    overflow: hidden;
}

.meme-tool-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}

.meme-tool-group input[type="color"]::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}

/* Custom Color Picker - Premium Design */
.color-picker-group {
    position: relative;
}

.color-picker-wrapper {
    position: relative;
}

.color-preview-btn {
    width: 40px;
    height: 32px;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.color-preview-btn:hover {
    border-color: var(--primary-gold);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

.color-swatch-panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 12px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    min-width: 160px;
}

.color-swatch-panel.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

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

.color-swatch {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.15);
    border-color: var(--primary-gold);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

.hidden-color-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.custom-color-btn {
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.1));
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 6px;
    color: var(--primary-gold);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-color-btn:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(212, 175, 55, 0.2));
    border-color: var(--primary-gold);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* Range sliders */
.meme-tool-group input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    height: 6px;
    border-radius: 3px;
    width: 100px;
}

.meme-tool-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-gold);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Premium workspace */
.meme-editor-workspace {
    background:
        radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        repeating-conic-gradient(#12121f 0% 25%, #0f0f1a 0% 50%) 50% / 20px 20px;
    padding: 2rem;
}

.meme-canvas-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 175, 55, 0.1);
}

/* Premium action buttons */
.meme-editor-actions {
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    padding: 1.25rem 1.5rem;
}

.meme-action-btn.primary {
    background: linear-gradient(135deg, var(--primary-gold), #f4d03f);
    color: var(--bg-dark);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.4);
    padding: 0.85rem 2rem;
    font-size: 1rem;
    border-radius: 10px;
}

.meme-action-btn.primary:hover {
    background: linear-gradient(135deg, #f0c14b, #f7dc6f);
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);
    transform: scale(1.05);
}

.meme-action-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.85rem 1.5rem;
}

.meme-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

/* Better text layer styling */
.meme-text-layer {
    border: 2px dashed rgba(212, 175, 55, 0.3);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.meme-text-layer.active {
    border-color: var(--primary-gold);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* Placeholder text styling */
.meme-text-layer.placeholder {
    opacity: 0.7;
}

/* Download Button Group */
.meme-download-group {
    display: flex;
    gap: 0.75rem;
}

.meme-action-btn.primary.hd {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.meme-action-btn.primary.hd:hover {
    background: linear-gradient(135deg, #a569bd, #9b59b6);
    box-shadow: 0 6px 30px rgba(155, 89, 182, 0.5);
}

.meme-action-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* UHD Button styling */
.meme-action-btn.primary.uhd {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.meme-action-btn.primary.uhd:hover {
    background: linear-gradient(135deg, #ec7063, #e74c3c);
    box-shadow: 0 6px 30px rgba(231, 76, 60, 0.5);
}

/* Specific fix for SD button hover consistency */
#meme-download-sd:hover {
    background: linear-gradient(135deg, #f0c14b, #f7dc6f);
    box-shadow: 0 6px 30px rgba(212, 175, 55, 0.6);
}

/* Share to X Button */
.meme-action-btn.share-x {
    background: linear-gradient(135deg, #1da1f2, #0d8ed9);
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(29, 161, 242, 0.4);
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    border-radius: 10px;
}

.meme-action-btn.share-x:hover {
    background: linear-gradient(135deg, #4db5f5, #1da1f2);
    box-shadow: 0 6px 30px rgba(29, 161, 242, 0.6);
}

.meme-action-btn.share-x:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Share button group - desktop layout */
.meme-share-group {
    display: flex;
    gap: 0.5rem;
}

.meme-share-group .meme-action-btn {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Lightbox Download Button Group - Premium Design */
.lightbox-download-group {
    display: flex;
    gap: 12px;
}

.lightbox-download.hd,
.lightbox-download.uhd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 80px;
    padding: 12px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    white-space: nowrap;
}

.lightbox-download.hd::before,
.lightbox-download.uhd::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    pointer-events: none;
}

.lightbox-download.hd:hover::before,
.lightbox-download.uhd:hover::before {
    left: 100%;
}

.lightbox-download.hd i,
.lightbox-download.uhd i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.lightbox-download.hd:hover i,
.lightbox-download.uhd:hover i {
    animation: downloadBounce 0.5s ease;
}

@keyframes downloadBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(3px);
    }
}

/* HD Button - Elegant Purple with Gold accent */
.lightbox-download.hd {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(109, 40, 217, 0.9));
    color: white;
    box-shadow:
        0 4px 15px rgba(139, 92, 246, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.lightbox-download.hd span {
    background: linear-gradient(135deg, #fff, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lightbox-download.hd:hover {
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.95), rgba(139, 92, 246, 0.95));
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(139, 92, 246, 0.5),
        0 0 40px rgba(139, 92, 246, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(212, 175, 55, 0.5);
}

/* UHD Button - Premium Gold/Red with shimmer */
.lightbox-download.uhd {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.9), rgba(184, 134, 11, 0.9));
    color: #1a1a2e;
    box-shadow:
        0 4px 15px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lightbox-download.uhd span {
    font-weight: 800;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.lightbox-download.uhd i {
    color: #1a1a2e;
}

.lightbox-download.uhd:hover {
    background: linear-gradient(135deg, rgba(245, 208, 88, 0.95), rgba(212, 175, 55, 0.95));
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 25px rgba(212, 175, 55, 0.5),
        0 0 40px rgba(212, 175, 55, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Disabled state */
.lightbox-download:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none !important;
    animation: none !important;
}

.lightbox-download:disabled::before {
    display: none;
}

/* =========================================
   Shop Revamp - Category Tabs & Grid
   ========================================= */

/* Shop Tabs */
.shop-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.shop-tab {
    flex: 1;
    min-width: 70px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.shop-tab:hover {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.shop-tab.active {
    background: var(--primary-gold);
    border-color: var(--primary-gold);
    color: var(--bg-dark);
}

/* Shop Grid Layout */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}


/* Enhanced Shop Item Cards */
.shop-grid .shop-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.shop-grid .shop-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cat-color, var(--primary-gold));
    opacity: 0.6;
}

.shop-grid .shop-item:hover {
    transform: translateY(-2px);
    border-color: var(--cat-color, var(--primary-gold));
}

.shop-grid .shop-item.maxed {
    opacity: 0.6;
}

.shop-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.shop-grid .shop-item-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 0;
    min-width: auto;
}

.shop-item-level {
    font-size: 0.75rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.max-badge {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: var(--bg-dark);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.65rem;
}

.shop-grid .shop-item-info {
    margin-bottom: 0.75rem;
}

.shop-grid .shop-item-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
}

.shop-grid .shop-item-info p {
    font-size: 0.8rem;
    line-height: 1.3;
}

.shop-grid .current-bonus {
    display: block;
    margin-top: 0.25rem;
}

.shop-grid .shop-item-buy {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem;
    font-size: 0.85rem;
    border-color: var(--cat-color, var(--primary-gold));
    color: var(--cat-color, var(--primary-gold));
}

.shop-grid .shop-item-buy:hover:not(:disabled) {
    background: var(--cat-color, var(--primary-gold));
}

/* Prestige Section Enhancements */
.prestige-stats {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    position: relative;
    z-index: 1;
}

.prestige-stat {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.prestige-stat .label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.prestige-stat .value {
    font-size: 1.2rem;
    color: var(--primary-gold);
    font-weight: bold;
}

.prestige-requirement {
    text-align: center;
    margin: 1rem 0;
    position: relative;
    z-index: 1;
}

.prestige-requirement span {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.prestige-progress {
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.prestige-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-gold), #FFD700);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.prestige-icon {
    font-size: 2rem;
    color: var(--primary-gold);
}

.prestige-title h3 {
    margin: 0;
    font-size: 1.2rem;
}

.prestige-level {
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* =========================================
   Light Mode Gold Fix (WCAG AA)
   ========================================= */
body.light-mode {
    --primary-gold: #8B7021;
    --primary-gold-dim: #6B5619;
}

/* =========================================
   Profile Styles - Luxury Revamp
   ========================================= */

.profile-modal .shop-content {
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.profile-header {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.profile-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), transparent);
    z-index: 0;
    pointer-events: none;
}

.profile-header h2 {
    position: relative;
    z-index: 1;
}

.profile-modal .profile-body {
    padding: 1.5rem;
    padding-right: 1rem;
    flex: 1;
    overflow-y: auto;
}

.profile-section h3 {
    font-size: 1rem;
    color: var(--text-dim);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-section h3 i {
    color: var(--primary-gold);
}

/* Profile Hero */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    margin-bottom: 1.5rem;
}

.avatar-ring {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--primary-gold), #8B7021, var(--primary-gold));
    padding: 3px;
    position: relative;
}

.prestige-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid var(--primary-gold);
    border-radius: 8px;
    padding: 0.25rem 0.5rem;
    display: none;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--primary-gold);
}

.prestige-badge.active {
    display: flex;
}

/* Stats Section */
.stats-section .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.stat-icon {
    font-size: 1.5rem;
    color: var(--primary-gold);
    margin-bottom: 0.5rem;
    opacity: 0.7;
}

.stat-box.highlight {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(0, 0, 0, 0.1));
    border-color: rgba(212, 175, 55, 0.3);
}

/* Soonie Catches Grid */
.catches-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

.catch-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    padding: 1rem 0.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

.catch-box:hover {
    transform: translateY(-3px);
}

.catch-box i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.catch-count {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.catch-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* Tier Colors */
.catch-box.bronze {
    border-color: rgba(205, 127, 50, 0.3);
}

.catch-box.bronze i,
.catch-box.bronze .catch-count {
    color: #CD7F32;
}

.catch-box.silver {
    border-color: rgba(192, 192, 192, 0.3);
}

.catch-box.silver i,
.catch-box.silver .catch-count {
    color: #C0C0C0;
}

.catch-box.gold {
    border-color: rgba(255, 215, 0, 0.3);
}

.catch-box.gold i,
.catch-box.gold .catch-count {
    color: #FFD700;
}

.catch-box.platinum {
    border-color: rgba(0, 223, 255, 0.3);
}

.catch-box.platinum i,
.catch-box.platinum .catch-count {
    color: #00DFFF;
}

.catch-box.diamond {
    border-color: rgba(185, 242, 255, 0.3);
}

.catch-box.diamond i,
.catch-box.diamond .catch-count {
    background: linear-gradient(135deg, #B9F2FF, #FF69B4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Achievement Counter & Tabs */
.achievement-counter {
    margin-left: auto;
    font-size: 0.8rem;
    background: rgba(212, 175, 55, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    color: var(--primary-gold);
}

.achievements-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.ach-tab {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dim);
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.ach-tab:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

.ach-tab.active {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.ach-check {
    color: var(--success-color);
    font-size: 1.1rem;
}

/* Mobile Profile */

/* =========================================
   Mobile Navigation (Hamburger Menu)
   ========================================= */

/* Hamburger Button */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    cursor: pointer;
    z-index: 1001;
    gap: 5px;
    padding: 10px;
}

.hamburger-line {
    width: 22px;
    height: 2px;
    background: var(--primary-gold);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Hamburger Open State */
.hamburger-btn.open .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-btn.open .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.open .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Nav Overlay */
.mobile-nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-dark);
    z-index: 999;
    flex-direction: column;
    padding: 4rem 2rem 2rem 2rem;
    gap: 0.5rem;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.mobile-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    /* Allow interaction when open */
}


body.mobile-nav-open {
    overflow: hidden;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    font-size: 1.1rem;
    font-family: var(--font-heading);
    color: var(--text-light);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
    background: rgba(0, 0, 0, 1);
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.mobile-nav-link i {
    font-size: 1.2rem;
    color: var(--primary-gold);
    width: 24px;
}

/* Mobile Price Ticker in Nav */
.mobile-price-ticker {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.mobile-price-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.mobile-price-display .token-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.mobile-price-display .price-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-light);
    font-family: 'Courier New', monospace;
}

.mobile-price-display .price-change {
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.mobile-price-display .price-change.positive {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.mobile-price-display .price-change.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Show hamburger on mobile */

/* Extra small screens */

/* =========================================
   Touch Feedback - Active States
   ========================================= */

/* Buttons get a slight press effect on touch */
.control-btn:active,
.shop-toggle-btn:active,
.gallery-tab:active,
.mobile-nav-link:active,
.shop-item-buy:active,
.lightbox-nav:active,
.back-to-top:active,
.hamburger-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}

/* Clicker area tap feedback */
.clicker-area:active {
    transform: scale(0.98);
}

/* Hero CA button tap feedback */
.hero-ca-btn:active {
    transform: scale(0.97);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

/* Gallery item tap feedback */
.gallery-item:active {
    transform: scale(0.98);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

/* Lightbox download button tap feedback */
.lightbox-download.hd:active,
.lightbox-download.uhd:active {
    transform: scale(0.95);
}

/* Ensure sticky header works on mobile */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

/* =========================================
   Accessibility - Visually Hidden
   ========================================= */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================
   Accessibility - Reduced Motion
   ========================================= */

/* Mobile Touch Feedback */
button:active,
.btn:active,
.control-btn:active,
.shop-toggle-btn:active,
.gallery-download-btn:active,
.mobile-nav-link:active,
.gallery-tab:active,
.lightbox-close:active,
.lightbox-nav:active,
.shop-close:active {
    transform: scale(0.95);
    opacity: 0.8;
}

.lightbox-meme-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}

/* =========================================
   Responsive Design (Consolidated)
   ========================================= */

@media (max-width: 768px) {
    .hero-ca-btn {
        font-size: 0.8rem;
        padding: 0.75rem 1rem;
    }

    h1.glitch {
        font-size: 3rem;
    }

    .score-board {
        font-size: 2.5rem;
    }

    .clicker-area img {
        width: 300px;
    }

    nav {
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
    }

    .price-ticker {
        font-size: 0.85rem;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        /* 85% width allows peek at next/prev */
        gap: 1rem;
        padding: 0 7.5%;
        /* Centers the first item (85% + 7.5% + 7.5% = 100%) */
        margin: 0 -1rem;
        /* Pull edges to viewport */
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        max-height: 80vh;
        scrollbar-width: none;
        width: calc(100% + 2rem);
    }

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

    .chart-container {
        height: 400px;
    }

    /* Remove horizontal scroll override */
    .gallery-item {
        scroll-snap-align: center;
        /* Snap center */
        width: 100%;
        height: auto;
        min-width: 0;
        max-width: 100%;
        object-fit: cover;
        margin: 0;
        border-radius: 8px;
        /* Nice radius for cards */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    #lightbox-img {
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 100px);
    }

    .lightbox-header {
        top: 1rem;
        right: 1rem;
        gap: 0.4rem;
    }

    .lightbox-close,
    .lightbox-download {
        width: 44px;
        height: 44px;
    }

    .lightbox-nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }

    /* Lightbox share buttons - icon only, side by side on mobile */
    .lightbox-share-btn {
        padding: 0.5rem 0.8rem;
    }

    .lightbox-share-btn .share-text {
        display: none;
    }

    .lightbox-share-btn i {
        font-size: 1.1rem;
    }

    .lightbox-share-btn .arena-icon {
        width: 20px;
        height: 20px;
    }

    .meme-editor-toolbar {
        padding: 0.75rem;
        gap: 0.5rem;
    }

    .meme-tool-group {
        flex-wrap: wrap;
    }

    .meme-tool-group label {
        font-size: 0.75rem;
    }

    .meme-text-layer {
        font-size: 24px;
        padding: 4px 8px;
    }

    .meme-editor-header h2 {
        font-size: 1.2rem;
    }

    .meme-action-btn {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    /* Fix button overflow on mobile */
    .meme-editor-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .meme-download-group {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .meme-download-group .meme-action-btn {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 0.25rem;
        /* Tighter padding */
        min-width: 0;
        /* Allow shrinking */
    }

    .meme-action-btn.share-x {
        flex: 1;
        justify-content: center;
        padding: 0.6rem 1rem;
    }

    .meme-action-btn.share-x .share-text {
        display: none;
    }

    .meme-action-btn.share-x i {
        font-size: 1.2rem;
    }

    .meme-action-btn.share-arena {
        flex: 1;
        justify-content: center;
        display: flex;
        align-items: center;
        padding: 0.6rem 1rem;
    }

    .meme-action-btn.share-arena .share-text {
        display: none;
    }

    .meme-action-btn.share-arena .arena-icon {
        width: 22px;
        height: 22px;
    }

    /* Share buttons group - side by side on mobile */
    .meme-share-group {
        display: flex;
        width: 100%;
        gap: 0.5rem;
    }


    .meme-action-btn.secondary {
        width: 100%;
        justify-content: center;
    }

    .hamburger-btn {
        display: flex;
    }

    .mobile-nav {
        display: flex;
    }

    /* Hide desktop controls on mobile */
    .nav-controls .price-ticker {
        display: none;
    }

    /* Show socials on mobile but compact */
    .nav-controls .socials {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: 0.5rem;
    }

    .nav-controls .socials a {
        width: 32px;
        height: 32px;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-controls .socials img {
        width: 16px !important;
        height: 16px !important;
    }

    /* Keep theme/sound controls but smaller */
    /* Hide specific nav elements on mobile */
    nav ul,
    .nav-buttons {
        display: none;
    }

    /* Fix volume popup overflow on mobile */
    .volume-popup {
        left: 0;
        transform: translateX(-10%) translateY(10px);
        width: 140px;
    }

    .volume-popup::before {
        left: 20%;
    }

    .nav-controls {
        gap: 1rem;
        width: 100%;
        justify-content: center;
    }

    .control-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    /* Fix clicker controls button spacing - icon only on mobile */
    .clicker-controls {
        flex-direction: row;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .shop-toggle-btn {
        width: 50px;
        height: 50px;
        padding: 0;
        font-size: 1.25rem;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide text, show only icon on mobile */
    .shop-toggle-btn .btn-text {
        display: none;
    }

    .shop-toggle-btn i {
        margin: 0;
        font-size: 1.25rem;
    }



    .gallery-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .gallery-tab {
        flex: 1 1 auto;
        min-width: 80px;
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    /* Chart Section - Responsive Container */
    .chart-container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        height: auto;
        min-height: auto;
    }

    .chart-container iframe {
        width: 100%;
        height: 450px;
    }


    .chart-wrapper {
        padding: 0 0.5rem;
    }

    /* Modals - Full screen mobile improvement */
    .shop-content {
        width: 95%;
        max-height: 90vh;
        padding: 1.5rem;
        margin: 1rem;
    }

    .shop-header h2 {
        font-size: 1.4rem;
    }

    /* Lightbox Mobile - Stack download buttons */
    .lightbox-header {
        flex-direction: column;
        gap: 0.75rem;
        top: 0.75rem;
        right: 0.75rem;
    }

    .lightbox-download-group {
        flex-direction: row;
        gap: 0.5rem;
    }

    .lightbox-download.hd,
    .lightbox-download.uhd {
        padding: 10px 14px;
        min-width: 70px;
        font-size: 0.7rem;
    }

    .lightbox-close {
        width: 44px;
        height: 44px;
    }

    .lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .lightbox-prev {
        left: 0.5rem;
    }

    .lightbox-next {
        right: 0.5rem;
    }

    /* Footer Mobile */
    footer {
        padding: 2rem 1rem;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .footer-links a {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        min-width: 80px;
        text-align: center;
    }

    .gallery-scroll-arrow {
        top: 78% !important;
        transform: translateY(-60%);
    }
}

@media (max-width: 768px) {
    header {
        padding: 1rem;
    }

    #hero {
        padding: 1rem;
    }

    h1.glitch {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    #clicker {
        padding: 4rem 0;
        /* Remove horizontal padding entirely */
    }

    .clicker-area {
        display: block;
        width: 90%;
        /* 5% side margins */
        margin: 0 auto;
        /* True centering */
    }

    .clicker-area img {
        width: 100%;
        /* Fill the wrapper */
        max-width: none;
    }

    .score-board {
        font-size: 2rem;
    }

    .price-ticker {
        padding: 0.4rem 0.8rem;
        gap: 0.5rem;
    }

    .price-label {
        display: none;
    }

    .price-value {
        font-size: 0.9rem;
    }

    .price-change {
        font-size: 0.75rem;
        padding: 0.15rem 0.4rem;
    }

    .user-info {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .mobile-nav-link {
        padding: 1rem;
        font-size: 1rem;
    }

    /* Hero text scaling for small phones */
    h1.glitch {
        font-size: 2.5rem;
    }

    .subtitle {
        font-size: 0.85rem;
        letter-spacing: 3px;
    }

    .hero-ca-btn {
        font-size: 0.7rem;
        padding: 0.6rem 0.8rem;
    }

    .hero-ca-btn .ca-text {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Chart smaller on tiny screens */
    .chart-container iframe {
        height: 300px;
    }

    /* Score board scaling */
    .score-board {
        font-size: 2.5rem;
    }

    #clicker h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 992px) {
    .gallery-grid {
        grid-auto-columns: 280px;
    }

    .gallery-item {
        min-width: 280px;
        max-width: 280px;
    }
}

@media (max-width: 550px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .profile-hero {
        flex-direction: column;
        text-align: center;
    }

    .catches-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-img {
        transform: none !important;
    }

    .particle {
        animation: none !important;
        opacity: 0.2;
    }

    .cursor-particle {
        display: none !important;
    }

    h1.glitch::before,
    h1.glitch::after {
        display: none;
    }

    .gallery-item {
        transform: none !important;
    }

    .preloader-spinner {
        animation: none !important;
    }

    .special-soonie,
    .golden-soonie {
        animation: none !important;
    }

    .avatar-ring {
        animation: none !important;
    }
}

/* ============================================================================
   LEADERBOARD CONTROLS
   ============================================================================ */

.leaderboard-controls {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.leaderboard-controls .filter-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.leaderboard-controls .filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary-gold-dim);
    border-radius: 6px;
    background: transparent;
    color: var(--text-light);
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.leaderboard-controls .filter-btn:hover {
    background: rgba(var(--primary-gold-rgb), 0.2);
    border-color: var(--primary-gold);
}

.leaderboard-controls .filter-btn.active {
    background: var(--primary-gold);
    color: var(--bg-dark);
    border-color: var(--primary-gold);
    font-weight: 600;
}

/* ============================================================================
   AVATAR PICKER
   ============================================================================ */

.avatar-picker-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.avatar-picker-overlay.active {
    display: flex;
}

.avatar-picker-modal {
    background: var(--bg-dark);
    border: 1px solid var(--primary-gold-dim);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.avatar-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--primary-gold-dim);
}

.avatar-picker-header h2 {
    font-family: var(--font-heading);
    color: var(--primary-gold);
    margin: 0;
    font-size: 1.25rem;
}

.avatar-picker-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: color var(--transition-speed);
}

.avatar-picker-close:hover {
    color: var(--primary-gold);
}

/* Gallery View */
.avatar-picker-gallery {
    padding: 1rem;
    overflow-y: auto;
    max-height: 60vh;
}

.avatar-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.avatar-gallery-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-speed);
}

.avatar-gallery-item:hover {
    border-color: var(--primary-gold);
    transform: scale(1.05);
}

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

/* Crop View */
.avatar-picker-crop {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.avatar-picker-crop.hidden {
    display: none;
}

.crop-instructions {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0;
}

.crop-canvas-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 3px solid var(--primary-gold);
    overflow: hidden;
}

#avatar-crop-canvas {
    width: 300px;
    height: 300px;
    cursor: grab;
    display: block;
}

#avatar-crop-canvas:active {
    cursor: grabbing;
}

.crop-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 300px;
}

.crop-controls label {
    color: var(--text-dim);
    font-size: 0.9rem;
}

.crop-controls input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--bg-darker);
    border-radius: 3px;
    cursor: pointer;
}

.crop-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--primary-gold);
    border-radius: 50%;
    cursor: pointer;
}

.crop-controls input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--primary-gold);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.crop-actions {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
}

.crop-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-speed);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.crop-btn-cancel {
    background: transparent;
    border: 1px solid var(--text-dim);
    color: var(--text-dim);
}

.crop-btn-cancel:hover {
    border-color: var(--text-light);
    color: var(--text-light);
}

.crop-btn-save {
    background: var(--primary-gold);
    border: none;
    color: var(--bg-dark);
}

.crop-btn-save:hover {
    background: var(--primary-gold-dim);
    transform: scale(1.02);
}

/* Avatar Edit Overlay */
.avatar-edit-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-speed);
    pointer-events: none;
}

.avatar-ring:hover .avatar-edit-overlay {
    opacity: 1;
}

.avatar-edit-overlay i {
    color: var(--primary-gold);
    font-size: 1.5rem;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .avatar-gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .crop-container {
        width: 250px;
        height: 250px;
    }

    #avatar-crop-canvas {
        width: 250px;
        height: 250px;
    }
}

/* Global Stats Header */
@keyframes pulse-gold-soft {
    0% {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    }

    100% {
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
    }
}

.global-stats-header {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    border: 1px solid var(--primary-gold);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    animation: pulse-gold-soft 3s infinite;
}

.global-stats-header .stat-icon {
    font-size: 2rem;
    color: var(--primary-gold);
    background: rgba(212, 175, 55, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.global-stats-header .stat-content {
    display: flex;
    flex-direction: column;
}

.global-stats-header .stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.global-stats-header .stat-value {
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Main Page specific overrides */
.global-stats-header.main-page-stats {
    margin: 2rem auto 0 auto;
    justify-content: center;
    width: 100%;
    max-width: 400px;
}