:root {
    /* Dark Mode Variables */
    --bg-color-1: #121212;
    --bg-color-2: #242424;
    --bg-color-3: #2c2c2c;
    --bg-color-4: #333;
    --text-color-1: #ffffff;
    --text-color-2: #aaa;
    --text-color-3: #666;
    --border-color: #333;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --modal-bg-gradient: radial-gradient(circle at top, #363636, #242424);
}

.light-mode {
    /* Light Mode Variables */
    --bg-color-1: #f0f0f0;
    --bg-color-2: #e0e0e0;
    --bg-color-3: #d0d0d0;
    --bg-color-4: #ccc;
    --text-color-1: #121212;
    --text-color-2: #555;
    --text-color-3: #999;
    --border-color: #ccc;
    --shadow-color: rgba(0, 0, 0, 0.15);
    --modal-bg-gradient: radial-gradient(circle at top, #f8f8f8, #e0e0e0);
}

html, body {
    overflow: hidden; /* This is the key change to prevent scrolling */
    touch-action: none; /* Prevents default touch actions like pull-to-refresh */
}
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color-1);
    color: var(--text-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
    transition: background-color 0.3s, color 0.3s;
}

.game-container {
    background-color: var(--bg-color-2);
    border-radius: 2rem;
    padding: 2rem;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px var(--shadow-color);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.score-box, .timer-box {
    background-color: var(--bg-color-4);
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.score-label, .timer-label {
    font-size: 0.8rem;
    color: var(--text-color-2);
}

.score-value, .timer-value {
    font-size: 1.8rem;
    color: var(--text-color-1);
}

.grid-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.grid {
    display: grid;
    gap: 1rem;
    width: 100%;
    height: 100%;
}

.red-ball {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.1s ease-out, transform 1.5s ease-in, opacity 1.5s ease-in, filter 1.5s ease-in;
}

.tile {
  opacity: 0;
  background-color: var(--bg-color-4);
  border-radius: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease-in-out,
              background-color 0.2s ease-in-out,
              opacity 0.5s ease-out;
}

.tile.tile-active {
  opacity: 1;
  animation: tilePopIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The original pop-in keyframes */
@keyframes tilePopIn {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}

/* 🔥 On mobile, make the animation stronger */
@media (max-width: 768px) {
  .tile.tile-active {
    animation: tilePopInMobile 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes tilePopInMobile {
    0% {
      transform: scale(0.6);
    }
    100% {
      transform: scale(1);
    }
  }
}

.tile.green-tile {
  background: linear-gradient(135deg, #00ff66 0%, #00ffa3 100%) !important;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.5),
              0 0 30px rgba(0, 255, 163, 0.3) !important;
}


.lava-tile {
    background-image: linear-gradient(135deg, #ff4c00, #ff8c00);
    box-shadow: 0 0 15px rgba(255, 76, 0, 0.7);
    cursor: not-allowed;
}
.wall-tile {
    background-color: #FFD700; /* New contrasting color */
    box-shadow: inset 0 0 10px var(--shadow-color);
    cursor: not-allowed;
    transition: opacity 0.3s ease-out, background-color 0.5s ease-out;
    opacity: 1; /* Start opaque */
}

.hidden {
    display: none !important;
}

/* Speed Up Notification */
.speed-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 3rem;
    font-weight: 900;
    color: #FF4500;
    text-shadow: 0 0 20px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 69, 0, 0.6);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    letter-spacing: 0.1em;
}

.speed-notification.show {
    animation: speedUpPop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes speedUpPop {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.3) rotate(5deg);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1) rotate(0deg);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.15) rotate(-2deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0;
    }
}

@media (max-width: 600px) {
    .speed-notification {
        font-size: 2rem;
    }
}

.score-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #39FF14;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100;
    animation: particleFloat 0.8s ease-out forwards;
}

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

.tile.collect-flash {
    animation: tileFlash 0.3s ease-out;
}

@keyframes tileFlash {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); background-color: #39FF14 !important; }
}

#game-over-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: -1rem 0; /* Changed from 1rem 0 */
}

.stat-card {
    background-color: var(--bg-color-4);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--text-color-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color-1);
}

.stat-value.mode {
    font-size: 1.5rem;
    color: #39FF14;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--shadow-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in, visibility 0.5s ease-in;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color: var(--bg-color-3);
    border-radius: 1.5rem;
    padding: 2rem;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 10px 30px var(--shadow-color);
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Increased gap for better spacing */
    opacity: 0; /* Start hidden for the animation */
    transform: translateY(-20px); /* Start slightly above final position */
}

/* New Menu styles */
#main-menu-content, #high-scores-content, #friends-content, #login-content, #profile-content {
    background: var(--modal-bg-gradient);
    border: 2px solid rgba(255, 255, 255, 0.1);
    animation: modal-fade-in 0.5s ease-out forwards;
}

#main-menu-content h2 {
    font-size: 3.5rem; /* Larger title */
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    font-weight: 700;
}
.light-mode #main-menu-content h2 {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.modal-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.modal-content .button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem; /* Adjust margin */
}

.modal-content button {
    padding: 1rem 2rem;
    border-radius: 1rem;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--shadow-color);
    border: none; /* Removed default border */
}

.modal-content button:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px var(--shadow-color);
    background-color: var(--bg-color-3); /* A subtle hover effect */
}

.modal-content button.classic-mode {
    /* Neon Green with a light/dark shift */
    background-image: linear-gradient(to right, #39FF14 0%, #7FFF00 25%, #39FF14 50%, #7FFF00 75%, #39FF14 100%);
    color: #121212;
    animation: classicPulse 5s ease-in-out infinite; /* 5s for a slow, steady pulse */
}

/* 1. Classic Mode Animation: Slow Horizontal Pulse */
@keyframes classicPulse {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.modal-content button.challenge-mode {
    /* Gold with a vibrant/muted shift */
    background-image: linear-gradient(-45deg, #FFD700 0%, #FFEA00 25%, #FFD700 50%, #FFEA00 75%, #FFD700 100%);
    color: #121212;
    background-size: 400% 400%; /* Wider/Taller size for diagonal movement */
    animation: challengeShimmer 4s linear infinite; /* 4s with linear for a constant, high-energy shimmer */
}

/* 2. Challenge Mode Animation: Diagonal Shimmer */
@keyframes challengeShimmer {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}


/* Base styles for the animation */
.modal-content button.lava-mode {
    /* Use a very wide gradient */
    background-image: linear-gradient(to right, #FF4500 0%, #FF8C00 25%, #FF4500 50%, #FF8C00 75%, #FF4500 100%);
    background-size: 400% 100%;
    color: #fff;
    animation: pulseGradient 15s ease-in-out infinite; /* Apply the animation */
    border: none;
}

/* Define the animation */
@keyframes pulseGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}



.modal-content button.high-scores-btn,
.modal-content button.back-to-menu-btn,
.modal-content button.friends-btn {
    background-color: var(--bg-color-4);
    color: var(--text-color-1);
}

.modal-content button.high-scores-btn {
    /* Use a wide gradient with deep, contrasting shades of purple/magenta */
    background-image: linear-gradient(to right, #4B0082 0%, #8A2BE2 25%, #4B0082 50%, #8A2BE2 75%, #4B0082 100%);
    background-size: 400% 100%;
    color: #fff; /* White text for a glowing contrast */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* Subtle glow effect on text */
    animation: pulseGradientPurple 15s ease-in-out infinite; /* Apply the animation */
    border: none;
}

/* Define the purple animation */
@keyframes pulseGradientPurple {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}


.modal-content button.friends-btn {
    /* Use a very wide gradient with varying shades of blue */
    background-image: linear-gradient(to right, #0077b6 0%, #00b4d8 25%, #0077b6 50%, #00b4d8 75%, #0077b6 100%);
    background-size: 400% 100%;
    color: #fff; /* White text for contrast */
    animation: pulseGradientBlue 15s ease-in-out infinite; /* Apply the animation */
    border: none;
}

/* Define the blue animation (keeping the structure of the original @keyframes) */
@keyframes pulseGradientBlue {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.modal-content button.shop-btn {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #e6f511, #23d5ab);
    background-size: 400% 400%;
    animation: colorShift 15s ease infinite;
}

.modal-content button.login-btn,
.modal-content button.signup-btn,
.modal-content button.save-username-btn {
    background-color: #007bff;
}

.modal-content button.google-login-btn {
    background-color: #db4437;
}

.modal-content button.logout-btn {
    background-color: #dc3545;
}

.modal-in-animation {
    animation: modal-fade-in 0.5s ease-out forwards;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-content h3 {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.score-list, .friend-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.score-list.placeholder li {
    color: var(--text-color-3); /* Dim the placeholder text */
}

.score-list li, .friend-list li {
    padding: 0.75rem 1rem;
    background-color: var(--bg-color-4);
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    transition: background-color 0.2s;
}

.score-list li:hover, .friend-list li:hover {
    background-color: var(--bg-color-3);
}

.score-list li .score-rank {
    font-weight: bold;
    color: var(--text-color-1);
    min-width: 25px;
}

.score-list li .score-value-text {
    color: #39FF14;
    font-weight: bold;
}

.score-list li .player-name {
    font-size: 0.9rem;
    color: var(--text-color-2);
    margin-left: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabs {
    display: flex;
    justify-content: space-around;
    background-color: var(--bg-color-4);
    border-radius: 1.5rem;
    padding: 0.5rem;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}

.tab-button {
    background: none;
    border: none;
    color: var(--text-color-2);
    font-weight: bold;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, transform 0.2s;
    flex-grow: 1;
}

.tab-button.active {
    background-color: var(--bg-color-3);
    color: var(--text-color-1);
    box-shadow: inset 0 0 10px var(--shadow-color);
    transform: translateY(-2px);
}

.score-section, .friend-section, .shop-section {
    display: none;
}

.score-section.active-tab, .friend-section.active-tab, .shop-section.active-tab {
    display: block;
}

.mute-buttons-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    z-index: 20;
}

/* New styling for money counter to make it look like a button but stand out */
#money-counter-container {
    background-image: linear-gradient(135deg, #FFD700, #FFA500);
    border: 2px solid #FFC107;
    color: #121212;
    padding: 0.5rem 1rem;
    border-radius: 9999px; /* This makes it a pill shape */
    font-weight: bold;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: default; /* Not a button, so no pointer */
}

#money-counter-container:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

.mute-button, .login-button, .theme-button {
    background-color: rgba(51, 51, 51, 0.7);
    border: 2px solid #555;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.light-mode .mute-button, .light-mode .login-button, .light-mode .theme-button {
    background-color: rgba(204, 204, 204, 0.7);
    border-color: #bbb;
    color: #121212;
}

.mute-button:hover, .login-button:hover, .theme-button:hover {
    background-color: rgba(51, 51, 51, 0.9);
    border-color: #fff;
}
.light-mode .mute-button:hover, .light-mode .login-button:hover, .light-mode .theme-button:hover {
    background-color: rgba(204, 204, 204, 0.9);
    border-color: #555;
}

.mute-button.muted {
    background-color: rgba(255, 0, 0, 0.5);
    border-color: #f00;
}

.share-button {
    background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%) !important;
    margin-bottom: 0.75rem;
}

.share-button:hover {
    background: linear-gradient(135deg, #00cc6a 0%, #00aa55 100%) !important;
    transform: translateY(-2px);
}

.social-links-container {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 20;
}

.clipboard-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0, 255, 136, 0.95);
    color: #000;
    padding: 1.5rem 3rem;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10001;
    box-shadow: 0 8px 32px rgba(0, 255, 136, 0.4);
}

.clipboard-notification.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(51, 51, 51, 0.7);
    border: 2px solid #555;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    transition: background-color 0.2s, border-color 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
}

.light-mode .social-link {
    background-color: rgba(204, 204, 204, 0.7);
    border-color: #bbb;
    color: #121212;
}

.social-link:hover {
    background-color: rgba(51, 51, 51, 0.9);
    border-color: #fff;
}

.light-mode .social-link:hover {
    background-color: rgba(204, 204, 204, 0.9);
    border-color: #555;
}

.social-icon {
    font-size: 1rem;
}

.social-handle {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Buy Me a Coffee special styling */
.buy-coffee-link {
    background: linear-gradient(135deg, #FFDD00, #FBB034);
    border-color: #FFDD00;
    color: #121212 !important;
    font-weight: 600;
}

.light-mode .buy-coffee-link {
    color: #121212 !important;
}

.buy-coffee-link:hover {
    background: linear-gradient(135deg, #FBB034, #FFDD00);
    border-color: #FBB034;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(251, 176, 52, 0.4);
}

.light-mode .buy-coffee-link:hover {
    border-color: #FBB034;
}

/* Login/Signup/Profile Form Styles */
.login-form input, .profile-form input {
    background-color: var(--bg-color-4);
    border: 1px solid var(--border-color);
    color: var(--text-color-1);
    padding: 0.75rem;
    border-radius: 0.5rem;
}

.login-form .error-message, .profile-form .error-message {
    color: #ff5252;
    font-size: 0.8rem;
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

/* High Scores Tabs */
.high-scores-tabs {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
    position: relative;
    z-index: 1;
}

.mode-tabs {
    display: flex;
    justify-content: space-around;
    background-color: var(--bg-color-4);
    border-radius: 1rem;
    padding: 0.5rem;
}

.leaderboard-type-tab {
    background-color: var(--bg-color-3);
    color: var(--text-color-1);
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.leaderboard-type-tab.active {
    background-color: var(--bg-color-2);
}

/* New scrollable scores container */
.scrollable-container {
    max-height: 200px;
    min-height: 200px;
    overflow-y: auto;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Hide scrollbar for different browsers */
.scrollable-container::-webkit-scrollbar {
    width: 0.1px;
    background: transparent;
}

.scrollable-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.friend-actions {
    display: flex;
    gap: 0.5rem;
}

.friend-actions button {
    padding: 0.5rem;
    background: #4CAF50;
    color: white;
    border-radius: 0.5rem;
}

.friend-actions button.decline-btn {
    background: #f44336;
}

.friend-list li span {
    flex: 1;
}

.red-ball-skin {
    background-color: #FF5252;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.7);
}

/* 1. Deep Cyan */
.cyan-ball-skin {
    background-color: #00BCD4;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.8);
}

/* 2. Electric Violet */
.violet-ball-skin {
    background-color: #7900FF;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(121, 0, 255, 0.9);
}

.gold-ball-skin {
    background: radial-gradient(circle at center, #ffd700, #b8860b) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7) !important;
}

/* 1. Nebula Haze (Radial) */
.nebula-ball-skin {
    background: radial-gradient(circle at 30% 30%, #4a00e0, #8e2de2);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(142, 45, 226, 0.8);
}

/* 2. Fire and Ice (Linear) */
.fireice-ball-skin {
    background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 50%, #29A8FF 100%);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(255, 75, 43, 0.7);
}

/* The keyframes for all animated gradients */
@keyframes colorShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 1. Cosmic Flow */
.cosmic-ball-skin {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    border-radius: 50%;
    animation: colorShift 15s ease infinite;
    box-shadow: 0 0 25px rgba(35, 213, 171, 0.9);
}

/* 2. Cyberpunk Synthwave */
.synthwave-ball-skin {
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff, #00ffff);
    background-size: 200% 200%;
    border-radius: 50%;
    animation: colorShift 8s linear infinite;
    box-shadow: 0 0 30px #ff00ff, 0 0 30px #00ffff; /* Dual-color glow */
}

/* 1. Shattered Glass */
.glass-ball-skin {
    background: #000;
    border-radius: 50%;
    /* Subtle radial gradient for depth, combined with box shadow */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 25px rgba(0, 0, 0, 0.8);
    /* Mimics fractured look with many shadows */
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 80%);
    filter: brightness(1.2); /* Enhance the 'shattered' light reflection */
}

/* 2. Rusty Metal */
.rusty-ball-skin {
    /* Multiple backgrounds for texture depth */
    background: 
        radial-gradient(circle at 15% 85%, #b7410e 10%, transparent 60%),
        radial-gradient(circle at 80% 20%, #ff6b3d 10%, transparent 50%),
        linear-gradient(45deg, #a0522d 0%, #8b4513 100%); /* Base metal color */
    border-radius: 50%;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* Inner grime */
}

/* 3. Moon Rock */
.moonrock-ball-skin {
    /* Base color of lunar regolith */
    background-color: #c0c0c0; 
    border-radius: 50%;
    /* Use multiple radial gradients to create craters and uneven surfaces */
    background-image: 
        radial-gradient(circle at 20% 30%, #808080 5px, transparent 6px),
        radial-gradient(circle at 75% 60%, #a9a9a9 3px, transparent 4px),
        radial-gradient(circle at 50% 50%, #696969 10px, transparent 11px);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* 4. Abstract Oil Slick */
.oilslick-ball-skin {
    background-color: #121212; /* Dark base */
    border-radius: 50%;
    /* Radial gradient for the shifting, iridescent colors */
    background-image: radial-gradient(circle at center, 
        rgba(255,0,0,0.5), 
        rgba(255,255,0,0.5), 
        rgba(0,255,0,0.5), 
        rgba(0,255,255,0.5), 
        rgba(0,0,255,0.5), 
        rgba(255,0,255,0.5));
    /* Blend mode makes the overlapping colors 'mix' like oil on water */
    background-blend-mode: soft-light; 
    box-shadow: 0 0 20px #222;
}

/* 1. Matrix Code Rain */
.matrix-ball-skin {
    background-color: #000;
    border-radius: 50%;
    /* Repeating linear gradient creates vertical 'code' lines */
    background-image: repeating-linear-gradient(
        0deg,
        #00ff41,
        #00ff41 1px,
        transparent 1px,
        transparent 10px
    );
    background-size: 10px 100%;
    box-shadow: 0 0 10px #00ff41;
}

/* 2. Retro Grid */
.retrogrid-ball-skin {
    background-color: #ff00ff; /* Base color */
    border-radius: 50%;
    /* Two repeating linear gradients overlayed for a grid */
    background-image: 
        repeating-linear-gradient(0deg, #00ffff, #00ffff 2px, transparent 2px, transparent 20px),
        repeating-linear-gradient(90deg, #00ffff, #00ffff 2px, transparent 2px, transparent 20px);
    background-size: 20px 20px;
    box-shadow: 0 0 15px rgba(255, 0, 255, 0.9);
}

/* 3. Honeycomb Mesh */
.honeycomb-ball-skin {
    background-color: #333;
    border-radius: 50%;
    /* This one is complex - typically requires SVG or a very complex CSS shape */
    /* We'll simulate a 3D hexagonal mesh with shadows */
    box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 255, 255, 0.1);
    background-image: 
        linear-gradient(45deg, #444 25%, transparent 25%),
        linear-gradient(-45deg, #444 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #444 75%),
        linear-gradient(-45deg, transparent 75%, #444 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* 4. Abstract Camo */
.camo-ball-skin {
    background-color: #777;
    border-radius: 50%;
    /* Use multiple radial gradients for blob-like shapes */
    background-image: 
        radial-gradient(circle at 10% 90%, #a0522d 20%, transparent 21%),
        radial-gradient(circle at 70% 30%, #556b2f 25%, transparent 26%),
        radial-gradient(circle at 45% 70%, #8b4513 15%, transparent 16%);
    background-size: 100% 100%;
}

/* Animation for Pulse */
@keyframes glowPulse {
    0% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
    50% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff; }
    100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
}

/* Animation for Rotation */
@keyframes backgroundRotate {
    to { background-position: 100% 100%; }
}

/* 1. Hyperspace Grid (Moving Pattern) */
.hyperspace-ball-skin {
    background-color: #000;
    border-radius: 50%;
    background-image: 
        repeating-linear-gradient(45deg, #00ffff 0, #00ffff 1px, transparent 1px, transparent 10px),
        repeating-linear-gradient(-45deg, #ff00ff 0, #ff00ff 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    animation: backgroundRotate 3s linear infinite;
    box-shadow: 0 0 20px #ff00ff, 0 0 20px #00ffff;
}

/* 2. Lava Lamp (Slow Gradient Distortion) */
.lava-ball-skin {
    background: radial-gradient(circle at 50% 50%, #ff4500, #8b0000);
    border-radius: 50%;
    /* Simulates movement by moving the center of the radial gradient */
    animation: lavaFlow 10s ease-in-out infinite alternate;
    background-size: 150% 150%;
    box-shadow: 0 0 30px #ff4500;
}
@keyframes lavaFlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* 3. Ghostly Static (Noise Overlay) */
.static-ball-skin {
    background-color: #222;
    border-radius: 50%;
    /* Animated noise layer */
    background-image: url('data:image/svg+xml;base64,...'); /* Placeholder for a noise texture */
    background-size: 100px 100px;
    animation: backgroundRotate 1s steps(10) infinite;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* 4. Plasma Field (Color Shift and Pulse) */
.plasma-ball-skin {
    background: #000;
    border-radius: 50%;
    /* Keyframes to change the glowing box-shadow color */
    animation: plasmaGlow 4s linear infinite alternate, glowPulse 2s ease infinite;
}
@keyframes plasmaGlow {
    0% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.9); }
    33% { box-shadow: 0 0 25px rgba(255, 255, 0, 0.9); }
    66% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.9); }
    100% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.9); }
}

/* 1. Quantum Singularity (Black Hole Effect) */
.singularity-ball-skin {
    background: radial-gradient(circle at center, rgba(0,0,0,0.8) 0%, #000 50%, #111 100%);
    border-radius: 50%;
    /* Creates a distortion ring around the ball */
    box-shadow: 0 0 0 15px #000, 0 0 30px 15px rgba(255, 255, 255, 0.1); 
    /* Extremely subtle shadow animation to simulate warping */
    animation: warpEffect 5s linear infinite alternate;
}
@keyframes warpEffect {
    0% { transform: scale(1); }
    100% { transform: scale(1.02); }
}

/* 2. Iridescent Refractor (Simulated Clear Glass) */
.refractor-ball-skin {
    background-color: rgba(255, 255, 255, 0.1); /* Very slight white tint */
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* The groundbreaking part: Blurs what's *behind* the element */
    backdrop-filter: blur(5px) saturate(1.5); 
    /* Inner shadow for thickness, outer shadow for faint rim light */
    box-shadow: 
        inset 0 0 10px rgba(255, 255, 255, 0.8), 
        0 0 2px rgba(255, 255, 255, 0.6);
}

/* 3. Phasing Cloak (See-Through Distortion) */
.cloak-ball-skin {
    background-color: transparent;
    border-radius: 50%;
    /* The groundbreaking part: Heavily distorts the background */
    backdrop-filter: hue-rotate(90deg) blur(15px);
    /* Animates the distortion to simulate a field shimmering */
    animation: cloakShift 4s linear infinite;
    box-shadow: 0 0 15px 5px rgba(0, 255, 255, 0.5); /* Outer field effect */
}
@keyframes cloakShift {
    0% { backdrop-filter: hue-rotate(0deg) blur(10px); }
    100% { backdrop-filter: hue-rotate(360deg) blur(10px); }
}

/* 4. Binary Glitch (Enhanced Randomized Jitter) */

/* The main container for the glitch effect */
.glitch-ball-skin {
    /* Use a dark background to make the glow and colors pop */
    background-color: #f0f; /* Primary color */
    border-radius: 50%;
    overflow: visible;
    /* Optional: Add a subtle static shadow for depth */
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.3);
}

/* --- Layer 1: The 'After' Glitch (Color-Subtracting, Fast Jitter) --- */
.glitch-ball-skin::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #0ff; /* Secondary glitch color (Cyan) */
    border-radius: 50%;
    /* Use 'steps(1)' for a starker, binary on/off look */
    animation: glitchJitter-fast 0.08s steps(1) infinite alternate;
    z-index: 1;
    /* Create the classic anaglyph/glitch separation effect */
    mix-blend-mode: difference;
    pointer-events: none;
    /* Scale down slightly to make the effect more concentrated */
    transform: scale(1.02);
}

/* --- Layer 2: The 'Before' Glitch (Color-Additive, Slower, More Distant Jitter) --- */
.glitch-ball-skin::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* A third color or the primary color slightly offset */
    background-color: #ff00ff;
    border-radius: 50%;
    /* Use a slower speed and 'steps(2)' for a slightly different feel */
    animation: glitchJitter-slow 0.2s steps(2) infinite alternate;
    z-index: 2;
    /* Creates a subtle glowing/additive effect with the primary color */
    mix-blend-mode: screen;
    pointer-events: none;
    /* Scale up slightly to peek out from behind the main ball */
    transform: scale(0.98);
    opacity: 0.6; /* Make this layer translucent */
}

/* --- Keyframes for Fast, Aggressive Jitter --- */
@keyframes glitchJitter-fast {
    0%   { transform: translate(2px, 2px) scale(1.02); opacity: 0.9; }
    25%  { transform: translate(-2px, 0px) scale(1.01); opacity: 1; }
    50%  { transform: translate(1px, -2px) scale(1.03); opacity: 0.8; }
    75%  { transform: translate(-3px, 1px) scale(1.02); opacity: 1; }
    100% { transform: translate(2px, 2px) scale(1.01); opacity: 0.9; }
}

/* --- Keyframes for Slower, Subtler Jitter --- */
@keyframes glitchJitter-slow {
    0%   { transform: translate(-4px, -4px) scale(0.98); opacity: 0.5; }
    33%  { transform: translate(3px, 2px) scale(0.99); opacity: 0.7; }
    66%  { transform: translate(-1px, 4px) scale(0.98); opacity: 0.6; }
    100% { transform: translate(-4px, -4px) scale(0.99); opacity: 0.5; }
}

/* --- Static Gradient Skins --- */

.tile-skin-1 {
    background: linear-gradient(135deg, #ffb800 0%, #ff8c00 100%);
    box-shadow: 0 4px 15px rgba(255, 184, 0, 0.4);
    cursor: not-allowed;
    opacity: 1;
}

.tile-skin-2 {
    /* Deep Blue Radial Gradient */
    background: radial-gradient(circle, #5b86e5 0%, #364968 100%);
    /* Ensure opacity and a general transition are set on the active state */
    transition: opacity 0.3s ease-out, background-color 0.5s ease-out;
    opacity: 1; /* Start opaque */
}

.tile-skin-3 {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* Purple to bright blue */
    transition: opacity 0.3s ease-out, background-color 0.5s ease-out;
    opacity: 1;
}

/* --- Texture and Pattern Skins --- */

.tile-skin-4 {
    /* Simple Diagonal Stripe Pattern (Texture) */
    background-color: #f0f0f0;
    /* Ensure opacity and a general transition are set on the active state */
    transition: opacity 0.3s ease-out, background-color 0.5s ease-out;
    opacity: 1; /* Start opaque */
    background-image: repeating-linear-gradient(
        45deg,
        #ccc,
        #ccc 5px,
        #f0f0f0 5px,
        #f0f0f0 10px
    );
}

.tile-skin-5 {
    /* Subtle Dot Pattern (Texture) */
    background-color: #333;
    background-image: radial-gradient(#666 15%, transparent 16%);
    background-size: 20px 20px;
    /* Ensure opacity and a general transition are set on the active state */
    transition: opacity 0.3s ease-out, background-color 0.5s ease-out;
    opacity: 1; /* Start opaque */
}

/* --- Animated Skins --- */

@keyframes pulse-teal-pink {
    0%   { background-color: #008080; }
    50%  { background-color: #ff69b4; }
    100% { background-color: #008080; }
}

.tile-skin-6 {
    /* Animated Pulse Skin */
    background-color: #008080; /* Fallback color */
    animation: pulse-teal-pink 3s infinite alternate;
    /* Ensure opacity and a general transition are set on the active state */
    transition: opacity 0.3s ease-out, background-color 0.5s ease-out;
    opacity: 1; /* Start opaque */
}

/* The class to apply when the tile is about to be removed */
.fading-out {
    opacity: 0 !important; /* Force opacity to 0 for the fade */
}

/* --- Special Effect Skins --- */

.tile-skin-7 {
    /* 'Glassmorphism' Effect */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent white */
    backdrop-filter: blur(5px);           /* The key to the effect */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.5s ease-out;
}

.shop-section {
    display: none;
}

.shop-section.active-tab {
    display: block;
}

.shop-item {
    position: relative;
    background-color: var(--bg-color-4);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 8px 25px var(--shadow-color);
    transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
    cursor: pointer;
    border: 2px solid transparent;
}

.shop-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px var(--shadow-color);
}

.shop-item.equipped {
    border: 2px solid #00a2ff;
    box-shadow: 0 0 15px rgba(0, 162, 255, 0.5);
}

.shop-item-preview, .tile-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.tile-preview {
    border-radius: 1rem;
}

.shop-item-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--text-color-1);
    text-align: center;
    margin-bottom: 0.5rem;
}

.shop-item.just-purchased {
    border: 2px solid #39FF14;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
    animation: purchaseGlow 0.5s ease-out;
}

@keyframes purchaseGlow {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.price-tag {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background-image: linear-gradient(45deg, #FFD700, #FFA500);
    color: #121212;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.buy-button {
    background-color: #39FF14;
    color: #121212;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buy-button:hover:not(:disabled) {
    background-color: #2eeb00;
    transform: scale(1.02);
}

.buy-button:disabled {
    background-color: var(--bg-color-3);
    color: var(--text-color-2);
    cursor: not-allowed;
    opacity: 0.6;
}

.buy-button.equipped-btn {
    background-color: #007bff;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.buy-button.equipped-btn:hover {
    transform: none;
    background-color: #007bff;
}

.delete-account-btn {
    background-color: #dc3545;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.2s;
    cursor: pointer;
    border: none;
}

.delete-account-btn:hover {
    background-color: #c82333;
    transform: scale(1.02);
}

.delete-account-btn:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
}

.login-wall-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    z-index: 5;
    border-radius: 1.5rem;
}

.light-mode .login-wall-overlay {
    background: rgba(240, 240, 240, 0.95);
}

.login-wall-content {
    text-align: center;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-wall-content h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-color-1);
}

.login-wall-content p {
    color: var(--text-color-2);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.login-wall-button {
    background: linear-gradient(135deg, #39FF14, #7FFF00);
    color: #121212;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
}

.login-wall-button:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(57, 255, 20, 0.5);
}


.blurred-content {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}

.how-to-play-btn {
    /* Base Size & Shape */
    padding: 0.2rem 0.6rem !important;/* Slightly more balanced padding */
    font-size: 0.75rem; /* Standard font size for better readability */
    font-weight: 700; /* Make the text bold */
    margin-top: -2.5rem;
    border-radius: 50px; /* **Pill-shaped/Fully rounded corners** for a modern look */
    text-transform: uppercase; /* Use all caps for a clear call-to-action */
    letter-spacing: 0.05em; /* A little space between letters */
    border: none; /* Remove the border, we'll use a strong shadow for depth */

    /* **Vibrant Color Scheme** */
    background: linear-gradient(135deg, #FF6B6B 0%, #F06595 100%); /* A bright, appealing gradient from a coral red to a rose pink */
    color: #FFFFFF; /* Bright white text for maximum contrast */

    /* **Enhanced Depth & Smoothness** */
    box-shadow: 0 8px 15px rgba(255, 107, 107, 0.4); /* Stronger, color-matched shadow for a "floating" effect */
    cursor: pointer; /* Ensure a pointer cursor is shown */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* **Smoother, more sophisticated transition** */
}

.how-to-play-btn:hover {
    /* **Tactile Hover Effect** */
    background: linear-gradient(135deg, #F06595 0%, #FF6B6B 100%); /* Reverse the gradient for a "shift" effect */
    transform: translateY(-3px); /* **More pronounced lift** */
    box-shadow: 0 12px 20px rgba(240, 101, 149, 0.5); /* Stronger shadow on hover, matched to the pink */
}

/* --- ULTIMATE COMPACT & NARROW UI UPGRADE CSS: TUTORIAL CAROUSEL --- */

/* 0. CRUCIAL: LIMIT THE MODAL'S OVERALL WIDTH */
#how-to-play-content {
    max-width: 320px !important; /* Made even narrower for a 'way less wide' feel */
    width: 95%; /* Better fit on very small screens */
    padding: 1.5rem !important; /* Reduced modal padding (if your .modal-content has padding) */
}

/* Modal Title Shrink */
#how-to-play-content h2 {
    font-size: 1.8rem; /* Slightly smaller than default H2 */
    margin-bottom: 0.75rem; /* Less space below the title */
}

/* 1. Wrapper to crop the carousel (minimal bottom margin) */
.tutorial-carousel-wrapper {
    overflow: hidden; 
    width: 100%;
    margin-bottom: 0.5rem; /* Minimal spacing below carousel */
}

/* 2. The carousel itself: no change needed */
.tutorial-carousel {
    display: flex; 
    width: 400%; 
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
}

/* 3. Individual Tutorial Card styles (padding, height, and content shrunk) */
.tutorial-card {
    flex-shrink: 0; 
    width: 25%; 
    padding: 0.75rem; /* Reduced card padding from 1rem */
    background-color: var(--bg-color-4);
    border-radius: 0.75rem; /* Smaller border radius */
    box-shadow: 0 4px 12px var(--shadow-color); /* Lighter shadow */
    gap: 0.5rem; /* Reduced internal gap from 0.75rem */
    min-height: 160px; /* Reduced card height from 180px */
}

.tutorial-card h3 {
    font-size: 1.3rem; /* Reduced card heading size from 1.5rem */
    letter-spacing: 0.5px; /* Tighter letter spacing */
}

.tutorial-card p {
    font-size: 0.8rem; /* Reduced paragraph font size from 0.9rem */
    line-height: 1.3; /* Tighter line spacing */
}

/* 4. Icon styling (smaller icon) */
.card-icon {
    font-size: 2rem; /* Reduced icon size from 2.2rem */
    margin-bottom: 0; 
}


/* 5. Navigation and Pagination (tighter spacing and smaller buttons) */
.carousel-nav {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Crucial: ensures all items (buttons & dots) are on one line */
    width: 100%;
    margin-top: 0.5rem; 
}

/* Shrink the size of the buttons */
.carousel-nav button {
    font-size: 0.85rem; 
    padding: 0.5rem 1rem; 
    height: auto; 
    line-height: 1; /* Helps ensure text/icon inside button is centered */
}

/* Dots container */
.pagination-dots {
    display: flex;
    gap: 0.4rem; 
    /* The dots should now be visible */
}

.pagination-dot {
    width: 6px; 
    height: 6px; 
    background-color: var(--text-color-3); 
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.pagination-dot.active {
    background-color: #39FF14; 
    transform: scale(1.5); 
    box-shadow: 0 0 6px rgba(57, 255, 20, 0.7);
}

/* Final "Close Menu" button adjustment (remains separate below the nav bar) */
#how-to-play-back-button {
    margin-top: 1rem !important; 
    font-size: 0.9rem; 
    padding: 0.6rem 1.2rem; 
}

/* Style for disabled buttons - no change */
.carousel-nav button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important; 
    box-shadow: none !important; 
}

.stat-value.mode.classic-color {
    color: #39FF14;
}

.stat-value.mode.challenge-color {
    color: #FFD700;
}

.stat-value.mode.lava-color {
    color: #FF6B00;
}

/* Add to your CSS */
.wall-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 3rem;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.6);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    letter-spacing: 0.1em;
}

.wall-notification.lava {
    color: #FF4500;
    text-shadow: 0 0 20px rgba(255, 69, 0, 0.8), 0 0 40px rgba(255, 69, 0, 0.6);
}

.wall-notification.show {
    animation: speedUpPop 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (max-width: 600px) {
    .wall-notification {
        font-size: 2rem;
    }
}

/* --- Mobile Optimizations --- */
@media (max-width: 600px) {
    body {
        padding: 0.5rem;
    }

    .social-links-container {
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        flex-direction: row;
    }
    
    .social-link {
        padding: 0.5rem;
        min-width: 40px;
        justify-content: center;
    }
    
    .social-handle {
        display: none; /* Hide text on mobile */
    }
    
    .social-icon {
        font-size: 1.2rem;
    }

    .shop-item {
        padding: 0.75rem;
    }
    .shop-item-preview, .tile-preview {
        width: 70px;
        height: 70px;
    }
    .shop-item-name {
        font-size: 1rem;
    }
    .buy-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .game-container {
        padding: 1rem;
        gap: 1rem;
    }

    .score-box, .timer-box {
        padding: 0.4rem 0.8rem;
        min-width: 65px;
    }
    
    .score-value, .timer-value {
        font-size: 1.5rem;
    }

    .score-label, .timer-label {
        font-size: 0.7rem;
    }
    
    .grid {
        gap: 0.75rem;
    }

    .tile {
        border-radius: 0.75rem;
    }

    .modal-content {
        padding: 1.5rem;
        border-radius: 1rem;
        gap: 1rem;
    }
    
    #main-menu-content h2 {
        font-size: 2.5rem;
    }

    .modal-content h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .modal-content button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .tabs {
        border-radius: 1rem;
        padding: 0.25rem;
        margin-bottom: 1rem;
    }
    
    .tab-button {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .score-list li, .friend-list li {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .score-list li .player-name {
        display: block; /* Ensure username is on a new line */
        margin-left: 0;
    }
    
    .score-list li .score-value-text {
        font-size: 1.1rem;
        align-self: flex-end; /* Align the score to the right */
    }

    .score-list li .score-rank {
        min-width: unset;
        margin-right: 0.5rem;
    }
    
    .friend-list li {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .friend-list li span {
        flex-grow: 1;
        font-size: 0.9rem;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .friend-actions {
        flex-shrink: 0;
    }

    .login-button, .mute-button, .theme-button {
        width: 35px;
        height: 35px;
    }

    .mute-buttons-container {
        position: fixed;
        top: 1rem;
        right: 1rem;
        display: flex;
        flex-wrap: nowrap; /* Prevents wrapping on small screens */
        gap: 0.5rem;
        z-index: 20;
        align-items: center;
    }
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
    width: 100%;
    max-width: 90vw;
}

.menu-card {
    background: linear-gradient(135deg, rgba(30, 30, 40, 0.95), rgba(20, 20, 30, 0.95));
    border-radius: 20px;
    padding: clamp(16px, 4vw, 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: clamp(160px, 30vw, 200px);
    aspect-ratio: 0.9;
}

.menu-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.menu-card:active {
    transform: scale(0.97);
}

.menu-card:hover::before {
    opacity: 1;
}

.card-start {
    border-color: rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(20, 20, 30, 0.95));
}

.card-shop {
    border-color: rgba(168, 85, 247, 0.3);
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.3), rgba(20, 20, 30, 0.95));
}

.card-scores {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.3), rgba(20, 20, 30, 0.95));
}

.card-friends {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.3), rgba(20, 20, 30, 0.95));
}

.card-icon {
    font-size: clamp(40px, 8vw, 56px);
    margin-bottom: clamp(8px, 2vw, 12px);
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.card-start .card-icon {
    color: #3b82f6;
    text-shadow: 
        0 0 20px rgba(59, 130, 246, 0.8),
        0 0 40px rgba(59, 130, 246, 0.6),
        0 0 60px rgba(59, 130, 246, 0.4);
    animation: glow-blue 2s ease-in-out infinite;
}

.card-shop .card-icon {
    color: #a855f7;
    text-shadow: 
        0 0 20px rgba(168, 85, 247, 0.8),
        0 0 40px rgba(168, 85, 247, 0.6),
        0 0 60px rgba(168, 85, 247, 0.4);
    animation: glow-purple 2s ease-in-out infinite;
}

.card-scores .card-icon {
    color: #fbbf24;
    text-shadow: 
        0 0 20px rgba(251, 191, 36, 0.8),
        0 0 40px rgba(251, 191, 36, 0.6),
        0 0 60px rgba(251, 191, 36, 0.4);
    animation: glow-gold 2s ease-in-out infinite;
}

.card-friends .card-icon {
    color: #22c55e;
    text-shadow: 
        0 0 20px rgba(34, 197, 94, 0.8),
        0 0 40px rgba(34, 197, 94, 0.6),
        0 0 60px rgba(34, 197, 94, 0.4);
    animation: glow-green 2s ease-in-out infinite;
}

@keyframes glow-blue {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(59, 130, 246, 0.8),
            0 0 40px rgba(59, 130, 246, 0.6),
            0 0 60px rgba(59, 130, 246, 0.4);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(59, 130, 246, 1),
            0 0 60px rgba(59, 130, 246, 0.8),
            0 0 90px rgba(59, 130, 246, 0.6);
    }
}

@keyframes glow-purple {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(168, 85, 247, 0.8),
            0 0 40px rgba(168, 85, 247, 0.6),
            0 0 60px rgba(168, 85, 247, 0.4);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(168, 85, 247, 1),
            0 0 60px rgba(168, 85, 247, 0.8),
            0 0 90px rgba(168, 85, 247, 0.6);
    }
}

@keyframes glow-gold {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(251, 191, 36, 0.8),
            0 0 40px rgba(251, 191, 36, 0.6),
            0 0 60px rgba(251, 191, 36, 0.4);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(251, 191, 36, 1),
            0 0 60px rgba(251, 191, 36, 0.8),
            0 0 90px rgba(251, 191, 36, 0.6);
    }
}

@keyframes glow-green {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(34, 197, 94, 0.8),
            0 0 40px rgba(34, 197, 94, 0.6),
            0 0 60px rgba(34, 197, 94, 0.4);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(34, 197, 94, 1),
            0 0 60px rgba(34, 197, 94, 0.8),
            0 0 90px rgba(34, 197, 94, 0.6);
    }
}

.card-title {
    font-size: clamp(14px, 3.5vw, 18px);
    font-weight: bold;
    color: #ffffff;
    margin-bottom: clamp(4px, 1vw, 6px);
    text-align: center;
}

.card-description {
    font-size: clamp(10px, 2.5vw, 13px);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: clamp(12px, 3vw, 16px);
    text-align: center;
}

.card-buttons {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.5vw, 8px);
    width: 100%;
}

.card-mode-btn {
    padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 16px);
    border-radius: 12px;
    border: none;
    font-weight: 600;
    font-size: clamp(11px, 2.5vw, 13px);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.classic-mode {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.classic-mode:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.challenge-mode {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.challenge-mode:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lava-mode {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.lava-mode:active {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-shop .card-main-btn {
    border-color: rgba(168, 85, 247, 0.4);
}

.card-shop .card-main-btn:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.6);
}

.card-scores .card-main-btn {
    border-color: rgba(251, 191, 36, 0.4);
}

.card-scores .card-main-btn:hover {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.6);
}

.card-friends .card-main-btn {
    border-color: rgba(34, 197, 94, 0.4);
}

.card-friends .card-main-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.6);
}

/* Tablet adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .card-grid {
        max-width: 80vw;
        gap: 20px;
    }
}

/* Desktop adjustments */
@media (min-width: 769px) {
    .card-grid {
        max-width: 600px;
        gap: 24px;
    }
    
    .menu-card {
        min-height: 200px;
    }
}

/* Small mobile adjustments */
@media (max-width: 360px) {
    .card-grid {
        gap: 10px;
    }
}

.how-to-play-link {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color-2);
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem auto 0 auto;
    width: 100%;
    max-width: 100%;
}

.how-to-play-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-color-1);
    transform: translateY(-2px);
}

.how-to-play-link i {
    font-size: 1.2rem;
}

.how-to-play-link:active {
    transform: translateY(0px);
}

/* Light mode adjustments */
.light-mode .how-to-play-link {
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-color-2);
}

.light-mode .how-to-play-link:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
    color: var(--text-color-1);
}

/* Modal content adjustments for How to Play */
#how-to-play-content {
    max-width: 500px !important;
    width: 95%;
    padding: 2rem !important;
}

#how-to-play-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
    .how-to-play-link {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
        margin-top: 1rem;
    }
    
    .how-to-play-link i {
        font-size: 1rem;
    }
}

/* Reduce main menu content padding and gaps */
#main-menu-content {
    padding: 1.5rem !important;
    gap: 1rem !important;
}

/* Reduce title size and margin */
#main-menu-content h2 {
    font-size: 2.5rem !important;
    margin-bottom: 0.35rem !important;
}

/* Reduce welcome message margin - KEY CHANGE HERE */
#welcome-message {
    margin-bottom: 0.5rem !important;
    font-size: 0.95rem;
}

/* Reduce card grid gap */
.card-grid {
    gap: 12px !important;
    margin-top: 0 !important;
}

/* Make cards more compact */
.menu-card {
    padding: 14px !important;
    min-height: 150px !important;
    border-radius: 18px;
}

/* Reduce icon size */
.card-icon {
    font-size: 42px !important;
    margin-bottom: 8px !important;
}

/* Reduce text sizes */
.card-title {
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

.card-description {
    font-size: 11px !important;
    margin-bottom: 10px !important;
}

/* Reduce how to play button spacing and size */
.how-to-play-link {
    margin-top: 1rem !important;
    padding: 0.6rem 1.25rem !important;
    font-size: 0.85rem !important;
}

.how-to-play-link i {
    font-size: 1.1rem !important;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    #main-menu-content {
        padding: 1.25rem !important;
    }
    
    #main-menu-content h2 {
        font-size: 2rem !important;
    }
    
    .menu-card {
        padding: 12px !important;
        min-height: 130px !important;
    }
    
    .card-icon {
        font-size: 36px !important;
    }
}

/* Updated styles for Shop, Friends, and Leaderboard menus */

/* Make these modals more compact and styled like the main menu */
#high-scores-content, #friends-content, #shop-content {
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.95) 0%, rgba(14, 18, 29, 0.95) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: modal-fade-in 0.5s ease-out forwards;
    max-width: 400px; /* Smaller than main menu */
    width: 95%;
    padding: 1.5rem !important;
    gap: 1rem !important;
}

#shop-content {
    max-width: 480px; /* Slightly wider for shop items */
}

/* Reduce modal heading sizes */
#high-scores-content h2,
#friends-content h2,
#shop-content h2 {
    font-size: 1.8rem !important;
    margin-bottom: 0.75rem !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

.light-mode #high-scores-content h2,
.light-mode #friends-content h2,
.light-mode #shop-content h2 {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Updated Tabs styling to match main menu aesthetic */
.tabs {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, rgba(30, 38, 66, 0.6) 0%, rgba(20, 28, 51, 0.6) 100%);
    backdrop-filter: blur(10px);
    border-radius: 1.2rem;
    padding: 0.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
    gap: 0.4rem;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-button {
    background: transparent;
    border: none;
    color: var(--text-color-3);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    flex-grow: 1;
    font-size: 0.9rem;
    border: 1px solid transparent;
    position: relative;
}

.tab-button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color-1);
}

.tab-button.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* High Scores Tabs - more compact */
.high-scores-tabs {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.mode-tabs {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, var(--bg-color-4) 0%, var(--bg-color-3) 100%);
    border-radius: 1rem;
    padding: 0.4rem;
    gap: 0.4rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.leaderboard-type-tab {
    background: transparent;
    color: var(--text-color-2);
    padding: 0.5rem 1rem;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid transparent;
}

.leaderboard-type-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color-1);
}

.leaderboard-type-tab.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #0099cc 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Updated score/friend list items */
.score-list, .friend-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.score-list li, .friend-list li {
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.5) 0%, rgba(29, 35, 58, 0.5) 100%);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    transition: all 0.1s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.score-list li:hover, .friend-list li:hover {
    background: linear-gradient(135deg, rgba(55, 62, 94, 0.6) 0%, rgba(39, 45, 68, 0.6) 100%);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Scrollable container with custom scrollbar */
.scrollable-container {
    max-height: 240px;
    min-height: 240px;
    overflow-y: auto;
    position: relative;
    padding: 0.4rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 1rem;
}

.scrollable-container::-webkit-scrollbar {
    width: 8px;
}

.scrollable-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.scrollable-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-success), var(--accent-primary));
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
}

/* Shop items - more compact styling */
.shop-item {
    position: relative;
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.8) 0%, rgba(29, 35, 58, 0.8) 100%);
    border-radius: 1rem;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
    cursor: pointer;
    border: 2px solid transparent;
}

.shop-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.shop-item.equipped {
    border: 2px solid #00a2ff;
    box-shadow: 0 0 15px rgba(0, 162, 255, 0.5);
}

.shop-item-preview, .tile-preview {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 0.4rem;
    transition: background-color 0.2s;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.tile-preview {
    border-radius: 1rem;
}

.shop-item-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-color-1);
    text-align: center;
    margin-bottom: 0.4rem;
}

/* Friend actions - more compact */
.friend-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.friend-actions button {
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.friend-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.friend-actions button.decline-btn {
    background: linear-gradient(135deg, #f44336, #e53935);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.friend-actions button.decline-btn:hover {
    box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

/* Add friend section - more compact */
#add-friend-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.4rem;
}

#friend-search-input {
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.6) 0%, rgba(29, 35, 58, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color-1);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    width: 100%;
    font-size: 0.95rem;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#friend-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
}

#friend-search-input::placeholder {
    color: var(--text-color-3);
    text-align: left;
}

#send-request-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

#send-request-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* Buy button - more compact */
.buy-button {
    background: linear-gradient(135deg, #39FF14, #2eeb00);
    color: #121212;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
}

.buy-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #2eeb00, #25d000);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(57, 255, 20, 0.4);
}

.buy-button.equipped-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.buy-button.equipped-btn:hover {
    transform: none;
    background: linear-gradient(135deg, #007bff, #0056b3);
}

/* Price tag - more prominent */
.price-tag {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #121212;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    #high-scores-content, #friends-content, #shop-content {
        padding: 1.25rem !important;
        max-width: 95%;
    }
    
    #high-scores-content h2,
    #friends-content h2,
    #shop-content h2 {
        font-size: 1.5rem !important;
    }
    
    .shop-item {
        padding: 0.75rem;
    }
    
    .shop-item-preview, .tile-preview {
        width: 60px;
        height: 60px;
    }
    
    .shop-item-name {
        font-size: 0.9rem;
    }
    
    .buy-button {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    .tabs {
        padding: 0.3rem;
    }
    
    .tab-button {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Updated styles for Shop, Friends, and Leaderboard menus - FIXED */

/* Make these modals more compact and styled like the main menu */
#high-scores-content, #friends-content, #shop-content {
    background: linear-gradient(135deg, rgba(20, 24, 45, 0.95) 0%, rgba(14, 18, 29, 0.95) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: modal-fade-in 0.5s ease-out forwards;
    max-width: 420px;
    width: 95%;
    padding: 1.5rem !important;
    gap: 1rem !important;
    max-height: 85vh;
    overflow-y: auto;
}

#shop-content {
    max-width: 480px;
}

/* Reduce modal heading sizes */
#high-scores-content h2,
#friends-content h2,
#shop-content h2 {
    font-size: 1.8rem !important;
    margin-bottom: 0.75rem !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

.light-mode #high-scores-content h2,
.light-mode #friends-content h2,
.light-mode #shop-content h2 {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Updated Tabs styling to match main menu aesthetic */
.tabs {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, rgba(30, 38, 66, 0.6) 0%, rgba(20, 28, 51, 0.6) 100%);
    backdrop-filter: blur(10px);
    border-radius: 1.2rem;
    padding: 0.4rem;
    margin-top: 0;
    margin-bottom: 1rem;
    gap: 0.4rem;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-button {
    background: transparent;
    border: none;
    color: var(--text-color-3);
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    flex-grow: 1;
    font-size: 0.9rem;
    border: 1px solid transparent;
    position: relative;
}

.tab-button:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color-1);
}

.tab-button.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.8) 0%, rgba(139, 92, 246, 0.8) 100%);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* High Scores Tabs - more compact */
.high-scores-tabs {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.mode-tabs {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, var(--bg-color-4) 0%, var(--bg-color-3) 100%);
    border-radius: 1rem;
    padding: 0.4rem;
    gap: 0.4rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
}

.leaderboard-type-tab {
    background: transparent;
    color: var(--text-color-2);
    padding: 0.5rem 1rem;
    border-radius: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid transparent;
}

.leaderboard-type-tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color-1);
}

.leaderboard-type-tab.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #0099cc 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 217, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Updated score/friend list items */
.score-list, .friend-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.score-list li, .friend-list li {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.5) 0%, rgba(29, 35, 58, 0.5) 100%);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    transition: all 0.1s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.score-list li:hover, .friend-list li:hover {
    background: linear-gradient(135deg, rgba(55, 62, 94, 0.6) 0%, rgba(39, 45, 68, 0.6) 100%);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Scrollable container with custom scrollbar - REDUCED HEIGHT */
.scrollable-container {
    max-height: 200px;
    min-height: 200px;
    overflow-y: auto;
    position: relative;
    padding: 0.4rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 1rem;
}

#friends-content .scrollable-container {
    max-height: 220px;
    min-height: 220px;
}

.scrollable-container::-webkit-scrollbar {
    width: 8px;
}

.scrollable-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.scrollable-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
}

.scrollable-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-success), var(--accent-primary));
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
}

/* Shop items - more compact styling */
.shop-item {
    position: relative;
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.8) 0%, rgba(29, 35, 58, 0.8) 100%);
    border-radius: 1rem;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.3s, box-shadow 0.3s, border 0.3s;
    cursor: pointer;
    border: 2px solid transparent;
}

.shop-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.shop-item.equipped {
    border: 2px solid #00a2ff;
    box-shadow: 0 0 15px rgba(0, 162, 255, 0.5);
}

.shop-item-preview, .tile-preview {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 0.4rem;
    transition: background-color 0.2s;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.tile-preview {
    border-radius: 1rem;
}

.shop-item-name {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--text-color-1);
    text-align: center;
    margin-bottom: 0.3rem;
}

/* Friend actions - consistent button sizing */
.friend-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.friend-actions button {
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
    min-height: 36px;
}

.friend-actions button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.friend-actions button.decline-btn {
    background: linear-gradient(135deg, #f44336, #e53935);
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.friend-actions button.decline-btn:hover {
    box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

/* Add friend section - more compact */
#add-friend-section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 0.4rem;
}

#friend-search-input {
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.6) 0%, rgba(29, 35, 58, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color-1);
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    width: 100%;
    font-size: 0.95rem;
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 44px;
}

#friend-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
}

#friend-search-input::placeholder {
    color: var(--text-color-3);
    text-align: left;
}

#send-request-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    min-height: 44px;
}

#send-request-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* Buy button - consistent sizing */
.buy-button {
    background: linear-gradient(135deg, #39FF14, #2eeb00);
    color: #121212;
    padding: 0.625rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: bold;
    font-size: 0.9rem;
    transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
    min-height: 40px;
}

.buy-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #2eeb00, #25d000);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(57, 255, 20, 0.4);
}

.buy-button.equipped-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
}

.buy-button.equipped-btn:hover {
    transform: none;
    background: linear-gradient(135deg, #007bff, #0056b3);
}

/* Price tag - more prominent */
.price-tag {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #121212;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(255, 215, 0, 0.4);
}

/* Back to menu button - consistent sizing */
.modal-content button.back-to-menu-btn {
    background: linear-gradient(135deg, var(--bg-color-4) 0%, var(--bg-color-3) 100%);
    color: var(--text-color-1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    width: 100%;
    padding: 0.875rem 2rem;
    border-radius: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 48px;
    margin-top: 0.5rem;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    #high-scores-content, #friends-content, #shop-content {
        padding: 1.25rem !important;
        max-width: 95%;
        max-height: 90vh;
    }
    
    #high-scores-content h2,
    #friends-content h2,
    #shop-content h2 {
        font-size: 1.5rem !important;
    }
    
    .shop-item {
        padding: 0.75rem;
    }
    
    .shop-item-preview, .tile-preview {
        width: 60px;
        height: 60px;
    }
    
    .shop-item-name {
        font-size: 0.9rem;
    }
    
    .buy-button {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
        min-height: 38px;
    }
    
    .tabs {
        padding: 0.3rem;
    }
    
    .tab-button {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .scrollable-container {
        max-height: 180px;
        min-height: 180px;
    }
    
    #friends-content .scrollable-container {
        max-height: 200px;
        min-height: 200px;
    }
    
    .friend-actions button,
    #send-request-button {
        min-height: 40px;
        font-size: 0.85rem;
    }
    
    .modal-content button.back-to-menu-btn {
        min-height: 44px;
        font-size: 0.9rem;
    }
}

/* Friends Menu - Complete UI Overhaul */

/* Main friends container */
#friends-content {
    max-width: 420px;
    width: 95%;
    padding: 1.5rem !important;
    gap: 1rem !important;
}

#friends-content h2 {
    font-size: 1.8rem !important;
    margin-bottom: 0.75rem !important;
}

/* Friends tabs */
#friends-content .tabs {
    margin-bottom: 1rem;
}

#friends-content .tab-button {
    font-size: 0.85rem;
    padding: 0.65rem 0.75rem;
}

/* Friend sections */
.friend-section {
    display: none;
    min-height: 300px;
}

.friend-section.active-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Messages when empty */
#friends-message,
#requests-message,
#add-friend-message {
    text-align: center;
    color: var(--text-color-2);
    padding: 2rem 1rem;
    font-size: 0.95rem;
}

#add-friend-message {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 82, 82, 0.1);
    margin-top: 0.5rem;
}

#add-friend-message:not(.hidden) {
    display: block;
}

/* Scrollable containers */
#friends-list-section .scrollable-container,
#requests-section .scrollable-container {
    max-height: 240px;
    min-height: 240px;
    overflow-y: auto;
    padding: 0.5rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 1rem;
    margin-top: 0.5rem;
}

/* Friend list items */
.friend-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.friend-list li {
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.5) 0%, rgba(29, 35, 58, 0.5) 100%);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 0.75rem;
}

.friend-list li:hover {
    background: linear-gradient(135deg, rgba(55, 62, 94, 0.6) 0%, rgba(39, 45, 68, 0.6) 100%);
    transform: translateX(3px);
    border-color: rgba(255, 255, 255, 0.2);
}

.friend-list li > span {
    flex: 1;
    font-weight: 500;
    color: var(--text-color-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Friend action buttons */
.friend-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.friend-actions button {
    padding: 0.5rem 0.875rem;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 36px;
}

.friend-actions .accept-btn,
.friend-actions .accept-request-btn {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.friend-actions .accept-btn:hover,
.friend-actions .accept-request-btn:hover {
    background: linear-gradient(135deg, #45a049, #3d8b40);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

.friend-actions .decline-btn,
.friend-actions .remove-friend-btn,
.friend-actions .decline-request-btn {
    background: linear-gradient(135deg, #f44336, #e53935);
    color: white;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.friend-actions .decline-btn:hover,
.friend-actions .remove-friend-btn:hover,
.friend-actions .decline-request-btn:hover {
    background: linear-gradient(135deg, #e53935, #d32f2f);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
}

/* Add friend section */
#add-friend-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}

#add-friend-section > p:first-of-type {
    color: var(--text-color-2);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

#friend-search-input {
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.6) 0%, rgba(29, 35, 58, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color-1);
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    width: 100%;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#friend-search-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.2);
    background: linear-gradient(135deg, rgba(55, 62, 94, 0.7) 0%, rgba(39, 45, 68, 0.7) 100%);
}

#friend-search-input::placeholder {
    color: var(--text-color-3);
}

#send-request-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.875rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    width: 100%;
}

#send-request-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

#send-request-button:active {
    transform: translateY(0);
}

/* Back button */
#friends-back-button {
    margin-top: 1rem;
}

/* Mobile optimizations */
@media (max-width: 600px) {
    #friends-content {
        padding: 1.25rem !important;
        max-width: 95%;
    }
    
    #friends-content h2 {
        font-size: 1.5rem !important;
    }
    
    .friend-list li {
        padding: 0.75rem 0.875rem;
        font-size: 0.9rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .friend-list li > span {
        flex: 0 0 100%;
        margin-bottom: 0.25rem;
    }
    
    .friend-actions {
        flex: 0 0 100%;
        justify-content: flex-end;
        width: 100%;
    }
    
    .friend-actions button {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        flex: 1;
        min-height: 38px;
    }
    
    #friends-list-section .scrollable-container,
    #requests-section .scrollable-container {
        max-height: 200px;
        min-height: 200px;
    }
    
    #friend-search-input {
        font-size: 0.9rem;
        padding: 0.75rem 0.875rem;
    }
    
    #send-request-button {
        padding: 0.75rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .friend-actions {
        gap: 0.375rem;
    }
    
    .friend-actions button {
        padding: 0.5rem 0.625rem;
        font-size: 0.75rem;
    }
}

/* Add friend section */
#add-friend-section {
    display: none; /* Add this to hide by default */
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}

#add-friend-section.active-tab {
    display: flex; /* Show when active */
}

#add-friend-section > p:first-of-type {
    color: var(--text-color-2);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Friend sections */
.friend-section {
    display: none;
    min-height: auto; /* Changed from 300px */
}

.friend-section.active-tab {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Reduced from 1rem */
}

/* Messages when empty */
#friends-message,
#requests-message {
    text-align: center;
    color: var(--text-color-2);
    padding: 1.5rem 1rem; /* Reduced from 2rem */
    font-size: 0.9rem;
}

#add-friend-message {
    padding: 0.5rem; /* Reduced from 0.75rem */
    border-radius: 0.5rem;
    background: rgba(255, 82, 82, 0.1);
    margin-top: 0.25rem; /* Reduced from 0.5rem */
}

/* Scrollable containers - REDUCED HEIGHT */
#friends-list-section .scrollable-container,
#requests-section .scrollable-container {
    max-height: 180px; /* Reduced from 240px */
    min-height: 180px; /* Reduced from 240px */
    overflow-y: auto;
    padding: 0.4rem; /* Reduced from 0.5rem */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 1rem;
    margin-top: 0.25rem; /* Reduced from 0.5rem */
}

/* Add friend section - MORE COMPACT */
#add-friend-section {
    display: none;
    flex-direction: column;
    gap: 0.75rem; /* Reduced from 1rem */
    padding-top: 0.25rem; /* Reduced from 0.5rem */
}

#add-friend-section > p:first-of-type {
    color: var(--text-color-2);
    font-size: 0.85rem; /* Reduced from 0.9rem */
    margin-bottom: 0;
}

#add-friend-section.active-tab {
    display: flex;
}

/* Friend list items - MORE COMPACT */
.friend-list li {
    padding: 0.75rem 0.875rem; /* Reduced from 0.875rem 1rem */
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.5) 0%, rgba(29, 35, 58, 0.5) 100%);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem; /* Reduced from 0.95rem */
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    gap: 0.75rem;
}

/* Input and button - MORE COMPACT */
#friend-search-input {
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.6) 0%, rgba(29, 35, 58, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color-1);
    padding: 0.75rem 0.875rem; /* Reduced from 0.875rem 1rem */
    border-radius: 0.75rem;
    width: 100%;
    font-size: 0.9rem; /* Reduced from 0.95rem */
    transition: all 0.2s ease;
    box-sizing: border-box;
}

#send-request-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.75rem 1.25rem; /* Reduced from 0.875rem 1.5rem */
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem; /* Reduced from 0.95rem */
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    width: 100%;
}

/* Friend action buttons - MORE COMPACT */
.friend-actions button {
    padding: 0.45rem 0.75rem; /* Reduced from 0.5rem 0.875rem */
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem; /* Reduced from 0.85rem */
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 34px; /* Reduced from 36px */
}

/* Back button - MORE COMPACT */
#friends-back-button {
    margin-top: 0.75rem; /* Reduced from 1rem */
}

/* Mobile optimizations */
@media (max-width: 600px) {
    #friends-list-section .scrollable-container,
    #requests-section .scrollable-container {
        max-height: 160px; /* Reduced from 200px */
        min-height: 160px; /* Reduced from 200px */
    }
    
    .friend-list li {
        padding: 0.65rem 0.75rem; /* Reduced */
        font-size: 0.85rem; /* Reduced */
    }
    
    #friend-search-input {
        font-size: 0.85rem; /* Reduced */
        padding: 0.65rem 0.75rem; /* Reduced */
    }
    
    #send-request-button {
        padding: 0.65rem 1rem; /* Reduced */
        font-size: 0.85rem; /* Reduced */
    }
    
    .friend-actions button {
        padding: 0.45rem 0.65rem; /* Reduced */
        font-size: 0.75rem; /* Reduced */
        min-height: 36px; /* Reduced */
    }
}

/* Friend sections - CONSISTENT HEIGHT */
.friend-section {
    display: none;
    min-height: auto;
}

.friend-section.active-tab {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 260px; /* Add consistent minimum height */
}

/* Scrollable containers - SAME HEIGHT FOR ALL */
#friends-list-section .scrollable-container,
#requests-section .scrollable-container {
    max-height: 180px;
    min-height: 180px;
    overflow-y: auto;
    padding: 0.4rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: 1rem;
    margin-top: 0.25rem;
}

#friend-search-input {
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.6) 0%, rgba(29, 35, 58, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-color-1);
    padding: 0.75rem 0.875rem;
    border-radius: 0.75rem;
    width: 100%;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking */
}

#send-request-button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
    width: 100%;
    flex-shrink: 0; /* Prevent shrinking */
}

#add-friend-message {
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(255, 82, 82, 0.1);
    margin-top: 0.25rem;
    flex-shrink: 0; /* Prevent shrinking */
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .friend-section.active-tab {
        min-height: 240px; /* Slightly smaller on mobile */
    }
    
    #add-friend-section {
        min-height: 160px; /* Match mobile scrollable height */
    }
    
    #friends-list-section .scrollable-container,
    #requests-section .scrollable-container {
        max-height: 160px;
        min-height: 160px;
    }
}

/* REMOVE OR REPLACE THIS OLD MOBILE CODE */
@media (max-width: 600px) {
    .score-list li, .friend-list li {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
        flex-direction: column; /* THIS IS THE PROBLEM - REMOVE */
        align-items: flex-start; /* THIS IS THE PROBLEM - REMOVE */
        gap: 0.25rem;
    }

    .score-list li .player-name {
        display: block; /* THIS IS THE PROBLEM - REMOVE */
        margin-left: 0;
    }
    
    .score-list li .score-value-text {
        font-size: 1.1rem;
        align-self: flex-end; /* THIS IS THE PROBLEM - REMOVE */
    }

    .score-list li .score-rank {
        min-width: unset;
        margin-right: 0.5rem;
    }
}

/* Score list base styles */
.score-list, .friend-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: 0;
}

.score-list.placeholder li {
    color: var(--text-color-3);
}

.score-list li, .friend-list li {
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(45, 52, 84, 0.5) 0%, rgba(29, 35, 58, 0.5) 100%);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row; /* Force row layout */
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    transition: all 0.1s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    gap: 0.5rem; /* Add gap between elements */
}

.score-list li:hover, .friend-list li:hover {
    background: linear-gradient(135deg, rgba(55, 62, 94, 0.6) 0%, rgba(39, 45, 68, 0.6) 100%);
    transform: translateX(5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.score-list li .score-rank {
    font-weight: bold;
    color: var(--text-color-1);
    min-width: 35px; /* Increased from 25px for better spacing */
    flex-shrink: 0; /* Prevent shrinking */
}

.score-list li .player-name {
    font-size: 0.9rem;
    color: var(--text-color-2);
    flex: 1; /* Take up remaining space */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Allow proper text overflow */
    margin: 0; /* Remove any margins */
}

.score-list li .score-value-text {
    color: #39FF14;
    font-weight: bold;
    font-size: 1rem;
    flex-shrink: 0; /* Prevent shrinking */
    margin-left: auto; /* Push to the right */
}

/* Mobile optimizations - FIXED */
@media (max-width: 600px) {
    .score-list li, .friend-list li {
        padding: 0.65rem 0.875rem;
        font-size: 0.9rem;
        flex-direction: row !important; /* Force row on mobile */
        align-items: center !important;
        gap: 0.5rem;
        flex-wrap: nowrap; /* Prevent wrapping */
    }

    .score-list li .score-rank {
        min-width: 30px;
        font-size: 0.85rem;
    }

    .score-list li .player-name {
        font-size: 0.85rem;
        flex: 1;
        min-width: 0;
        margin: 0 !important; /* Remove all margins */
        display: block; /* Ensure it stays inline */
    }

    .score-list li .score-value-text {
        font-size: 0.95rem;
        margin-left: 0.5rem;
    }
    
    /* Remove any conflicting styles */
    .score-list li > span {
        margin: 0 !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .score-list li {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }
    
    .score-list li .score-rank {
        min-width: 28px;
        font-size: 0.8rem;
    }
    
    .score-list li .player-name {
        font-size: 0.8rem;
    }
    
    .score-list li .score-value-text {
        font-size: 0.9rem;
    }
}