:root {
    --bg: #050713;
    --panelA: rgba(12, 18, 40, .78);
    --panelB: rgba(8, 12, 28, .72);
    --glass: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .14);
    --text: #eef2ff;
    --muted: rgba(238, 242, 255, .72);

    /* brighter accents */
    --accent: #5eead4;
    /* teal pop */
    --accent2: #a78bfa;
    /* purple pop */
    --hot: #60a5fa;
    /* blue highlight */
    --danger: #fb7185;

    --radius: 18px;
    --shadow: 0 24px 90px rgba(0, 0, 0, .65);
    --shadow2: 0 16px 55px rgba(0, 0, 0, .55);

    --glowA: 0 0 0 1px rgba(94, 234, 212, .16), 0 0 24px rgba(94, 234, 212, .10);
    --glowB: 0 0 0 1px rgba(167, 139, 250, .16), 0 0 24px rgba(167, 139, 250, .10);
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color: var(--text);
    background:
        radial-gradient(1100px 600px at 16% 10%, rgba(94, 234, 212, .18), transparent 60%),
        radial-gradient(900px 550px at 86% 18%, rgba(167, 139, 250, .18), transparent 60%),
        radial-gradient(900px 600px at 55% 92%, rgba(96, 165, 250, .12), transparent 62%),
        linear-gradient(180deg, #040615, #050713 40%, #040615);
}

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

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 18px
}

/* TOPBAR */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .04));
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.topbarInner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0
}

.logo {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(94, 234, 212, 1), rgba(167, 139, 250, 1));
    box-shadow: 0 14px 45px rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #071025;
    font-weight: 950;
    letter-spacing: .4px;
    flex: 0 0 auto;
}

.brandText {
    min-width: 0
}

.brandTitle {
    font-weight: 950;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brandSub {
    color: var(--muted);
    font-size: .92rem
}

.topActions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end
}

.pill {
    display: inline-flex;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .20);
    font-weight: 900;
    transition: transform .10s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.pill:hover {
    transform: translateY(-1px);
    border-color: rgba(94, 234, 212, .45);
    box-shadow: var(--glowA);
    background: rgba(0, 0, 0, .26);
}

.pillAccent {
    border-color: rgba(94, 234, 212, .35);
    background: linear-gradient(180deg, rgba(94, 234, 212, .16), rgba(0, 0, 0, .22));
    box-shadow: 0 0 0 1px rgba(94, 234, 212, .12);
}

.pillAccent:hover {
    box-shadow: var(--glowA)
}

.menuBtn {
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(0, 0, 0, .22);
    color: var(--text);
    cursor: pointer;
    font-weight: 950;
    transition: transform .10s ease, border-color .12s ease, box-shadow .12s ease;
}

.menuBtn:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, .45);
    box-shadow: var(--glowB);
}

/* FLYOUT */
.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    z-index: 80;
}

.backdrop.open {
    opacity: 1;
    pointer-events: auto
}

.flyout {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: min(370px, 90vw);
    background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
    border-right: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(16px);
    transform: translateX(-102%);
    transition: transform .20s ease;
    z-index: 90;
    box-shadow: var(--shadow);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.flyout.open {
    transform: translateX(0)
}

.flyHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px 6px;
}

.flyTitle {
    font-weight: 950
}

.closeBtn {
    border: 1px solid rgba(255, 255, 255, .20);
    background: rgba(0, 0, 0, .22);
    color: var(--text);
    border-radius: 12px;
    padding: 8px 10px;
    cursor: pointer;
}

.flyList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px
}

.flyItem {
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .18);
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform .10s ease, border-color .12s ease, box-shadow .12s ease;
}

.flyItem:hover {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, .45);
    box-shadow: 0 0 0 1px rgba(96, 165, 250, .14), 0 0 22px rgba(96, 165, 250, .10);
}

.flyDivider {
    height: 1px;
    background: rgba(255, 255, 255, .16);
    margin: 8px 0;
}

.arrow {
    color: rgba(238, 242, 255, .82);
    font-weight: 950
}

/* MAIN */
.main {
    padding: 28px 0 36px
}

.hero {
    border-radius: var(--radius);
    padding: 24px;
    background:
        radial-gradient(700px 260px at 18% 20%, rgba(94, 234, 212, .16), transparent 60%),
        radial-gradient(700px 260px at 86% 20%, rgba(167, 139, 250, .16), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .20));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: var(--shadow2);
}

.hero h1 {
    margin: 0 0 8px;
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    letter-spacing: -.02em;
}

.hero p {
    margin: 0;
    color: var(--muted)
}

.sectionTitle {
    margin: 22px 0 12px;
    font-weight: 950;
    letter-spacing: .2px;
}

/* GRID + CARDS */
.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width:800px) {
    .grid {
        grid-template-columns: 1fr
    }

    .pill {
        display: none
    }
}

.venueCard {
    border-radius: var(--radius);
    padding: 16px;
    background: linear-gradient(180deg, var(--panelA), var(--panelB));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: var(--shadow2);
    position: relative;
    overflow: hidden;
}

.venueCard::before {
    content: "";
    position: absolute;
    inset: -2px;
    background: radial-gradient(500px 180px at 20% 10%, rgba(94, 234, 212, .10), transparent 60%),
        radial-gradient(500px 180px at 90% 20%, rgba(167, 139, 250, .10), transparent 60%);
    pointer-events: none;
    opacity: .9;
}

.venueCard>* {
    position: relative
}

.venueHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.venueName {
    margin: 0;
    font-weight: 950;
    font-size: 1.15rem;
}

.venueBadge {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .26);
    padding: 8px 10px;
    border-radius: 999px;
    font-weight: 950;
    font-size: .85rem;
    color: rgba(238, 242, 255, .86);
    white-space: nowrap;
}

/* league buttons */
.leagueList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width:560px) {
    .leagueList {
        grid-template-columns: 1fr
    }
}

.leagueLink {
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .22);
    padding: 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    transition: transform .10s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.leagueLink:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, .50);
    box-shadow: 0 0 0 1px rgba(94, 234, 212, .14), 0 0 26px rgba(94, 234, 212, .12);
    background: rgba(0, 0, 0, .28);
}

.leagueLeft {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.leagueTitle {
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.leagueSub {
    color: var(--muted);
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.arrowRight {
    font-weight: 950;
    color: rgba(238, 242, 255, .90)
}

/* UTILITY BAR */
.utilityBar {
    margin-top: 28px;
    padding: 22px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .24));
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
}

.utilityGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 0 18px;
}

@media (max-width:800px) {
    .utilityGrid {
        grid-template-columns: 1fr
    }
}

.utilityBox {
    background: rgba(0, 0, 0, .26);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    transition: transform .10s ease, border-color .12s ease, box-shadow .12s ease;
}

.utilityBox:hover {
    transform: translateY(-1px);
    border-color: rgba(167, 139, 250, .45);
    box-shadow: var(--glowB);
}

.utilityBox h4 {
    margin: 0 0 10px;
    font-size: .92rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
}

.utilityBox a {
    display: block;
    padding: 7px 0;
    font-weight: 800;
    color: rgba(238, 242, 255, .92);
}

.utilityBox a:hover {
    color: var(--hot);
}

/* FOOTER */
.footer {
    border-top: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    padding: 16px 0;
    color: var(--muted);
}

.footerInner {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap
}