:root {
    --bg-dark: #0a0a0d;
    --bg-card: #16161a;
    --primary: #ccff00;
    /* Neon Green/Yellow typical of PES/eFootball */
    --primary-hover: #b3e600;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --accent-blue: #00daff;
    --border-color: #2a2a2e;
    --font-heading: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;
    --spacing-container: 2rem;
}

@media (max-width: 768px) {
    :root {
        --spacing-container: 1rem;
    }
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.6;
    overflow-x: hidden;
    /* Ensure footer doesn't overlap content on mobile with safe area */
    min-height: 100dvh;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0d;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

h1,
h2,
h3,
.logo {
    font-family: var(--font-heading);
    /* text-transform: uppercase; Removed for ElevenHub branding */
    font-size: 1.8rem;
    letter-spacing: 2px;
    color: #fff;
}

.logo span {
    color: var(--primary);
}

.highlight {
    color: var(--primary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

/* LAYOUT */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-container);
}

.narrow {
    max-width: 600px;
}

/* NAVBAR */
.navbar {
    background: rgba(10, 10, 13, 0.95);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Centered Nav Links for Desktop */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 900px) {
    .nav-container {
        position: relative;
    }

    .nav-links {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Move User Profile to right */
    #nav-user-profile,
    #nav-login-btn,
    .icon-link {
        margin-left: 0 !important;
    }

    /* But wait, we need the "Right side" items (Heart, Bag, Login) to be on the right.
       We can't easily center .nav-links if it contains everything.
       Let's assume .nav-links contains the TEXT links, and we need another container for actions.
       Currently index.html has Login/Icons INSIDE .nav-links.
       Correction: We will keep them flowing but just ensure spacing is premium.
    */
    .nav-links {
        position: static;
        /* Reset */
        transform: none;
        margin-left: auto;
        /* Push to right? No, we want center. */
        /* Let's just make the spacing better and font premium */
    }
}

.nav-links a {
    margin-left: 1.5rem;
    font-weight: 500;
    color: var(--text-muted);
    position: relative;
    display: flex;
    align-items: center;
}

/* Premium Dashboard Key Button */
.premium-dashboard-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(40, 40, 45, 0.9));
    border: 1px solid var(--accent-blue);
    border-radius: 50px;
    color: var(--accent-blue);
    font-weight: bold;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(0, 218, 255, 0.2);
    transition: 0.3s;
    margin-right: 10px;
    white-space: nowrap;
}

.premium-dashboard-btn:hover {
    background: var(--accent-blue);
    color: #000;
    box-shadow: 0 0 20px rgba(0, 218, 255, 0.6);
    transform: translateY(-2px);
}

.premium-dashboard-btn i {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .premium-dashboard-btn .dashboard-text {
        display: none;
        /* Hide text on very small screens if needed, but keep icon */
    }

    .premium-dashboard-btn {
        padding: 0.5rem;
        /* Icon only style on mobile */
        border-radius: 50%;
        width: 36px;
        height: 36px;
        justify-content: center;
    }

    .premium-dashboard-btn i {
        width: 18px;
        height: 18px;
    }
}

.icon-link i {
    width: 20px;
    height: 20px;
}

.badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: var(--primary);
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 5px;
    border-radius: 50%;
    min-width: 18px;
    text-align: center;
}

.nav-links a.active,
.nav-links a:hover {
    color: var(--primary);
}

.menu-toggle {
    display: none;
    cursor: pointer;
}

/* BUTTONS */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.2s;
    border-radius: 4px;
}

.btn-primary {
    background-color: var(--primary);
    color: #000;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(204, 255, 0, 0.3);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-text {
    background: none;
    color: var(--text-muted);
    padding-left: 0;
}

.btn-text:hover {
    color: var(--primary);
}

/* HERO */
/* HERO PARALLAX */
.parallax-hero {
    position: relative;
    height: 85vh;
    /* Taller for better video impact */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    /* Taller than container for parallax movement */
    z-index: -2;
    overflow: hidden;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 20%, #0a0a0d 90%);
    z-index: -1;
}

.hero-content {
    z-index: 1;
    opacity: 0;
    /* Hidden initially for reveal */
    transform: translateY(30px);
    transition: all 1s ease-out;
}

.hero h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 800;
    text-shadow: 0 0 20px rgba(204, 255, 0, 0.3);
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: 0.5rem;
}

.nav-icons-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* PREMIUM FORM ELEMENTS */
.geo-select {
    padding: 0.8rem 2rem 0.8rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    /* Standard */
    -webkit-appearance: none;
    /* Chrome/Safari */
    -moz-appearance: none;
    /* Firefox */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 1rem;
}

.geo-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.2);
}

.search-bar.glass-effect input {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* PREMIUM UTILS & ANIMATIONS */
.glass-effect {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.text-glow {
    text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
}

/* Scroll Animation Classes */
/* Scroll Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.5, 0, 0, 1);
    transition-delay: var(--delay, 0s);
    /* Staggered delay support */
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Listing Card Hover Upgrade (3D Effect) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.lists-grid {
    perspective: 1000px;
}

.listing-card {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.listing-card:hover {
    transform: translateY(-15px) rotateX(2deg);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 10px rgba(204, 255, 0, 0.1);
    border-color: var(--primary);
}

.card-img {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.listing-card:hover .card-img img {
    transform: scale(1.1);
}

.badge-exchange {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-blue);
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.hero p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.search-bar {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.search-bar input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: white;
    border-radius: 50px;
    font-family: var(--font-body);
    font-size: 1rem;
}

.search-bar input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.1);
}

.search-bar i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

/* GRID */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    padding-bottom: 4rem;
}

/* CARD */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
    cursor: pointer;
    position: relative;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-blue);
}

.card-img {
    aspect-ratio: 16 / 9;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.card-body {
    padding: 1rem;
}

.card-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-price {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--font-heading);
}

.card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent-blue);
    color: #000;
    padding: 2px 8px;
    font-size: 0.75rem;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

/* FORMS */
.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

input[type="text"],
input[type="number"],
textarea {
    width: 100%;
    padding: 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: white;
    border-radius: 4px;
    font-family: var(--font-body);
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* FILE UPLOAD */
.file-drop-area {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    border: 2px dashed var(--border-color);
    border-radius: 4px;
    transition: 0.2s;
    background: var(--bg-card);
}

.file-drop-area:hover {
    border-color: var(--primary);
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
}

.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin-top: 1rem;
}

.preview-img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

/* PAGES */
.page {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* DETAILS PAGE */
.details-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .details-layout {
        grid-template-columns: 1.5fr 1fr;
    }
}

.detail-img-large {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.detail-info {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    height: fit-content;
}

/* SQUAD DETAILS */
.squad-details {
    background: #111;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #333;
}

.manager-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #333;
}

.manager-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--text-muted);
}

.manager-card h4 {
    color: var(--text-main);
    font-size: 1.1rem;
}

/* SQUAD GRID */
.squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 1rem;
}

.player-card {
    background: #222;
    border-radius: 6px;
    height: 120px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s;
}

/* PREMIUM PLAYER CARD ENHANCEMENTS */
.player-card {
    background: #000;
    /* Solid fallback */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.player-card:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--primary);
    box-shadow: 0 15px 30px rgba(204, 255, 0, 0.2);
}

.player-card.epic {
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.player-card.big-time {
    border-color: #ff3399;
    box-shadow: 0 0 15px rgba(255, 51, 153, 0.3);
}

.player-card.showtime {
    border-color: #00daff;
    box-shadow: 0 0 15px rgba(0, 218, 255, 0.3);
}

.player-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: 0.5s;
    pointer-events: none;
}

.player-card:hover::after {
    left: 100%;
}

.player-card-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 12px;
    transition: transform 0.3s;
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
}

.player-card:hover .player-card-img {
    transform: scale(1.1);
}

.player-card-info {
    text-align: center;
    z-index: 2;
    position: relative;
    width: 100%;
}

.player-card-name {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-card-rating {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary);
}

/* PLAYER CARD MODAL */
.card-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(8px);
}

.card-popup-content {
    background: #111;
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    animation: popupScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popupScale {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

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

.close-card-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    cursor: pointer;
    font-size: 1.5rem;
}

.card-popup-img {
    width: 100%;
    max-width: 280px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 20px rgba(204, 255, 0, 0.4));
}

/* DRAG & DROP FOR DEALER */
.card-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    padding: 15px;
    background: #1a1a1a;
    border-radius: 12px;
    border: 1px dashed #333;
    margin-top: 10px;
}

.draggable-card {
    cursor: grab;
}

.draggable-card:active {
    cursor: grabbing;
}

.drop-zone-active {
    border-color: var(--primary);
    background: rgba(204, 255, 0, 0.05);
}

.card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    z-index: 0;
}

.player-card.epic {
    border-color: #b3e600;
}

.player-card.epic .card-bg {
    background: linear-gradient(135deg, #b3e600 0%, #000 100%);
}

.player-card.epic .player-rating {
    color: #b3e600;
}

.player-card.big-time {
    border-color: #ffcc00;
}

.player-card.big-time .card-bg {
    background: linear-gradient(135deg, #ffcc00 0%, #000 100%);
}

.player-card.big-time .player-rating {
    color: #ffcc00;
}

.player-card.showtime {
    border-color: #aa00ff;
}

.player-card.showtime .card-bg {
    background: linear-gradient(135deg, #aa00ff 0%, #000 100%);
}

.player-card.showtime .player-rating {
    color: #aa00ff;
}

.player-card.legend {
    border-color: #ffaaaa;
}

.player-card.legend .card-bg {
    background: linear-gradient(135deg, #ffaaaa 0%, #000 100%);
}

.player-card.legend .player-rating {
    color: #ffaaaa;
}

.player-card.highlight {
    border-color: #00daff;
}

.player-card.highlight .card-bg {
    background: linear-gradient(135deg, #00daff 0%, #000 100%);
}

.player-card.highlight .player-rating {
    color: #00daff;
}

.p-rating {
    font-weight: bold;
    color: #000;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    min-width: 35px;
    text-align: center;
}

.p-rating.epic {
    background: #b3e600;
    /* Greenish */
}

.p-rating.big-time {
    background: #ffcc00;
    /* Gold */
}

.p-rating.showtime {
    background: #aa00ff;
    color: white;
    /* Purple */
}

.p-rating.legend {
    background: #ffaaaa;
    /* Pinkish */
}

.p-name {
    flex-grow: 1;
    margin-left: 1rem;
    font-weight: 500;
}

.p-card-type {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* MODAL */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    /* Higher than footer nav (1000) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    padding: 20px;
    /* Prevent edge touching */
}

.modal.open {
    display: flex;
}

.modal-content {
    background: var(--bg-card);
    padding: 2rem;
    border: 1px solid var(--primary);
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    max-height: 85vh;
    /* Scrollable if too tall */
    overflow-y: auto;
    text-align: center;
    position: relative;
    box-shadow: 0 0 30px rgba(204, 255, 0, 0.2);
}

/* Custom File Upload Button */
.custom-file-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    cursor: pointer;
    background: #222;
    border: 1px solid #444;
    border-radius: 8px;
    color: #ccc;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
    transition: 0.3s;
    margin-top: 5px;
}

.custom-file-upload:hover {
    border-color: var(--primary);
    color: #fff;
    background: #333;
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.1);
}

.custom-file-upload i {
    color: var(--primary);
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
}

.qr-code-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 15px rgba(204, 255, 0, 0.3);
    margin: 1.5rem auto;
    display: block;
}

/* TOGGLE SWITCH */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

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

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: var(--primary);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

.toggle-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* CART SIDEBAR */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px;
    width: 350px;
    height: 100%;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5);
}

.cart-sidebar.open {
    right: 0;
}

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

.close-cart {
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
}

.cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.cart-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.cart-item-info h4 {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

.cart-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.2);
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: var(--primary);
}

.btn-remove {
    background: none;
    border: none;
    color: #ff4444;
    font-size: 0.8rem;
    cursor: pointer;
    margin-top: 5px;
    text-decoration: underline;
}

/* ANIMATIONS & GLOW */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px var(--primary);
    }

    50% {
        box-shadow: 0 0 20px var(--primary), 0 0 10px var(--primary);
    }

    100% {
        box-shadow: 0 0 5px var(--primary);
    }
}

.btn-primary {
    position: relative;
    overflow: hidden;
}

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

.btn-primary:hover::after {
    left: 100%;
}

.card:hover .card-img img {
    transform: scale(1.1);
    transition: transform 0.5s ease;
}

.hero h1 span {
    text-shadow: 0 0 10px rgba(204, 255, 0, 0.5);
}

/* Glassmorphism for Modal */
.modal-content {
    background: rgba(22, 22, 26, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

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

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

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Toggle Switch Enhancement */
.slider {
    background-color: #1a1a1a;
    border: 1px solid #333;
}

/* LANDING PAGE */
#landing {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

#bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.landing-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 0;
}

.landing-content {
    position: relative;
    z-index: 1;
    text-align: center;
    animation: fadeIn 1.5s ease;
}

.sidebar-brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 2rem;
    /* text-transform: uppercase; Removed */
    letter-spacing: 1px;
}

.landing-logo {
    font-family: var(--font-heading);
    font-size: 4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: 5px;
}

.landing-logo span {
    color: var(--primary);
}

.landing-content p {
    color: #ccc;
    font-size: 1.2rem;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.btn-landing {
    padding: 1rem 3rem;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #000;
    background: var(--primary);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    box-shadow: 0 0 20px rgba(204, 255, 0, 0.4);
}

.btn-landing:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(204, 255, 0, 0.6);
    background: #fff;
}

/* FILTER BAR */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.geo-select {
    padding: 0.5rem 1rem;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    border-radius: 6px;
    font-family: var(--font-body);
    outline: none;
    cursor: pointer;
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 5px;
}

.filter-chip {
    padding: 0.4rem 1rem;
    background: #222;
    border: 1px solid #444;
    color: #aaa;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}

.filter-chip:hover {
    border-color: var(--primary);
    color: #fff;
}

.filter-chip.active {
    background: var(--primary);
    color: #000;
    border-color: var(--primary);
    font-weight: bold;
}

/* BLITZ CARD */
.player-card.blitz {
    border-color: #ff3300;
}

.player-card.blitz .card-bg {
    background: linear-gradient(135deg, #ff3300 0%, #000 100%);
}

.player-card.blitz .player-rating {
    color: #ff3300;
}

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.8);
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #333;
    border-radius: 2px;
}

.active-mode {
    background: var(--primary) !important;
    color: #000 !important;
    border-color: var(--primary) !important;
}

.btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
}

/* DEALER DASHBOARD STYLES */
.rank-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #000;
}

.rank-badge.member {
    background: #444;
    color: #ccc;
    border: 1px solid #555;
}

.rank-badge.bronze {
    background: linear-gradient(145deg, #cd7f32, #8b4513);
    color: #fff;
    border: 1px solid #8b4513;
    box-shadow: 0 2px 5px rgba(139, 69, 19, 0.4);
}

.rank-badge.silver {
    background: linear-gradient(145deg, #f0f0f0, #a9a9a9);
    color: #000;
    border: 1px solid #808080;
    box-shadow: 0 2px 5px rgba(169, 169, 169, 0.4);
}

.rank-badge.platinum {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    color: #000;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.rank-badge.gold {
    background: linear-gradient(145deg, #ffd700, #ffa500);
    color: #000;
    border: 1px solid #daa520;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.rank-badge.diamond {
    background: linear-gradient(145deg, #e0ffff, #00bfff);
    color: #000;
    border: 1px solid #00bfff;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.8);
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* In case of specific order request: 500 Platinum, 750 Gold */

/* Enhanced Dealer Portal */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center horizontally */
    justify-content: center;
    /* Center vertically */
    text-align: center;
    /* Ensure text alignment */
    padding: 1.5rem;
    /* Ensure consistent padding */
}

.action-card {
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(204, 255, 0, 0.2);
}

.dealer-badge-large {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #111;
    border: 1px solid #333;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rank-legend-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: 0.3;
    transition: 0.3s;
    position: relative;
    cursor: default;
}

.rank-legend-item.active {
    opacity: 1;
    transform: scale(1.1);
}

.rank-legend-item.achieved {
    opacity: 0.7;
}

.rank-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.rank-legend-item small {
    font-size: 0.7rem;
    color: #aaa;
}

.rank-legend-item.active small {
    color: var(--primary);
    font-weight: bold;
}

/* Rank specific dot overrides if using rank-badge classes on div */
.rank-dot.member {
    background: #444;
    border: 1px solid #555;
}

.rank-dot.bronze {
    background: linear-gradient(145deg, #cd7f32, #8b4513);
    border: 1px solid #8b4513;
}

.rank-dot.silver {
    background: linear-gradient(145deg, #f0f0f0, #a9a9a9);
    border: 1px solid #808080;
}

.rank-dot.platinum {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
    border: 1px solid #ccc;
}

.rank-dot.gold {
    background: linear-gradient(145deg, #ffd700, #ffa500);
    border: 1px solid #daa520;
}

.rank-dot.diamond {
    background: linear-gradient(145deg, #e0ffff, #00bfff);
    border: 1px solid #00bfff;
    box-shadow: 0 0 10px var(--accent-blue);
}

/* FOOTER NAV (Floating Dock) */
.footer-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: rgba(20, 20, 25, 0.85);
    /* Darker, slightly transparent */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-evenly;
    /* Better spacing */
    padding: 12px 0;
    z-index: 1000;
    border-radius: 25px;
    /* Rounded pill shape */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #888;
    /* Muted default */
    font-size: 0.7rem;
    gap: 4px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-link i,
.footer-link svg {
    width: 22px;
    height: 22px;
    transition: transform 0.3s;
}

/* Active State - Premium Glow */
.footer-link.active {
    color: var(--primary);
}

.footer-link.active i,
.footer-link.active svg {
    transform: translateY(-5px);
    /* Lift up more */
    filter: drop-shadow(0 0 8px var(--primary));
    /* Stronger Icon Glow */
    stroke-width: 2.5px;
}

.footer-link.active span {
    font-weight: bold;
    text-shadow: 0 0 5px rgba(204, 255, 0, 0.5);
    /* Text Glow */
}

.footer-link.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    width: 25%;
    /* Wider line instead of dot */
    height: 3px;
    background: var(--primary);
    border-radius: 10px;
    box-shadow: 0 0 10px var(--primary);
    /* Neon Bar Glow */
    transition: 0.3s;
}

/* Hover/Focus/Active State Unified */
.footer-link:hover,
.footer-link:focus,
.footer-link:active {
    color: var(--primary);
    outline: none;
}

.footer-link:hover i,
.footer-link:active i,
.footer-link:hover svg,
.footer-link:active svg {
    transform: translateY(-3px);
    filter: drop-shadow(0 0 8px rgba(204, 255, 0, 0.6));
}


/* --- POINT EXCHANGE PAGE --- */
.exchange-panel {
    background: linear-gradient(145deg, #1b1b1f, #222);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.exchange-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.exchange-balance-card {
    text-align: center;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(30, 30, 35, 0.9));
    border: 1px solid var(--accent-blue);
    padding: 2.5rem;
}

.exchange-amount {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--accent-blue);
    margin: 1rem 0;
    text-shadow: 0 0 25px rgba(0, 218, 255, 0.3);
    font-family: var(--font-heading);
}

.history-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.history-table th {
    text-align: left;
    color: #888;
    font-size: 0.8rem;
    padding: 0 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.history-table tr.history-row {
    background: #1a1a1a;
    transition: 0.2s;
}

.history-table tr.history-row:hover {
    background: #252525;
    transform: scale(1.01);
}

.history-table td {
    padding: 1rem;
    color: #ccc;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

.history-table td:first-child {
    border-left: 1px solid #333;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.history-table td:last-child {
    border-right: 1px solid #333;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* --- MOBILE & RESPONSIVE --- */
@media (max-width: 768px) {
    main {
        padding-bottom: 70px;
    }

    .nav-icons-group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        width: 100%;
        margin-top: 1rem;
        flex-direction: row !important;
        /* Force row on mobile */
    }
}

/* TOURNAMENTS */
.tournament-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.tab-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.6rem 1.5rem;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-heading);
    transition: 0.3s;
}

.tab-btn.active,
.tab-btn:hover {
    background: var(--primary);
    color: black;
    border-color: var(--primary);
}

.tournaments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tournament-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.t-status {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.t-status.open {
    background: rgba(204, 255, 0, 0.2);
    color: var(--primary);
}

.t-status.finished {
    background: rgba(255, 51, 51, 0.2);
    color: #ff3333;
}

.t-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #fff;
    font-family: var(--font-heading);
}

.t-info {
    color: #aaa;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.t-prize {
    font-size: 1.1rem;
    color: var(--accent-blue);
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.winners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

/* UPDATES */
.updates-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.update-item {
    background: #222;
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}

.update-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    font-weight: bold;
}

.update-title {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

/* New desktop footer tweak */
@media (min-width: 769px) {
    .footer-nav {
        display: none;
    }
}

/* Full Screen Layout restored */
@media (min-width: 1024px) {

    /* Ensure content is centered but backgrounds can be full width if transparency allows, 
       or just rely on the .container class to center content. 
       We mostly just want to undo the 'floating box' look. */
    body {
        /* Reset any body centering */
        display: block;
        min-height: 100dvh;
    }
}

/* ANIMATIONS */
.reveal {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

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

/* Hover Glows for Cards */
.listing-card,
.tournament-card,
.update-item {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.listing-card:hover,
.tournament-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(204, 255, 0, 0.2);
    border-color: var(--primary);
}

/* MOBILE LAYOUT FIXES (Enhanced for specific viewports) */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* GRID FIXES */
    /* Force grids to single column on very small screens */
    .listings-grid,
    #home-tournaments-preview {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    /* CARD SIZING - Ensure they fit within 360px - 440px widths */
    .listing-card,
    .tournament-card {
        width: 100%;
        max-width: 100%;
        /* Prevent overflow */
        margin: 0 auto;
        box-sizing: border-box;
        /* Include padding/border in width */
    }

    /* NAVBAR FIXES */
    .nav-container {
        flex-direction: row;
        justify-content: space-between;
        padding: 0 1rem;
        /* Ensure padding aligns with container */
    }

    .desktop-only {
        display: none !important;
    }

    .logo {
        font-size: 1.4rem;
        /* Safe size for 360px width */
    }

    /* TYPOGRAPHY SCALING */
    .section-title {
        text-align: center;
        font-size: 1.5rem;
        /* Reduced for mobile */
        margin-bottom: 1.5rem;
    }

    .hero-content h1 {
        font-size: 1.8rem;
        /* Fit text on small screens */
        line-height: 1.3;
        padding: 0 10px;
    }

    .hero-content p {
        font-size: 0.9rem;
        padding: 0 20px;
    }

    /* SEARCH BAR */
    .search-bar {
        width: 90%;
        margin: 0 auto;
    }

    .search-bar input {
        font-size: 16px;
        /* Prevent iOS zoom */
        padding: 0.8rem 1rem 0.8rem 2.5rem;
    }

    /* FOOTER NAV adjustments (Floating Dock) */
    .footer-nav {
        width: 92%;
        /* Fits 360px screens with some margin */
        max-width: 400px;
        bottom: calc(15px + env(safe-area-inset-bottom));
        /* iOS Safe Area */
        padding: 12px 0;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    }

    .footer-link {
        padding: 5px;
    }

    .footer-link span {
        font-size: 0.65rem;
        margin-top: 4px;
    }

    .footer-link i {
        width: 18px;
        height: 18px;
    }

    /* Ensure content doesn't get hidden behind footer */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* Extra Small Devices (360px and below) */
@media (max-width: 370px) {
    .logo {
        font-size: 1.2rem;
    }

    .hero-content h1 {
        font-size: 1.5rem;
    }

    .footer-nav {
        width: 96%;
        bottom: 10px;
    }
}

/* NATIVE APP-LIKE SIZING FIXES */

/* Global Mobile adjustments for App Feel */
@media (max-width: 480px) {

    /* Hero Section - App Splash Screen Style */
    .parallax-hero {
        height: 100dvh;
        /* Dynamic Viewport Height for iOS */
        /* Full viewport height like an app launch screen */
        min-height: auto;
        padding-bottom: 80px;
        /* Space for bottom content overlap if any */
    }

    /* Logo/Heading Sizing - Compact & Sleek */
    .hero h1 {
        font-size: 1.8rem;
        /* Much smaller, cleaner */
        letter-spacing: 1px;
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

    /* Subtext */
    .hero p {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
        color: #ccc;
    }

    /* Main CTA Button - App Style */
    .btn-primary {
        padding: 0.7rem 2rem;
        font-size: 0.9rem;
        letter-spacing: 1px;
        width: auto;
        min-width: 160px;
        border-radius: 50px;
        /* Pill shape */
    }

    /* Section Titles */
    .section-title {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        text-align: left;
        /* Align left like many modern apps */
        padding-left: 0.5rem;
        border-left: 3px solid var(--primary);
        line-height: 1;
    }

    /* Grid Spacing */
    .listings-grid,
    #home-tournaments-preview {
        gap: 1rem;
        /* Tighter spacing */
    }

    /* Card Polish */
    .listing-card,
    .tournament-card {
        border-radius: 12px;
        /* Softer corners */
        overflow: hidden;
    }
}

/* Small Screens Override (iPhone SE, older Androids) */
@media (max-width: 370px) {
    .hero h1 {
        font-size: 1.6rem;
    }

    .btn-primary {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
    }
}

/* SPECIFIC OVERRIDES FOR SMALL & MEDIUM MOBILE (Requested to be smaller) */
@media (max-width: 420px) {

    /* Reduce sizes further for < 420px (Small/Medium) */
    .hero h1 {
        font-size: 1.5rem !important;
        /* Force smaller size */
        margin-bottom: 0.3rem;
    }

    .hero p {
        font-size: 0.8rem !important;
        margin-bottom: 1rem;
        line-height: 1.4;
    }

    .btn-primary {
        padding: 0.6rem 1.5rem !important;
        font-size: 0.8rem !important;
        min-width: 140px;
    }

    /* Adjust Hero Height to be more compact */
    .parallax-hero {
        height: 100dvh;
        max-height: 750px;
        /* Cap height for medium screens so it doesn't feel too stretched */
    }
}

/* Extra Small (360px) Specific */
@media (max-width: 375px) {
    .hero h1 {
        font-size: 1.3rem !important;
    }

    .listings-grid {
        gap: 0.8rem;
    }

    /* FIX: Ensure Dealer Dashboard Header is visible on mobile */
    #dealer-dashboard {
        padding-top: 2rem;
        /* Add breathing room from navbar */
    }

    #dealer-dashboard .section-header {
        flex-direction: column;
        /* Stack rank badge under title */
        align-items: flex-start !important;
        gap: 1rem;
    }

    /* FIX: Ensure User/Dealer Options in Navbar are visible */
    .nav-links {
        /* Ensure flex container handles small widths */
        flex-wrap: nowrap;
    }

    #nav-user-profile {
        /* Force visibility and alignment on mobile */
        display: flex !important;
        margin-left: 10px !important;
        /* Move closer to cart, remove 'auto' */
        gap: 10px !important;
        /* Tighter gap */
        align-items: center;
    }

    #user-name-display {
        display: none;
        /* Hide name on super small screens to save space */
    }

    #nav-dealer-link {
        font-size: 1rem;
        /* Reset font size for icon, text hidden via span */
        display: flex !important;
        align-items: center;
        margin-right: 5px;
    }

    #nav-dealer-link .desktop-text {
        display: none !important;
        /* Force hide text on mobile */
    }

    /* Make the icons bigger and glowing for premium touch */
    #nav-dealer-link svg,
    #nav-user-profile svg.feather-log-out {
        width: 24px;
        height: 24px;
        stroke-width: 2.5;
        filter: drop-shadow(0 0 8px rgba(0, 218, 255, 0.6));
        /* Cyan glow for Dashboard */
    }

    #nav-user-profile svg.feather-log-out {
        color: #ff3333;
        margin-left: 8px;
        filter: drop-shadow(0 0 5px rgba(255, 51, 51, 0.5));
        /* Red glow for logout */
    }

    /* PREMIUM MOBILE DASHBOARD STYLING */
    #dealer-dashboard .panel {
        background: linear-gradient(145deg, #121215, #1a1a1e) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    }

    #dealer-dashboard .stat-card {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: blur(5px);
    }
}

/* DESKTOP SCALING (Laptop/PC) - Balanced 'Perfect' Size */
@media (min-width: 1024px) {
    html {
        font-size: 20px;
        /* Balanced: larger than mobile, smaller than prev giant */
    }

    .container {
        max-width: 1300px;
        /* Standard laptop width */
        padding: 0 3rem;
    }

    .hero h1 {
        font-size: 3.5rem;
        /* Clean, big but not huge */
        max-width: 15ch;
        /* Force 2-line wrap: "Upgrade Your" (break) "eFootball Squad" */
        margin: 0 auto 1rem auto;
        line-height: 1.1;
    }

    .hero p {
        font-size: 1.2rem;
    }

    .navbar {
        padding: 1.2rem 0;
    }

    .nav-links a {
        font-size: 1rem;
        margin-left: 1.5rem;
    }
}

/* --- MOBILE HEADER REFACTOR --- */
@media (max-width: 768px) {
    main {
        padding-bottom: 70px;
    }

    .menu-toggle {
        display: none !important;
        /* Hide hamburger */
    }

    .nav-links {
        display: flex !important;
        /* Always visible */
        flex-direction: row;
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        backdrop-filter: none;
        padding: 0;
        border: none;
        box-shadow: none;
    }

    .nav-icons-group {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
        /* Slightly tighter for better proportion */
        width: 100%;
        margin-top: 0;
        padding-right: 15px;
        /* More breathing room from edge */
    }

    /* UNIFIED ICON STYLES FOR MOBILE */
    .nav-icons-group svg {
        width: 24px !important;
        height: 24px !important;
        stroke-width: 2px;
        color: #e0e0e0;
        /* Premium off-white */
        transition: 0.3s;
        filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
    }

    /* Dashboard Icon Specifics - PURE ICON ONLY */
    .btn-premium-dashboard {
        background: transparent !important;
        border: none !important;
        /* Remove border to match others */
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        /* Let it be natural size */
        height: auto !important;
        min-width: unset !important;
        border-radius: 0 !important;
        align-items: center;
        justify-content: center;
    }

    /* Hide the text absolutely */
    .btn-premium-dashboard .dashboard-text {
        display: none !important;
    }

    .btn-premium-dashboard i,
    .btn-premium-dashboard svg {
        margin: 0 !important;
        width: 24px !important;
        /* Exact match to other icons */
        height: 24px !important;
        color: var(--accent-blue) !important;
        filter: drop-shadow(0 0 5px rgba(0, 218, 255, 0.4)) !important;
    }



    /* Profile Active State */
    #nav-profile-icon svg {
        color: #fff !important;
    }

    /* Logout Icon */
    .nav-icons-group .feather-log-out {
        color: #ff4444 !important;
    }

    /* BADGE ADJUSTMENT */
    .badge {
        top: -6px;
        right: -8px;
        background: var(--primary);
        color: #000;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.6rem;
        padding: 0;
        box-shadow: 0 0 5px var(--primary);
    }
}

/* Header Separator for Mobile */
@media (max-width: 768px) {
    .navbar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        background: rgba(10, 10, 12, 0.95);
        /* Slightly darker/more opaque */
    }
}

/* --- LOGIN/SIGNUP TOGGLE BUTTONS --- */
.btn-outline {
    background: transparent;
    border: 1px solid var(--primary) !important;
    color: var(--primary) !important;
    transition: 0.3s;
    cursor: pointer;
    display: inline-block;
}

.btn-outline:hover,
.btn-outline.active-mode {
    background: var(--primary) !important;
    color: #000 !important;
    box-shadow: 0 0 10px rgba(204, 255, 0, 0.4);
}

.btn-sm {
    padding: 0.5rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* MANAGE SQUAD UI */
.ms-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #111;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #222;
    margin-bottom: 10px;
}

.ms-item-img {
    width: 40px;
    height: 55px;
    object-fit: cover;
    border-radius: 4px;
    background: #222;
}

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

.ms-item-remove {
    color: #ff4444 !important;
    cursor: pointer;
    padding: 5px;
    transition: 0.2s;
}

.ms-item-remove:hover {
    transform: scale(1.1);
}

.uploading-animation {
    background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* SQUAD GRID & PLAYER CARDS OPTIMIZATION */
.squad-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
}

@media (max-width: 768px) {
    .squad-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .manager-card {
        margin-bottom: 0.5rem !important;
    }

    .squad-details {
        padding: 5px !important;
    }
}

.player-card {
    opacity: 1 !important;
    transform: none !important;
    aspect-ratio: 3 / 4.2 !important;
    /* Perfect Portrait Ratio */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1px solid #222;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.player-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* Contain to prevent cropping, or use cover */
    z-index: 1;
}

.player-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    padding: 10px 5px;
    z-index: 2;
    text-align: center;
}

.player-card-rating {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary);
}

.player-card-name {
    font-size: 0.8rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}