* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {

    --primary-color: #6c5ce7;

    --secondary-color: #a29bfe;

    --accent-color: #fd79a8;

    --dark-bg: #0f0f1e;

    --card-bg: #1a1a2e;

    --text-primary: #ffffff;

    --text-secondary: #b8b8d1;

    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

}



/* Theme: Space */

body[data-theme="space"] {

    --primary-color: #2a5298;

    --secondary-color: #7f00ff;

    --accent-color: #e100ff;

    --dark-bg: #0a0e27;

    --card-bg: #1e3c72;

    --gradient-1: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);

    --gradient-2: linear-gradient(135deg, #7f00ff 0%, #e100ff 100%);

    --gradient-3: linear-gradient(135deg, #00d2ff 0%, #3a47d5 100%);

}



/* Theme: Neon */

body[data-theme="neon"] {

    --primary-color: #f700ff;

    --secondary-color: #00ffff;

    --accent-color: #ff0080;

    --dark-bg: #000000;

    --card-bg: #1a001a;

    --gradient-1: linear-gradient(135deg, #f700ff 0%, #0ff 100%);

    --gradient-2: linear-gradient(135deg, #ff0080 0%, #ff8c00 100%);

    --gradient-3: linear-gradient(135deg, #00ff87 0%, #60efff 100%);

}



/* Theme: Nature */

body[data-theme="nature"] {

    --primary-color: #56ab2f;

    --secondary-color: #a8e063;

    --accent-color: #71b280;

    --dark-bg: #1a2a1a;

    --card-bg: #2d4a2d;

    --gradient-1: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);

    --gradient-2: linear-gradient(135deg, #134e5e 0%, #71b280 100%);

    --gradient-3: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);

}



/* Theme: Sunset */

body[data-theme="sunset"] {

    --primary-color: #ff6a00;

    --secondary-color: #ee0979;

    --accent-color: #f9d423;

    --dark-bg: #2a0a0a;

    --card-bg: #4a1a1a;

    --gradient-1: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);

    --gradient-2: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);

    --gradient-3: linear-gradient(135deg, #f83600 0%, #f9d423 100%);

}



/* Theme: Ocean */

body[data-theme="ocean"] {

    --primary-color: #0575e6;

    --secondary-color: #00c6ff;

    --accent-color: #1bffff;

    --dark-bg: #021b79;

    --card-bg: #0a2a4a;

    --gradient-1: linear-gradient(135deg, #2e3192 0%, #1bffff 100%);

    --gradient-2: linear-gradient(135deg, #0575e6 0%, #021b79 100%);

    --gradient-3: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);

}



/* Theme: Dark */

body[data-theme="dark"] {

    --primary-color: #434343;

    --secondary-color: #485563;

    --accent-color: #34495e;

    --dark-bg: #000000;

    --card-bg: #1a1a1a;

    --gradient-1: linear-gradient(135deg, #434343 0%, #000000 100%);

    --gradient-2: linear-gradient(135deg, #485563 0%, #29323c 100%);

    --gradient-3: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);

}



/* Theme: Candy */

body[data-theme="candy"] {

    --primary-color: #ff9a9e;

    --secondary-color: #fecfef;

    --accent-color: #fcb69f;

    --dark-bg: #2a1a2a;

    --card-bg: #3a2a3a;

    --gradient-1: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);

    --gradient-2: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

    --gradient-3: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);

}



/* Theme: Cyberpunk */

body[data-theme="cyberpunk"] {

    --primary-color: #ff00cc;

    --secondary-color: #00ff99;

    --accent-color: #ffff00;

    --dark-bg: #0a0a1a;

    --card-bg: #1a0a2a;

    --gradient-1: linear-gradient(135deg, #ff00cc 0%, #333399 100%);

    --gradient-2: linear-gradient(135deg, #00ff99 0%, #00ccff 100%);

    --gradient-3: linear-gradient(135deg, #ffff00 0%, #ff00ff 100%);

}



/* Theme: Liquid Glass */

body[data-theme="liquid"] {

    --primary-color: #66a6ff;

    --secondary-color: #89f7fe;

    --accent-color: #fed6e3;

    --dark-bg: #1a2a3a;

    --card-bg: rgba(102, 166, 255, 0.1);

    --gradient-1: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);

    --gradient-2: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);

    --gradient-3: linear-gradient(135deg, #d299c2 0%, #fef9d7 100%);

}



/* Liquid animated background */

body[data-theme="liquid"]::before {

    content: '';

    position: fixed;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(45deg, 

        rgba(137, 247, 254, 0.1) 0%,

        rgba(102, 166, 255, 0.2) 25%,

        rgba(168, 237, 234, 0.15) 50%,

        rgba(254, 214, 227, 0.1) 75%,

        rgba(137, 247, 254, 0.1) 100%);

    animation: liquidWave 20s ease-in-out infinite;

    z-index: -1;

}



body[data-theme="liquid"]::after {

    content: '';

    position: fixed;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle at 50% 50%,

        rgba(102, 166, 255, 0.3) 0%,

        transparent 50%);

    animation: liquidPulse 15s ease-in-out infinite;

    z-index: -1;

}



@keyframes liquidWave {

    0%, 100% {

        transform: translate(0, 0) rotate(0deg);

    }

    25% {

        transform: translate(5%, -5%) rotate(5deg);

    }

    50% {

        transform: translate(-5%, 5%) rotate(-5deg);

    }

    75% {

        transform: translate(5%, 5%) rotate(3deg);

    }

}



@keyframes liquidPulse {

    0%, 100% {

        transform: scale(1) translate(0, 0);

        opacity: 0.5;

    }

    50% {

        transform: scale(1.2) translate(-10%, 10%);

        opacity: 0.8;

    }

}



/* Liquid bubble effect */

@keyframes liquidBubble {

    0% {

        transform: translateY(0) scale(1);

        opacity: 0;

    }

    10% {

        opacity: 1;

    }

    90% {

        opacity: 1;

    }

    100% {

        transform: translateY(-100vh) scale(1.5);

        opacity: 0;

    }

}



body[data-theme="liquid"] #particles-js {

    background: linear-gradient(135deg, 

        rgba(26, 42, 58, 0.95) 0%,

        rgba(20, 35, 50, 0.98) 50%,

        rgba(15, 25, 40, 0.95) 100%);

}



body[data-theme="liquid"] .card-bg,

body[data-theme="liquid"] .modal-content,

body[data-theme="liquid"] .game-card,

body[data-theme="liquid"] .category-card,

body[data-theme="liquid"] .stat-card,

body[data-theme="liquid"] .admin-card {

    backdrop-filter: blur(20px) saturate(180%);

    background: rgba(102, 166, 255, 0.12);

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow: 0 8px 32px 0 rgba(102, 166, 255, 0.2);

    position: relative;

    overflow: hidden;

}



/* Allow scrolling in game modal for liquid theme */

body[data-theme="liquid"] .game-modal .modal-content {

    overflow-y: auto;

    overflow-x: hidden;

}



/* Liquid drip effect on cards */

body[data-theme="liquid"] .game-card::before,

body[data-theme="liquid"] .category-card::before,

body[data-theme="liquid"] .stat-card::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, 

        rgba(137, 247, 254, 0.3) 0%,

        transparent 70%);

    animation: liquidDrip 8s ease-in-out infinite;

    pointer-events: none;

}



@keyframes liquidDrip {

    0%, 100% {

        transform: translate(0, -100%) scale(0.8);

        opacity: 0;

    }

    50% {

        transform: translate(0, 0) scale(1);

        opacity: 1;

    }

}



/* Liquid hover effect */

body[data-theme="liquid"] .game-card:hover,

body[data-theme="liquid"] .category-card:hover,

body[data-theme="liquid"] .stat-card:hover {

    backdrop-filter: blur(25px) saturate(200%);

    background: rgba(102, 166, 255, 0.2);

    box-shadow: 0 12px 40px 0 rgba(102, 166, 255, 0.4);

}



body[data-theme="liquid"] .game-card:hover::before,

body[data-theme="liquid"] .category-card:hover::before,

body[data-theme="liquid"] .stat-card:hover::before {

    animation: liquidSplash 0.6s ease-out;

}



@keyframes liquidSplash {

    0% {

        transform: translate(0, 0) scale(1);

        opacity: 1;

    }

    100% {

        transform: translate(0, -20%) scale(1.5);

        opacity: 0;

    }

}



/* Liquid button effect */

body[data-theme="liquid"] .btn {

    backdrop-filter: blur(10px);

    position: relative;

    overflow: hidden;

}



body[data-theme="liquid"] .btn::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.3);

    transform: translate(-50%, -50%);

    transition: width 0.6s, height 0.6s;

}



body[data-theme="liquid"] .btn:hover::after {

    width: 300px;

    height: 300px;

}



/* Floating bubbles */

body[data-theme="liquid"] .hero::after,

body[data-theme="liquid"] .games::after,

body[data-theme="liquid"] .dashboard::after {

    content: '';

    position: absolute;

    width: 100px;

    height: 100px;

    background: radial-gradient(circle, rgba(137, 247, 254, 0.4) 0%, transparent 70%);

    border-radius: 50%;

    animation: liquidBubble 15s ease-in-out infinite;

    pointer-events: none;

    z-index: 0;

}



body[data-theme="liquid"] .games::after {

    animation-delay: 5s;

    left: 70%;

}



body[data-theme="liquid"] .dashboard::after {

    animation-delay: 10s;

    left: 30%;

    width: 150px;

    height: 150px;

}



body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    background: var(--dark-bg);

    color: var(--text-primary);

    overflow-x: hidden;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



/* Improve touch targets for mobile */

@media (max-width: 768px) {

    a, button, .btn, .filter-btn, .category-card, .game-card {

        -webkit-tap-highlight-color: rgba(108, 92, 231, 0.3);

    }

    

    /* Ensure all buttons are touch-friendly */

    button, .btn, .filter-btn {

        min-width: 44px;

        min-height: 44px;

        touch-action: manipulation;

    }

    

    /* Prevent zoom on input focus */

    input, textarea, select {

        font-size: 16px !important;

    }

    

    /* Better touch scrolling */

    .modal-content, .game-modal-content {

        -webkit-overflow-scrolling: touch;

        overflow-y: auto;

    }

}



/* Particles Background */

#particles-js {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: -1;

    background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 50%, #16213e 100%);

}



/* Navbar */

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    background: rgba(26, 26, 46, 0.95);

    backdrop-filter: blur(10px);

    padding: 1rem 0;

    z-index: 1000;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);

    animation: slideDown 0.5s ease-out;

}



@keyframes slideDown {

    from {

        transform: translateY(-100%);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}



.nav-container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 2rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--primary-color);

    cursor: pointer;

    transition: transform 0.3s ease;

}



.logo:hover {

    transform: scale(1.05) rotate(5deg);

}



.logo i {

    font-size: 2rem;

    animation: pulse 2s infinite;

}



@keyframes pulse {

    0%, 100% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.1);

    }

}



.nav-menu {

    display: flex;

    list-style: none;

    gap: 2rem;

}



.nav-link {

    color: var(--text-secondary);

    text-decoration: none;

    font-weight: 500;

    transition: all 0.3s ease;

    position: relative;

    padding: 0.5rem 0;

}



.nav-link::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    width: 0;

    height: 2px;

    background: var(--gradient-1);

    transition: width 0.3s ease;

}



.nav-link:hover,

.nav-link.active {

    color: var(--primary-color);

}



.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}



.nav-buttons {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.user-menu {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.username {

    color: var(--primary-color);

    font-weight: bold;

    padding: 0.5rem 1rem;

    background: rgba(108, 92, 231, 0.1);

    border-radius: 20px;

    animation: fadeIn 0.5s ease;

}



/* Buttons */

.btn {

    padding: 0.75rem 1.5rem;

    border: none;

    border-radius: 25px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 0.9rem;

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.btn-primary {

    background: var(--gradient-1);

    color: white;

    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);

}



.btn-primary:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.6);

}



.btn-outline {

    background: transparent;

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

}



.btn-outline:hover {

    background: var(--primary-color);

    color: white;

    transform: translateY(-2px);

}



.btn-large {

    padding: 1rem 2rem;

    font-size: 1rem;

}



.btn-block {

    width: 100%;

}



/* Hero Section */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8rem 2rem 4rem;

    max-width: 1400px;

    margin: 0 auto;

}



.hero-content {

    flex: 1;

    animation: fadeInLeft 1s ease-out;

}



@keyframes fadeInLeft {

    from {

        opacity: 0;

        transform: translateX(-50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



.hero-title {

    font-size: 4rem;

    font-weight: 900;

    margin-bottom: 1rem;

    line-height: 1.2;

}



.gradient-text {

    background: var(--gradient-1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    animation: gradientShift 3s ease infinite;

}



@keyframes gradientShift {

    0%, 100% {

        filter: hue-rotate(0deg);

    }

    50% {

        filter: hue-rotate(30deg);

    }

}



.hero-subtitle {

    font-size: 1.5rem;

    color: var(--text-secondary);

    margin-bottom: 2rem;

}



.hero-buttons {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.hero-image {

    flex: 1;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    animation: fadeInRight 1s ease-out;

}



@keyframes fadeInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



.floating-game-card {

    width: 150px;

    height: 150px;

    background: var(--gradient-1);

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 4rem;

    color: white;

    position: absolute;

    animation: float 3s ease-in-out infinite;

    box-shadow: 0 10px 40px rgba(108, 92, 231, 0.4);

}



.floating-game-card:nth-child(1) {

    animation-delay: 0s;

    top: 0;

    left: 50%;

}



.floating-game-card:nth-child(2) {

    animation-delay: 1s;

    top: 50%;

    left: 20%;

    background: var(--gradient-2);

}



.floating-game-card:nth-child(3) {

    animation-delay: 2s;

    top: 70%;

    left: 70%;

    background: var(--gradient-3);

}



@keyframes float {

    0%, 100% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-20px) rotate(5deg);

    }

}



/* Container */

.container {

    max-width: 1400px;

    margin: 0 auto;

    padding: 4rem 2rem;

}



/* Section Title */

.section-title {

    font-size: 3rem;

    text-align: center;

    margin-bottom: 3rem;

    background: var(--gradient-1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    animation: fadeIn 1s ease;

}



@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Categories Grid */

.categories-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    margin-top: 2rem;

}



.category-card {

    background: var(--card-bg);

    padding: 2rem;

    border-radius: 20px;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    border: 2px solid transparent;

    animation: fadeInUp 0.6s ease;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.category-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary-color);

    box-shadow: 0 10px 40px rgba(108, 92, 231, 0.3);

}



.category-icon {

    font-size: 3rem;

    margin-bottom: 1rem;

    color: var(--primary-color);

    transition: all 0.3s ease;

}



.category-card:hover .category-icon {

    transform: scale(1.2) rotate(10deg);

}



.category-card h3 {

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

}



.category-card p {

    color: var(--text-secondary);

}



/* Search Bar */

.search-bar {

    margin-bottom: 2rem;

}



.search-container {

    max-width: 600px;

    margin: 0 auto;

    position: relative;

    display: flex;

    align-items: center;

    background: var(--card-bg);

    border-radius: 25px;

    padding: 0.75rem 1.5rem;

    border: 2px solid rgba(108, 92, 231, 0.3);

    transition: all 0.3s ease;

}



.search-container:focus-within {

    border-color: var(--primary-color);

    box-shadow: 0 0 20px rgba(108, 92, 231, 0.3);

}



.search-container i {

    color: var(--primary-color);

    font-size: 1.2rem;

    margin-right: 1rem;

}



#gameSearch {

    flex: 1;

    background: transparent;

    border: none;

    color: var(--text-primary);

    font-size: 1rem;

    outline: none;

}



#gameSearch::placeholder {

    color: var(--text-secondary);

}



#clearSearch {

    background: transparent;

    border: none;

    color: var(--text-secondary);

    cursor: pointer;

    font-size: 1.2rem;

    padding: 0.5rem;

    transition: all 0.3s ease;

}



#clearSearch:hover {

    color: var(--accent-color);

    transform: scale(1.2);

}



/* Filter Bar */

.filter-bar {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

    justify-content: center;

    margin-bottom: 2rem;

}



.filter-btn {

    padding: 0.75rem 1.5rem;

    background: var(--card-bg);

    color: var(--text-primary);

    border: 2px solid transparent;

    border-radius: 25px;

    cursor: pointer;

    font-weight: 600;

    transition: all 0.3s ease;

}



.filter-btn:hover {

    border-color: var(--primary-color);

    transform: translateY(-2px);

}



.filter-btn.active {

    background: var(--gradient-1);

    border-color: transparent;

}



/* Games Grid */

.games-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 2rem;

}



.game-card {

    background: var(--card-bg);

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    transition: all 0.3s ease;

    border: 2px solid transparent;

    animation: scaleIn 0.5s ease;

    position: relative;

}



.game-card .favorite-badge {

    position: absolute;

    top: 10px;

    right: 10px;

    background: rgba(253, 121, 168, 0.9);

    color: white;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    z-index: 10;

    animation: heartBeat 1s ease infinite;

}



.game-card .rating-badge {

    position: absolute;

    top: 10px;

    left: 10px;

    background: rgba(108, 92, 231, 0.9);

    color: white;

    padding: 0.5rem 1rem;

    border-radius: 20px;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: bold;

    z-index: 10;

}



.game-card .rating-badge i {

    color: #ffd700;

}



@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(0.9);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}



.game-card:hover {

    transform: translateY(-10px) scale(1.02);

    border-color: var(--primary-color);

    box-shadow: 0 15px 50px rgba(108, 92, 231, 0.4);

}



.game-card-image {

    width: 100%;

    height: 200px;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.game-card:hover .game-card-image {

    transform: scale(1.1);

}



.game-card-content {

    padding: 1.5rem;

}



.game-card-title {

    font-size: 1.5rem;

    margin-bottom: 0.5rem;

}



.game-card-description {

    color: var(--text-secondary);

    margin-bottom: 1rem;

}



.game-card-category {

    display: inline-block;

    padding: 0.5rem 1rem;

    background: var(--gradient-1);

    color: white;

    border-radius: 20px;

    font-size: 0.85rem;

    font-weight: 600;

}



/* File Upload Styling */

.file-input {

    display: none;

}



.file-upload-area {

    border: 3px dashed var(--primary-color);

    border-radius: 15px;

    padding: 3rem 2rem;

    text-align: center;

    cursor: pointer;

    transition: all 0.3s ease;

    background: var(--dark-bg);

    margin-top: 0.5rem;

}



.file-upload-area:hover {

    background: rgba(108, 92, 231, 0.1);

    border-color: var(--secondary-color);

    transform: scale(1.02);

}



.file-upload-area.dragover {

    background: rgba(108, 92, 231, 0.2);

    border-color: var(--accent-color);

    transform: scale(1.05);

}



.file-info {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1rem;

    background: var(--dark-bg);

    border-radius: 10px;

    margin-top: 1rem;

    border: 2px solid var(--primary-color);

    animation: slideInRight 0.3s ease;

}



.file-info i {

    font-size: 2rem;

    color: var(--primary-color);

}



.file-info span {

    flex: 1;

    color: var(--text-primary);

    font-weight: 600;

}



.btn-remove-file {

    background: var(--gradient-2);

    border: none;

    padding: 0.5rem 1rem;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    color: white;

}



.btn-remove-file:hover {

    transform: scale(1.1);

    box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);

}



/* Admin Panel */

.admin-panel {

    min-height: 100vh;

    padding-top: 5rem;

}



.admin-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 2rem;

}



.admin-card {

    background: var(--card-bg);

    padding: 2rem;

    border-radius: 20px;

    border: 2px solid var(--primary-color);

    animation: fadeIn 0.6s ease;

}



.admin-card h3 {

    font-size: 1.8rem;

    margin-bottom: 1.5rem;

    color: var(--primary-color);

}



.game-form .form-group {

    margin-bottom: 1.5rem;

}



.game-form label {

    display: block;

    margin-bottom: 0.5rem;

    color: var(--text-secondary);

    font-weight: 600;

}



.game-form input,

.game-form select,

.game-form textarea {

    width: 100%;

    padding: 0.75rem;

    background: var(--dark-bg);

    border: 2px solid rgba(108, 92, 231, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 1rem;

    transition: all 0.3s ease;

}



.game-form input:focus,

.game-form select:focus,

.game-form textarea:focus {

    outline: none;

    border-color: var(--primary-color);

    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);

}



.admin-games-list {

    max-height: 600px;

    overflow-y: auto;

}



.admin-game-item {

    background: var(--dark-bg);

    padding: 1rem;

    border-radius: 10px;

    margin-bottom: 1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    animation: slideInRight 0.5s ease;

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



.admin-game-info h4 {

    color: var(--primary-color);

    margin-bottom: 0.5rem;

}



.admin-game-info p {

    color: var(--text-secondary);

    font-size: 0.9rem;

}



.admin-game-actions {

    display: flex;

    gap: 0.5rem;

}



.btn-danger {

    background: var(--gradient-2);

    color: white;

    padding: 0.5rem 1rem;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

}



.btn-danger:hover {

    transform: scale(1.05);

    box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);

}



/* Modal */

.modal {

    display: none;

    position: fixed;

    z-index: 2000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    backdrop-filter: blur(5px);

    animation: fadeIn 0.3s ease;

}



.modal-content {

    background: var(--card-bg);

    margin: 5% auto;

    padding: 2rem;

    border-radius: 20px;

    width: 90%;

    max-width: 500px;

    position: relative;

    animation: slideInDown 0.4s ease;

    border: 2px solid var(--primary-color);

}



@keyframes slideInDown {

    from {

        opacity: 0;

        transform: translateY(-50px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.close {

    position: absolute;

    right: 1.5rem;

    top: 1.5rem;

    font-size: 2rem;

    font-weight: bold;

    color: var(--text-secondary);

    cursor: pointer;

    transition: all 0.3s ease;

}



.close:hover {

    color: var(--accent-color);

    transform: rotate(90deg);

}



.modal-content h2 {

    margin-bottom: 1.5rem;

    color: var(--primary-color);

}



.form-group {

    margin-bottom: 1.5rem;

}



.form-group label {

    display: block;

    margin-bottom: 0.5rem;

    color: var(--text-secondary);

    font-weight: 600;

}



.form-group input {

    width: 100%;

    padding: 0.75rem;

    background: var(--dark-bg);

    border: 2px solid rgba(108, 92, 231, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 1rem;

    transition: all 0.3s ease;

}



.form-group input:focus {

    outline: none;

    border-color: var(--primary-color);

    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);

}



.modal-footer {

    text-align: center;

    margin-top: 1rem;

    color: var(--text-secondary);

}



.modal-footer a {

    color: var(--primary-color);

    text-decoration: none;

    font-weight: bold;

    transition: color 0.3s ease;

}



.modal-footer a:hover {

    color: var(--accent-color);

}



/* Game Modal */

.game-modal .modal-content {

    max-width: 90%;

    max-height: 90vh;

    overflow-y: auto;

    overflow-x: hidden;

}



.game-modal-content.fullscreen {

    max-width: 100%;

    max-height: 100vh;

    width: 100vw;

    height: 100vh;

    margin: 0;

    border-radius: 0;

    animation: none;

}



.game-modal-content.fullscreen .game-container {

    height: calc(100vh - 250px);

}



.game-modal-content.fullscreen .game-container iframe {

    height: 100%;

}



.game-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 1rem;

}



.game-header h2 {

    margin: 0;

}



.game-controls {

    display: flex;

    gap: 0.5rem;

}



.game-control-btn {

    background: rgba(108, 92, 231, 0.2);

    border: 2px solid var(--primary-color);

    color: var(--primary-color);

    padding: 0.75rem 1rem;

    border-radius: 10px;

    cursor: pointer;

    font-size: 1.2rem;

    transition: all 0.3s ease;

}



.game-control-btn:hover {

    background: var(--primary-color);

    color: white;

    transform: scale(1.1);

}



.game-control-btn.active {

    background: var(--gradient-2);

    border-color: var(--accent-color);

    color: white;

}



.game-control-btn.active i {

    animation: heartBeat 1s ease infinite;

}



@keyframes heartBeat {

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

    25% { transform: scale(1.2); }

    50% { transform: scale(1); }

}



/* Rating Section */

.game-rating-section {

    background: rgba(108, 92, 231, 0.1);

    padding: 1rem;

    border-radius: 10px;

    margin-bottom: 1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

}



.rating-display {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.stars-display {

    display: flex;

    gap: 0.25rem;

}



.stars-display i {

    color: #ffd700;

    font-size: 1.5rem;

}



.stars-display i.far {

    color: var(--text-secondary);

}



#gameRatingText {

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--primary-color);

}



#gameRatingCount {

    color: var(--text-secondary);

}



.rating-input {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.stars-input {

    display: flex;

    gap: 0.25rem;

}



.stars-input i {

    color: var(--text-secondary);

    font-size: 1.5rem;

    cursor: pointer;

    transition: all 0.3s ease;

    padding: 0.5rem;

    margin: -0.5rem;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

}



.stars-input i:hover,

.stars-input i.hover {

    color: #ffd700;

    transform: scale(1.2);

}



.stars-input i.fas {

    color: #ffd700;

}



/* Better touch targets for mobile stars */

@media (max-width: 768px) {

    .stars-input i {

        font-size: 2rem;

        padding: 0.75rem;

        margin: -0.75rem;

    }

}



/* Leaderboard */

.game-leaderboard {

    background: rgba(108, 92, 231, 0.1);

    padding: 1.5rem;

    border-radius: 10px;

    margin-top: 1rem;

}



.game-leaderboard h3 {

    color: var(--primary-color);

    margin-bottom: 1rem;

    text-align: center;

}



.leaderboard-tabs {

    display: flex;

    gap: 0.5rem;

    margin-bottom: 1rem;

    justify-content: center;

}



.leaderboard-tab {

    padding: 0.5rem 1.5rem;

    background: var(--dark-bg);

    border: 2px solid transparent;

    color: var(--text-secondary);

    border-radius: 20px;

    cursor: pointer;

    transition: all 0.3s ease;

}



.leaderboard-tab:hover {

    border-color: var(--primary-color);

}



.leaderboard-tab.active {

    background: var(--gradient-1);

    color: white;

    border-color: transparent;

}



.leaderboard-content {

    max-height: 300px;

    overflow-y: auto;

    margin-bottom: 1rem;

}



.leaderboard-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0.75rem 1rem;

    background: var(--dark-bg);

    border-radius: 10px;

    margin-bottom: 0.5rem;

    animation: slideInLeft 0.5s ease;

}



.leaderboard-item.top3 {

    background: var(--gradient-1);

}



.leaderboard-rank {

    font-size: 1.5rem;

    font-weight: bold;

    margin-right: 1rem;

    min-width: 40px;

}



.leaderboard-item.top3 .leaderboard-rank {

    color: #ffd700;

}



.leaderboard-player {

    flex: 1;

    font-weight: 600;

}



.leaderboard-score {

    font-size: 1.2rem;

    font-weight: bold;

    color: var(--primary-color);

}



.leaderboard-item.top3 .leaderboard-score {

    color: #ffd700;

}



.submit-score-section {

    display: flex;

    gap: 1rem;

}



#playerScore {

    flex: 1;

    padding: 0.75rem;

    background: var(--dark-bg);

    border: 2px solid rgba(108, 92, 231, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 1rem;

}



#playerScore:focus {

    outline: none;

    border-color: var(--primary-color);

}



.leaderboard-empty {

    text-align: center;

    color: var(--text-secondary);

    padding: 2rem;

}



/* Comments Section */

.game-comments {

    background: rgba(108, 92, 231, 0.1);

    padding: 1.5rem;

    border-radius: 10px;

    margin-top: 1rem;

}



.game-comments h3 {

    color: var(--primary-color);

    margin-bottom: 1rem;

}



.comment-input-section {

    margin-bottom: 1.5rem;

}



#commentText {

    width: 100%;

    padding: 1rem;

    background: var(--dark-bg);

    border: 2px solid rgba(108, 92, 231, 0.3);

    border-radius: 10px;

    color: var(--text-primary);

    font-size: 1rem;

    resize: vertical;

    margin-bottom: 1rem;

}



#commentText:focus {

    outline: none;

    border-color: var(--primary-color);

}



.comments-content {

    max-height: 400px;

    overflow-y: auto;

    overflow-x: hidden;

    padding-right: 0.5rem;

}



.comment-item {

    background: var(--dark-bg);

    padding: 1rem;

    border-radius: 10px;

    margin-bottom: 1rem;

    animation: slideInLeft 0.5s ease;

}



.comment-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 0.5rem;

}



.comment-author {

    font-weight: bold;

    color: var(--primary-color);

}



.comment-date {

    color: var(--text-secondary);

    font-size: 0.85rem;

}



.comment-text {

    color: var(--text-primary);

    line-height: 1.6;

}



.comment-actions {

    margin-top: 0.5rem;

    display: flex;

    gap: 1rem;

}



.comment-delete-btn {

    background: transparent;

    border: none;

    color: var(--accent-color);

    cursor: pointer;

    font-size: 0.9rem;

    transition: all 0.3s ease;

}



.comment-delete-btn:hover {

    color: #ff4757;

    transform: scale(1.1);

}



.comments-empty {

    text-align: center;

    color: var(--text-secondary);

    padding: 2rem;

}



/* Report Section */

.game-report-section {

    text-align: center;

    margin-top: 1rem;

}



/* Admin Users List */

.admin-users-list,

.admin-reports-list {

    max-height: 600px;

    overflow-y: auto;

}



.admin-user-item,

.admin-report-item {

    background: var(--dark-bg);

    padding: 1rem;

    border-radius: 10px;

    margin-bottom: 1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

    animation: slideInRight 0.5s ease;

}



.admin-user-info,

.admin-report-info {

    flex: 1;

}



.admin-user-info h4,

.admin-report-info h4 {

    color: var(--primary-color);

    margin-bottom: 0.5rem;

}



.admin-user-info p,

.admin-report-info p {

    color: var(--text-secondary);

    font-size: 0.9rem;

    margin-bottom: 0.25rem;

}



.admin-badge {

    display: inline-block;

    padding: 0.25rem 0.75rem;

    background: var(--gradient-1);

    color: white;

    border-radius: 15px;

    font-size: 0.8rem;

    font-weight: bold;

    margin-left: 0.5rem;

}



.report-badge {

    display: inline-block;

    padding: 0.25rem 0.75rem;

    background: var(--gradient-2);

    color: white;

    border-radius: 15px;

    font-size: 0.8rem;

    font-weight: bold;

    margin-right: 0.5rem;

}



.admin-user-actions,

.admin-report-actions {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

}



.btn-promote {

    background: var(--gradient-3);

    color: white;

    padding: 0.5rem 1rem;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 0.9rem;

}



.btn-promote:hover {

    transform: scale(1.05);

    box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);

}



.btn-demote {

    background: var(--gradient-2);

    color: white;

    padding: 0.5rem 1rem;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 0.9rem;

}



.btn-demote:hover {

    transform: scale(1.05);

    box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);

}



.btn-resolve {

    background: var(--gradient-1);

    color: white;

    padding: 0.5rem 1rem;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 0.9rem;

}



.btn-resolve:hover {

    transform: scale(1.05);

    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);

}



.btn-edit {

    background: var(--gradient-3);

    color: white;

    padding: 0.5rem 1rem;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: all 0.3s ease;

    font-size: 0.9rem;

}



.btn-edit:hover {

    transform: scale(1.05);

    box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);

}



/* Dashboard Styles */

.dashboard {

    min-height: 100vh;

    padding-top: 5rem;

}



.section-subtitle {

    font-size: 2rem;

    color: var(--primary-color);

    margin: 3rem 0 2rem;

    text-align: center;

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}



.stat-card {

    background: var(--card-bg);

    padding: 2rem;

    border-radius: 20px;

    border: 2px solid var(--primary-color);

    text-align: center;

    transition: all 0.3s ease;

    animation: fadeInUp 0.6s ease;

}



.stat-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 10px 40px rgba(108, 92, 231, 0.3);

}



.stat-icon {

    font-size: 3rem;

    margin-bottom: 1rem;

    background: var(--gradient-1);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.stat-value {

    font-size: 3rem;

    font-weight: bold;

    color: var(--primary-color);

    margin-bottom: 0.5rem;

}



.stat-label {

    color: var(--text-secondary);

    font-size: 1.1rem;

}



.charts-container {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    gap: 2rem;

    margin-bottom: 3rem;

}



.chart-card {

    background: var(--card-bg);

    padding: 2rem;

    border-radius: 20px;

    border: 2px solid var(--primary-color);

}



.chart-card h4 {

    color: var(--primary-color);

    margin-bottom: 1.5rem;

    font-size: 1.5rem;

}



.chart {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.chart-bar {

    display: flex;

    align-items: center;

    gap: 1rem;

}



.chart-label {

    min-width: 100px;

    color: var(--text-primary);

    font-weight: 600;

}



.chart-bar-bg {

    flex: 1;

    height: 30px;

    background: var(--dark-bg);

    border-radius: 15px;

    overflow: hidden;

    position: relative;

}



.chart-bar-fill {

    height: 100%;

    background: var(--gradient-1);

    border-radius: 15px;

    transition: width 1s ease;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    padding-right: 10px;

    color: white;

    font-weight: bold;

}



.top-lists {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

}



.top-list-card {

    background: var(--card-bg);

    padding: 2rem;

    border-radius: 20px;

    border: 2px solid var(--primary-color);

}



.top-list-card h4 {

    color: var(--primary-color);

    margin-bottom: 1.5rem;

    font-size: 1.5rem;

}



.top-list-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 1rem;

    background: var(--dark-bg);

    border-radius: 10px;

    margin-bottom: 0.5rem;

    transition: all 0.3s ease;

}



.top-list-item:hover {

    transform: translateX(5px);

    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);

}



.top-list-rank {

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--primary-color);

    min-width: 40px;

}



.top-list-name {

    flex: 1;

    padding: 0 1rem;

    color: var(--text-primary);

}



.top-list-value {

    font-weight: bold;

    color: var(--secondary-color);

}



/* Theme Selector Styles */

.theme-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 1rem;

    margin-top: 1.5rem;

    max-height: 60vh;

    overflow-y: auto;

    padding-right: 0.5rem;

}



.theme-card {

    background: var(--card-bg);

    padding: 1rem;

    border-radius: 12px;

    cursor: pointer;

    transition: all 0.3s ease;

    border: 2px solid transparent;

    text-align: center;

}



.theme-card:hover {

    transform: translateY(-3px);

    border-color: var(--primary-color);

    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);

}



.theme-card.active {

    border-color: var(--primary-color);

    box-shadow: 0 0 15px rgba(108, 92, 231, 0.5);

}



.theme-preview {

    display: flex;

    gap: 0.3rem;

    margin-bottom: 0.75rem;

    height: 40px;

}



.theme-color {

    flex: 1;

    border-radius: 8px;

    transition: transform 0.3s ease;

}



.theme-card:hover .theme-color {

    transform: scale(1.05);

}



.theme-card h4 {

    color: var(--primary-color);

    margin-bottom: 0.25rem;

    font-size: 0.95rem;

}



.theme-card p {

    color: var(--text-secondary);

    font-size: 0.75rem;

}



.game-modal-content h2 {

    margin-bottom: 1rem;

}



.game-container {

    width: 100%;

    min-height: 500px;

    background: var(--dark-bg);

    border-radius: 10px;

    overflow: hidden;

    position: relative;

}



/* Fullscreen game container */

.game-container:fullscreen,

.game-container:-webkit-full-screen,

.game-container:-moz-full-screen,

.game-container:-ms-fullscreen {

    width: 100vw;

    height: 100vh;

    min-height: 100vh;

    border-radius: 0;

    background: #000;

    display: flex;

    align-items: center;

    justify-content: center;

}



.game-container:fullscreen iframe,

.game-container:-webkit-full-screen iframe,

.game-container:-moz-full-screen iframe,

.game-container:-ms-fullscreen iframe {

    width: 100%;

    height: 100%;

    border-radius: 0;

}



.game-container iframe {

    width: 100%;

    height: 600px;

    border: none;

    border-radius: 10px;

    background: white;

}



/* Scrollbar */

::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: var(--dark-bg);

}



::-webkit-scrollbar-thumb {

    background: var(--primary-color);

    border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

    background: var(--secondary-color);

}



/* Hamburger Menu */

.hamburger {

    display: none;

    flex-direction: column;

    cursor: pointer;

    padding: 0.5rem;

    z-index: 1001;

}



.hamburger span {

    width: 25px;

    height: 3px;

    background: var(--primary-color);

    margin: 3px 0;

    transition: all 0.3s ease;

    border-radius: 3px;

}



.hamburger.active span:nth-child(1) {

    transform: rotate(45deg) translate(5px, 5px);

}



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

    opacity: 0;

}



.hamburger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -6px);

}



/* Mobile Menu */

.nav-menu.mobile-active {

    display: flex !important;

}



/* Hide button text on smaller screens */

@media (max-width: 768px) {

    .btn-text {

        display: none;

    }

    

    .nav-buttons .btn {

        min-width: 44px;

    }

}



@media (max-width: 480px) {

    .nav-buttons #loginBtn,

    .nav-buttons #registerBtn {

        font-size: 0.7rem;

        padding: 0.5rem 0.8rem;

    }

}



/* Responsive */

@media (max-width: 1200px) {

    .hero {

        padding: 6rem 2rem 4rem;

    }

    

    .hero-title {

        font-size: 3.5rem;

    }

    

    .floating-game-card {

        width: 120px;

        height: 120px;

        font-size: 3rem;

    }

}



@media (max-width: 1024px) {

    .admin-content {

        grid-template-columns: 1fr;

    }

    

    .nav-container {

        padding: 0 1.5rem;

    }

    

    .nav-buttons {

        gap: 0.5rem;

    }

    

    .nav-buttons .btn {

        padding: 0.6rem 1.2rem;

        font-size: 0.85rem;

    }

    

    .hero-title {

        font-size: 3rem;

    }

    

    .section-title {

        font-size: 2.5rem;

    }

    

    .container {

        padding: 3rem 1.5rem;

    }

}



@media (max-width: 768px) {

    /* Navigation */

    .hamburger {

        display: flex;

    }

    

    .nav-menu {

        display: none;

        position: fixed;

        top: 70px;

        left: 0;

        width: 100%;

        background: rgba(26, 26, 46, 0.98);

        backdrop-filter: blur(10px);

        flex-direction: column;

        padding: 2rem;

        gap: 1rem;

        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

        animation: slideDown 0.3s ease;

    }

    

    .nav-menu li {

        width: 100%;

        text-align: center;

    }

    

    .nav-link {

        display: block;

        padding: 1rem;

        font-size: 1.1rem;

    }

    

    .nav-buttons {

        flex-wrap: wrap;

        justify-content: center;

    }

    

    .nav-buttons .btn {

        padding: 0.5rem 1rem;

        font-size: 0.8rem;

    }

    

    /* Hero Section */

    .hero {

        flex-direction: column;

        text-align: center;

        padding: 6rem 1.5rem 3rem;

        min-height: auto;

    }



    .hero-title {

        font-size: 2.5rem;

    }



    .hero-subtitle {

        font-size: 1.1rem;

    }

    

    .hero-buttons {

        justify-content: center;

    }

    

    .btn-large {

        padding: 0.9rem 1.5rem;

        font-size: 0.95rem;

    }



    .hero-image {

        margin-top: 2rem;

        height: 250px;

        width: 100%;

        position: relative;

    }

    

    .floating-game-card {

        width: 80px;

        height: 80px;

        font-size: 2rem;

    }

    

    .floating-game-card:nth-child(1) {

        top: 10%;

        left: 10%;

    }

    

    .floating-game-card:nth-child(2) {

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

    }

    

    .floating-game-card:nth-child(3) {

        top: 10%;

        right: 10%;

        left: auto;

    }

    

    /* Container and Sections */

    .container {

        padding: 2rem 1rem;

    }

    

    .section-title {

        font-size: 2rem;

        margin-bottom: 2rem;

    }



    /* Categories Grid */

    .categories-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

    }

    

    .category-card {

        padding: 1.5rem 1rem;

    }

    

    .category-icon {

        font-size: 2.5rem;

        margin-bottom: 0.75rem;

    }

    

    .category-card h3 {

        font-size: 1.1rem;

    }

    

    .category-card p {

        font-size: 0.85rem;

    }



    /* Games Grid */

    .games-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    /* Search and Filter */

    .search-bar {

        padding: 1rem;

    }

    

    .search-container {

        max-width: 100%;

    }

    

    .filter-bar {

        flex-wrap: wrap;

        gap: 0.5rem;

        padding: 1rem;

    }

    

    .filter-btn {

        padding: 0.5rem 1rem;

        font-size: 0.85rem;

    }

    

    /* Game Cards */

    .game-card-title {

        font-size: 1.3rem;

    }

    

    .game-card-description {

        font-size: 0.9rem;

    }

    

    /* Modal */

    .modal-content {

        width: 95%;

        margin: 10% auto;

        padding: 1.5rem;

    }

    

    .modal-content h2 {

        font-size: 1.5rem;

        margin-bottom: 1rem;

    }

    

    /* Game Modal */

    .game-modal .modal-content {

        padding: 1rem;

    }

    

    .game-modal-content {

        width: 100%;

        max-width: 100%;

        height: auto;

        max-height: 95vh;

        margin: 0;

        border-radius: 0;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

    }

    

    .game-header {

        flex-direction: column;

        gap: 1rem;

        align-items: flex-start;

    }

    

    .game-header h2 {

        font-size: 1.5rem;

    }

    

    .game-actions {

        width: 100%;

        justify-content: space-between;

        flex-wrap: wrap;

    }

    

    .game-actions button {

        min-width: 44px;

        min-height: 44px;

    }

    

    .game-container {

        height: 350px;

        min-height: 250px;

    }

    

    .game-container iframe {

        height: 350px;

    }

    

    .game-rating-section {

        flex-direction: column;

        gap: 1rem;

    }

    

    .rating-display {

        text-align: center;

    }

    

    .rating-input {

        flex-direction: column;

        gap: 0.5rem;

        text-align: center;

        align-items: center;

    }

    

    .stars-input {

        justify-content: center;

    }

    

    /* Comments */

    .comment-input-section textarea {

        font-size: 0.9rem;

    }

    

    .comment-item {

        padding: 1rem;

    }

    

    /* Admin Panel */

    .admin-card {

        padding: 1.5rem;

    }

    

    .admin-card h3 {

        font-size: 1.5rem;

    }

    

    .file-upload-area {

        padding: 2rem 1rem;

    }

    

    .admin-game-item {

        flex-direction: column;

        gap: 1rem;

        align-items: flex-start;

    }

    

    .admin-game-actions {

        width: 100%;

        justify-content: space-between;

    }

    

    /* Dashboard */

    .stats-grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    

    .charts-container {

        grid-template-columns: 1fr;

    }

    

    .top-lists {

        grid-template-columns: 1fr;

    }

    

    /* Theme Grid */

    .theme-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 1rem;

    }

    

    .theme-card h4 {

        font-size: 0.9rem;

    }

    

    .theme-card p {

        font-size: 0.75rem;

    }

    

    /* User Menu */

    .user-menu {

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .username {

        font-size: 0.85rem;

        padding: 0.4rem 0.8rem;

    }

    

    /* Leaderboard */

    .leaderboard-tabs {

        gap: 0.5rem;

    }

    

    .leaderboard-tab {

        padding: 0.5rem 1rem;

        font-size: 0.85rem;

    }

    

    .submit-score-section {

        flex-direction: column;

    }

    

    .submit-score-section input {

        width: 100%;

    }

}



@media (max-width: 480px) {

    /* Extra small devices */

    .logo span {

        font-size: 1.2rem;

    }

    

    .logo i {

        font-size: 1.5rem;

    }

    

    .hero-title {

        font-size: 2rem;

    }

    

    .hero-subtitle {

        font-size: 1rem;

    }

    

    .section-title {

        font-size: 1.75rem;

    }

    

    .categories-grid {

        grid-template-columns: 1fr;

    }

    

    /* Improve game modal on small screens */

    .game-modal .modal-content {

        padding: 0.5rem;

    }

    

    .game-header h2 {

        font-size: 1.25rem;

    }

    

    .game-container {

        height: 300px;

    }

    

    .game-container iframe {

        height: 300px;

    }

    

    /* Larger stars for better touch */

    .stars-input i {

        font-size: 2.5rem;

        padding: 1rem;

        margin: -1rem;

    }

    

    .stars-input {

        gap: 0.5rem;

    }

    

    .btn {

        padding: 0.6rem 1.2rem;

        font-size: 0.8rem;

    }

    

    .btn-large {

        padding: 0.75rem 1.25rem;

        font-size: 0.9rem;

    }

    

    .filter-bar {

        justify-content: center;

    }

    

    .filter-btn {

        flex: 1 1 auto;

        min-width: 100px;

    }

    

    .game-card-content {

        padding: 1rem;

    }

    

    .floating-game-card {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    

    .modal-content {

        padding: 1rem;

    }

    

    .form-group input,

    .form-group select,

    .form-group textarea {

        font-size: 0.9rem;

    }

    

    .theme-grid {

        grid-template-columns: 1fr;

    }

    

    .nav-buttons {

        width: 100%;

    }

    

    .nav-buttons .btn {

        flex: 1;

        padding: 0.5rem;

        font-size: 0.75rem;

    }

}