/* ====================================================================== */
/* 2Fast Racing — Mobile Stylesheet                                       */
/* Applies ONLY below 768px                                               */
/* ====================================================================== */

body, html {
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 0% 0%, #1c1d25 0, transparent 45%),
        radial-gradient(circle at 100% 0%, #190812 0, transparent 40%),
        radial-gradient(circle at 50% 100%, #090b12 0, #02030a 55%, #000 100%) !important;
    color: #f1f5f9 !important;
}

/* ====================================================================== */
/* SIDEBAR (Mobile Drawer)                                                */
/* ====================================================================== */

#sidebar {
    position: fixed !important;
    top: 0;
    left: -260px;                 /* hidden off-screen */
    width: 260px !important;
    height: 100vh;
    z-index: 9999;
    background: rgba(7, 10, 20, 0.97) !important;
    border-right: 1px solid rgba(237, 25, 65, 0.25);
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 14px 0 28px rgba(0, 0, 0, 0.82);
    transition: left 0.25s ease-out;
    padding: 1.3rem 1rem !important;
    overflow-y: auto !important;
}

#sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.62) !important;
    backdrop-filter: blur(4px);
    z-index: 9998;
}

/* Sidebar items */
#server-list .server {
    padding: 0.75rem 0.9rem !important;
    font-size: 0.9rem !important;
    border-radius: 0.7rem !important;
}

/* ====================================================================== */
/* PAGE TYPOGRAPHY                                                        */
/* ====================================================================== */

.page-title {
    font-size: 1.65rem !important;
    line-height: 1.2;
}

.title-accent {
    font-size: 0.75rem !important;
    letter-spacing: 0.14em !important;
}

.text-slate-400 {
    font-size: 0.85rem !important;
}

/* ====================================================================== */
/* SEARCH BAR                                                             */
/* ====================================================================== */

.search-input {
    width: 100%;
    padding: 0.9rem 1rem !important;
    background: #0f0f17 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(237, 25, 65, 0.35) !important;
    color: #fff !important;
    font-size: 0.9rem !important;
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;
}

.search-input::placeholder {
    color: #71717a !important;
}

/* Search result cards */
#search-results .card {
    padding: 0.85rem !important;
}

/* ====================================================================== */
/* CARDS                                                                  */
/* ====================================================================== */

.card {
    padding: 0.9rem !important;
    margin-bottom: 0.85rem !important;
    border-radius: 0.85rem !important;
}

/* rating badges inside cards */
.card svg {
    transform: scale(0.75) !important;
}

/* ====================================================================== */
/* TRACK GRID                                                             */
/* ====================================================================== */

.track-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
}

.track-grid .card {
    padding: 1rem !important;
}

/* ====================================================================== */
/* TABLES (Track Leaderboards)                                            */
/* ====================================================================== */

table th,
table td {
    padding: 0.75rem 0.4rem !important;
    font-size: 0.85rem !important;
}

table th {
    font-size: 0.7rem !important;
    letter-spacing: 0.2em !important;
}

/* Make table scrollable */
table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

/* ====================================================================== */
/* PLAYER PROFILE PAGE FIXES                                              */
/* ====================================================================== */

#rating-badge svg {
    transform: scale(0.8) !important;
}

/* stat bars */
.statbar-container {
    padding: 0.55rem 0.75rem !important;
}

.statbar-label {
    font-size: 0.7rem !important;
}

/* ====================================================================== */
/* BUTTONS                                                                */
/* ====================================================================== */

button,
.btn-accent,
a.btn-accent {
    -webkit-appearance: none !important;
       -moz-appearance: none !important;
            appearance: none !important;

    padding: 0.7rem 1.3rem !important;
    font-size: 0.75rem !important;
    border-radius: 999px !important;
}

/* mobile menu button */
#sidebar-toggle {
    background: #111827 !important;
    border-radius: 99px !important;
    padding: 0.6rem 1rem !important;
}

/* ====================================================================== */
/* HOME PAGE SPACING                                                      */
/* ====================================================================== */

section {
    margin-bottom: 1.8rem !important;
}

/* ====================================================================== */
/* GENERAL MOBILE POLISH                                                  */
/* ====================================================================== */

img, svg {
    max-width: 100%;
    height: auto;
}

/* Prevent Safari tap highlights */
* {
    -webkit-tap-highlight-color: transparent !important;
}

@media (max-width: 768px) {

    #sidebar {
        position: fixed !important;
        left: -260px !important;   /* closed state */
        top: 0;
        width: 260px !important;
        height: 100vh !important;
        background: rgba(3, 7, 18, 0.97);
        backdrop-filter: blur(20px);
        z-index: 9999;
        transition: left 0.25s ease-out !important;
    }

    #sidebar.open {
        left: 0 !important;        /* opened state */
    }

    #sidebar-backdrop {
        background: rgba(0,0,0,0.6) !important;
        backdrop-filter: blur(2px);
        z-index: 9998 !important;
    }
}