/* ======================================================
   ROOT VARIABLES
====================================================== */
:root {
    --bg-main: #0f1115;
    --bg-secondary: #161a22;
    --bg-card: #1c2230;

    --accent: lightskyblue;
    --accent-soft: rgba(135, 206, 250, 0.18);

    --text-main: #e6e6e6;
    --text-muted: #9aa4b2;
    --border-soft: rgba(255,255,255,0.08);

    --radius: 1vw;
    --radius-sm: 0.6vw;
    --shadow-soft: 0 1vw 2vw rgba(0,0,0,0.35);
}

/* ======================================================
   RESET + BASE
====================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: clamp(14px, 0.9vw, 18px);
}

body {
    background: 
        url('../images/backgrounds/darker.jpg'),
        rgba(32, 47, 78, 0.7);
    background-blend-mode: overlay;
    color: var(--text-main);
    font-family: "Oswald", system-ui, sans-serif;
    line-height: 1.5;
}

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

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

.leftsideAdDiv {
    position: fixed;     
    top: 15vw;           
    left: 0;            
    height: 500px;
    width: 120px;
}

.rightsideAdDiv {
    position: fixed;
    top: 15vw;          
    right: 0;            
    height: 500px;
    width: 120px;
}

#mainbodyDiv {
    display: flex;
}

#bottomAdDiv {
    height: 90px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.705);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
}

#bottomAdSpacer {
    height: 90px;
}

/* =========================
   TICKER FIX
========================= */
#ticker-box {
    background: linear-gradient(90deg, #11131a, #1a2030);
    border-bottom: 1px solid var(--border-soft);
    overflow: hidden;

    min-height: 2.8vw;
    display: flex;
    align-items: center;
}

#ticker-box ul {
    list-style: none;
    display: flex;
    align-items: center;
}

#ticker-item {
    padding: 0.5vw 1.6vw;
    font-size: 0.8vw;
    line-height: 1.4;
    white-space: nowrap;

    display: flex;
    align-items: center;
    gap: 0.5vw;
}

#ticker-image {
    height: 0.9vw;
    width: 0.9vw;
    object-fit: contain;
}

/* ======================================================
   HEADER
====================================================== */
#mainheader {
    /* position: sticky; */
    top: 0;
    height: 5vw;              /* lock height */
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;    /* center search */
    background-color: var(--bg-main);
    /* overflow: visible; */
}

#headerLogo {
    height: 9vw;          /* go big */
    min-height: 80px;
    object-fit: contain;
    pointer-events: none;
}

#headerAdDiv {
    height: 90px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.521);
    display: flex;
    justify-content: center;
}

.headerDesktopAd { display: block; }
.headerMobileAd { display: none; }

/* ======================================================
   SEARCH
====================================================== */
.search-container {
    display: flex;
    align-items: center;
    gap: 0.8vw;
    margin-left: 50vw;
}

.searchident {
    color: rgb(71, 71, 71);
    margin-left: 1vw;
    opacity: 0.8;
}

#headerForm {
    display: flex;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    /* overflow: hidden; */
}

#search {
    background: transparent;
    border: none;
    color: var(--text-main);
    padding: 0.6vw 0.8vw;
    font-size: 0.9vw;
    min-width: 14vw;
}

#search:focus {
    outline: none;
}

#headerSearchSubmit {
    background: var(--accent);
    border: none;
    padding: 0 0.8vw;
    cursor: pointer;
}

#headerSearchSubmit i {
    color: #000;
}

#loginLink,
#logoutLink,
#userProfileLink {
    font-size: 0.85vw;
    opacity: 0.9;
    transition: opacity 0.2s;
}

#loginLink:hover,
#logoutLink:hover,
#userProfileLink:hover {
    opacity: 1;
}


.autocomplete-items {
    position: absolute;
    /* border: 1px solid #d4d4d4; */
    border-bottom: none;
    border-top: none;
    z-index: 1001;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
    font-size: 0.75vw;
    border-radius: var(--radius-sm);
  }

  .autocomplete {
    position: relative;
    display: inline-block;
  }

  .autocomplete-items div {
    color: white;
    padding: 10px;
    cursor: pointer;
    background-color: var(--bg-main);
    border-bottom: 1px solid #8f8f8f; 
    /* font-family: "Oswald", sans-serif; */
  }

  .autocomplete-items div:hover {
    background-color: lightskyblue; 
  }

  .autocomplete-active {
    background-color: DodgerBlue !important; 
    color: #ffffff; 
  }


/* ======================================================
   NAVBAR
====================================================== */
#navbar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-soft);
    padding: 0.8vw 2vw;
    position: sticky;
}

#loggedInMsg {
    font-size: 0.8vw;
    color: var(--text-muted);
    margin-bottom: 0.5vw;
}

#navBarBtnsDiv {
    display: flex;
    gap: 0.6vw;
    flex-wrap: wrap;
    margin-left: 14vw;
}

#navbutton {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    padding: 0.5vw 1vw;
    font-size: 0.85vw;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

#navbutton:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* ======================================================
   DROPDOWN
====================================================== */
.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    top: 120%;
    left: 0;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    display: none;
    min-width: 12vw;
    overflow: hidden;
    z-index: 10;
}

.dropdown-content a {
    display: block;
    padding: 0.7vw 1vw;
    font-size: 0.85vw;
    transition: background 0.2s;
}

.dropdown-content a:hover {
    background: var(--accent-soft);
}

.show {
    display: block;
}

/* ======================================================
   MAIN LAYOUT
====================================================== */
#indexMainDiv {
    max-width: 70vw;
    margin: 2vw auto;
    padding: 0 1.5vw;
    display: grid;
    grid-template-columns: 1fr 22vw;
    gap: 2vw;
}

.heading h2 {
    font-size: 1.6vw;
    margin-bottom: 1vw;
}

/* ======================================================
   ARTICLES
====================================================== */
.mainarticleDiv {
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform 0.25s ease;
}

.mainarticleDiv:hover {
    transform: translateY(-0.3vw);
}

.mainarticleImage {
    width: 100%;
    height: 18vw;
    object-fit: cover;
}

.mainarticleTitle {
    font-size: 1.4vw;
    padding: 1vw;
}

#mainarticleDate {
    padding: 0 1vw 1vw;
    font-size: 0.8vw;
    color: var(--text-muted);
}

#otherArticlesDiv {
    margin-top: 1.5vw;
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.articleDiv {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    display: flex;
    gap: 0.8vw;
    padding: 0.7vw;
    transition: background 0.2s;
}

.articleDiv:hover {
    background: #22283a;
}

.articleImage {
    width: 6vw;
    height: 4vw;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.articleTitle {
    font-size: 1vw;
}

.articleindexDate {
    font-size: 0.75vw;
    color: var(--text-muted);
}

/* ======================================================
   RECENT EVENTS
====================================================== */
#recentEventsDiv {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: 1.5vw;
}

.recentEventTile {
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    padding: 1vw;
    margin-bottom: 1vw;
    transition: transform 0.2s;
}

.recentEventTile:hover {
    transform: translateY(-0.25vw);
}

.recentEventTileImage {
    height: 4vw;
    width: 4vw;
    margin-bottom: 0.6vw;
    object-fit: contain;
}

.recentEventTitle {
    font-size: 1.05vw;
    margin-bottom: 0.4vw;
}

.recentEventDate {
    font-size: 0.8vw;
    color: var(--text-muted);
}

#recentEventDateSpan {
    color: var(--accent);
}

/* ======================================================
   FOOTER
====================================================== */
footer {
    margin-top: 4vw;
    background: #0b0d12;
    border-top: 1px solid var(--border-soft);
}

#footerContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15vw;
}

.socialContactsFooterDiv {
    margin-top: 1vw;
    display: flex;
    align-items: center;
    gap: 4vw;
}

#sociala {
    color: var(--text-muted);
    font-size: 0.8vw;
}

#sociala:hover {
    color: var(--accent);
}

#footerBottomDiv {
    width: 100%;
    display: flex;
    justify-content: center;
}

#footerLogoDiv {
    width: 100%;
    display: flex;
    justify-content: center;
}

#footerCopyrightLogo {
    height: 3vw;
    width: 3vw;
    object-fit: contain;
}

#footerXLogo {
    height: 1.5vw;
    width: 1.5vw;
    object-fit: contain;
}

#footerDiscordLogo {
    height: 2vw;
    width: 2vw;
    object-fit: contain;
}

#footerCopyright {
    color: lightgray;
    font-size: 0.8vw;
    margin-top: 2vw;
}

/* ======================================================
   ARTICLE PAGE (article.php)
   Add this to your new CSS
====================================================== */

/* Make the article area feel like a centered "reading card" */
.articlePageDiv {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border-soft);

    width: 70vw;                 /* main reading width on desktop */
    margin: 2vw auto;
    padding: 2vw 2.5vw;
}

/* Your PHP wraps it in #resultdiv, so keep that compatible */
#resultdiv.articlePageDiv {
    text-align: left;            /* override any old center styles */
}

/* Back button (your #backButton) */
#backButton {
    float: none;                 /* prevent layout weirdness */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2vw;
    height: 3.2vw;
    min-width: 44px;
    min-height: 44px;
    background: rgba(135, 206, 250, 0.14);
    color: var(--accent);
    border: 1px solid rgba(135, 206, 250, 0.28);
    border-radius: 999px;
    cursor: pointer;
    margin-bottom: 1.2vw;
    transition: transform 0.18s ease, background 0.18s ease;
    font-size: 1.2vw;
}

#backButton:hover {
    background: rgba(135, 206, 250, 0.22);
    transform: translateY(-0.12vw);
}

/* Title + date */
#articleTitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2vw;
}

#articleDate {
    font-size: 0.9vw;
    color: var(--text-muted);
    margin-top: 0.8vw;
    margin-bottom: 1.2vw;
}

#articleDateSpan {
    color: var(--text-main);
}

/* Article hero image */
#articlepageimage {
    max-height: 20vw;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    margin: 0 auto;
}

/* Reading column */
#articleBodyDiv {
    width: 100%;
    margin: 0 auto;
}

/* Paragraph styling (your PHP outputs <p id='articleBody'>...) */
#articleBody {
    font-size: 1.05vw;
    color: var(--text-main);
    margin: 0 0 1.2vw;
    line-height: 1.75;
}

/* In-article ads spacing */
.inArticleAd {
    margin-top: 1.5vw;
    margin-bottom: 1.5vw;
}

/* ======================================================
   EVENTS PAGE (events.php)
   Add this to updatedStyling.css
====================================================== */

/* Page spacing for the events lists */
#eventsdisplaydivtwentysix,
#eventsdisplaydivtwentyfive,
#eventsdisplaydivtwentyfour,
#eventsdisplaydivtwentythree,
#eventsdisplaydivtwentytwo,
#eventsdisplaydivtwentyone,
#eventsdisplaydivtwenty,
#eventsdisplaydivnineteen,
#eventsdisplaydiveighteen,
#eventsdisplaydivseventeen,
#eventsdisplaydivsixteen {
    width: 70vw;
    margin: 2vw auto;
}

.eventYearHeader {
    font-size: 1.8vw;
    color: var(--accent);
    margin: 0 0 1.2vw;
}

/* Each event card (you reuse id="eventblock" on many elements, so we style it anyway) */
#eventblock {
    display: flex;
    align-items: center;
    gap: 1.2vw;

    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);

    padding: 1.2vw 1.4vw;
    margin: 0 0 1.2vw;

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

a:hover #eventblock {
    transform: translateY(-0.25vw);
    border-color: rgba(135, 206, 250, 0.35);
    background: #22283a;
}

/* Event image */
#eventblockimage {
    width: 5.2vw !important;
    height: 5.2vw !important;
    min-width: 64px;
    min-height: 64px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Title/date inside the event block */
.eventBlockTitle {
    font-size: 1.2vw;
    line-height: 1.2;
    margin: 0 0 0.4vw;
    color: var(--text-main);
}

#eventBlockDate {
    font-size: 0.9vw;
    color: var(--text-muted);
}

#EventMapStatstable {
    /* width: 100%; */
    table-layout: fixed; 
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin: 1vw 0 2vw;
}

#EventMapStatstable th {
    background: var(--bg-secondary);
    font-weight: 600;
    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}

#EventMapStatstable td {
    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}

#EventMapStatstable tr {
    border-bottom: 0.08vw solid rgba(255,255,255,0.08);
    cursor: pointer;
}

#EventMapStatstable tbody tr:hover {
    background: rgba(255,255,255,0.04);
}

#EventMapStatstable th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover = button-like */
#EventMapStatstable th[data-sort]:hover {
    background-color: #1f2937; /* dark hover */
    color: #ffffff;
}

/* Arrow base */
#EventMapStatstable th[data-sort]::after {
    content: "";
    position: absolute;
    right: 0.2vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6vw;
    opacity: 0;
}

/* Ascending */
#EventMapStatstable th.sorted-asc::after {
    content: "▲";
    opacity: 1;
}

/* Descending */
#EventMapStatstable th.sorted-desc::after {
    content: "▼";
    opacity: 1;
}

/* ======================================================
   FILTER BUTTON + PANEL
====================================================== */

/* Floating filter button */
#showEventFilterBtn {
    display: block;
    margin: 2vw auto 1vw;
    font-size: 1vw;
    padding: 0.8vw;
    background: var(--bg-card);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
}

#showEventFilterBtn:hover {
    background: rgba(135, 206, 250, 0.24);
}

/* The filter panel */
#eventFilterDiv {
    background-color: var(--bg-secondary);
    width: 30%;
    margin: 0 auto;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 80px;
    display: flex;
    padding: 1vw;
}

/* Header row inside panel */
#eventFilterDivHeader {
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    margin-bottom: 0.5vw;
}

#eventFilterDivHeader h2 {
    font-size: 1.2vw;
    color: var(--accent);
}

/* Close button */
#closeEventFilterBtn {
    font-size: 0.8vw;
    padding: 0.5vw;
    background-color: var(--accent-soft);
    color: var(--text-main);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

#closeEventFilterBtn:hover {
    background-color: #00000069;
}

/* Checkbox layout groups */
#eventCheckboxDiv,
#regionCheckboxDiv {
    display: flex;
    justify-content: center;
}

#regionCheckboxDiv {
    display: block;
    margin-top: 0.6vw;
}

#regionCheckboxDivHeader {
    font-size: 1.05vw;
    color: var(--text-main);
    margin-bottom: 0.6vw;
}

/* Custom checkbox label styling (works with your existing markup) */
/* Base label */
.eventCheckBoxLabel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6vw;

    padding: 0.55vw 1vw 0.55vw 2.4vw; /* space for checkbox */
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 999px;

    font-size: 0.9vw;
    color: var(--text-main);
    cursor: pointer;
    user-select: none;

    transition: background 0.2s ease, border-color 0.2s ease;
}

.eventCheckBoxLabel:hover {
    background: rgba(135, 206, 250, 0.08);
    border-color: rgba(135, 206, 250, 0.3);
}

/* Hide native checkbox */
.eventCheckBoxLabel input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* Custom checkbox box */
.eventCheckBoxLabel .checkmark {
    position: absolute;
    left: 0.8vw;
    top: 50%;
    transform: translateY(-50%);

    width: 1.1vw;
    height: 1.1vw;
    min-width: 18px;
    min-height: 18px;

    border-radius: 6px;
    background: #0f1115;
    border: 1.5px solid rgba(135, 206, 250, 0.45);

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

    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Checkmark icon */
.eventCheckBoxLabel .checkmark::after {
    content: "";
    width: 0.45vw;
    height: 0.7vw;

    border-right: 2px solid #0f1115;
    border-bottom: 2px solid #0f1115;

    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

/* Checked state */
.eventCheckBoxLabel input[type="checkbox"]:checked ~ .checkmark {
    background: lightskyblue;
    border-color: lightskyblue;
}

.eventCheckBoxLabel input[type="checkbox"]:checked ~ .checkmark::after {
    transform: rotate(45deg) scale(1);
}

/* Focus (keyboard accessibility) */
.eventCheckBoxLabel input[type="checkbox"]:focus-visible ~ .checkmark {
    outline: 2px solid rgba(135, 206, 250, 0.6);
    outline-offset: 2px;
}

/* ======================================================
   EVENT PAGE (eventspage.php)
   Add to your new CSS
====================================================== */

/* Main body container (you use left/right ads + center content) */
#mainbodyDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2vw;
    padding: 2vw 0;
}

#eventMainDiv {
    padding: 1.5vw;
    width: 65vw;
    margin: 2vw auto;
}

#eventTabsAdDiv {
    display: flex;
    justify-content: center;
    height: 85px;
}

/* Center content column (your page uses #resultdiv) */
#resultdiv {
    width: 70vw;
    /* max-width: 1100px; */
    background: transparent; /* keep card styles on inner blocks */
}

/* Hide side ads on smaller screens (prevents crushing layout) */
@media (max-width: 1024px) {
    .leftsideAdDiv,
    .rightsideAdDiv {
        display: none;
    }
    #resultdiv {
        width: 92vw;
    }
}

#eventsTabDesktopAd { display: block; }
#eventsTabMobileAd { display: none; }


/* Back button (reuse same style as article page if you have it) */
#backButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2vw;
    height: 3.2vw;
    min-width: 44px;
    min-height: 44px;
    background: rgba(135, 206, 250, 0.14);
    color: var(--accent);
    border: 1px solid rgba(135, 206, 250, 0.28);
    border-radius: 999px;
    cursor: pointer;
    margin-bottom: 1vw;
    transition: transform 0.18s ease, background 0.18s ease;
}

#backButton:hover {
    background: rgba(135, 206, 250, 0.22);
    transform: translateY(-0.12vw);
}

/* Event title + hero image */
.eventTitle {
    color: var(--text-main);
    font-size: 2vw;
    /* line-height: 1.2; */
    display: block;
    text-align: center;
}

.eventSectionHeader {
    margin-bottom: 1vw;
    font-size: 1.5vw;
    margin-top: 0.5vw;
}

#eventsPageImage {
    width: 100%;
    height: 13vw;
    width: 17vw;
    object-fit: contain;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.2vw;
    margin: 0 auto;
    margin-bottom: 2vw;
    margin-top: 2vw;
}

/* Info card */
#eventsInfoDiv {
    background: var(--bg-secondary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.2vw 1.4vw;
    margin: 0 0 2vw;
    display: grid;
    gap: 0.6vw;
    text-align: center;
}

#eventsInfoDiv p {
    font-size: 0.95vw;
    color: var(--text-muted);
}

#playerLegalName {
    color: var(--text-main);
}



/* ======================================================
   PARTICIPANTS GRID
====================================================== */
#eventParticipantDiv {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1vw;
    margin-bottom: 2vw;
}

.participantTile {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1vw;
    position: relative;
    transition: transform 0.2s ease, border-color 0.2s ease;
    min-height: 7.5vw;
}

.participantTile:hover {
    transform: translateY(-0.25vw);
    border-color: rgba(135, 206, 250, 0.35);
}

.participantLogo {
    height: 3.2vw;
    min-height: 44px;
    object-fit: contain;
    margin: 0 auto 0.6vw;
}

.participantTitle {
    font-size: 1vw;
    text-align: center;
    color: var(--text-main);
}

.participantFlag {
    position: absolute;
    top: 0.7vw;
    right: 0.7vw;
    height: 1.2vw;
    min-height: 16px;
    object-fit: contain;
    opacity: 0.95;
}

/* ======================================================
   TABLES (Final Results + Awards + Team-sorted tables)
====================================================== */
#standingsstable,
#eventmapstable,
#eventopstable,
#eventfullstatstable,
#statstable {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin: 1vw 0 2vw;
}

#standingsstable caption,
#eventmapstable caption,
#eventopstable caption,
#eventfullstatstable caption,
#statstable caption {
    caption-side: top;
    text-align: left;
    padding: 1vw 1.2vw;
    font-size: 1.2vw;
    color: var(--accent);
}

#standingsstable th,
#eventmapstable th,
#eventopstable th,
#eventfullstatstable th,
#statstable th {
    text-align: left;
    font-size: 0.95vw;
    padding: 0.9vw 1.1vw;
    color: var(--text-main);
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}

#standingsstable td,
#eventmapstable td,
#eventopstable td,
#eventfullstatstable td,
#statstable td {
    font-size: 0.9vw;
    padding: 0.85vw 1.1vw;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
}

#standingsstable tr:hover td,
#eventfullstatstable tr:hover td,
#statstable tr:hover td {
    background: rgba(135, 206, 250, 0.06);
}

/* Logos/links inside tables */
#playerEventLogo {
    height: 1.6vw;
    width: 1.6vw;
    /* min-height: 20px; */
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5vw;
}

#EventOperatorStatstable {
    /* width: 100%; */
    table-layout: fixed; 
    width: 96%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin: 0 auto;
}

#EventOperatorStatstable th {
    background: var(--bg-secondary);
    font-weight: 600;
    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}

#EventOperatorStatstable td {
    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}

#EventOperatorStatstable tr {
    border-bottom: 0.08vw solid rgba(255,255,255,0.08);
}

#EventOperatorStatstable tbody tr:hover {
    background: rgba(255,255,255,0.04);
}

#EventOperatorStatstable th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover = button-like */
#EventOperatorStatstable th[data-sort]:hover {
    background-color: #1f2937; /* dark hover */
    color: #ffffff;
}

/* Arrow base */
#EventOperatorStatstable th[data-sort]::after {
    content: "";
    position: absolute;
    right: 0.2vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6vw;
    opacity: 0;
}

/* Ascending */
#EventOperatorStatstable th.sorted-asc::after {
    content: "▲";
    opacity: 1;
}

/* Descending */
#EventOperatorStatstable th.sorted-desc::after {
    content: "▼";
    opacity: 1;
}

#teamPageLink,
#playerprofilelink,
.qualifiesToLink {
    color: var(--text-main);
    text-decoration: none;
}

#teamPageLink:hover,
#playerprofilelink:hover,
.qualifiesToLink:hover {
    color: var(--accent);
}

#qualifiesToLogo {
    height: 2.3vw;
    width: 2.3vw;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5vw;
}

#activeRosterHeader {
    font-size: 1.5vw;
}

#teamTotalEarnings {
    color: var(--accent);
}

#teamTotalEarningsLabel {
    font-size: 1.1vw;
    color: var(--text-muted);
    text-align: center;
    margin-top: 1vw;
    margin-bottom: 1vw;

}

.kddiff {
    color: var(--accent);
    opacity: 0.9;
}

/* Operator images in operator table */
.statsopimg {
    height: 2.2vw;
    min-height: 28px;
    object-fit: contain;
    margin: 0 auto;
}

/* Sortable table headers */
#eventfullstatstable th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover = button-like */
#eventfullstatstable th[data-sort]:hover {
    background-color: #1f2937; /* dark hover */
    color: #ffffff;
}

/* Arrow base */
#eventfullstatstable th[data-sort]::after {
    content: "";
    position: absolute;
    right: 0.2vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6vw;
    opacity: 0;
}

/* Ascending */
#eventfullstatstable th.sorted-asc::after {
    content: "▲";
    opacity: 1;
}

/* Descending */
#eventfullstatstable th.sorted-desc::after {
    content: "▼";
    opacity: 1;
}

/* ======================================================
   RECENT MATCHES
====================================================== */
#eventMatchesContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1vw;
    margin-bottom: 2vw;
}

.eventMatchTile {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1vw 1.2vw;

    display: grid;
    grid-template-columns: 2.2vw 1fr 2.2vw;
    align-items: center;
    column-gap: 0.8vw;
    row-gap: 0.4vw;

    transition: transform 0.2s ease, border-color 0.2s ease;
}

.eventMatchTile:hover {
    transform: translateY(-0.25vw);
    border-color: rgba(135, 206, 250, 0.35);
}

.eventMatchTileDate {
    grid-column: 1 / -1;
    font-size: 0.85vw;
    color: var(--text-muted);
}

.eventMatchTileTeams {
    grid-column: 2 / 3;
    font-size: 0.95vw;
    color: var(--text-main);
    text-align: center;
}

.eventmatchscore {
    color: var(--accent);
    font-weight: 600;
}

.eventMatchTileLogo1,
.eventMatchTileLogo2 {
    height: 2.2vw;
    min-height: 28px;
    object-fit: contain;
}

.eventMatchTileTime {
    grid-column: 1 / -1;
    font-size: 0.85vw;
    color: var(--text-muted);
    text-align: center;
}

/* "Show More" tile */
.eventMatchesShowMoreTile {
    background: rgba(135, 206, 250, 0.14);
    border: 1px solid rgba(135, 206, 250, 0.28);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.eventMatchesShowMoreTile:hover {
    background: rgba(135, 206, 250, 0.22);
    transform: translateY(-0.2vw);
}

.eventMatchesShowMore {
    color: var(--accent);
    font-size: 1vw;
}

/* ======================================================
   TABS
====================================================== */
.tab {
    display: flex;
    gap: 0.6vw;
    flex-wrap: wrap;
    margin: 4vw 0 1vw;
    background-color: var(--bg-card);
    padding: 1vw;
    border-radius: var(--radius);
}

.tablinks {
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    padding: 0.6vw 1vw;
    font-size: 0.9vw;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.tablinks:hover {
    background: var(--accent-soft);
    border-color: rgba(135, 206, 250, 0.35);
}

.tablinks.active {
    background: rgba(135, 206, 250, 0.22);
    border-color: rgba(135, 206, 250, 0.55);
    color: var(--accent);
}

.tabcontent {
    display: none;
}

/* ======================================================
   SORT BY TEAMS TOGGLE
====================================================== */
#sortbyteamcontainer {
    display: flex;
    align-items: center;
    gap: 1vw;
    background: var(--bg-secondary);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1vw 1.2vw;
    margin: 1vw 0 1.5vw;
}

#sortbyteamtitle {
    font-size: 1.1vw;
    color: var(--text-main);
}

/* Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 3.2vw;
    height: 1.7vw;
    min-width: 46px;
    min-height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(255,255,255,0.12);
    border: 1px solid var(--border-soft);
    transition: 0.2s;
    border-radius: 999px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.3vw;
    width: 1.3vw;
    min-height: 20px;
    min-width: 20px;
    left: 0.2vw;
    bottom: 0.2vw;
    background: var(--text-main);
    transition: 0.2s;
    border-radius: 999px;
}

.switch input:checked + .slider {
    background: rgba(135, 206, 250, 0.25);
    border-color: rgba(135, 206, 250, 0.45);
}

.switch input:checked + .slider:before {
    transform: translateX(1.4vw);
    background: var(--accent);
}

/* Team-sorted area */
#sortedTeamsDiv {
    display: none; /* your JS toggles this */
}

.teamSortDiv {
    margin-bottom: 2vw;
}

#teamsSortedLogo {
    height: 1.8vw;
    min-height: 22px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5vw;
}

.playerEventOpsDiv {
    display: flex;
}

/* ======================================================
   MATCH STATS PAGE (matchstats.php)
   Add to updatedStyling.css
====================================================== */

/* Layout uses same mainbodyDiv + side ads pattern */
#mainbodyDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 2vw;
    padding: 2vw 0;
}

/* Center content */
#resultdiv {
    width: 70vw;
}

/* Side ads off on smaller screens */
@media (max-width: 1024px) {
    .leftsideAdDiv,
    .rightsideAdDiv {
        display: none;
    }
    #resultdiv {
        width: 92vw;
    }
}

/* Match header (team logos + score) */
#mapsStatsMatchHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4vw;

    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);

    padding: 1.2vw 1.4vw;
    margin: 1vw 0 1vw;
}

.mapStatsTeamLogos {
    height: 4.2vw;
    min-height: 56px;
    object-fit: contain;
    transition: transform 0.2s ease;
}

#mapsStatsMatchHeader a:hover .mapStatsTeamLogos {
    transform: translateY(-0.15vw);
}

#mapsStatsScore {
    font-size: 2.2vw;
    color: var(--accent);
    line-height: 1;
    margin: 0;
}

.losingTeamMapScore {
    color: var(--text-muted);
}

/* Event link + date under header */
#mapsStatsEvent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6vw;

    width: 100%;
    text-align: center;
    margin: 0.2vw 0 0.5vw;

    font-size: 1.1vw;
    color: var(--text-main);
}

#mapsStatsEvent:hover {
    color: var(--accent);
}

#mapsStatsDate {
    width: 100%;
    text-align: center;
    font-size: 0.9vw;
    color: var(--text-muted);
    margin-bottom: 1.4vw;
}

/* ======================================================
   MAPS STRIP
====================================================== */

#matchmapscontainer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1vw;
    margin: 1vw 0 2vw;
}

.matchmapdiv {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: var(--shadow-soft);

    min-height: 10vw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 0.9vw;
}

/* subtle dark overlay for readability */
.matchmapdiv::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.55)
    );
    pointer-events: none;
}

.matchmapdiv > * {
    position: relative;
    z-index: 1;
}

.mapscore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6vw;

    font-size: 1vw;
    color: var(--text-main);
    background: rgba(15,17,21,0.65);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;

    padding: 0.35vw 0.7vw;
    width: fit-content;
    margin: 0 auto;
}

.mapteamlogo {
    height: 1.6vw;
    min-height: 20px;
    object-fit: contain;
}

.maptitle {
    text-align: center;
    font-size: 1vw;
    color: var(--accent);
    margin-top: 0.6vw;

    background: rgba(15,17,21,0.65);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 0.35vw 0.7vw;
}

/* ======================================================
   TABLE AREA
====================================================== */

#mapsContainer {
    margin-top: 1vw;
}

/* operator cell alignment */
.operatorStatsTd {
    white-space: nowrap;
}

/* operator icons in table */
#playerOperatorLogo {
    height: 1.8vw;
    min-height: 22px;
    margin-right: 0.25vw;
    object-fit: contain;
}

/* Edit button for admin */
#editMatchStatsDiv {
    margin: 1.5vw 0 0;
    display: flex;
    justify-content: flex-end;
}

#editMatchStatsBtn {
    background: rgba(135, 206, 250, 0.18);
    border: 1px solid rgba(135, 206, 250, 0.35);
    color: var(--accent);
    padding: 0.6vw 1vw;
    border-radius: 999px;
    font-size: 0.95vw;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

#editMatchStatsBtn:hover {
    background: rgba(135, 206, 250, 0.26);
    transform: translateY(-0.15vw);
}

/* ======================================================
   PLAYER PAGE (search.php / player profile)
   Additions
====================================================== */

/* page container alignment (matches your other pages) */
#resultdiv{
    /* background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft); */
    padding: 1.5vw;
    max-width: 70vw;
    margin: 2vw auto;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);
}

/* player header area */
#playertitle{
    font-size: 2vw;
    text-align: center;
    margin-bottom: 1vw;
}

#playerNameLogo{
    height: 1.2vw;
    width: 1.2vw;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

#playerTitleLogo {
    height: 3vw;
    width: 3vw;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

#playerimage{
    width: 30vw;
    height: 20vw;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin: 1vw auto 1vw;
    border: 0.2vw solid var(--border-soft);
    display: block;
}

#playerinfodiv{
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    padding: 1.2vw;
    margin: 1vw auto 1.5vw;
    max-width: 52vw;
    text-align: center;
}

#playerLegalName{
    font-size: 1.2vw;
    margin-bottom: 0.6vw;
    color: var(--text-main);
}

#playerFlag{
    height: 1.2vw;
    width: 1.2vw;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.6vw;
}

#currentTeamLink{
    color: var(--accent);
    font-size: 0.8vw;
}

#playertotalearnings{
    color: var(--accent);
    font-size: 0.8vw;
}

.playerInfoDivLabel {
    font-size: 0.8vw;
}

/* ======================================================
   CAREER STATS TABLES
====================================================== */
#careerStatsDiv{
    margin: 0 auto;
    max-width: 70vw;
}

#careerStatsCaption{
    text-align: center;
    font-size: 1.6vw;
    margin: 0 0 1vw;
}

#playerCareerStatsTable,
#playerEventStatstable,
#playerOperatorStatstable,
#playerMatchesStatstable{
    width: 80%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    width: 100%;
    table-layout: fixed;
}

#playerCareerStatsTable th,
#playerCareerStatsTable td,
#playerEventStatstable th,
#playerEventStatstable td,
#playerOperatorStatstable th,
#playerOperatorStatstable td,
#playerMatchesStatstable th,
#playerMatchesStatstable td{
    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}

#playerCareerStatsTable th,
#playerEventStatstable th,
#playerOperatorStatstable th,
#playerMatchesStatstable th{
    background: var(--bg-secondary);
    font-weight: 600;
}

#playerCareerStatsTable {
    margin-bottom: 1vw;
}

.playerStatTeamLogo,
.playerStatEventLogo{
    height: 1.8vw;
    width: 1.8vw;
    object-fit: contain;
}

/* Sortable table headers */
#playerMatchesStatstable th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover = button-like */
#playerMatchesStatstable th[data-sort]:hover {
    background-color: #1f2937; /* dark hover */
    color: #ffffff;
}

/* Arrow base */
#playerMatchesStatstable th[data-sort]::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: 0;
}

/* Ascending */
#playerMatchesStatstable th.sorted-asc::after {
    content: "▲";
    opacity: 1;
    font-size: 0.6vw;
}

/* Descending */
#playerMatchesStatstable th.sorted-desc::after {
    content: "▼";
    opacity: 1;
    font-size: 0.6vw;
}

.playerStatsShowMoreTile {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    font-size: 1.2vw;
    padding: 0.5vw;
    width: 60%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin-bottom: 1vw;
    text-decoration: none;
    border: none;
    border-radius: 0%;
    margin: auto auto;
    display: block;
    margin: auto;
}

.playerStatsShowMoreTile:hover {
    background-color: var(--bg-main);
    transform: translateY(-0.5vw);
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.playerOpsShowMoreTile {
    background-color: var(--bg-secondary);
    color: var(--text-main);
    font-size: 1.2vw;
    padding: 0.5vw;
    width: 60%;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    margin-bottom: 1vw;
    text-decoration: none;
    border: none;
    border-radius: 0%;
    margin: auto auto;
    display: block;
    margin: auto;
}

.playerOpsShowMoreTile:hover {
    background-color: var(--bg-main);
    transform: translateY(-0.5vw);
    box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* ======================================================
   AWARDS GRID
====================================================== */
#awardsContainer{
    margin: 2vw auto 0;
    max-width: 70vw;
}

#playerAwardsTitle{
    text-align: center;
    font-size: 1.6vw;
    margin: 0 0 1vw;
}

#awardsDiv{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2vw;
    margin-bottom: 1.2vw;
}

#award{
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-soft);
    padding: 1vw;
    text-align: center;
    transition: transform 0.2s ease;
}

#award:hover{
    transform: translateY(-0.25vw);
}

#awardImage{
    height: 4.5vw;
    width: 4.5vw;
    object-fit: contain;
    margin: 0 auto 0.6vw;
}

.awardCaption{
    font-size: 0.9vw;
    color: var(--text-main);
    opacity: 0.95;
}

/* ======================================================
   TABS (Operator Stats / Match Stats)
====================================================== */
.tab{
    display: flex;
    justify-content: center;
    gap: 0.8vw;
    margin: 4vw auto 1vw;
    flex-wrap: wrap;
}

.tablinks{
    background: transparent;
    border: 1px solid var(--border-soft);
    color: var(--text-main);
    padding: 0.6vw 1.2vw;
    font-size: 0.95vw;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tablinks:hover{
    background: var(--accent-soft);
    border-color: var(--accent);
}

.tablinks.active{
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.tabcontent{
    max-width: 70vw;
    margin: 0 auto 2vw;
}

/* ======================================================
   MATCH TYPE FILTER (dropdown)
====================================================== */
#matchTypeFilter{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8vw;
    margin: 1vw 0 1vw;
    flex-wrap: wrap;
}

#typeChoiceLabel{
    font-size: 0.95vw;
    color: var(--text-muted);
}

#typeChoice{
    background: var(--bg-secondary);
    color: var(--text-main);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0.5vw 0.8vw;
    font-size: 0.95vw;
    outline: none;
}

#typeChoice:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 0.25vw rgba(135, 206, 250, 0.18);
}

/* =========================
   TEAM PAGE – DESKTOP / TABLET
   ========================= */

/* Section containers (match other pages) */
#activeRosterDiv,
#recentPlacingsDiv,
#recentMatchesDiv,
#teamStatsDiv,
#playerstatsdiv,
#mapstatsdiv{
    width: 100%;
    max-width: 70vw;
    margin: 1.2vw auto;
    padding: 1.2vw;
    border-radius: 0.9vw;
    box-sizing: border-box;
}

#teamMainDiv {
    padding: 1.5vw;
    max-width: 70vw;
    margin: 2vw auto;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);
}

/* Team logo */
#teamimagecontainer{
    display: flex;
    justify-content: center;
    margin: 1vw 0;
}
#teamimage{
    width: 100%;
    height: 13vw;
    width: 17vw;
    object-fit: contain;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 1.2vw;
    margin: 0 auto;
    margin-bottom: 2vw;
    margin-top: 2vw;
}

/* ---------- TABLES ---------- */
#rostertable,
#recentPlacingsTable,
#statstable,
#TeamMapStatstable{
    width: 80%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    width: 100%;
    table-layout: fixed;
}

/* Headings */
#activeRosterHeader,
#playerAwardsTitle{
    text-align: center;
    margin: 0.8vw 0 1.2vw;
}

/* Table headers */
#rostertable th,
#recentPlacingsTable th,
#statstable th,
#TeamMapStatstable th{
    background: var(--bg-secondary);
    font-weight: 600;
}

#rostertable th,
#recentPlacingsTable th,
#statstable th,
#TeamMapStatstable th,
#rostertable td,
#recentPlacingsTable td,
#statstable td,
#TeamMapStatstable td{
    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}


/* Row separators + hover (matches other pages) */
#rostertable tr,
#recentPlacingsTable tr,
#statstable tr,
#TeamMapStatstable tr{
    border-bottom: 0.08vw solid rgba(255,255,255,0.08);
    cursor: pointer;
}

#rostertable tbody tr:hover,
#recentPlacingsTable tbody tr:hover,
#statstable tbody tr:hover,
#TeamMapStatstable tbody tr:hover{
    background: rgba(255,255,255,0.04);
}

.teamPlacingCell {
    width: 1vw;
}

/* Table cell styling for map images */
td.mapCell {
    position: relative;
    width: 9vw;         /* adjust as needed */
    height: 5vw;         /* adjust as needed */
    color: white;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Add a semi-transparent overlay for readability */
td.mapCell::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);  /* dark overlay */
    z-index: 1;
}

td.mapCell span {
    position: relative;
    z-index: 2;  /* text above overlay */
}

/* Sortable table headers */
#TeamMapStatstable th[data-sort] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover = button-like */
#TeamMapStatstable th[data-sort]:hover {
    background-color: #1f2937; /* dark hover */
    color: #ffffff;
}

/* Arrow base */
#TeamMapStatstable th[data-sort]::after {
    content: "";
    position: absolute;
    right: 0.2vw;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6vw;
    opacity: 0;
}

/* Ascending */
#TeamMapStatstable th.sorted-asc::after {
    content: "▲";
    opacity: 1;
}

/* Descending */
#TeamMapStatstable th.sorted-desc::after {
    content: "▼";
    opacity: 1;
}

/* =========================
   MAP DATE FILTER – DESKTOP
   ========================= */

#mapDateFilter{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 1vw;
    margin: 1vw auto 1.5vw;
    padding: 1vw 1.2vw;
    max-width: 40vw;
    background: rgba(255,255,255,0.03);
    border-radius: 0.9vw;
}

/* Labels */
#mapDateFilter .statFormLabel{
    display: flex;
    flex-direction: column;
    font-size: 0.8vw;
    color: var(--text-muted);
}

/* Date inputs */
#mapDateFilter input[type="date"]{
    margin-top: 0.4vw;
    padding: 0.45vw 0.6vw;
    font-size: 0.8vw;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.5vw;
}

/* Filter button */
#mapDateFilterBtn{
    padding: 0.55vw 1.2vw;
    font-size: 0.8vw;
    background: lightskyblue;
    color: #000;
    border: none;
    border-radius: 0.6vw;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

#mapDateFilterBtn:hover{
    background: #9ad9ff;
    transform: translateY(-0.08vw);
}

#operatorsDisclaimer {
    font-size: 0.75vw;
    color: red;
    text-align: center;
}

/* =========================
   RECORDS PAGE
   ========================= */

/* top selects (Records Type + Match Type) */
#yearChoiceLabel,
#matchesChoiceLabel{
    display: block;
    text-align: center;
    margin: 1vw auto 0.4vw;
    font-size: 0.9vw;
    color: var(--text-muted);
}

#yearsChoice{
    display: block;
    margin: 0 auto 1.2vw;
    padding: 0.55vw 0.8vw;
    width: 18vw;
    max-width: 90%;
    font-size: 0.85vw;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0.7vw;
    outline: none;
}

#yearsChoice:focus{
    border-color: rgba(135,206,250,0.7);
    box-shadow: 0 0 0 0.2vw rgba(135,206,250,0.18);
}

/* warning text */
#recordsWarning,
#matchRecordsWarning{
    text-align: center;
    margin: 0.6vw auto 1.2vw;
    font-size: 0.75vw;
    color: var(--text-muted);
}

/* grid container for the record cards */
#recordListDivContainer{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2vw;
    width: 100%;
    margin: 1vw auto 2vw;
    align-items: start;
}

/* each record card */
#recordListDiv{
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    padding: 1vw 1.2vw;
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);
}

#recordListDiv h2{
    margin: 0 0 0.8vw;
    font-size: 1vw;
    text-align: center;
}

/* link in the card header */
#fullrecordslink{
    color: lightskyblue;
    text-decoration: none;
}

#fullrecordslink:hover{
    text-decoration: underline;
}

/* each record line */
#record{
    margin: 0.45vw 0;
    font-size: 0.85vw;
    line-height: 1.25vw;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* player name link */
#playerRecordName{
    color: var(--text-main);
    text-decoration: none;
    font-weight: 600;
}

#playerRecordName:hover{
    color: lightskyblue;
}

/* match link at the end of the row */
.matchRecordsLinks{
    color: lightskyblue;
    text-decoration: none;
    font-weight: 600;
}

.matchRecordsLinks:hover{
    text-decoration: underline;
}

/* little team logo in the record row */
#record #playerEventLogo{
    width: 1.1vw;
    height: 1.1vw;
    object-fit: contain;
    vertical-align: middle;
    margin: 0 0.35vw;
}

.recordsListContentDiv {
    text-align: center;
}

/* =========================
   TOP 20 PAGE
   ========================= */

/* year dropdown (matches your other filter styling) */
#yearChoiceLabel{
    display: block;
    text-align: center;
    margin: 1vw auto 0.4vw;
    font-size: 0.9vw;
    color: var(--text-muted);
}

#yearsChoice{
    display: block;
    margin: 0 auto 1.2vw;
    padding: 0.55vw 0.8vw;
    width: 18vw;
    max-width: 90%;
    font-size: 0.85vw;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0.7vw;
    outline: none;
}

#yearsChoice:focus{
    border-color: rgba(135,206,250,0.7);
    box-shadow: 0 0 0 0.2vw rgba(135,206,250,0.18);
}

/* list container */
#top20ListDiv{
    width: 100%;
    margin: 1vw auto 2vw;
    display: flex;
    flex-direction: column;
    gap: 0.9vw;
}

/* each entry (clickable row/card) */
.top20PlayerLink{
    text-decoration: none;
    color: inherit;
    display: block;
}

.top20EntryDiv{
    display: grid;
    grid-template-columns: 6vw 6vw 1fr;
    align-items: center;
    gap: 1vw;
    width: 100%;
    padding: 0.9vw 1vw;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.top20EntryDiv:hover{
    transform: translateY(-0.1vw);
    border-color: rgba(135,206,250,0.35);
    background: rgba(255,255,255,0.04);
}

/* number */
.top20NumberDiv{
    text-align: center;
    font-size: 1.2vw;
    font-weight: 700;
    color: var(--text-main);
}

.top20NumberDiv p{
    margin: 0;
}

.top20NumberSpan{
    color: lightskyblue;
}

/* headshot */
.top20PlayerImgDiv{
    display: flex;
    align-items: center;
    justify-content: center;
}

.top20PlayerImg{
    width: 6vw;
    height: 6vw;
    object-fit: cover;
    border-radius: 0.9vw;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.25);
    object-fit: contain;
}

/* info block */
.top20PlayerInfoDiv{
    display: flex;
    flex-direction: column;
    gap: 0.35vw;
}

/* username + team */
.top20UserImgDiv{
    display: flex;
    align-items: center;
    gap: 0.6vw;
}

.top20PlayerUsername{
    margin: 0;
    font-size: 1.15vw;
    font-weight: 700;
    color: var(--text-main);
}

.top20TeamImg{
    width: 1.6vw;
    height: 1.6vw;
    object-fit: contain;
}

/* name + flag */
.top20NameFlagDiv{
    display: flex;
    align-items: center;
    gap: 0.6vw;
    opacity: 0.95;
}

.top20PlayerName{
    margin: 0;
    font-size: 0.9vw;
    color: var(--text-muted);
}

.top20CountryImg{
    width: 1.25vw;
    height: 1.25vw;
    object-fit: contain;
}

/* =========================
   ALL-TIME STATS (fullstats.php)
   ========================= */

/* top switch button */
#eventstatsbtndiv{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6vw;
    margin: 0.8vw auto 1.2vw;
    font-size: 0.9vw;
    color: var(--text-muted);
}

#eventStatsbtn{
    display: inline-block;
    padding: 0.45vw 0.9vw;
    border-radius: 0.7vw;
    text-decoration: none;
    font-size: 0.85vw;
    font-weight: 600;
    color: var(--text-main);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
#eventStatsbtn:hover{
    background: rgba(255,255,255,0.07);
    border-color: rgba(135,206,250,0.35);
    transform: translateY(-0.05vw);
}

/* filter form */
#statsFilterForm{
    width: 92%;
    margin: 1vw auto 1.2vw;
    padding: 1vw 1.2vw;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);

    display: flex;
    flex-wrap: wrap;
    gap: 0.9vw 1.2vw;
    align-items: center;
    justify-content: center;
}

#statsFilterForm .statFormLabel{
    font-size: 0.85vw;
    color: var(--text-muted);
    margin: 0;
}

/* number/date inputs */
#min_rounds,
#statsFilterForm input[type="date"]{
    padding: 0.5vw 0.7vw;
    font-size: 0.85vw;
    border-radius: 0.7vw;
    border: 1px solid rgba(255,255,255,0.14);
    background: var(--bg-card);
    color: var(--text-main);
    outline: none;
}

#min_rounds:focus,
#statsFilterForm input[type="date"]:focus{
    border-color: rgba(135,206,250,0.7);
    box-shadow: 0 0 0 0.2vw rgba(135,206,250,0.18);
}

/* group the dates nicely */
#dateInputs{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6vw;
    flex-wrap: wrap;
}

/* apply button */
#statsFormApplyBtn{
    padding: 0.55vw 1.1vw;
    border-radius: 0.8vw;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(135,206,250,0.15);
    color: var(--text-main);
    font-size: 0.85vw;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
#statsFormApplyBtn:hover{
    background: rgba(135,206,250,0.22);
    border-color: rgba(135,206,250,0.45);
    transform: translateY(-0.05vw);
}

/* sorting links in table header */
.tablesortlink{
    text-decoration: none;
    color: var(--text-main);
    font-weight: 700;
    opacity: 0.9;
}
.tablesortlink:hover{
    opacity: 1;
    color: lightskyblue;
}

.tablesortlink.activeSort{
    color: lightskyblue;
    opacity: 1;
}

/* keep header caret aligned */
.tablesortlink .fa{
    margin-left: 0.25vw;
}

/* pagination */
#pagination-page-lbl{
    text-align: center;
    margin: 1vw auto 0.6vw;
    font-size: 0.9vw;
    color: var(--text-muted);
}

#pagination-btn{
    display: inline-block;
    margin: 0.2vw 0.35vw;
    padding: 0.45vw 0.8vw;
    border-radius: 0.7vw;
    text-decoration: none;

    font-size: 0.85vw;
    font-weight: 700;
    color: var(--text-main);

    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.14);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

#pagination-btn:hover{
    background: rgba(255,255,255,0.07);
    border-color: rgba(135,206,250,0.35);
    transform: translateY(-0.05vw);
}

#pagination-div {
    text-align: center;
    margin-bottom: 2vw;
}

#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.4s ease;
}
.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #00bcd4;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================
   TEAMS PAGE (teams.php)
   ========================= */

/* Tier containers */
#teamdisplaydiv,
#T2teamdisplaydiv{
    width: 92%;
    margin: 1.2vw auto 2vw;
    padding: 1.2vw 1.2vw 1.5vw;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.2vw;
}

#teamdisplaydiv h2,
#T2teamdisplaydiv h2{
    width: 100%;
    text-align: center;
    margin: 0.2vw 0 0.8vw;
    font-size: 1.5vw;
    letter-spacing: 0.05vw;
}

/* each team logo tile */
#teamblock{
    width: 10vw;
    height: 10vw;
    min-width: 110px;
    min-height: 110px;

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

    border-radius: 1vw;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 0.35vw 0.9vw rgba(0,0,0,0.25);
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

#teamblock:hover{
    transform: translateY(-0.15vw);
    border-color: rgba(135,206,250,0.45);
    background: rgba(255,255,255,0.06);
}

/* ensure logo scales nicely (your HTML uses width/height attrs, this keeps it clean) */
#teamblockimage{
    width: 7.2vw;
    height: 7.2vw;
    max-width: 150px;
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0.25vw 0.5vw rgba(0,0,0,0.35));
}

/* make anchor behave like a block inside the tile */
#teamblock a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* =========================
   TRANSFERS PAGE (transfers.php)
   ========================= */

/* table wrapper look (matches your other "resultdiv card" style) */
#transfertable{
    width: 92%;
    margin: 1.2vw auto 1.2vw;
    border-collapse: collapse;
    border-spacing: 0;
    overflow: hidden;
    border-radius: 1vw;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);
}

/* header */
#transfertable th{
    padding: 0.8vw 0.9vw;
    font-size: 1.0vw;
    letter-spacing: 0.04vw;
    text-align: left;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    white-space: nowrap;
}

/* rows */
#transfertable td{
    padding: 0.75vw 0.9vw;
    font-size: 0.95vw;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    vertical-align: middle;
}

/* zebra + hover like other stat tables */
#transfertable tr:nth-child(even) td{
    background: rgba(255,255,255,0.02);
}
#transfertable tr:hover td{
    background: rgba(135,206,250,0.08);
}

/* center the arrow column */
#transfertable th:nth-child(3),
#transfertable td:nth-child(3){
    text-align: center;
    width: 4%;
}

/* team logos in the table */
#transfertable #playerEventLogo{
    height: 1.25vw;
    width: 1.25vw;
    margin-left: 0.4vw;
    vertical-align: middle;
    object-fit: contain;
    filter: drop-shadow(0 0.15vw 0.35vw rgba(0,0,0,0.35));
}

/* make links behave like your other tables */
#transfertable a#playerprofilelink{
    text-decoration: none;
    font-weight: 500;
}
#transfertable a#playerprofilelink:hover{
    text-decoration: underline;
}

/* pagination spacing for this page */
#pagination-page-lbl{
    margin: 0.8vw 0 0.6vw;
    text-align: center;
    font-size: 1vw;
}

/* =========================
   ABOUT PAGE (about.php)
   ========================= */

#abouttitle{
    width: 92%;
    margin: 1.2vw auto 0.8vw;
    text-align: center;
    font-size: 2.1vw;
    letter-spacing: 0.08vw;
}

#aboutp{
    width: 92%;
    margin: 0.8vw auto;
    font-size: 1.05vw;
    line-height: 1.7;
    text-align: left;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    padding: 1.1vw 1.2vw;
    box-shadow: 0 0.35vw 0.9vw rgba(0,0,0,0.22);
}

/* nicer spacing between the paragraphs (your HTML has <br> too, this just helps consistency) */
#aboutp + #aboutp{
    margin-top: 1.1vw;
}

/* =========================
   ALL-TIME EVENT STATS 
   ========================= */

#roundsFilterForm {
    width: 92%;
    margin: 1vw auto 1.2vw;
    padding: 1vw 1.2vw;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 1vw;
    box-shadow: 0 0.4vw 1vw rgba(0,0,0,0.25);
    display: flex;
    flex-wrap: wrap;
    gap: 0.9vw 1.2vw;
    align-items: center;
    justify-content: center;
}

#roundsFilterForm #minRoundsLabel{
    font-size: 0.85vw;
    color: var(--text-muted);
    margin: 0;
}

/* number/date inputs */
#min_rounds,
#roundsFilterForm input[type="date"]{
    padding: 0.5vw 0.7vw;
    font-size: 0.85vw;
    border-radius: 0.7vw;
    border: 1px solid rgba(255,255,255,0.14);
    background: var(--bg-card);
    color: var(--text-main);
    outline: none;
}

#min_rounds:focus,
#roundsFilterForm input[type="date"]:focus{
    border-color: rgba(135,206,250,0.7);
    box-shadow: 0 0 0 0.2vw rgba(135,206,250,0.18);
}

/* apply button */
#minRoundsApplyBtn{
    padding: 0.55vw 1.1vw;
    border-radius: 0.8vw;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(135,206,250,0.15);
    color: var(--text-main);
    font-size: 0.85vw;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

#minRoundsApplyBtn:hover{
    background: rgba(135,206,250,0.22);
    border-color: rgba(135,206,250,0.45);
    transform: translateY(-0.05vw);
}

#eventFromLogo {
    height: 1.8vw;
    width: 1.8vw;
    object-fit: contain;
    margin-left: 0.5vw;
}

.eventNameCell {
    width: 15vw
}

#fulleventstatstable {
    /* border: 1px solid; */
    width: 80%;
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    margin: 1vw 0 2vw;
}

#fulleventstatstable th {
    color: var(--text-main);
    background: var(--bg-secondary);
    font-weight: 600;

    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}

#fulleventstatstable td {
    color: var(--text-muted);
    vertical-align: middle;
    padding: 0.8vw 0.8vw;
    font-size: 0.9vw;
    border-bottom: 1px solid var(--border-soft);
    text-align: center;
    white-space: nowrap;
}

#fulleventstatstable tr:hover td {
    background: rgba(135, 206, 250, 0.06);
}

.fullEventLogoDiv {
    display: flex;
}

/* =========================
   LOGIN PAGE (login.php)
   Targets your existing IDs/classes:
   #createAccountdiv, #createAccountHeader, .signupInput, .signUpBtn,
   #loginFailed, #createAccountLink
   ========================= */

/* Center the whole card on the page */
#createAccountdiv{
    width: 34vw;
    margin: 3.5vw auto 4vw;
    padding: 2.2vw 2.2vw 1.8vw;
    background: rgba(255,255,255,0.03);
    border: 0.12vw solid rgba(255,255,255,0.10);
    border-radius: 1.2vw;
    box-shadow: 0 0.8vw 2.2vw rgba(0,0,0,0.35);
    text-align: left;
}

/* Title */
#createAccountHeader{
    text-align: center;
    font-size: 2.2vw;
    letter-spacing: 0.10vw;
    margin: 0 0 1.4vw;
}

/* error message */
#loginFailed{
    width: 100%;
    margin: 0 0 1.2vw;
    padding: 0.8vw 1vw;
    border-radius: 0.9vw;
    border: 0.12vw solid rgba(255, 90, 90, 0.35);
    background: rgba(255, 90, 90, 0.10);
    color: #ffd1d1;
    text-align: center;
    font-size: 1vw;
}

/* Form layout */
#createAccountdiv form{
    width: 100%;
}

#createAccountdiv label{
    display: block;
    margin: 0.9vw 0 0.35vw;
    font-size: 1vw;
    color: rgba(230,230,230,0.9);
    letter-spacing: 0.03vw;
}

/* Inputs */
#createAccountdiv .signupInput{
    width: 100%;
    height: 2.8vw;
    padding: 0 1vw;
    border-radius: 0.9vw;
    border: 0.12vw solid rgba(255,255,255,0.10);
    background: rgba(15,17,21,0.65);
    color: #e6e6e6;
    outline: none;
    font-size: 1vw;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

#createAccountdiv .signupInput::placeholder{
    color: rgba(154,164,178,0.9);
}

#createAccountdiv .signupInput:focus{
    border-color: rgba(135, 206, 250, 0.60);
    box-shadow: 0 0 0 0.22vw rgba(135, 206, 250, 0.16);
}

/* Remove the <br> gaps without touching markup */
#createAccountdiv br{
    display: none;
}

/* Button */
#createAccountdiv .signUpBtn{
    width: 100%;
    margin-top: 1.4vw;
    height: 2.9vw;
    border: 0;
    border-radius: 0.9vw;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.05vw;
    letter-spacing: 0.05vw;

    background: rgba(135, 206, 250, 0.22);
    color: #e6e6e6;
    box-shadow: 0 0.7vw 1.6vw rgba(0,0,0,0.25);
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

#createAccountdiv .signUpBtn:hover{
    transform: translateY(-0.15vw);
    background: rgba(135, 206, 250, 0.30);
    box-shadow: 0 0.9vw 2.1vw rgba(0,0,0,0.30);
}

#createAccountdiv .signUpBtn:active{
    transform: translateY(0);
}

/* "Create Account" link */
#createAccountdiv p{
    margin-top: 1.2vw;
    text-align: center;
    font-size: 0.95vw;
    color: rgba(230,230,230,0.85);
}

#createAccountLink{
    color: lightskyblue;
    text-decoration: none;
    border-bottom: 0.12vw solid rgba(135, 206, 250, 0.35);
    padding-bottom: 0.1vw;
    transition: border-color 160ms ease, opacity 160ms ease;
}

#createAccountLink:hover{
    border-color: rgba(135, 206, 250, 0.75);
    opacity: 0.95;
}

/* =========================
   SESSION TIMEOUT PAGE
   Uses: #resultdiv, #createAccountHeader, #nowLoginLink
   ========================= */

/* Title line */
#createAccountHeader{
    margin: 0;
    font-size: 1.7vw;
    letter-spacing: 0.08vw;
    line-height: 1.25;
}

/* "Ok" link styled like a button */
#nowLoginLink{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    margin-top: 1.5vw;
    min-width: 10vw;
    height: 2.8vw;
    padding: 0 1.4vw;

    border-radius: 0.9vw;
    border: 0.12vw solid rgba(135, 206, 250, 0.35);
    background: rgba(135, 206, 250, 0.18);
    color: #e6e6e6;

    text-decoration: none;
    font-size: 1.05vw;
    letter-spacing: 0.05vw;

    box-shadow: 0 0.7vw 1.6vw rgba(0,0,0,0.25);
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

#nowLoginLink:hover{
    transform: translateY(-0.15vw);
    background: rgba(135, 206, 250, 0.26);
    border-color: rgba(135, 206, 250, 0.60);
    box-shadow: 0 0.9vw 2.1vw rgba(0,0,0,0.30);
}

#nowLoginLink:active{
    transform: translateY(0);
}


/* ======================================================
   PRIVACY POLICY PAGE (PrivacyPolicy.php)
====================================================== */

#hofQualDiv{
    width: 100%;
    max-width: 70vw;
    margin: 2.5vw auto;
    padding: 2.2vw 2.4vw;

    background: var(--bg-card);
    border: 0.12vw solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);

    color: var(--text-main);
}

/* Title + effective date */
#qualificationsTitle{
    text-align: center;
    font-size: 2.0vw;
    letter-spacing: 0.08vw;
    margin-bottom: 0.6vw;
}

#hofQualDiv #disclaimer{
    text-align: center;
    color: var(--text-muted);
    font-size: 1.05vw;
    margin: 0;
}

/* Intro paragraph */
#PPIntro{
    color: var(--text-main);
    font-size: 1.08vw;
    line-height: 1.55;
    margin-top: 1.2vw;
}

/* Ordered list layout */
#hofQualDiv ol{
    margin-top: 1.4vw;
    padding-left: 1.6vw;
}

#hofQualDiv li#PPHeader{
    font-size: 1.25vw;
    margin: 1.4vw 0 0.6vw;
    color: var(--text-main);
    font-weight: 600;
}

/* Body text under headers */
#PPListContent{
    font-size: 1.05vw;
    line-height: 1.6;
    color: var(--text-muted);
    margin: 0.3vw 0 0.9vw;
}

/* Bullet lists */
#hofQualDiv ul{
    margin: 0.2vw 0 1.0vw 1.3vw;
    padding: 0;
}

#hofQualDiv ul li{
    font-size: 1.03vw;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0.25vw 0;
}

/* Links */
#PPEmailLink{
    color: var(--accent);
    text-decoration: none;
    border-bottom: 0.12vw solid transparent;
    transition: border-color 160ms ease, opacity 160ms ease;
}

#PPEmailLink:hover{
    border-bottom-color: var(--accent);
    opacity: 0.95;
}


/* ======================================================
   USER PROFILE PAGE (user-profile.php)
   Add this to updatedStyling.css
====================================================== */

#userFullSizeProfileImg{
    display: block;
    width: 16vw;
    height: 16vw;
    border-radius: 2vw;
    object-fit: cover;
    margin: 2vw auto 1.6vw auto;

    border: 0.12vw solid rgba(255,255,255,0.08);
    box-shadow: 0 1vw 2vw rgba(0,0,0,0.35);
}

#userProfileInfoDiv{
    width: min(48vw, 92vw);
    margin: 1.4vw auto 0 auto;
    padding: 1.6vw 1.6vw;

    background: rgba(255,255,255,0.04);
    border: 0.12vw solid rgba(255,255,255,0.08);
    border-radius: 1.2vw;
    box-shadow: 0 1vw 2vw rgba(0,0,0,0.25);
}

#userProfileInfoDiv p{
    margin: 0.9vw 0;
    font-size: 1.05vw;
    color: #e6e6e6;
    letter-spacing: 0.02vw;
}

#userProfileInfoDiv p span{
    display: inline-block;
    min-width: 7.5vw;
    color: #9aa4b2;
}

#profileEditInfoBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 0.8vw;
    width: 2.4vw;
    height: 2.4vw;

    border-radius: 0.8vw;
    border: 0.12vw solid rgba(135, 206, 250, 0.35);
    background: rgba(135, 206, 250, 0.16);
    color: #e6e6e6;
    text-decoration: none;

    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

#profileEditInfoBtn:hover{
    transform: translateY(-0.12vw);
    background: rgba(135, 206, 250, 0.24);
    border-color: rgba(135, 206, 250, 0.55);
    box-shadow: 0 0.8vw 1.8vw rgba(0,0,0,0.28);
}

/* ======================================================
   EDIT PROFILE PAGE (edit-user-profile.php)
   Add this to updatedStyling.css
====================================================== */

/* Make the edit page forms feel like your other “card” sections */
#changeUsernameForm,
#changeEmailForm,
#changePasswordForm{
    width: min(52vw, 92vw);
    margin: 1.8vw auto;
    padding: 1.8vw 1.8vw;

    background: rgba(255,255,255,0.04);
    border: 0.12vw solid rgba(255,255,255,0.08);
    border-radius: 1.2vw;
    box-shadow: 0 1vw 2vw rgba(0,0,0,0.25);
}

/* Labels inline + consistent spacing */
#changeUsernameForm label,
#changeEmailForm label,
#changePasswordForm label{
    display: inline-block;
    width: 13vw;
    margin: 0.6vw 0;
    font-size: 1.05vw;
    color: #9aa4b2;
}

/* Inputs: match your signupInput look but ensure width is consistent */
#changeUsernameForm .signupInput,
#changeEmailForm .signupInput,
#changePasswordForm .signupInput{
    margin: 0.6vw 0;
    width: 100%;
    height: 2.8vw;
    padding: 0 1vw;
    border-radius: 0.9vw;
    border: 0.12vw solid rgba(255,255,255,0.10);
    background: rgba(15,17,21,0.65);
    color: #e6e6e6;
    outline: none;
    font-size: 1vw;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

/* Disabled inputs should look intentionally disabled */
#changeUsernameForm .signupInput:disabled,
#changeEmailForm .signupInput:disabled{
    opacity: 0.65;
    cursor: not-allowed;
    filter: saturate(0.8);
}

/* Buttons (changeProfileBtn) – same “pill button” vibe as your newer buttons */
.changeProfileBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 1.1vw;
    min-width: 14vw;
    height: 2.8vw;
    padding: 0 1.4vw;

    border-radius: 0.9vw;
    border: 0.12vw solid rgba(135, 206, 250, 0.35);
    background: rgba(135, 206, 250, 0.18);
    color: #e6e6e6;

    text-decoration: none;
    font-size: 1.05vw;
    letter-spacing: 0.05vw;

    box-shadow: 0 0.7vw 1.6vw rgba(0,0,0,0.25);
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.changeProfileBtn:hover{
    transform: translateY(-0.12vw);
    background: rgba(135, 206, 250, 0.24);
    border-color: rgba(135, 206, 250, 0.55);
    box-shadow: 0 0.9vw 2vw rgba(0,0,0,0.30);
}

.changeProfileBtn:active{
    transform: translateY(0);
}

/* Slightly reduce spacing between stacked password labels/inputs */
#changePasswordForm label{
    width: 16vw;
}



/* ================================
   MAP SITE DETAILS (expand row)
================================ */

/* the big cell that spans the row */
.detailsCell{
    padding: 1.2vw 1.4vw;
    background: rgba(255,255,255,0.02);
    border-top: 0.12vw solid rgba(255,255,255,0.08);
}

/* inset wrapper (card feel) */
.siteDetailsWrap{
    width: 100%;
    overflow: hidden;

    border-radius: 1.1vw;
    border: 0.12vw solid rgba(255,255,255,0.08);
    background: rgba(15,17,21,0.55);

    box-shadow: 0 1.1vw 2.4vw rgba(0,0,0,0.35);
}

/* inner table */
.siteDetailsTable{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* header */
.siteDetailsTable thead th{
    text-align: left;
    padding: 0.9vw 1vw;

    color: rgba(154,164,178,0.95);
    font-size: 0.95vw;
    letter-spacing: 0.05vw;
    font-weight: 600;

    background: rgba(255,255,255,0.03);
    border-bottom: 0.12vw solid rgba(255,255,255,0.08);
}

/* body cells */
.siteDetailsTable tbody td{
    padding: 0.9vw 1vw;
    color: #e6e6e6;
    font-size: 1vw;
    
    border-bottom: 0.12vw solid rgba(255,255,255,0.06);
}

/* soft zebra */
.siteDetailsTable tbody tr:nth-child(even){
    background: rgba(255,255,255,0.02);
}

/* hover */
.siteDetailsTable tbody tr:hover{
    background: rgba(135,206,250,0.06);
}

/* align numbers better */
.siteDetailsTable .percentageCell,
.siteDetailsTable .statCell{
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* site name cell */
.siteDetailsTable .siteCell{
    font-weight: 600;
    letter-spacing: 0.02vw;
}

.siteCell {
    width: 10vw;
}

.siteHeader {
    width: 20vw;
}

/* loading / error / empty blocks inside details */
.detailsLoading,
.detailsError,
.siteDetailsEmpty{
    padding: 1vw 0.4vw;
    color: rgba(154,164,178,0.95);
    font-size: 1.05vw;
}

.detailsError{
    color: rgba(255,120,120,0.95);
}

/* Optional: show row is open */
tr.row-open{
    outline: 0.15vw solid rgba(135,206,250,0.22);
    outline-offset: -0.15vw;
}


/* ======================================================
   TOURNAMENT BRACKET (POSITION-BASED GRID + CONNECTORS)
   Update: bracketCard height auto-fits content,
           width stays fixed, horizontal scroll works.
====================================================== */

/* Card wrapper */
.bracketCard{
  background: var(--bg-card, #1c2230);
  border: 0.1vw solid var(--border-soft, rgba(255,255,255,0.08));
  border-radius: 1vw;
  padding: 1vw;

  /* ✅ Keep width “normal” (doesn't expand with bracket) */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* ✅ Horizontal scroll if bracket is wider than the card */
  overflow-x: auto;

  /* ✅ Let height grow to fit bracket (remove fixed height) */
  height: auto;

  /* Optional: avoids vertical scrollbar inside card */
  overflow-y: visible;
}

/* Header */
.bracketHeader{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1vw;
  margin-bottom: 1vw;
}
.bracketTitle{
  color: var(--text-main, #e6e6e6);
  font-weight: 700;
  font-size: 1.1rem;
}
.bracketSubtitle{
  color: var(--text-muted, #9aa4b2);
  font-size: 0.95rem;
}

/* Container */
.bracket{
  --colW: 10vw;       /* column width */
  --rowH: 3vw;        /* match slot height */
  --colGap: 1vw;

  --gapRowH: 0.2vw;   /* EMPTY spacer slot height (smaller) */
  --padY: 2vw;

  /* line styling */
  --line: rgba(135, 206, 250, 0.35);
  --lineStrong: rgba(135, 206, 250, 0.55);
  --lineW: 2;         /* svg stroke width */

  padding: var(--padY) 6px;

  /* ✅ Let bracket define its own height */
  height: auto;

  position: relative;

  /* Important: prevent the bracket from shrinking in a tight container */
  min-width: 100%;
}

/* Grid wrapper so SVG can overlay it */
.bracketGridWrap{
  position: relative;

  /* ✅ This is what makes the bracket wider than the card,
     while the card stays fixed width and scrolls */
  display: inline-block;
}

/* Grid inserted by JS */
.bracketGrid{
  display: grid;
  grid-auto-columns: var(--colW);
  column-gap: var(--colGap);
  row-gap: 0;
  align-items: start;
}

/* Match card spans 2 rows (match + spacer) and is centered */
.bracketGrid .match{
  grid-row: span 2;
  align-self: center;
  position: relative;
}

/* Connector SVG overlay */
.bracketLines{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

/* Match card */
.match{
  padding: 0.5vw;
  border-radius: 0.5vw;
  background: var(--bg-secondary, #161a22);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
}

/* Small tag at top (playoff_round) */
.matchRoundTag{
  color: var(--text-muted, #9aa4b2);
  font-size: 0.6vw;
  margin: 0 0 0.35vw 0.2vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Team row */
.team{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1vw;
  padding: 0.35vw 0.5vw;
  border-radius: 0.5vw;
  background: rgba(255,255,255,0.03);
  color: var(--text-main, #e6e6e6);
  font-size: 0.62vw;
}
.team + .team{ margin-top: 8px; }

.bracketTeamImg{
  width: 1vw;
  height: 1vw;
  object-fit: contain;
}

.teamName{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.95;
}
.teamScore{
  color: var(--text-muted, #9aa4b2);
  font-variant-numeric: tabular-nums;
}

/* Winner highlight */
.team.isWinner{
  outline: 1px solid var(--lineStrong);
  background: rgba(135, 206, 250, 0.12);
}
.team.isLoser{ opacity: 0.65; }


/* Hover / focus (desktop) */
.match:hover,
.match:focus-visible{
  transform: translateY(-2px);
  border-color: var(--lineStrong, rgba(135, 206, 250, 0.55));
  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    0 0 0 1px rgba(135, 206, 250, 0.16);
  background: rgba(135, 206, 250, 0.06);
  outline: none;
}

/* Pressed */
.match:active{
  transform: translateY(0px) scale(0.995);
  box-shadow:
    0 6px 16px rgba(0,0,0,0.28);
}

/* Optional: slightly brighten inner team rows on hover */
.match:hover .team,
.match:focus-visible .team{
  background: rgba(255,255,255,0.045);
}



/* ======================================================
   SIDE ADS (hide on mobile/tablet)
====================================================== */
@media (max-width: 1024px) {
    .leftsideAdDiv,
    .rightsideAdDiv {
        display: none;
    }
}


/* ======================================================
   RESPONSIVE SAFETY
====================================================== */
@media (max-width: 900px) {
    html {
        font-size: 14px;
    }

    #indexMainDiv {
        grid-template-columns: 1fr;
    }

    #headerLogo {
        height: 48px;
    }
}

@media (max-width: 1024px) {
    #eventsdisplaydivtwentysix,
    #eventsdisplaydivtwentyfive,
    #eventsdisplaydivtwentyfour,
    #eventsdisplaydivtwentythree,
    #eventsdisplaydivtwentytwo,
    #eventsdisplaydivtwentyone,
    #eventsdisplaydivtwenty,
    #eventsdisplaydivnineteen,
    #eventsdisplaydiveighteen,
    #eventsdisplaydivseventeen,
    #eventsdisplaydivsixteen {
        width: 92vw;
    }

    #eventblockimage {
        width: 72px !important;
        height: 72px !important;
    }
}

/* ======================================================
   MOBILE OVERRIDES
====================================================== */
@media (max-width: 768px) {

    /* -------- BASE -------- */
    html {
        font-size: 15px;
    }

    body {
        line-height: 1.6;
    }

    /* -------- TICKER -------- */
    #ticker-box {
        min-height: 40px !important;
    }

    #ticker-item {
        font-size: 12px;
        padding: 6px 12px;
    }

    #ticker-image {
        height: 18px;
        width: 18px;
    }

    /* -------- HEADER -------- */
    #mainheader {
        height: auto;
        padding: 10px 12px;
        justify-content: space-between;
    }

    #headerLogo {
        height: 65px;
        min-height: unset;
    }

    /* -------- SEARCH -------- */
    .search-container {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    #headerForm {
        width: 100%;
        max-width: 260px;
    }

    #search {
        font-size: 14px;
        padding: 8px 10px;
        min-width: unset;
        width: 100%;
    }

    /* -------- AUTOCOMPLETE -------- */
    .autocomplete-items {
        font-size: 14px;
        max-height: 240px;
    }

    /* -------- NAVBAR -------- */
    #navbar {
        position: static;
        padding: 10px 12px;
    }

    #navBarBtnsDiv {
        justify-content: center;
        gap: 8px;
        margin-left: 0;
    }

    #navbutton {
        font-size: 13px;
        padding: 8px 12px;
    }

    /* -------- MAIN LAYOUT -------- */
    #indexMainDiv {
        max-width: 100%;
        padding: 0 12px;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* -------- ARTICLES -------- */
    .mainarticleImage {
        height: 200px;
    }

    .mainarticleTitle {
        font-size: 18px;
        padding: 12px;
    }

    #mainarticleDate {
        font-size: 12px;
        padding: 0 12px 12px;
    }

    .articleDiv {
        gap: 12px;
        padding: 10px;
    }

    .articleImage {
        width: 96px;
        height: 64px;
    }

    .articleTitle {
        font-size: 15px;
    }

    .articleindexDate {
        font-size: 12px;
    }

    /* -------- RECENT EVENTS -------- */
    #recentEventsDiv {
        padding: 16px;
    }

    .recentEventTileImage {
        height: 56px;
    }

    .recentEventTitle {
        font-size: 16px;
    }

    .recentEventDate {
        font-size: 13px;
    }

    /* -------- FOOTER -------- */
    #footerContainer {
        padding: 20px 12px;
    }

    #sociala {
        font-size: 13px;
    }

    #footerBottomDiv {
        font-size: 12px;
    }

    #footerCopyrightLogo {
        height: 40px;
    }

    /* --- SEARCH BUTTON FIX --- */
    #headerForm {
        display: flex;
        align-items: center;
    }

    #search {
        flex: 1 1 auto;
        min-width: 0; /* IMPORTANT for flexbox */
    }

    #headerSearchSubmit {
        flex: 0 0 42px; /* fixed button width */
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .articlePageDiv {
        width: 100%;
        margin: 14px auto;
        padding: 16px 14px;
        border-radius: 14px;   /* fixed for mobile */
    }

    #articleTitle {
        font-size: 20px;
        margin-bottom: 10px;
    }

    #articleDate {
        font-size: 12px;
        margin-bottom: 12px;
    }

    #articlepageimage {
        max-height: 260px;
        margin: 12px 0 14px;
    }

    #articleBody {
        font-size: 15px;
        margin-bottom: 14px;
    }

    #backButton {
        width: 44px;
        height: 44px;
        margin-bottom: 10px;
    }

    /* Cards become stacked/roomy */
    #eventblock {
        gap: 12px;
        padding: 12px;
        margin-bottom: 12px;
    }

    .eventBlockTitle {
        font-size: 16px;
    }

    #eventBlockDate {
        font-size: 13px;
    }

    /* Filter panel becomes a bottom sheet */
    #eventFilterDiv {
        top: 120px;                /* below header/nav on mobile */
        width: calc(100vw - 12px);
        right: 0;
        left: auto;
        min-width: unset;
        border-radius: 14px 0 0 14px; /* still feels anchored right */
    }


    #eventFilterDivHeader h2 {
        font-size: 16px;
    }

    #regionCheckboxDivHeader {
        font-size: 14px;
    }

    .eventCheckBoxLabel {
        font-size: 13px;
        padding: 8px 12px 8px 38px;
        gap: 10px;
    }

    .eventCheckBoxLabel .checkmark {
        width: 18px;
        height: 18px;
        left: 12px;
    }

    .eventCheckBoxLabel .checkmark::after {
        width: 5px;
        height: 9px;
    }


    #showEventFilterBtn {
        display: block;
        margin: 2vw auto 1vw;
        font-size: 15px;
        padding: 8px;
        background: var(--bg-card);
        color: var(--text-main);
        border-radius: var(--radius-sm);
        border: none;
        cursor: pointer;
    }

    #closeEventFilterBtn {
        font-size: 10px;
        padding: 6px;
        background-color: var(--accent-soft);
        color: var(--text-main);
        border: none;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    #mainbodyDiv {
        padding: 14px 0;
    }

    .eventTitle {
        font-size: 20px;
        margin: 10px 0 12px;
    }

    #eventsPageImage {
        height: 150px;
        width: 150px;
        object-fit: contain;
        padding: 12px;
        margin: 0 auto;
        margin-bottom: 10px;
        margin-top: 10px;
        border-radius: 14px;
    }

    #statstable caption {
        font-size: 12px;
    }

    #eventOpsCaption {
        display: none;
    }

    #eventMapsCaption {
        display: none;
    }


    #teamsSortedLogo {
        height: 20px;
        width: 20px;
        object-fit: contain;
    }

    #eventmapstable th, #eventmapstable td {
        font-size: 12px;
    }

    #eventopstable th, #eventopstable td {
        font-size: 12px;
    }

    #eventsInfoDiv {
        padding: 14px;
        border-radius: 14px;
        gap: 8px;
    }

    #eventsInfoDiv p {
        font-size: 13px;
    }

    #resultdiv > h2 {
        font-size: 16px;
        margin: 18px 0 10px;
    }

    #eventParticipantDiv {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .participantTile {
        padding: 10px;
        min-height: 120px;
    }

    .participantTitle {
        font-size: 14px;
    }

    .participantLogo {
        height: 44px;
    }

    .participantFlag {
        height: 16px;
    }

    #eventMatchesContainer {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .eventMatchTile {
        padding: 12px;
        grid-template-columns: 28px 1fr 28px;
        column-gap: 10px;
        row-gap: 6px;
        border-radius: 14px;
    }

    .eventMatchTileDate,
    .eventMatchTileTime {
        font-size: 12px;
    }

    .eventMatchTileTeams {
        font-size: 14px;
    }

    .eventMatchesShowMore {
        font-size: 14px;
    }

    .tablinks {
        font-size: 13px;
        padding: 8px 12px;
    }

    #sortbyteamtitle {
        font-size: 14px;
    }

    /* Tables: make them scrollable on small screens */
    #standingsstable,
    #eventfullstatstable,
    #statstable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    #standingsstable th,
    #standingsstable td,
    #eventfullstatstable th,
    #eventfullstatstable td,
    #statstable th,
    #statstable td {
        font-size: 12px;
        padding: 10px 10px;
        white-space: nowrap;
    }

    #mapsStatsScore {
        font-size: 22px;
    }

    #mapsStatsEvent {
        font-size: 14px;
    }

    #mapsStatsDate {
        font-size: 12px;
        margin-bottom: 12px;
    }

    #mapsStatsMatchHeader {
        padding: 12px;
        gap: 12px;
        border-radius: 14px;
    }

    .mapStatsTeamLogos {
        height: 56px;
    }

    /* maps wrap into fewer columns */
    #matchmapscontainer {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 16px;
    }

    .matchmapdiv {
        min-height: 140px;
        padding: 10px;
        border-radius: 14px;
    }

    .mapscore,
    .maptitle {
        font-size: 12px;
        padding: 6px 10px;
    }

    .mapteamlogo {
        height: 20px;
    }

    /* tables scroll on mobile */
    #statstable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    #playerCareerStatsTable,
    #playerEventStatstable,
    #playerOperatorStatstable,
    #playerMatchesStatstable{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    #playerCareerStatsTable th,
    #playerCareerStatsTable td,
    #playerEventStatstable th,
    #playerEventStatstable td,
    #playerOperatorStatstable th,
    #playerOperatorStatstable td,
    #playerMatchesStatstable th,
    #playerMatchesStatstable td{
        font-size: 12px;
        padding: 10px 10px;
        white-space: nowrap;
    }

    #playerLegalName{
        font-size: 14px;
    }

    #playertitle{
        font-size: 20px;
        margin-bottom: 10px;
    }

    #awardCaption{
        font-size: 12px;
    }

    #playerimage{
        width: 34vw;
        height: 34vw;
        margin-bottom: 10px;
    }
    
    #playerinfodiv{
        max-width: 92vw;
        padding: 4vw;
    }

    #resultdiv{
        max-width: 92vw;
        padding: 4vw;
    }

    #playerFlag{
        height: 4vw;
        width: 4vw;
    }

    #careerStatsCaption,
    #playerAwardsTitle{
        font-size: 16px
    }

    #awardsDiv{
        gap: 5px;
    }

    #awardImage{
        height: 50px;
        width: 50px;
    }

    .awardCaption{
        font-size: 11px;
    }

    .tablinks{
        font-size: 12px;
        padding: 8px 12px;
    }

    #typeChoiceLabel,
    #typeChoice{
        font-size: 16px;
    }

    .playerStatTeamLogo,
    .playerStatEventLogo{
        height: 30px;
        width: 30px;
    }

    /* Ascending */
    #playerMatchesStatstable th.sorted-asc::after {
        content: "▲";
        opacity: 1;
        font-size: 8px;
    }

    /* Descending */
    #playerMatchesStatstable th.sorted-desc::after {
        content: "▼";
        opacity: 1;
        font-size: 8px;
    }

    #currentTeamLink{
    color: var(--accent);
    font-size: 8px;
    }

    #playertotalearnings{
        color: var(--accent);
        font-size: 8px;
    }

    .playerInfoDivLabel {
        font-size: 8px;
    }

    #playerNameLogo{
        height: 10px;
        width: 10px;
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
    }

    #playerTitleLogo {
        height: 20px;
        width: 20px;
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
    }

    .playerStatsShowMoreTile {
        font-size: 10px;
        padding: 5px;
        width: 60%;
        margin-bottom: 40px;
        display: block;
        margin: auto;
    }

    .playerOpsShowMoreTile {
        font-size: 10px;
        padding: 5px;
        width: 60%;
        margin-bottom: 40px;
        display: block;
        margin: auto;
    }

    #activeRosterDiv,
    #recentPlacingsDiv,
    #recentMatchesDiv,
    #teamStatsDiv,
    #playerstatsdiv,
    #mapStatsDiv{
        max-width: 100%;
        margin: 12px auto;
        padding: 12px;
        border-radius: 12px;
    }

    #teamimage{
        height: 150px;
        width: 150px;
        object-fit: contain;
    }

    #teamTotalEarningsLabel {
        font-size: 10px;
        margin-top: 10px;
        margin-bottom: 10px;

    }

    #activeRosterHeader {
        font-size: 14px;
    }

    #qualifiesToLogo {
        height: 30px;
        width: 30px;
        object-fit: contain;
    }

    /* Ascending */
    #TeamMapStatstable th.sorted-asc::after {
        content: "▲";
        opacity: 1;
        font-size: 10px;
    }

    /* Descending */
    #TeamMapStatstable th.sorted-desc::after {
        content: "▼";
        opacity: 1;
        font-size: 10px;
    }

    /* Horizontal scroll ONLY on mobile */
    #rostertable,
    #recentPlacingsTable,
    #statstable,
    #TeamMapStatstable{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin: 10px auto;
    }

    /* Make text readable on mobile */
    #rostertable th,
    #recentPlacingsTable th,
    #statstable th,
    #TeamMapStatstable th,
    #rostertable td,
    #recentPlacingsTable td,
    #statstable td,
    #TeamMapStatstable td{
        font-size: 14px;
        padding: 8px 10px;
    }

    /* Ascending */
    #EventMapStatstable th.sorted-asc::after {
        content: "▲";
        opacity: 1;
        font-size: 10px;
    }

    /* Descending */
    #EventMapStatstable th.sorted-desc::after {
        content: "▼";
        opacity: 1;
        font-size: 10px;
    }

    #EventMapStatstable td{
        font-size: 12px;
        padding: 8px 10px;
    }

    #EventMapStatstable th{
        font-size: 12px;
        padding: 8px 10px;
    }

    #EventMapStatstable{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        margin: 10px auto;
    }

    /* Ascending */
    #EventOperatorStatstable th.sorted-asc::after {
        content: "▲";
        opacity: 1;
        font-size: 10px;
    }

    /* Descending */
    #EventOperatorStatstable th.sorted-desc::after {
        content: "▼";
        opacity: 1;
        font-size: 10px;
    }

    #EventOperatorStatstable td{
        font-size: 14px;
        padding: 8px 10px;
    }

    #EventOperatorStatstable th{
        font-size: 14px;
        padding: 8px 10px;
    }

    #EventOperatorStatstable{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 85%;
        margin: 10px auto;
    }

    #eventMatchesContainer{
        gap: 12px;
    }

    #mapDateFilter{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        max-width: 100%;
        padding: 12px;
        margin: 12px auto 16px;
        border-radius: 12px;
    }

    #mapDateFilter .statFormLabel{
        font-size: 14px;
    }

    #mapDateFilter input[type="date"]{
        font-size: 14px;
        padding: 8px 10px;
        border-radius: 8px;
    }

    #mapDateFilterBtn{
        font-size: 14px;
        padding: 10px;
        border-radius: 10px;
        width: 100%;
    }

    #yearChoiceLabel,
    #matchesChoiceLabel{
        font-size: 14px;
        margin: 14px auto 6px;
    }

    #yearsChoice{
        width: 92%;
        font-size: 14px;
        padding: 10px 12px;
        border-radius: 10px;
        margin-bottom: 14px;
    }

    #recordsWarning,
    #matchRecordsWarning{
        font-size: 12px;
        margin: 8px auto 14px;
    }

    #recordListDivContainer{
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 12px auto 18px;
    }

    #recordListDiv{
        border-radius: 14px;
        padding: 12px 14px;
    }

    #recordListDiv h2{
        font-size: 16px;
        margin-bottom: 10px;
    }

    #record{
        font-size: 14px;
        line-height: 18px;
    }

    #record #playerEventLogo{
        width: 18px;
        height: 18px;
        margin: 0 6px;
    }

    #yearChoiceLabel{
        font-size: 14px;
        margin: 14px auto 6px;
    }

    #yearsChoice{
        width: 92%;
        font-size: 14px;
        padding: 10px 12px;
        border-radius: 10px;
        margin-bottom: 14px;
    }

    #top20ListDiv{
        gap: 10px;
        margin: 12px auto 18px;
    }

    .top20EntryDiv{
        grid-template-columns: 56px 64px 1fr;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .top20NumberDiv{
        font-size: 16px;
    }

    .top20PlayerImg{
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }

    .top20PlayerUsername{
        font-size: 16px;
    }

    .top20TeamImg{
        width: 22px;
        height: 22px;
    }

    .top20PlayerName{
        font-size: 13px;
    }

    .top20CountryImg{
        width: 18px;
        height: 18px;
    }

    #bottomAdDiv {
        display: none;
    }

    #bottomAdSpacer {
        display: none;
    }

    #eventstatsbtndiv{
        gap: 8px;
        margin: 10px auto 12px;
        font-size: 14px;
    }

    #eventStatsbtn{
        padding: 8px 12px;
        border-radius: 10px;
        font-size: 14px;
    }

    #statsFilterForm{
        width: 92%;
        margin: 12px auto 14px;
        padding: 12px 12px;
        border-radius: 14px;
        gap: 10px 12px;
    }

    #statsFilterForm .statFormLabel{
        font-size: 14px;
    }

    #min_rounds,
    #statsFilterForm input[type="date"]{
        padding: 10px 10px;
        font-size: 14px;
        border-radius: 10px;
        width: 100%;
        max-width: 320px;
    }

    #dateInputs{
        gap: 8px;
        width: 100%;
    }

    #statsFormApplyBtn{
        width: 100%;
        max-width: 320px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 14px;
    }

    #pagination-page-lbl{
        font-size: 14px;
        margin: 12px auto 8px;
    }

    #pagination-btn{
        margin: 4px 4px;
        padding: 8px 10px;
        border-radius: 10px;
        font-size: 14px;
    }

    #playerEventLogo {
        height: 18px;
        width: 18px;
    }

     #teamdisplaydiv,
    #T2teamdisplaydiv{
        width: 92%;
        margin: 12px auto 18px;
        padding: 12px 12px 14px;
        border-radius: 14px;
        gap: 12px;
    }

    #teamdisplaydiv h2,
    #T2teamdisplaydiv h2{
        margin: 2px 0 10px;
        font-size: 20px;
        letter-spacing: 0.5px;
    }

    #teamblock{
        width: 110px;
        height: 110px;
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    }

    #teamblock:hover{
        transform: translateY(-2px);
    }

    #teamblockimage{
        width: 78px;
        height: 78px;
        max-width: 150px;
        max-height: 150px;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
    }

    /* horizontal scroll only on mobile (same fix you used before) */
    #transfertable{
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 92%;
        margin: 12px auto 12px;
        border-radius: 14px;
    }

    #transfertable th{
        padding: 10px 10px;
        font-size: 14px;
        white-space: nowrap;
    }

    #transfertable td{
        padding: 10px 10px;
        font-size: 14px;
        white-space: nowrap;
    }

    #transfertable #playerEventLogo{
        width: 18px;
        height: 18px;
        margin-left: 6px;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
    }

    #pagination-page-lbl{
        margin: 10px 0 8px;
        font-size: 14px;
    }

    #abouttitle{
        width: 92%;
        margin: 14px auto 10px;
        font-size: 22px;
        letter-spacing: 1px;
    }

    #aboutp{
        width: 92%;
        margin: 10px auto;
        font-size: 15px;
        line-height: 1.7;
        border-radius: 14px;
        padding: 14px 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    }

    #aboutp + #aboutp{
        margin-top: 12px;
    }

    .dropdown-content {
        min-width: 100px;
    }

    .dropdown-content a {
        padding: 5px 8px;
        font-size: 15px;
    }

    #topStoriesHeader {
        font-size: 20px;
    }

    #sociala {
        font-size: 9px;
    }

    #footerXLogo {
        height: 25px;
        width: 25px;
    }

    #footerDiscordLogo {
        height: 25px;
        width: 25px;
    }

    #footerCopyright {
        font-size: 8px;
    }

    #footerCopyrightLogo {
        height: 25px;
        width: 25px
    }

    #backButton {
        font-size: 15px;
    }

    /* Ascending */
    #eventfullstatstable th.sorted-asc::after {
        content: "▲";
        opacity: 1;
        font-size: 10px;
    }

    /* Descending */
    #eventfullstatstable th.sorted-desc::after {
        content: "▼";
        opacity: 1;
        font-size: 10px;
    }

    #operatorsDisclaimer{
        font-size: 12px;
    }

    #fulleventstatstable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }

    #fulleventstatstable td {
        font-size: 12px;
        padding: 10px 10px;
        white-space: nowrap;
    }

    #fulleventstatstable th {
        font-size: 12px;
        padding: 10px 10px;
        white-space: nowrap;
    }

    #eventFromLogo {
        height: 20px;
        width: 20px;
        object-fit: contain;
        margin-left: 2px;
    }

    /* apply button */
    #minRoundsApplyBtn {
        width: 100%;
        max-width: 320px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 14px;
    }

    #roundsFilterForm #minRoundsLabel{
        font-size: 14px;
    }

    .recentEventTileImage {
        height: 40px;
        width: 40px;
        margin-bottom: 5px;
        object-fit: contain;
    }

    #loginLink {
        display: none;
    }

    .eventYearHeader {
        font-size: 15px;
    }

    #eventAwardsCaption {
        font-size: 15px;
    }

    .eventSectionHeader {
        font-size: 15px;
    }

    #standingsstable caption {
        font-size: 15px;
    }

    #createAccountdiv{
        width: 92%;
        margin: 18px auto 22px;
        padding: 18px 16px 16px;
        border-radius: 16px;
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    }

    #createAccountHeader{
        font-size: 24px;
        margin: 0 0 14px;
        letter-spacing: 1px;
    }

    #loginFailed{
        margin: 0 0 12px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(255, 90, 90, 0.35);
        font-size: 14px;
    }

    #createAccountdiv label{
        margin: 12px 0 6px;
        font-size: 14px;
        letter-spacing: 0.3px;
    }

    #createAccountdiv .signupInput{
        height: 44px;
        padding: 0 12px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10);
        font-size: 15px;
    }

    #createAccountdiv .signupInput:focus{
        box-shadow: 0 0 0 3px rgba(135, 206, 250, 0.16);
    }

    #createAccountdiv .signUpBtn{
        margin-top: 14px;
        height: 46px;
        border-radius: 14px;
        font-size: 15px;
        letter-spacing: 0.6px;
        box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    }

    #createAccountdiv p{
        margin-top: 14px;
        font-size: 14px;
    }

    #createAccountLink{
        border-bottom: 1px solid rgba(135, 206, 250, 0.35);
        padding-bottom: 2px;
    }

    #createAccountHeader{
        font-size: 18px;
        letter-spacing: 0.6px;
        line-height: 1.3;
    }

    #nowLoginLink{
        margin-top: 14px;
        min-width: 140px;
        height: 46px;
        padding: 0 18px;
        border-radius: 14px;
        border: 1px solid rgba(135, 206, 250, 0.35);
        font-size: 15px;
        box-shadow: 0 10px 22px rgba(0,0,0,0.25);
    }

    #hofQualDiv{
        max-width: 94vw;
        margin: 18px auto;
        padding: 16px 16px;

        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: 0 10px 24px rgba(0,0,0,0.35);
    }

    #qualificationsTitle{
        font-size: 22px;
        margin-bottom: 6px;
        letter-spacing: 0.6px;
    }

    #hofQualDiv #disclaimer{
        font-size: 13px;
    }

    #PPIntro{
        font-size: 14px;
        margin-top: 12px;
        line-height: 1.6;
    }

    #hofQualDiv ol{
        margin-top: 14px;
        padding-left: 20px;
    }

    #hofQualDiv li#PPHeader{
        font-size: 16px;
        margin: 16px 0 8px;
    }

    #PPListContent{
        font-size: 14px;
        margin: 6px 0 10px;
    }

    #hofQualDiv ul{
        margin: 6px 0 12px 18px;
    }

    #hofQualDiv ul li{
        font-size: 14px;
        margin: 4px 0;
    }

    #PPEmailLink{
        border-bottom-width: 1px;
    }

    #teamMainDiv {
        max-width: 350px;
    }

    #eventTabsAdDiv {
        max-width: 320px;
        max-height: 50px;
        margin: 0 auto;
    }

    #eventMainDiv {
        width: 350px;
        margin-left: 0;
        margin-right: 0; 
    }

    #headerAdDiv {
        height: 50px;
    }

    .headerDesktopAd { display: none; }
    .headerMobileAd { display: block; margin: 0 auto; }

    #eventsTabDesktopAd { display: none ;}
    #eventsTabMobileAd { display: block; margin: 0 auto; }

    #userFullSizeProfileImg{
        width: 180px;
        height: 180px;
        border-radius: 18px;
        margin: 18px auto 14px auto;
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 12px 24px rgba(0,0,0,0.35);
    }

    #userProfileInfoDiv{
        width: 92vw;
        padding: 16px 14px;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 12px 24px rgba(0,0,0,0.28);
    }

    #userProfileInfoDiv p{
        margin: 10px 0;
        font-size: 14px;
    }

    #userProfileInfoDiv p span{
        min-width: 90px;
    }

    #profileEditInfoBtn{
        width: 34px;
        height: 34px;
        border-radius: 10px;
        margin-left: 10px;
        border: 1px solid rgba(135, 206, 250, 0.40);
    }

    #changeUsernameForm,
    #changeEmailForm,
    #changePasswordForm{
        width: 300px;
        margin: 16px auto;
        padding: 16px 14px;

        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 12px 24px rgba(0,0,0,0.28);
    }

    #changeUsernameForm label,
    #changeEmailForm label,
    #changePasswordForm label{
        width: 100%;
        margin: 8px 0 6px 0;
        font-size: 14px;
    }

    #changeUsernameForm .signupInput,
    #changeEmailForm .signupInput,
    #changePasswordForm .signupInput{
        width: 100%;
        /* margin: 0 0 10px 0; */
        font-size: 13px;
        padding-top: 5px;
        padding-bottom: 5px;
        height: 22px;
    }

    .changeProfileBtn{
        width: 100%;
        height: 44px;
        min-width: 0;
        border-radius: 14px;

        font-size: 14px;
        letter-spacing: 0.4px;

        border: 1px solid rgba(135, 206, 250, 0.40);
        box-shadow: 0 10px 22px rgba(0,0,0,0.28);
        margin-top: 8px;
    }

    .detailsCell{
        padding: 14px;
    }

    .siteDetailsWrap{
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.10);
        
    }

    .siteDetailsTable thead th{
        padding: 10px 10px;
        font-size: 12px;
        letter-spacing: 0.3px;
        width: 80px;
    }

    .siteDetailsTable tbody td{
        padding: 10px 10px;
        font-size: 10px;
    }

    .detailsLoading,
    .detailsError,
    .siteDetailsEmpty{
        padding: 10px 6px;
        font-size: 14px;
    }

    .siteCell {
        width: 200px;
    }

    .siteHeader {
        width: 200px !important;
    }

    .bracketCard {
        display: none;
    }

    #eventPlayoffBracketHeader {
        display: none;
    }
}

@media (max-width: 667px) {
    #navBarBtnsDiv {
        justify-content: center;
        gap: 4px;
        margin-left: 0;
    }
}