/* DTTF_V2 modular stylesheet: dttf.css */

/* =========================================================
   DOWN TO THE FELT v2
   Core Site Styles

   Design source:
   DTTF mobile dashboard mockup
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {

    /* Brand */
    --dttf-green: #7bdc5c;
    --dttf-green-dark: #58bb40;
    --dttf-green-soft: #edf9e9;

    /* Dark UI */
    --navy: #102636;
    --navy-light: #18384b;
    --navy-dark: #0b1c28;

    /* Page */
    --page-bg: #eef2f4;
    --surface: #ffffff;
    --surface-alt: #f4f7f8;
    --surface-hover: #edf2f4;

    /* Text */
    --text: #142333;
    --text-muted: #687681;
    --text-light: #ffffff;

    /* Utility */
    --border: #dce3e7;
    --border-dark: #cbd5da;
    --link: #075eb8;
    --danger: #ed304b;
    --success: #24a33b;

    /* Layout */
    --max-width: 1200px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    /* Shadows */
    --shadow-card:
        0 2px 8px rgba(16, 38, 54, 0.06);

    --shadow-raised:
        0 4px 16px rgba(16, 38, 54, 0.10);
}


/* =========================================================
   2. RESET / BASE
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    margin: 0;

    background: var(--page-bg);
    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}


/* =========================================================
   3. SITE LAYOUT
   ========================================================= */

.site-wrapper {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;

    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;
    padding: 16px 14px 40px;
}


/* =========================================================
   4. HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        linear-gradient(
            135deg,
            var(--navy-dark),
            var(--navy)
        );

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}

.header-inner {
    width: 100%;
    max-width: var(--max-width);

    min-height: 72px;

    margin: 0 auto;
    padding: 9px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* =========================================================
   5. LOGO
   ========================================================= */

.site-logo {
    display: block;
    flex-shrink: 0;
}

.site-logo img {
    width: auto;
    height: 58px;
    max-width: 230px;
    object-fit: contain;
}


/* =========================================================
   6. NAVIGATION
   ========================================================= */

.main-nav {
    display: flex;
    align-items: center;
}

.nav-toggle {
    width: 46px;
    height: 46px;

    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    background: transparent;

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

    border-radius: var(--radius-md);

    cursor: pointer;
}

.nav-toggle span {
    width: 24px;
    height: 2px;

    background: #ffffff;
    border-radius: 2px;
}

.nav-menu {
    display: none;
}

.nav-menu.is-open {
    position: absolute;

    top: 72px;
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;

    padding: 10px 14px 16px;

    background: var(--navy);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);

    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.18);
}

.nav-menu a {
    padding: 13px 12px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 0.94rem;
    font-weight: 600;

    border-radius: var(--radius-sm);
}

.nav-menu a:hover {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.08);
}

.nav-account {
    margin-top: 6px;

    color: var(--navy) !important;
    background: var(--dttf-green);
}

.nav-account:hover {
    background:
        var(--dttf-green-dark) !important;
}



/* =========================================================
   6A. PRIMARY NAVIGATION ICONS
   CSS masks keep icons compact and inherit nav color reliably.
   ========================================================= */

.nav-primary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-icon {
    display: block;
    width: 21px;
    height: 21px;
    min-width: 21px;
    min-height: 21px;
    max-width: 21px;
    max-height: 21px;
    flex: 0 0 21px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* House */
.nav-icon-home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 11.5 12 4l9 7.5M5.5 10.5V20h5v-5.5h3V20h5v-9.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 11.5 12 4l9 7.5M5.5 10.5V20h5v-5.5h3V20h5v-9.5'/%3E%3C/svg%3E");
}

/* Overlapping playing cards */
.nav-icon-tournaments {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='5.2' width='11.2' height='14.2' rx='1.7' transform='rotate(-7 9.4 12.3)'/%3E%3Crect x='8.4' y='3.6' width='11.2' height='14.2' rx='1.7' transform='rotate(7 14 10.7)'/%3E%3Cpath d='M14.4 7.2c-.8 1.2-2.1 1.9-2.1 3 0 .8.6 1.4 1.4 1.4.4 0 .8-.2 1.1-.5-.1.8-.4 1.4-.8 1.9h2c-.4-.5-.7-1.1-.8-1.9.3.3.7.5 1.1.5.8 0 1.4-.6 1.4-1.4 0-1.1-1.3-1.8-2.1-3'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='5.2' width='11.2' height='14.2' rx='1.7' transform='rotate(-7 9.4 12.3)'/%3E%3Crect x='8.4' y='3.6' width='11.2' height='14.2' rx='1.7' transform='rotate(7 14 10.7)'/%3E%3Cpath d='M14.4 7.2c-.8 1.2-2.1 1.9-2.1 3 0 .8.6 1.4 1.4 1.4.4 0 .8-.2 1.1-.5-.1.8-.4 1.4-.8 1.9h2c-.4-.5-.7-1.1-.8-1.9.3.3.7.5 1.1.5.8 0 1.4-.6 1.4-1.4 0-1.1-1.3-1.8-2.1-3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Podium */
.nav-icon-standings {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M4 20v-4.5h5V20M9.5 20V9.5h5V20M15 20v-7h5V20M12 4.5v5M11 6.5h2'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20h18M4 20v-4.5h5V20M9.5 20V9.5h5V20M15 20v-7h5V20M12 4.5v5M11 6.5h2'/%3E%3C/g%3E%3C/svg%3E");
}

/* Location pin */
.nav-icon-venues {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* Players */
.nav-icon-players {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3.5 20v-1.5A4.5 4.5 0 0 1 8 14h2a4.5 4.5 0 0 1 4.5 4.5V20M14.5 15.2c.7-.5 1.5-.7 2.5-.7h.5A3.5 3.5 0 0 1 21 18v2'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M3.5 20v-1.5A4.5 4.5 0 0 1 8 14h2a4.5 4.5 0 0 1 4.5 4.5V20M14.5 15.2c.7-.5 1.5-.7 2.5-.7h.5A3.5 3.5 0 0 1 21 18v2'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-primary.is-active {
    color: var(--dttf-green);
}

@media (max-width: 799px) {
    .nav-primary.is-active {
        background: rgba(123, 220, 92, 0.08);
    }
}

/* =========================================================
   7. SHARED BUTTONS
   ========================================================= */

.button {
    min-height: 44px;

    padding: 11px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid transparent;

    border-radius: var(--radius-md);

    font-size: 0.9rem;
    font-weight: 750;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button-primary {
    color: var(--navy);

    background:
        var(--dttf-green);
}

.button-primary:hover {
    background:
        var(--dttf-green-dark);
}

.button-secondary {
    color: var(--text);

    background:
        var(--surface);

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

.button-secondary:hover {
    background:
        var(--surface-alt);
}


/* =========================================================
   8. SHARED CARDS / PANELS
   ========================================================= */

.panel {
    background: var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-card);
}

.home-section {
    margin-top: 16px;
    padding: 18px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-card);
}


/* =========================================================
   9. SECTION HEADERS
   ========================================================= */

.section-heading {
    margin-bottom: 14px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;
}

.section-heading h2 {
    margin: 0;

    color: var(--text);

    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;

    text-transform: uppercase;
}

.section-eyebrow {
    margin-bottom: 3px;

    color: var(--text-muted);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-link {
    flex-shrink: 0;

    color: var(--link);

    font-size: 0.78rem;
    font-weight: 650;
}

.section-link:hover {
    text-decoration: underline;
}
.section-note {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
}


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

   14. EMPTY STATES
   ========================================================= */

.empty-state {
    padding: 24px;

    color:
        var(--text-muted);

    background:
        var(--surface-alt);

    border:
        1px dashed var(--border-dark);

    border-radius:
        var(--radius-md);

    text-align: center;

    font-size: 0.88rem;
}


/* =========================================================
   15. STATUS INDICATORS
   For qualification / venue race components later
   ========================================================= */

.status-dot {
    width: 12px;
    height: 12px;

    display: inline-block;

    border-radius: 50%;
}

.status-dot-success {
    background:
        var(--success);
}

.status-dot-danger {
    background:
        var(--danger);
}

.status-dot-neutral {
    background:
        var(--text-muted);
}


/* =========================================================
   16. DATA TABLE FOUNDATION
   Matches dashboard mockup
   ========================================================= */

.data-table-wrapper {
    width: 100%;

    overflow-x: auto;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-md);
}

.data-table {
    width: 100%;

    border-collapse:
        collapse;

    background:
        var(--surface);
}

.data-table th {
    padding: 10px 12px;

    color: #ffffff;

    background:
        var(--navy);

    font-size: 0.72rem;
    font-weight: 750;

    text-align: left;
    text-transform: uppercase;
}

.data-table td {
    padding: 10px 12px;

    color:
        var(--text);

    border-bottom:
        1px solid var(--border);

    font-size: 0.84rem;
}

.data-table tr:last-child td {
    border-bottom: 0;
}

.data-table tbody tr:nth-child(even) {
    background:
        var(--surface-alt);
}


/* =========================================================
   17. FOOTER
   ========================================================= */

.site-footer {
    margin-top: 24px;

    color:
        rgba(255, 255, 255, 0.76);

    background:
        var(--navy);
}

.footer-inner {
    width: 100%;
    max-width: var(--max-width);

    margin: 0 auto;
    padding: 28px 18px;

    text-align: center;
}

.footer-brand {
    color: #ffffff;

    font-size: 1rem;
    font-weight: 750;
}

.footer-tagline,
.footer-copyright {
    margin-top: 4px;

    color:
        rgba(255, 255, 255, 0.58);

    font-size: 0.78rem;
}


/* =========================================================
   18. TABLET / DESKTOP
   ========================================================= */

@media (min-width: 700px) {

    .site-main {
        padding:
            20px 20px 52px;
    }

    .header-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .home-hero {
        padding:
            38px 32px;
    }

    .home-section {
        padding: 20px;
    }

    .game-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .road-to-54 {
        padding: 28px;

        gap: 30px;
    }

    .leader-grid {
        gap: 14px;
    }

    .leader-card {
        padding: 18px;
    }
}


/* =========================================================
   19. DESKTOP NAVIGATION
   ========================================================= */

@media (min-width: 800px) {

    .header-inner {
        min-height: 78px;
    }

    .site-logo img {
        width: auto;
        height: 64px;
        max-width: 320px;
        }

    .nav-toggle {
        display: none;
    }

    .nav-menu {
        display: flex;
        align-items: center;

        gap: 3px;
    }

    .nav-menu a {
        padding: 10px 13px;
    }

    .nav-menu .nav-primary {
        min-width: 70px;
        height: 48px;
        padding: 3px 9px 4px;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        border-radius: 7px 7px 0 0;
        font-size: 0.74rem;
        line-height: 1;
    }

    .nav-menu .nav-primary .nav-icon {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        max-width: 20px;
        max-height: 20px;
        flex-basis: 20px;
    }

    .nav-menu .nav-primary:hover,
    .nav-menu .nav-primary.is-active {
        color: var(--dttf-green);
        background: rgba(255, 255, 255, 0.04);
    }

    .nav-menu .nav-primary.is-active::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 0;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: var(--dttf-green);
    }

    .nav-account {
        margin-top: 0;
        margin-left: 8px;
    }
}


/* =========================================================
   20. LARGE DESKTOP
   ========================================================= */

@media (min-width: 1000px) {

    .site-main {
        padding-top: 24px;
    }

    .game-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}
/* =========================================================
   NAVIGATION - ACCOUNT / LOGOUT
   Compact transparent power control beside the account button.
   ========================================================= */

.nav-logout-form {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.nav-logout,
.nav-logout-button {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.nav-logout:hover,
.nav-logout:focus-visible,
.nav-logout-button:hover,
.nav-logout-button:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

@media (min-width: 800px) {
    .nav-logout-form {
        margin-left: 2px;
    }
}


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

/* Disabled navigation items */
.nav-menu a.nav-disabled,
.nav-menu a.nav-disabled:visited {
    color: rgba(255, 255, 255, 0.55) !important;
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.nav-menu a.nav-disabled:hover,
.nav-menu a.nav-disabled:focus {
    color: rgba(255, 255, 255, 0.55) !important;
    background: transparent;
}