:root {
    --green-bright: #2db83e;
    --green-mid: #259e34;
    --green-dark: #1a7a27;
    --green-deep: #0f5219;
    --black: #0d0d0d;
    --black-mid: #1a1a1a;
    --black-light: #2a2a2a;
    --orange: #ff6b00;
    --orange-dark: #cc5500;
    --magenta: #e91e8c;
    --magenta-dark: #a01460;
    --red: #e5383b;
    --electric: #4361ee;
    --gold: #ffd60a;
    --chalk: #ffffff;
    --chalk-muted: rgba(255,255,255,.6);
    --border: rgba(0,0,0,.25);
    --border-light: rgba(255,255,255,.15);
}

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

body {
    background-color: var(--green-bright);
    color: var(--chalk);
    min-height: 100vh;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ── Utility ────────────────────────────────────────────────── */
.bg-pitch {
    background-color: var(--green-bright) !important;
}

.bg-pitch-mid {
    background-color: var(--black-mid) !important;
}

.text-chalk {
    color: var(--chalk) !important;
}

.text-muted {
    color: rgba(0,0,0,.6) !important;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar {
    background-color: var(--black) !important;
    border-bottom: 3px solid var(--green-bright) !important;
    min-height: 70px;
}

.nav-link {
    color: var(--chalk) !important;
}

    .nav-link:hover {
        color: var(--orange) !important;
    }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
    background-color: var(--black-mid);
    border: 1px solid var(--black-light);
    color: var(--chalk);
    border-radius: 12px;
}

.card-body {
    color: var(--chalk);
}

.card .text-muted,
.card p.text-muted,
.card span.text-muted {
    color: rgba(255,255,255,.55) !important;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-danger {
    background-color: #3d0a0b;
    border: 1px solid var(--red);
    color: #fff;
}

.alert-success {
    background-color: #0a3d14;
    border: 1px solid var(--green-bright);
    color: #fff;
}

.alert-info {
    background-color: #0d1a3d;
    border: 1px solid var(--electric);
    color: #fff;
}

.alert-warning {
    background-color: #1a1a1a;
    border: 1px solid var(--orange);
    color: #fff;
}

.alert-secondary {
    background-color: #1a1a1a;
    border: 1px solid var(--border-light);
    color: rgba(255,255,255,.6);
}

/* ── Badges ─────────────────────────────────────────────────── */
.badge {
    font-weight: 700;
    letter-spacing: .03em;
    font-size: .7rem;
    padding: .35em .65em;
}

    .badge.bg-warning, .bg-warning {
        background-color: var(--orange) !important;
        color: #fff !important;
    }

    .badge.bg-success, .bg-success {
        background-color: var(--green-dark) !important;
        color: #fff !important;
    }

    .badge.bg-primary, .bg-primary {
        background-color: var(--electric) !important;
        color: #fff !important;
    }

    .badge.bg-secondary, .bg-secondary {
        background-color: var(--black-light) !important;
        color: rgba(255,255,255,.6) !important;
    }

.bg-purple {
    background-color: #6a0dad !important;
    color: #fff !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-warning,
.btn-warning:link,
.btn-warning:visited {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    color: #fff !important;
    font-weight: 700;
    transition: background-color .15s !important;
}

    .btn-warning:hover,
    .btn-warning:active {
        background-color: var(--orange-dark) !important;
        border-color: var(--orange-dark) !important;
        color: #fff !important;
    }

.btn-outline-warning,
.btn-outline-warning:link,
.btn-outline-warning:visited {
    border-color: var(--orange) !important;
    color: var(--orange) !important;
    font-weight: 600;
    transition: background-color .15s !important;
}

    .btn-outline-warning:hover,
    .btn-outline-warning:active {
        background-color: var(--orange) !important;
        border-color: var(--orange) !important;
        color: #fff !important;
    }

.btn-outline-light,
.btn-outline-light:link,
.btn-outline-light:visited {
    border-color: rgba(255,255,255,.4) !important;
    color: var(--chalk) !important;
    transition: background-color .15s !important;
}

    .btn-outline-light:hover,
    .btn-outline-light:active {
        background-color: rgba(255,255,255,.15) !important;
        border-color: var(--chalk) !important;
        color: var(--chalk) !important;
    }

.btn-outline-danger {
    border-color: var(--red) !important;
    color: var(--red) !important;
    transition: background-color .15s !important;
}

    .btn-outline-danger:hover,
    .btn-outline-danger:active {
        background-color: var(--red) !important;
        color: #fff !important;
    }

/* ── Get card button ────────────────────────────────────────── */
.btn-get-card {
    background-color: var(--orange) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    width: 100%;
    transition: background-color .15s !important;
}

    .btn-get-card:hover,
    .btn-get-card:active {
        background-color: var(--orange-dark) !important;
        color: #fff !important;
    }

/* ── Reserved button ────────────────────────────────────────── */
.btn-reserved {
    background-color: var(--green-dark) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700;
    width: 100%;
    transition: background-color .15s !important;
}

    .btn-reserved:hover,
    .btn-reserved:active {
        background-color: var(--green-deep) !important;
        color: #fff !important;
    }

/* ── League filter chips ────────────────────────────────────── */
.league-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

    .league-chips::-webkit-scrollbar {
        display: none;
    }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 99px;
    border: 2px solid var(--border-light);
    background-color: var(--black-mid);
    color: var(--chalk);
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color .15s, border-color .15s;
}

    .chip img {
        height: 28px;
        width: 28px;
        object-fit: contain;
    }

    .chip:hover {
        border-color: var(--orange);
        background-color: var(--black-light);
    }

    .chip.active {
        background-color: var(--orange);
        border-color: var(--orange);
        color: #fff;
    }

/* ── Bingo wrapper ──────────────────────────────────────────── */
.bingo-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 1rem;
    padding: 0 8px;
    overflow: visible;
}

/* ── Bingo grid ─────────────────────────────────────────────── */
.bingo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
    overflow: visible;
}

/* ── Square ─────────────────────────────────────────────────── */
.square {
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 4px;
    border-radius: 10px;
    border: 2px solid var(--green-dark);
    background-color: var(--black-mid);
    color: var(--chalk);
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: calc((100vw - 40px) / 4);
    max-height: calc((100vw - 40px) / 4);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color .15s, background-color .15s;
    -webkit-tap-highlight-color: transparent;
    clip-path: none;
}

    .square:hover:not([disabled]) {
        border-color: var(--orange);
        background-color: var(--black-light);
    }

    .square:active:not([disabled]) {
        transform: scale(.93);
    }

    .square[disabled] {
        cursor: default;
    }

/* ── Square text ────────────────────────────────────────────── */
.player-name {
    display: block;
    font-size: clamp(.75rem, 3.5vw, 1.1rem);
    font-weight: 700;
    text-align: center;
    color: var(--chalk);
    line-height: 1.2;
    word-break: break-word;
    position: relative;
    z-index: 1;
    transition: opacity .15s;
}

.player-meta,
.player-pos {
    display: block;
    font-size: clamp(.45rem, 1.6vw, .6rem);
    color: var(--chalk-muted);
    text-align: center;
    position: relative;
    z-index: 1;
}

/* ── Daubed — tick ──────────────────────────────────────────── */
.square-daubed {
    border-color: var(--green-bright);
    background-color: #0a1a0a;
}

    .square-daubed .player-name,
    .square-daubed .player-meta,
    .square-daubed .player-pos {
        opacity: 0.35;
    }

    .square-daubed::before {
        content: '';
        position: absolute;
        inset: -5%;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 0 28 24'%3E%3Cpath d='M2 13 L9 20 L22 4' fill='none' stroke='%23ffffff' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 13 L9 20 L22 4' fill='none' stroke='%232db83e' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 60% auto;
        z-index: 2;
    }

    .square-daubed::after {
        display: none;
    }

/* ── Verified ───────────────────────────────────────────────── */
.square-verified {
    background-color: var(--magenta-dark);
    border: 2px solid var(--magenta);
    color: #fff;
}

    .square-verified .player-name {
        color: #fff;
        font-weight: 800;
    }

    .square-verified .player-meta,
    .square-verified .player-pos {
        color: rgba(255,255,255,.75);
    }

/* ── Unverified ─────────────────────────────────────────────── */
.square-unverified {
    opacity: .28;
}

/* ── Wrong daub ─────────────────────────────────────────────── */
.square-wrong {
    background-color: #1a1a3a;
    border-color: var(--electric);
    opacity: .7;
}

    .square-wrong::before,
    .square-wrong::after {
        content: '';
        position: absolute;
        width: 80%;
        height: 3px;
        background-color: var(--electric);
        top: calc(50% - 1.5px);
        left: 10%;
        border-radius: 3px;
        z-index: 2;
    }

    .square-wrong::before {
        transform: rotate(45deg);
    }

    .square-wrong::after {
        transform: rotate(-45deg);
    }

/* ── Win banner ─────────────────────────────────────────────── */
.win-banner {
    background-color: var(--gold);
    color: var(--black);
    font-weight: 900;
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
    font-size: 1.2rem;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}

/* ── Legend ─────────────────────────────────────────────────── */
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

.search-dark {
    background-color: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
}

    .search-dark::placeholder {
        color: #888;
    }

    .search-dark:focus {
        background-color: #1a1a1a;
        border-color: #ff6b00; /* orange CTA accent on focus */
        color: #fff;
        box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.25);
    }

input.form-control#fixtureSearch {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 1rem;
}

    input.form-control#fixtureSearch::placeholder {
        color: #888;
    }