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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #18181b;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg transform='translate(55,65)'%3E%3Ccircle r='20' fill='none' stroke='%23000000' stroke-opacity='0.10' stroke-width='1.5'/%3E%3Ccircle r='12' fill='none' stroke='%23000000' stroke-opacity='0.10' stroke-width='1.5'/%3E%3Ccircle r='4' fill='%23000000' fill-opacity='0.11'/%3E%3C/g%3E%3Cg transform='translate(190,35) rotate(-18)'%3E%3Cpath d='M0,8 L52,8 L52,5 L56,5 L56,8 L60,8 L60,10 L52,10 L52,14 L42,14 L42,18 L36,18 L36,14 L18,14 L18,20 L12,20 L12,14 L0,14 Z' fill='%23000000' fill-opacity='0.09'/%3E%3C/g%3E%3Cg transform='translate(245,175) rotate(20)'%3E%3Ccircle cy='-3' r='3' fill='%23000000' fill-opacity='0.12'/%3E%3Cpath d='M-3,0 L3,0 L1.5,7 L-1.5,7 Z' fill='%23000000' fill-opacity='0.12'/%3E%3C/g%3E%3Cg transform='translate(95,225) rotate(-35) scale(0.65)'%3E%3Ccircle r='20' fill='none' stroke='%23000000' stroke-opacity='0.09' stroke-width='1.5'/%3E%3Ccircle r='12' fill='none' stroke='%23000000' stroke-opacity='0.09' stroke-width='1.5'/%3E%3Ccircle r='4' fill='%23000000' fill-opacity='0.10'/%3E%3C/g%3E%3Cg transform='translate(255,260) rotate(50)'%3E%3Ccircle cy='-3' r='3' fill='%23000000' fill-opacity='0.11'/%3E%3Cpath d='M-3,0 L3,0 L1.5,7 L-1.5,7 Z' fill='%23000000' fill-opacity='0.11'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat, repeat;
    background-size: 300px 300px, 120px 120px;
    color: #ffffff;
    min-height: 100vh;
    padding: 20px;
    overflow-y: scroll;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #18181b;
}

::-webkit-scrollbar-thumb {
    background: rgba(196, 30, 58, 0.4);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 30, 58, 0.7);
}

html {
    scrollbar-color: rgba(196, 30, 58, 0.4) #18181b;
    scrollbar-width: thin;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
}

.auth-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    color: #e0d6c8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

@media (max-width: 600px) {
    .auth-button {
        position: static;
        display: block;
        margin: 0 auto 12px;
    }
}

.auth-button:hover {
    background: rgba(196, 30, 58, 0.25);
    color: #ffffff;
}

.back-link {
    display: inline-block;
    color: #a0a0a0;
    text-decoration: none;
    font-size: 1.1rem;
    padding: 6px 14px;
    margin: -6px -14px 9px;
    transition: color 0.3s ease;
}

.back-link:hover {
    color: #c41e3a;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #c41e3a, #d4a017);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    color: #e0d6c8;
    font-size: 1.1rem;
}

.section {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #c41e3a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 25px;
    background: #c41e3a;
    border-radius: 2px;
}

.season-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: 10px;
    margin-bottom: 20px;
}

.season-nav .section-title {
    flex: 0 1 auto;
    min-width: 0;
    margin-bottom: 0;
    justify-content: center;
    text-align: center;
}

.season-nav .section-title::before {
    display: none;
}

.season-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #e0d6c8;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
}

.season-arrow:hover:not(:disabled) {
    background: rgba(196, 30, 58, 0.25);
    color: #ffffff;
}

.season-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Footer markup is built by JS/footer.js from a single source. */
.footer {
    margin-top: 60px;
    padding: 40px 0 24px;
    color: #a0a0a0;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer-top {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr;
    gap: 40px;
}

/* Brand block */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 320px;
}

.footer-brand-name {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.footer-brand-name img {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.footer-brand-y {
    color: #e8b923;
}

.footer-brand-r {
    color: #c41e3a;
}

.footer-tagline {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #8a8a90;
}

.footer-visits {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: #8a8a90;
}

.footer-visits strong {
    color: #d4a017;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Link columns */
.footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 20px;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col h3 {
    margin: 0 0 2px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
}

.footer-col a {
    color: #a0a0a0;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: #c41e3a;
}

/* Bottom bar */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    color: #8a8a90;
}

.footer-bottom p {
    margin: 0;
}


@media (max-width: 768px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-brand {
        max-width: none;
    }
}

@media (max-width: 480px) {
    .footer-cols {
        grid-template-columns: 1fr 1fr;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

.welcome-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.welcome-logo {
    flex-shrink: 0;
}

.welcome-logo img {
    width: 260px;
    height: auto;
    border-radius: 50%;
    mix-blend-mode: screen;
}

.welcome-photo {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    margin: 20px 0;
}

.welcome-text {
    flex: 1;
}

@media (max-width: 1024px) {
    h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 767px) {
    .welcome-content {
        flex-direction: column;
        text-align: left;
    }

    .welcome-logo img {
        width: 160px;
    }
}

.venue-map-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}

.venue-map-link:hover {
    color: #c41e3a;
}

.topnav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: -20px -20px 20px;
    padding: 10px 20px;
    background: rgba(24, 24, 27, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* .container caps at 1200px inside body's 20px padding, so the navbar
   (which bleeds past the container by that same 20px) stays flush with
   the viewport up to 1240px and floats short of it beyond that. */
@media (min-width: 1241px) {
    .topnav {
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
}

.nav-brand {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.nav-page-title {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: normal;
    color: #ffffff;
    white-space: nowrap;
    pointer-events: none;
}

.nav-brand-yellow {
    color: #f4c430;
}

.nav-brand-red {
    color: #c41e3a;
}

.nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* The panel itself doesn't scroll - .nav-mobile-list inside it does, so
   the scroll hint can sit still along the bottom edge.
   Open/close is a fade + slide (opacity/transform) rather than a
   display:none/flex toggle, so the menu visibly drops down and folds back
   up instead of snapping. max-height is NOT part of that transition - it's
   set to an exact px value by JS/nav.js's sizeMenu() the instant the menu
   opens (see setMenuOpen), so .nav-mobile-list's own height (and therefore
   its overflow-y:auto scrollbar) never changes mid-animation. Animating
   max-height directly caused that inner height to shift every frame,
   which flickered the scrollbar in and out as it crossed the content's
   height. The visibility delay keeps the menu out of the tab order once
   fully closed without preventing the closing animation from playing. */
.nav-mobile {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    background: rgba(20, 20, 24, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.3s;
}

.nav-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Without this a flex item won't shrink below its content, and the
       list would push past the panel's max-height instead of scrolling. */
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 12px;
}

/* Fades the last visible link and points down whenever there's more menu
   below - JS/nav.js adds .has-more while the list can still be scrolled. */
.nav-scroll-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
    color: #c9c9ce;
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: linear-gradient(to bottom, rgba(20, 20, 24, 0), rgba(20, 20, 24, 0.98));
}

.nav-mobile.has-more .nav-scroll-hint {
    opacity: 1;
}

.nav-mobile.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

/* Past phone width the menu is the only navigation there is, so it hangs
   from the button as a dropdown rather than spanning the whole bar. */
@media (min-width: 601px) {
    .nav-mobile {
        left: auto;
        width: min(300px, calc(100vw - 24px));
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0 0 10px 10px;
        overflow: hidden;   /* keep the list's corners inside the radius */
    }

    .nav-mobile-list {
        padding: 8px 12px 12px;
    }
}

/* Don't let a flick inside the menu's own scroller chain out to the
   page behind it. */
.nav-mobile-list {
    overscroll-behavior: contain;
}

/* Section headings inside the menu - the same grouping (and the same
   look) as the footer's link columns. Every heading follows a link (Home
   precedes the first group), so each one carries a rule above it to mark
   where the previous section ended. Its inset matches the links' own
   padding, so the text all lines up. */
.nav-group-title {
    margin: 8px 12px 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #ffffff;
    /* Underlined in the league red - the links below are never underlined,
       so this reads as a heading rather than another destination. */
    text-decoration: underline;
    text-decoration-color: #c41e3a;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.nav-mobile a {
    color: #c9c9ce;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 10px 12px;
    border-radius: 7px;
}

.nav-mobile a:hover,
.nav-mobile a.current {
    background: rgba(196, 30, 58, 0.22);
    color: #ffffff;
}

/* ---- Notification bell (JS/notifications.js) ------------------------- */
.nav-notify {
    position: relative;
    flex-shrink: 0;
    /* Take the auto-margin that would otherwise be on .nav-toggle so the
       bell sits hard right, immediately left of the hamburger. */
    margin-left: auto;
}

.nav-notify ~ .nav-toggle {
    margin-left: 0;
}

.nav-notify-bell {
    position: relative;   /* badge anchors here, so .nav-notify can go static on mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    cursor: pointer;
}

.nav-notify-bell:hover {
    background: rgba(196, 30, 58, 0.25);
}

.nav-notify-bell svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.nav-notify-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: #c41e3a;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.nav-notify-panel[hidden] {
    display: none;
}

.nav-notify-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    width: min(340px, calc(100vw - 24px));
    max-height: min(70vh, 480px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(20, 20, 24, 0.98);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
}

.nav-notify-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #c9c9ce;
}

.nav-notify-markall {
    border: 0;
    background: none;
    padding: 2px 2px;
    color: #d98a95;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
}

.nav-notify-markall:hover {
    color: #ffffff;
    text-decoration: underline;
}

.nav-notify-list {
    overflow-y: auto;
}

.nav-notify-empty {
    padding: 22px 14px;
    text-align: center;
    font-size: 0.85rem;
    color: #9a9aa2;
}

.nav-notify-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
    color: #e4e4e8;
}

.nav-notify-item:last-child {
    border-bottom: 0;
}

.nav-notify-item:hover {
    background: rgba(196, 30, 58, 0.14);
}

.nav-notify-item.is-unread {
    background: rgba(196, 30, 58, 0.10);
}

.nav-notify-thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

/* Team badges are logos, not photos - contain + a little breathing room
   instead of cropping them to fill the square like a cover image. */
.nav-notify-thumb-logo {
    object-fit: contain;
    padding: 4px;
}

.nav-notify-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 1.1rem;
}

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

.nav-notify-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
}

.nav-notify-detail {
    font-size: 0.78rem;
    color: #b6b6bd;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.nav-notify-time {
    font-size: 0.72rem;
    color: #8a8a92;
}

/* ---- Small screens: centre the panel as a sheet under the bar ------- */
/* Drop .nav-notify out of the flex flow so the panel's containing block
   becomes the sticky .topnav and it can be centred across the viewport
   instead of hanging off the bell like a desktop dropdown. */
@media (max-width: 768px) {
    .nav-notify {
        position: static;
    }
    .nav-notify-panel {
        top: calc(100% + 8px);
        left: 10px;
        right: 10px;
        margin: 0 auto;
        width: auto;
        max-width: 420px;
        max-height: min(75vh, calc(100vh - 80px));
    }
}

/* ---- Phones: tighten the bar so the bell doesn't crowd it ----------- */
@media (max-width: 600px) {
    .topnav {
        gap: 10px;
        padding: 10px 12px;
    }

    /* Icon-only hamburger - the bell + menu then read as a tidy pair in
       the corner rather than "Menu ☰" pushing the bar over. */
    .nav-toggle {
        gap: 0;
        width: 34px;
        padding: 0;
        font-size: 0;
    }
    .nav-toggle::after {
        content: "\2630";
        font-size: 1.05rem;
    }
}

/* Per-box loading state -------------------------------------------------
   Dropped into a specific table/grid/list container while that container's
   own data is being fetched, instead of blocking the whole page - the rest
   of the page (nav, header, other sections) stays usable throughout. */
.nadarl-loading-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    grid-column: 1 / -1;
}

.nadarl-loading-spinner {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: #c41e3a;
    animation: nadarl-spin 0.8s linear infinite;
}

@keyframes nadarl-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .nadarl-loading-spinner {
        animation-duration: 2s;
    }

    .nav-mobile,
    .nav-mobile.open {
        transition-duration: 0s;
    }
}

/* "10s" sits in headers that are uppercased; keep the "s" lowercase */
.tens-label {
    text-transform: none;
}