/* =========================================================
   01. VARIABLES / BASE RESET
========================================================= */
@font-face {
    font-family: 'CherrySoda';
    src: url('./fonts/CherrySoda-Regular.woff2') format('woff2'),
        url('./fonts/CherrySoda-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue-bg: #79baec;
    --deep-blue: rgb(0, 83, 128);
    --tomato: tomato;
    --white: #ffffff;
    --black: #000000;
    --light-gray: rgba(211, 211, 211, 0.7);
    --solid-light-gray: lightgray;
    --light-blue: lightblue;
    --dark-tooltip: #333333;
    --shadow-dark: rgba(0, 0, 0, 0.8);
    --font-heading: "CherrySoda", cursive;
    --font-body: "Anton", sans-serif;
    --text-shadow:
        -1.2px -1.2px 0 #000,
        1.2px -1.2px 0 #000,
        -1.2px 1.2px 0 #000,
        1.2px 1.2px 0 #000;
    --logo-shadow: drop-shadow(0.2rem 0.2rem 0.3rem var(--tomato));
    --logo-shadow: drop-shadow(0.2rem 0.2rem 0.3rem var(--blue-bg));
}

.colorKeyTitle {
    font-family: var(--font-heading);
}

.codeText {
    font-family: var(--font-body);
}

* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    min-width: 320px;
    background-color: #000;
}

body.home-page,
body.about-page {
    min-height: 100vh;
    background-color: #696969;
    background-image: url("./images/poolBg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.wedSchedule-page,
body.thuSchedule-page {
    min-height: 100vh;
    background-color: #000;
    background-image: url("./images/poolhallBg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.team-page {
    min-height: 100vh;
    background-color: #000;
    background-image: url("./images/poolBg2.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.singles-page {
    min-height: 100vh;
    background-color: #000;
    background-image: url("./images/strokeBg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.scratchpad-page {
    min-height: 100vh;
    background-color: #000;
    background-image: url("./images/billiardsBg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body.scorer-page {
    min-height: 100vh;
    background-color: #000;
    background-image: url("./images/clubhouse.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* img {
    max-width: 100%;
} */

a {
    color: inherit;
}

.noDecoration {
    text-decoration: none;
    color: var(--white);
}

.section100vw {
    width: 100%;
    max-width: 100vw;
    overflow-y: auto;
    box-sizing: border-box;
}


/* =========================================================
   02. TYPOGRAPHY
========================================================= */

h1,
h2 {
    font-family: var(--font-heading);
    color: var(--white);
    text-align: center;
    text-shadow: var(--text-shadow);
}

h1 {
    margin: 1rem 0;
    font-size: 3.5rem;
    font-style: normal;
}

h2,
h3 {
    margin: 0 0 1rem 0;
    font-size: 150%;
    letter-spacing: 0.15em;
}

p {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}

.h1500 {
    font-size: 350%;
    letter-spacing: 0.2em;
}

.marginTop {
    margin-top: 2rem;
}


/* =========================================================
   03. SHARED HEADER / LOGO
========================================================= */

#headerWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100vw;
    margin: 0;
}

#headerWrapper > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.h1Wrapper {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.leagueLogo {
    height: 25vh;
    margin: 1rem 1rem 1rem 1rem;
    filter: drop-shadow(.2rem .2rem .3rem tomato);
}

.siteMenuBurger {
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 0.45rem;
    width: 3.25rem;
    height: 2.75rem;
    margin: 1rem 1rem 1rem 0;
    padding: 0.5rem;
    background: rgba(121, 186, 236, 0.1);
    border: 2px solid var(--blue-bg);
    border-radius: 10px;
    cursor: pointer;
}

.siteMenuBurger span {
    display: block;
    width: 100%;
    height: 0.25rem;
    background: var(--tomato);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(255, 99, 71, 0.7);
}

.siteMenuBurger:hover,
.siteMenuBurger:focus-visible {
    outline: none;
    background: rgba(255, 99, 71, 0.15);
}

.index-about {
    transform-origin: left;
    transform: translateY(50%) rotate(-20deg);
}

.logoWrapper {
    display: block;
}

.margin-left {
    margin-left: 3rem;
}

/* =========================================================
   03B. SLIDE-OUT SITE NAVIGATION
========================================================= */

body.siteNavIsOpen {
    overflow: hidden;
}

.siteNavOverlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.65);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.siteNavOverlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.siteNavPanel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;

    display: flex;
    flex-direction: column;

    width: min(370px, 88vw);
    height: 100vh;
    max-height: 100vh;

    color: #f4e7cc;
    background:
        linear-gradient(180deg, rgba(121, 186, 236, 0.08), rgba(0, 0, 0, 0.15)),
        #111;
    border-left: 2px solid rgba(121, 186, 236, 0.65);
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
    box-shadow:
        -8px 0 24px rgba(0, 0, 0, 0.65),
        -2px 0 18px rgba(121, 186, 236, 0.25);

    overflow: hidden;
    transform: translateX(105%);
    transition: transform 0.3s ease;
}

.siteNavPanel.open {
    transform: translateX(0);
}

.siteNavPanelHeader {
    position: sticky;
    top: 0;
    z-index: 2;

    flex: 0 0 auto;

    padding: 2rem 2rem 1rem 2rem;

    background:
        linear-gradient(180deg, rgba(121, 186, 236, 0.12), rgba(17, 17, 17, 0.98)),
        #111;
    border-bottom: 1px solid rgba(244, 231, 204, 0.18);
}

.closeSiteNav {
    position: absolute;
    top: 1rem;
    right: 1rem;

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

    width: 2.75rem;
    height: 2.75rem;

    color: var(--white);
    background: var(--tomato);
    border: 2px solid var(--blue-bg);
    border-radius: 50%;

    cursor: pointer;
    user-select: none;

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

    z-index: 10001;
}

.closeSiteNav::before,
.closeSiteNav::after {
    content: "";
    position: absolute;
    width: 1.25rem;
    height: 0.22rem;
    background: currentColor;
    border-radius: 999px;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
}

.closeSiteNav::before {
    transform: rotate(45deg);
}

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

.closeSiteNav:hover,
.closeSiteNav:focus-visible {
    outline: none;
    color: var(--tomato);
    background: var(--blue-bg);
    border-color: var(--tomato);
    transform: scale(1.08);
    box-shadow:
        0 0 12px rgba(121, 186, 236, 0.6),
        0 0 18px rgba(255, 99, 71, 0.4);
}

.closeSiteNav:active {
    transform: scale(0.96);
}

.siteNavBrand {
    margin: 2rem 0 0.25rem 0;
}

.siteNavKicker {
    margin: 0;
    color: var(--tomato);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
}

.siteNavBrand h2 {
    margin: 0.25rem 0 0;
    color: var(--blue-bg);
    font-size: 1.65rem;
    text-align: left;
}

.siteNavScrollArea {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem 2rem 2rem 2rem;

    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: var(--tomato) rgba(0, 0, 0, 0.75);
}

.siteNavScrollArea::-webkit-scrollbar {
    width: 12px;
}

.siteNavScrollArea::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.75);
}

.siteNavScrollArea::-webkit-scrollbar-thumb {
    background: var(--tomato);
    border: 2px solid rgba(0, 0, 0, 0.75);
    border-radius: 999px;
}

.siteNavScrollArea::-webkit-scrollbar-thumb:hover {
    background: #ff8a70;
}

.siteNavLinks {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.siteNavLinks a {
    color: #f4e7cc;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.siteNavLinks a:hover,
.siteNavLinks a:focus-visible {
    outline: none;
    color: var(--tomato);
    background: rgba(121, 186, 236, 0.08);
    transform: translateX(4px);
}

.siteNavLinks hr {
    width: 100%;
    margin: 0.5rem 0;
    border: none;
    border-top: 1px solid rgba(244, 231, 204, 0.25);
}

.siteNavSectionTitle {
    margin: 0.25rem 0 0;
    color: var(--blue-bg);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.siteNavSectionTitle + a,
.siteNavSectionTitle + a + a,
.siteNavSectionTitle + a + a + a {
    margin-left: 1rem;
}

@media screen and (max-height: 560px) {
    .siteNavPanelHeader {
        padding-top: 1rem;
        padding-bottom: 0.75rem;
    }

    .siteNavBrand {
        margin-top: 1.75rem;
    }

    .siteNavBrand h2 {
        font-size: 1.35rem;
    }

    .siteNavScrollArea {
        padding-top: 0.85rem;
        padding-bottom: 1rem;
    }

    .siteNavLinks {
        gap: 0.55rem;
    }
}

/* =========================================================
   04. HOME PAGE - INTERACTIVE LEAGUE MENU
========================================================= */
#memoriamWrapper {
    display: flex;
    flex-direction: column;
    margin-top: 6rem;
    align-items: center ;
}

.gofundme {
    text-decoration: none;
}

#dan {
    width: 500px;
    max-width: 100%;
    height: auto !important;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    display: block;
}   



#interactiveWrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.interactive-container {
    position: relative;
    display: inline-block;
    margin: 3rem;
    text-align: center;
}

.main-text {
    color: #FFF;
    font-family: var(--font-heading);
    margin: 0;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.hiddenLink {
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    text-shadow: 1px 1px 3px var(--shadow-dark);
}

.hiddenLink:hover {
    color: var(--tomato);
}

.links-wrapper {
    position: absolute;
    bottom: 100%;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 15px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        max-height 0.3s ease;
}


/* =========================================================
   05. ABOUT PAGE
========================================================= */

#aboutWrapper {
    display: flex;
    width: 100vw;
    flex-direction: column;
    margin-top: 1rem;
}

#aboutImgWrap {
    flex: 0 0 auto;
}

#aboutThisSite {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    width: 100vw;
}

.aboutTextWrap,
#upcomingWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 85%;
}

#upcomingList {
    width: 85%;
}

#aboutThisSite p,
#upcomingWrapper li,
.clicksLink,
#contactLink {
    font-family: var(--font-body);
    text-align: justify;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 2rem;
    text-decoration: none;
}

#aboutThisSite p,
#upcomingWrapper li,
#contactLink {
    color: var(--white);
}

.clicksLink,
#contactLink {
    color: var(--tomato);
}

#upcomingH3 {
    margin: 1rem;
    font-size: 2.5rem;
}


/* =========================================================
   06. TABLE BASICS - SHARED BY TEAM / SINGLES
========================================================= */

th,
td {
    padding: 0.25rem;
    color: #FFF;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5rem;
    text-align: center;
    letter-spacing: 0.05em;
}

th {
    padding: .5rem;
    color: var(--white);
    font-size: 1.5rem;
    letter-spacing: 0.08em;
}

td img {
    align-self: center;
    justify-self: center;
    font-weight: bold;
}

.col-fixed {
    position: sticky;
    left: 0;
    z-index: 10;
    overflow: visible;
}


/* =========================================================
   07. SCHEDULE PAGES
========================================================= */

.schedWrapper,
.singlesTableWrap {
    width: 100vw;
    max-width: 100%;
    height: 80vh;
    margin-bottom: 0;
    padding-bottom: 1rem;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
}


/* =========================================================
   SCHEDULE VIEWPORT WIDTH FIX
   Keeps wide schedule tables scrolling inside .schedWrapper
   instead of making the whole page wider than the viewport.
========================================================= */

body.wedSchedule-page,
body.thuSchedule-page {
    overflow-x: hidden;
}

body.wedSchedule-page .schedWrapper,
body.thuSchedule-page .schedWrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.schedTable {
    width: max-content;
    min-width: 100%;
    margin-top: 3rem;
    margin-bottom: 0;
    border-collapse: collapse;
}

.singlesTable {
    width: 100%;
    max-width: 100vw;
    margin-top: 3rem;
    margin-bottom: 0;
    border-collapse: collapse;
}

.schedTable th,
.singlesTable th {
    position: static;
    top: auto;
    z-index: auto;
    color: var(--white);
    font-size: 1.2rem;
    font-weight: 800;
    text-shadow: var(--text-shadow);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #000;
}

/* Keep the HOME / AWAY row sticky below the table-assignment row. */
.schedTable tr:nth-child(2) th,
.singlesTable tr:nth-child(2) th {
    top: 3rem;
    z-index: 29;
}

.singlesTable th:nth-child(n + 6),
.singlesTable td:nth-child(n + 6) {
    min-width: 5rem;
}

/* Date and Week columns only. Do NOT target every row's first two th cells,
   because that turns the HOME / AWAY cells for Tables 2 & 3 black. */
#wedSchedTable tr:first-child th:nth-child(1),
#wedSchedTable tr:first-child th:nth-child(2),
#wedSchedTable td:nth-child(1),
#wedSchedTable td:nth-child(2),
#thuSchedTable tr:first-child th:nth-child(1),
#thuSchedTable tr:first-child th:nth-child(2),
#thuSchedTable td:nth-child(1),
#thuSchedTable td:nth-child(2) {
    color: var(--white) !important;
    background: rgba(0, 0, 0) !important;
}

.schedTable tr:nth-child(2) th {
    position: sticky;
    top: 0;
    z-index: 20;
}

.schedTable td {
    font-size: 0.95rem;
    line-height: 1.35;
    background: rgba(7, 17, 24, 0.65);
}

/* Wednesday BYE column */
#wedSchedTable th:nth-child(3),
#wedSchedTable td:nth-child(3) {
    color: red;
    background: rgba(7, 17, 24, 0.65);
}

/* ==================
Dot color styles
================== */
.colorKeyTitle {
    display: block;
    margin: 0;
    padding: 0.25rem 0;
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: transparent;
    background: linear-gradient(90deg,
            white,
            yellow,
            blue,
            red,
            purple,
            orange,
            rgba(39, 107, 64, 1));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1.2px black;
}

#colorCodeWrapper {
    display: flex;
    flex-direction: column;
    justify-self: center;
    width: 65%;
    margin-top: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
}

.codeText {
    color: #FFF;
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: bold;
}

.codeDot {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 1rem 0;
    border-radius: 50%;
    vertical-align: middle;
}

#keyWrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}


.codeDotTextWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 30%;
}

#yellowDot {
    background-color: yellow;
}

#blueDot {
    background-color: blue;
}

#redDot {
    background-color: red;
}

#purpleDot {
    background-color: purple;
}

#orangeDot {
    background-color: orange;
}

#greenDot {
    background-color: rgba(39, 107, 64, 1);
}

/* ==================
Schedule table-assignment colors
Body cells keep your translucent gradient effect.
Sticky header cells use opaque matching gradients so scrolled text does not show through.
================== */

/* Tables 2 & 3 */
.schedTable td.tables-yellow,
.schedTable td[data-table="TABLES 2 & 3"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgba(255, 255, 0, 0.5),
            rgba(255, 184, 77, 0.3)) !important;
}

.schedTable th.tables-yellow,
.schedTable th[data-table="TABLES 2 & 3"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgb(255, 255, 0),
            rgb(255, 184, 77)) !important;
}

/* Tables 4 & 5 */
.schedTable td.tables-blue,
.schedTable td[data-table="TABLES 4 & 5"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgba(47, 140, 255, 0.3),
            rgba(0, 0, 0, 0.5)) !important;
}

.schedTable th.tables-blue,
.schedTable th[data-table="TABLES 4 & 5"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgb(47, 140, 255),
            rgb(0, 0, 0)) !important;
}

/* Tables 11 & 12 */
.schedTable td.tables-red,
.schedTable td[data-table="TABLES 11 & 12"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgba(255, 0, 0, 0.5),
            rgba(255, 0, 0, 0.3)) !important;
}

.schedTable th.tables-red,
.schedTable th[data-table="TABLES 11 & 12"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgb(255, 0, 0),
            rgb(180, 0, 0)) !important;
}

/* Tables 13 & 14 */
.schedTable td.tables-purple,
.schedTable td[data-table="TABLES 13 & 14"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgba(128, 0, 128, 0.5),
            rgba(128, 0, 128, 0.3)) !important;
}

.schedTable th.tables-purple,
.schedTable th[data-table="TABLES 13 & 14"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgb(128, 0, 128),
            rgb(82, 0, 82)) !important;
}

/* Tables 6 & 9 */
.schedTable td.tables-orange,
.schedTable td[data-table="TABLES 6 & 9"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgba(255, 165, 0, 0.5),
            rgba(255, 165, 0, 0.3)) !important;
}

.schedTable th.tables-orange,
.schedTable th[data-table="TABLES 6 & 9"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgb(255, 165, 0),
            rgb(194, 115, 0)) !important;
}

/* Tables 9.5 & 15 */
.schedTable td.tables-green,
.schedTable td[data-table="TABLES 9.5 & 15"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgba(39, 107, 64, 0.5),
            rgba(39, 107, 64, 0.3)) !important;
}

.schedTable th.tables-green,
.schedTable th[data-table="TABLES 9.5 & 15"] {
    color: #fff !important;
    background: linear-gradient(180deg,
            rgb(39, 107, 64),
            rgb(20, 72, 39)) !important;
}

/* Tables-white is only used for date/week styling in your current schedule HTML. */
.schedTable .tables-white {
    color: #fff !important;
}

/* =========================================================
   08. SCHEDULE TABLE ASSIGNMENT TOOLTIPS
========================================================= */

.match-cell {
    position: relative;
    cursor: pointer;
}

.match-cell::after,
.match-cell::before {
    display: none;
}

.match-cell:hover::after,
.match-cell:hover::before,
.match-cell.active::after,
.match-cell.active::before {
    display: block;
}

.match-cell::after {
    content: attr(data-table);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 9999;

    padding: 1rem;

    color: tomato;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: .5rem;
    white-space: nowrap;

    background-color: #79baec;

    border: 2px solid tomato;
    border-radius: 8px;

    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;

    box-shadow:
        0 0 12px rgba(121, 186, 236, 0.6),
        0 0 18px rgba(255, 99, 71, 0.4);

    transform: translateX(-50%);
}

.match-cell::before {
    content: "";
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    z-index: 9999;

    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent #79baec transparent;

    transform: translateX(-50%);
}

.schedTable tr:last-child .match-cell::after {
    top: auto;
    bottom: calc(100% + 10px);
}

.schedTable tr:last-child .match-cell::before {
    top: auto;
    bottom: calc(100% + 4px);
    border-width: 6px 6px 0 6px;
    border-color: #79baec transparent transparent transparent;
}


/* =========================================================
   09. TEAM STANDINGS PAGES
========================================================= */

.teamSection {
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.tableContainer,
#wedTeamTableContainer,
#thuTeamTableContainer {
    display: block;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto 2rem auto;
    padding: 0 0 0.75rem 0;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

.weekStatus {
    margin: 0 0 1rem 0;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 2rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-shadow: var(--text-shadow);
}

.teamStandingsTable {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.teamStandingsTable th,
.teamStandingsTable td {
    padding: 0.5rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.35;
    text-align: center;
    vertical-align: middle;
}

.positionColumn {
    width: 3.5rem;
    min-width: 3.5rem;
    text-align: center;
    font-weight: bold;
}

/* Team standings */

.teamStandingsTable th.positionColumn,
.teamStandingsTable td.positionColumn {
    position: sticky;
    left: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.7) !important;
}

.teamStandingsTable th:nth-child(2),
.teamStandingsTable td:nth-child(2) {
    left: 3.5rem;
}

/* Singles standings */

.singlesTable th.positionColumn,
.singlesTable td.positionColumn {
    position: sticky;
    left: 0;
    z-index: 3;
    background: rgba(0, 0, 0, 0.7) !important;
}

.singlesTable th:nth-child(2),
.singlesTable td:nth-child(2) {
    left: 3.5rem;
}

.singlesStandingsSection {
    margin-bottom: 4rem;
}

/* Header row */
.singlesTable thead tr th,
.teamStandingsTable thead tr th {
    background: rgba(0, 0, 0, 0.7);
    color: white;
}

/* Row 1, 3, 5, 7... */
.singlesTable tbody tr:nth-child(odd) td,
.teamStandingsTable tbody tr:nth-child(odd) td {
    background: linear-gradient(180deg,
            rgba(47, 140, 255, 0.3),
            rgba(0, 0, 0, 0.5));
}

/* Row 2, 4, 6, 8... */
.singlesTable tbody tr:nth-child(even) td,
.teamStandingsTable tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.5);
}

.teamStandingsTable td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7) !important;
}

.teamStandingsTable th:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 11;
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Team names can wrap, but words stay intact. */
.teamStandingsTable th:nth-child(2),
.teamStandingsTable td:nth-child(2) {
    min-width: 10rem;
    max-width: 14rem;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

/* Match Thursday's generated TEAM column width to Wednesday's generated TEAM column. */
#thuTeamStandings th:nth-child(2),
#thuTeamStandings td:nth-child(2) {
    width: 10rem;
    min-width: 10rem;
    max-width: 10rem;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

/* Totals and averages stay readable and unwrapped. */
.teamStandingsTable th:nth-child(3),
.teamStandingsTable td:nth-child(3),
.teamStandingsTable th:nth-child(4),
.teamStandingsTable td:nth-child(4) {
    min-width: 7rem;
    white-space: nowrap;
}

/* Weekly score columns stay compact. */
.teamStandingsTable th:nth-child(n + 5),
.teamStandingsTable td:nth-child(n + 5) {
    min-width: 4rem;
    white-space: nowrap;
}

.teamStandingsTable th:nth-child(2),
.teamStandingsTable td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 0;
}

.teamStandingsTable th:nth-child(2) {
    z-index: 3;
}

.teamTdWrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.teamImgTd {
    display: flex;
    align-items: center;
    justify-content: center;
}

.positionImages {
    height: 10vmin;
}

.hideTh {
    display: none;
}

.showTh {
    display: inline;
}

/* =========================================================
   10. TEAM CARD SECTIONS
========================================================= */

#teamCards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2.5rem;
    width: 100%;
    max-width: 1400px;
    margin: 1rem auto;
    padding: 1rem;
}


card.teamCard,
.teamCard {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;

    width: calc(50% - 2.5rem);
    min-width: 420px;
    min-height: 260px;
    margin-bottom: 2rem;
    padding: 1.25rem;

    border-radius: 16px;

    /* Liam-style background: almost transparent glass, no gradient */
    background: rgba(0, 0, 0, 0.18) !important;

    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.16),
        inset 0 -1px 1px rgba(255, 255, 255, 0.04),
        0 12px 34px rgba(0, 0, 0, 0.45);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

/* Neon tomato-to-logo-blue border only */
card.teamCard::before,
.teamCard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;

    border-radius: 16px;
    padding: 2px;

    background:
        linear-gradient(135deg,
            var(--tomato) 0%,
            rgba(255, 99, 71, 0.95) 35%,
            rgba(121, 186, 236, 0.95) 65%,
            var(--blue-bg) 100%);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

/* No color bleed into or around the card background */
card.teamCard::after,
.teamCard::after {
    content: none;
}

card.teamCard:hover,
.teamCard:hover {
    /* Keep the card planted. The hover movement now happens on the logo. */
    transform: none;
    background: rgba(0, 0, 0, 0.18) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.16),
        inset 0 -1px 1px rgba(255, 255, 255, 0.04),
        0 12px 34px rgba(0, 0, 0, 0.45);
}

.cardHeader,
.cardBody,
.cardFooter {
    position: relative;
    z-index: 4;
}

.cardBody {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 230px;
}

.teamImg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58%;
    margin-left: 3rem;
}

.teamImg img {
    max-width: 100%;
    height: 28vh;
    max-height: 260px;
    margin: 0;
    object-fit: contain;
    filter: none;
    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

card.teamCard:hover .teamImg img,
.teamCard:hover .teamImg img {
    transform: scale(1.05) rotate(-2deg);

    filter:
        drop-shadow(0 0 10px rgba(255, 99, 71, 0.4)) drop-shadow(0 0 16px rgba(121, 186, 236, 0.4));
}

.cardRoster {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42%;
}

.cardRoster p {
    margin: 0;
    padding: 0.75rem;
    color: var(--white);
    font-size: 1.15rem;
    line-height: 2.2rem;
    text-align: left;
}

.card p {
    display: flex;
    justify-content: space-evenly;
    word-spacing: 2rem;
}

.cardFooter p {
    cursor: auto;
}

.normalSpace {
    word-spacing: normal;
}

.teamH2 {
    position: absolute;
    top: 50%;
    left: 1.1rem;
    z-index: 5;
    margin: 0 0 0 -3rem;
    color: var(--white);
    font-size: 1.35rem;
    letter-spacing: 0.2em;
    white-space: nowrap;
    text-shadow:
        0 0 8px rgba(255, 99, 71, 0.9),
        0 0 14px rgba(121, 186, 236, 0.75),
        var(--text-shadow);
    transform: translateY(390%) rotate(-90deg);
    transform-origin: center;
}

.topHalfRem {
    margin-top: 0.5rem;
}



/* =========================================================
   11. SINGLES / PLAYERS TABLES
========================================================= */

.singlesTable {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

.singlesTableWrap {
    overflow-x: auto;
}

.singlesTable th,
.singlesTable th:nth-child(2),
.singlesTable th:nth-child(3) {
    position: sticky;
    top: 0;
    z-index: 1;
}

.singlesTable td:nth-child(2) {
    color: var(--white);
}

.singlesTableWrap th,
.singlesTableWrap td {
    padding: 0.5rem;
    text-align: center;
}

.singlesTable th:nth-child(2) {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Sticky PLAYER cells */
.singlesTable td:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7) !important;
}


/* =========================================================
   12. FOOTERS / SITE LINKS
========================================================= */

.pageFooter {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin-top: 0;
    padding-top: 2rem;
}

.siteLinksWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50vw;
    margin: 1rem;
    padding: 1rem;
    background: var(--light-gray);
    border-radius: 12px;
}

.siteLinksWrapper p {
    text-align: center;
}

.siteLinks a {
    color: var(--black);
    font-family: var(--font-body);
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.05em;
}

#linksSection {
    display: flex;
    justify-content: center;
}

#linksH3 {
    margin: 1rem 0;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-style: normal;
    text-align: center;
    text-shadow: var(--text-shadow);
}

.pageFooter {
    display: flex;
    justify-content: center;
    width: 100vw;
}

.upcomingTable {
    margin: 2rem;
    padding: 0.5rem;
    width: 75%;
    background: rgba(7, 17, 24, 0.5);
}

html,
body {
    max-width: 100%;
}

.section100vw {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    display: block;
}


/* =========================================================
   CUSTOM TOMATO SCROLLBARS FOR TABLE WRAPPERS
========================================================= */
.schedWrapper,
.singlesTableWrap,
.tableContainer,
#wedTeamTableContainer,
#thuTeamTableContainer {
    scrollbar-width: thin;
    scrollbar-color: var(--tomato) rgba(0, 0, 0, 0.75);
}

.schedWrapper::-webkit-scrollbar,
.singlesTableWrap::-webkit-scrollbar,
.tableContainer::-webkit-scrollbar,
#wedTeamTableContainer::-webkit-scrollbar,
#thuTeamTableContainer::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.schedWrapper::-webkit-scrollbar-track,
.singlesTableWrap::-webkit-scrollbar-track,
.tableContainer::-webkit-scrollbar-track,
#wedTeamTableContainer::-webkit-scrollbar-track,
#thuTeamTableContainer::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.75);
}

.schedWrapper::-webkit-scrollbar-thumb,
.singlesTableWrap::-webkit-scrollbar-thumb,
.tableContainer::-webkit-scrollbar-thumb,
#wedTeamTableContainer::-webkit-scrollbar-thumb,
#thuTeamTableContainer::-webkit-scrollbar-thumb {
    background: var(--tomato);
    border: 2px solid rgba(0, 0, 0, 0.75);
    border-radius: 999px;
}

.schedWrapper::-webkit-scrollbar-thumb:hover,
.singlesTableWrap::-webkit-scrollbar-thumb:hover,
.tableContainer::-webkit-scrollbar-thumb:hover,
#wedTeamTableContainer::-webkit-scrollbar-thumb:hover,
#thuTeamTableContainer::-webkit-scrollbar-thumb:hover {
    background: #ff8a70;
}


/* =========================================================
    CONTACT FORM STYLES
========================================================= */
#contactInfoWrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 100vw;
    min-width: 100%;
    margin: 1rem 0 0 0;
}

#contactInfoText {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    width: 40%;
    color: var(--white);
    font-family: var(--font-body);
}

#contactInfoText p {
    font-family: var(--font-body);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 2rem;
    text-align: justify;

}

#formWrapper {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
    width: 40%;
}

.contact-form {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1rem;
    border-radius: 16px;
    background: linear-gradient(180deg,
            rgba(47, 140, 255, 0.3),
            rgba(0, 0, 0, 0.5));
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

label>span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

::placeholder {
    font-size: 1.2rem;
    font-family: var(--font-body);
}

input,
textarea {
    width: 100%;
    padding: 0.95rem 1rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(112, 0, 0, 0.18);
    border-radius: 5px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

input:focus,
textarea:focus {
    background: var(--white);
    border-color: var(--gold-600);
    box-shadow: 0 0 0 4px rgba(217, 171, 0, 0.18);
}

textarea {
    min-height: 128px;
    resize: vertical;
}

.button {
    padding: 0.95rem 1.5rem;
    color: var(--white);
    background: rgba(47, 140, 255);
    border: none;
    border-radius: 16px;
    font-family: var(--font-body);
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    font-size: 1.2rem;
}


/* =========================================================
    Scratchpad Styling
========================================================= */
#msgBoardWrapper {
    width: 100%;
    max-width: 100vw;
    margin: 1rem auto;
    padding: 1rem;
}

#postForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    background: rgba(0, 0, 0, 0.18) !important;

    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    padding: 1.5rem;
    border-radius: 16px;

    border:
        1px solid rgba(121, 186, 236, 0.25);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25);
}

input#postName,
textarea#postMessage {
    width: 95%;
    margin: 1rem;
}

#postForm select,
#postForm button {
    width: 95%;
    min-height: 3rem;
    border-radius: 12px;
    border: 2px solid rgba(121, 186, 236, 0.4);
    font-family: antonio, sans-serif;
    font-size: 1rem;
    transition: all 0.25s ease;
}


/* ==========================================
                DROPDOWN
========================================== */

#postCategory {
    background:
        linear-gradient(180deg,
            rgba(121, 186, 236, 0.18),
            rgba(0, 0, 0, 0.45));

    color: #F4E7CC;
    padding: 0 1rem;
    cursor: pointer;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(180deg,
            rgba(121, 186, 236, 0.18),
            rgba(0, 0, 0, 0.45)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23F28C28' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6.5 6 6.5-6' stroke='%23F28C28' stroke-width='2' fill='none'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position:
        center,
        right 1rem center;

    background-size:
        cover,
        18px;

    box-shadow:
        0 0 0 rgba(242, 140, 40, 0);
}

#postCategory:hover {
    border-color: tomato;

    box-shadow:
        0 0 12px rgba(255, 99, 71, 0.35);
}

#postCategory:focus {
    outline: none;

    border-color: tomato;

    box-shadow:
        0 0 16px rgba(255, 99, 71, 0.5);
}

#postCategory option {
    background: #243239;
    color: #F4E7CC;
}


/* ==========================================
                POST BUTTON
========================================== */
.marginTopH1 {
    margin-top: 3rem;
}

#postForm button {
    background:
        linear-gradient(135deg,
            tomato,
            #d64c31);

    color: white;

    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;

    border: none;

    box-shadow:
        0 4px 12px rgba(255, 99, 71, 0.35);
}

#postForm button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(255, 99, 71, 0.5);
}

#postForm button:active {
    transform: translateY(1px);

    box-shadow:
        0 2px 8px rgba(255, 99, 71, 0.3);
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    margin-top: 1rem;;
}

.board-card {
    min-height: 208px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    text-align: center;
    color: var(--maroon-800);
    background: tomato;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--soft-shadow);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.board-card:hover,
.board-card:focus-visible {
    transform: translateY(-6px);
    outline: none;
}

.board-card img {
    width: 10rem;
    height: 10rem;
    margin-top: 0.85rem;
    object-fit: contain;
    filter: sepia(0.6) saturate(1.4) hue-rotate(318deg);
}

.board-card-title {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 0.98;
    text-transform: uppercase;
}

.board-link {
    margin-bottom: 0.75rem;
    color: var(--maroon-800);
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
}

.board-link span {
    color: var(--gold-600);
}




/* =========================================================
    Scratchpad Modal Functionality / Modal Board Styling
    Added for modal-based ANNOUNCEMENTS, GENERAL, SUBS, RULES boards.
========================================================= */

body.modalIsOpen {
    overflow: hidden;
}

.modalOverlay {
    position: fixed;
    inset: 0;
    z-index: 10000;

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

    width: 100vw;
    height: 100vh;
    padding: 1rem;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.modalOverlay.isOpen {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modalContent {
    position: relative;

    width: min(92vw, 900px);
    max-height: 88vh;
    padding: 1.5rem;

    overflow-y: auto;

    border: 1px solid rgba(121, 186, 236, 0.35);
    border-radius: 18px;

    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.14),
        inset 0 -1px 1px rgba(255, 255, 255, 0.04),
        0 18px 48px rgba(0, 0, 0, 0.65),
        0 0 22px rgba(121, 186, 236, 0.22);
}

.modalContent h2 {
    margin: 0 3rem 1rem 3rem;
    color: var(--tomato);
    font-family: var(--font-heading);
    font-size: 2.75rem;
    letter-spacing: 0.12em;
    text-shadow: var(--text-shadow);
}

.modalClose {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;

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

    width: 2.75rem;
    height: 2.75rem;

    color: var(--white);
    background:
        linear-gradient(135deg,
            var(--tomato),
            #d64c31);

    border: none;
    border-radius: 50%;

    font-size: 2rem;
    font-weight: bold;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(255, 99, 71, 0.35);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.modalClose:hover,
.modalClose:focus-visible {
    outline: none;
    transform: translateY(-2px) scale(1.04);

    box-shadow:
        0 8px 18px rgba(255, 99, 71, 0.5);
}

.boardDescription {
    width: min(100%, 720px);
    margin: 0 auto 1.5rem auto;

    color: var(--white);
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: center;
    text-shadow: 1px 1px 3px var(--shadow-dark);
}

.modalPostForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    width: 100%;
    max-width: 650px;
    margin: 0 auto 2rem auto;
    padding: 1.5rem;

    border: 1px solid rgba(121, 186, 236, 0.25);
    border-radius: 16px;

    background: rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.25);
}

.modalPostForm input,
.modalPostForm textarea {
    width: 95%;
    margin: 0;
    padding: 0.95rem 1rem;

    color: var(--black);
    background: rgba(255, 255, 255, 0.86);

    border: 2px solid rgba(121, 186, 236, 0.4);
    border-radius: 12px;

    font-family: var(--font-body);
    font-size: 1rem;

    outline: none;

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

.modalPostForm textarea {
    min-height: 130px;
    resize: vertical;
}

.modalPostForm input:focus,
.modalPostForm textarea:focus {
    background: var(--white);
    border-color: var(--tomato);

    box-shadow:
        0 0 16px rgba(255, 99, 71, 0.45);
}

.modalPostForm button {
    width: 95%;
    min-height: 3rem;

    color: var(--white);
    background:
        linear-gradient(135deg,
            var(--tomato),
            #d64c31);

    border: none;
    border-radius: 12px;

    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(255, 99, 71, 0.35);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.modalPostForm button:hover,
.modalPostForm button:focus-visible {
    outline: none;
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(255, 99, 71, 0.5);
}

.modalPostForm button:active {
    transform: translateY(1px);

    box-shadow:
        0 2px 8px rgba(255, 99, 71, 0.3);
}

.subRequestType {
    width: 95%;
    min-height: 3rem;
    padding: 0 1rem;

    color: #F4E7CC;
    background:
        linear-gradient(180deg,
            rgba(121, 186, 236, 0.18),
            rgba(0, 0, 0, 0.45));

    border: 2px solid rgba(121, 186, 236, 0.4);
    border-radius: 12px;

    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: 0.05em;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(180deg,
            rgba(121, 186, 236, 0.18),
            rgba(0, 0, 0, 0.45)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6.5 6 6.5-6' stroke='tomato' stroke-width='2'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position:
        center,
        right 1rem center;

    background-size:
        cover,
        18px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.subRequestType:hover,
.subRequestType:focus {
    outline: none;
    border-color: var(--tomato);
    box-shadow: 0 0 16px rgba(255, 99, 71, 0.45);
}

.subRequestType option {
    background: #243239;
    color: #F4E7CC;
    font-family: var(--font-body);
}

.postsContainer {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.postCard {
    width: 100%;
    padding: 1rem;

    border: 1px solid rgba(121, 186, 236, 0.28);
    border-radius: 14px;

    background:
        linear-gradient(180deg,
            rgba(47, 140, 255, 0.22),
            rgba(0, 0, 0, 0.55));

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.35);
}

.postMeta {
    margin-bottom: 0.75rem;

    color: var(--solid-light-gray);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: left;
    letter-spacing: 0.04em;
}

.postMeta strong {
    color: var(--tomato);
}

/* post text now styled by .postMessage */

.postActions {
    margin-top: 1rem;
}

.commentsContainer {
    margin-top: 1rem;
    padding: 1rem;

    border-left: 3px solid tomato;

    background: rgba(0, 0, 0, 0.28);

    border-radius: 12px;
}

.commentsContainer[hidden] {
    display: none;
}

.commentForm {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.commentForm input,
.commentForm textarea {
    width: 100%;
    padding: 0.75rem;

    color: black;
    background: rgba(255, 255, 255, 0.9);

    border: 1px solid rgba(121, 186, 236, 0.5);
    border-radius: 10px;

    font-family: var(--font-body);
}

.commentForm textarea {
    min-height: 90px;
    resize: vertical;
}

.commentForm button {
    align-self: flex-end;

    padding: 0.65rem 1.2rem;

    color: white;
    background: tomato;

    border: none;
    border-radius: 999px;

    font-family: var(--font-body);
    cursor: pointer;
}

.commentsList {
    margin-top: 1rem;
}

/* Match the actual board-card link class used in scratchpad.html. */
.board-card-link {
    margin-bottom: 0.75rem;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px var(--shadow-dark);
}

.board-card-link span {
    color: var(--blue-bg);
}


/* =========================================================
    SCORER Styling
========================================================= */
#inputHeader {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
}

.inputWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 50%;
    background: rgba(0, 0, 0, 0.75);
}

#scorerFormWrapper {
    margin-bottom: 2rem;
}

label[for="playersNumber"] {
    font-family: var(--font-heading);
    color: var(--white);
    text-align: center;
    font-size: 1.5rem;
}

/* OI! Here's how to style your select and option elements. Uncomment the code below and adjust the selectors and styles as needed for your specific form design. */
select[name="country"] {
    border: 2px solid #3498db;
}

select[multiple] {
    padding: 10px;
}

option[disabled] {
    color: #95a5a6;
    font-style: italic;
}

option[value="premium"] {
    background-color: #f1c40f;
    color: #000;
}

.logoDiv {
    width: 100%;
}

.poolStuffLogo {
    display: block;
    width: clamp(12rem, 33vw, 28rem);
    height: auto;
    margin: 1rem;
}

.playerPage {
    display: none;
}

.scorerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
}


.scoreboard {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.playerCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: yellow;
    border-radius: 16px;
    width: 30%;
    margin: 1rem;
}

.scorerButtons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}


/* =========================================================
   13. RESPONSIVE - CONSOLIDATED LARGEST TO SMALLEST
========================================================= */

@media screen and (max-width: 1100px) {
    .teamSection {
        flex-direction: column;
    }

    .teamStandingsTable {
        margin-left: 0;
    }

    .board-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 1000px) {
    .teamImg img {
        height: 25vh;
    }
}

@media (min-width: 976px) {
    .interactive-container:hover .links-wrapper {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media screen and (max-width: 975px) {
    .h1500 {
        font-size: 3rem;
        margin: 0 auto;
    }

    body.about-page .logoWrapper {
        display: flex;
        justify-content: center;
    }

    #contactInfoH1 {
        margin-top: 5rem;
    }

    #contactInfoWrapper {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        width: 100%;
       
    }
    

    #contactInfoText,
    #formWrapper {
        width: 85%;
    }

    #contactInfoText {
        align-self: center;
    }

    #interactiveWrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 7rem;
    }

    .interactive-container {
        margin: 1.5rem;
    }

    .links-wrapper {
        position: static;
        gap: 1rem;
        max-height: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
    }

    .links-wrapper.show-links {
        display: flex;
        max-height: 500px;
        margin-top: 15px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media screen and (max-width: 900px) {
    .marginTopH1 {
        margin-top: 0;
    }

    .h1Wrapper {
        display: none;
    }

    #headerWrapper {
        justify-content: space-between;
    }

    #colorCodeWrapper {
        width: 90%;
    }

    #teamCards {
        width: 100%;
        margin: 1rem 0 0 0;
    }

    .teamH2 {
        transform: translateY(420%) rotate(-90deg);
    }

    .tableContainer {
        margin: 0;
    }

    .teamCard,
    card.teamCard {
        width: 90%;
        min-width: unset;
        justify-content: center;
    }

    .teamImg img {
        height: 32vh;
    }

    .weekStatus {
        font-size: 1.7rem;
    }

    .teamStandingsTable th,
    .teamStandingsTable td {
        padding: 0.4rem;
        font-size: 0.9rem;
    }

    .teamStandingsTable th:nth-child(2),
    .teamStandingsTable td:nth-child(2) {
        min-width: 8rem;
        max-width: 11rem;
    }

    #thuTeamStandings th:nth-child(2),
    #thuTeamStandings td:nth-child(2) {
        width: 8rem;
        min-width: 8rem;
        max-width: 8rem;
    }

    .teamStandingsTable th:nth-child(3),
    .teamStandingsTable td:nth-child(3),
    .teamStandingsTable th:nth-child(4),
    .teamStandingsTable td:nth-child(4) {
        min-width: 6rem;
    }

    .teamStandingsTable th:nth-child(n + 5),
    .teamStandingsTable td:nth-child(n + 5) {
        min-width: 3.5rem;
    }

    .marginTopH1 {
        margin-top: 7rem;
    }
}

@media (min-width: 769px) {

    .match-cell:hover::after,
    .match-cell:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

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

}

.upcomingTable {
    width: 90%;
}

@media (max-width: 768px) {

    .match-cell.active::after,
    .match-cell.active::before {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }
}

@media screen and (max-width: 750px) {
    .teamImg img {
        height: 35vh;
    }
}

@media screen and (max-width: 700px) {
    #aboutWrapper {
        flex-direction: column;
    }

    #upcomingH3 {
        margin-top: 5rem;
    }
}

@media screen and (max-width: 650px) {


    #contactInfoText,
    #formWrapper {
        width: 92%;
    }

    #contactInfoText p {
        font-size: 1rem;
        line-height: 1.7rem;
    }
}

@media screen and (max-width: 575px) {
    .codeDotTextWrapper {
        width: 50%;
    }

    .weekStatus {
        font-size: 1.45rem;
    }

    .teamH2 {
        transform: translateY(800%) rotate(-90deg);
    }

    .teamStandingsTable th,
    .teamStandingsTable td {
        padding: 0.3rem;
        font-size: 0.8rem;
    }

    .teamStandingsTable th:nth-child(2),
    .teamStandingsTable td:nth-child(2) {
        min-width: 7rem;
        max-width: 9rem;
    }

    #thuTeamStandings th:nth-child(2),
    #thuTeamStandings td:nth-child(2) {
        width: 7rem;
        min-width: 7rem;
        max-width: 7rem;
    }

    .teamStandingsTable th:nth-child(3),
    .teamStandingsTable td:nth-child(3),
    .teamStandingsTable th:nth-child(4),
    .teamStandingsTable td:nth-child(4) {
        min-width: 5.25rem;
    }

    .teamStandingsTable th:nth-child(n + 5),
    .teamStandingsTable td:nth-child(n + 5) {
        min-width: 3rem;
    }

    .cardBody {
        flex-direction: column;
        align-items: center;
    }

    .teamImg {
        width: 100%;
        margin: 0 auto;
    }

    .cardRoster {
        width: 100%;
    }

    .teamCard,
    card.teamCard {
        width: 92vw;
        min-width: unset;
    }

    .logoDiv {
        display: flex;
        justify-content: center;
    }

    .poolStuffLogo {
        margin: 1rem 0 0 0;
    }
}

@media screen and (max-width: 450px) {
    .board-grid {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 450px) {
    #wedLeagueLogo,
    #thuLeagueLogo {
        height: 17vh
    }
    
    .h1Wrapper {
        display: none;
    }

    #headerWrapper {
        justify-content: space-between;
    }

    body.home-page .leagueLogo,
    body.about-page #aboutImgWrap .leagueLogo {
        height: 22vh;
        margin: 1rem 1rem 1rem 1rem;
    }

    .logoWrapper {
        display: flex;
        justify-content: center;
    }

    #contactInfoH1 {
        font-size: 2.75rem;
    }

    #interactiveWrapper {
        margin-top: 2rem;
    }

    #marginTop1Rem {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 415px) {
    .teamImg img {
        height: 25vh;
    }
}

@media screen and (max-width: 380px) {
    #headerWrapper {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .siteMenuBurger {
        margin: 0 0 1rem 0;
    }
}

@media screen and (max-width: 400px) {
    .hideTh {
        display: block;
    }

    .showTh {
        display: none;
    }

    body.home-page .leagueLogo,
    body.about-page #aboutImgWrap .leagueLogo {
        /* height: 18vh; */
        margin: 1rem 1rem 1rem 2rem;
    }
}

/* =========================================================
    Scratchpad Modal Responsive Adjustments
========================================================= */

@media screen and (max-width: 650px) {
    .modalOverlay {
        align-items: flex-start;
        padding: 0.75rem;
        overflow-y: auto;
    }

    .modalContent {
        width: 96vw;
        max-height: none;
        margin: 0.75rem 0;
        padding: 1rem;
    }

    .modalContent h2 {
        margin: 0 2.75rem 1rem 0;
        font-size: 2rem;
        text-align: left;
    }

    .modalPostForm {
        padding: 1rem;
    }

    .modalPostForm input,
    .modalPostForm textarea,
    .modalPostForm button {
        width: 100%;
    }

    .boardDescription {
        font-size: 1rem;
        text-align: left;
    }

    .postCard p {
        font-size: 1rem;
    }
}

/* =========================================================
    Scratchpad Forum Post Layout Upgrade
========================================================= */

.postCardHeader {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.postAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    color: white;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    background: linear-gradient(135deg, tomato, #d64c31);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(255, 99, 71, .4);
}

.postMeta {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.postAuthor {
    color: tomato !important;

    font-family: var(--font-body);
    font-size: 1rem;
    letter-spacing: .05em;
}

.postTimestamp {
    color: rgba(255, 255, 255, 0.75) !important;

    font-family: var(--font-body);
    font-size: .8rem;
}

.commentMeta strong {
    color: tomato !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.commentMeta span {
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: var(--font-body);
    font-size: 0.75rem;
}

.commentCard p {
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
}

.postMenuButton {
    color: rgba(255, 255, 255, .8);
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.postMenuButton:hover {
    color: tomato;
}

.postMessage {
    margin: 0;
    color: white;
    font-family: var(--font-body);
    font-size: 1.15rem;
    line-height: 1.5;
    text-align: left;
}

.commentToggleButton {
    padding: .65rem 1rem;
    color: white;
    background: linear-gradient(135deg,
            rgba(121, 186, 236, .5),
            rgba(47, 140, 255, .35));
    border: 1px solid rgba(121, 186, 236, .5);
    border-radius: 999px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: .2s ease;
}

.commentToggleButton:hover {
    border-color: tomato;
    box-shadow: 0 0 10px rgba(255, 99, 71, .35);
}

/* =========================================================
    Scratchpad v2 Enhancements
    Board counts, pinned posts, sub cards, comment avatars, post menu foundation.
========================================================= */

.board-card-title {
    flex-direction: column;
    gap: 0.35rem;
}

.board-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.15rem 0.55rem;
    color: var(--white);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(121, 186, 236, 0.45);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1;
    text-shadow: 1px 1px 3px var(--shadow-dark);
}

.pinLabel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 95%;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    text-align: left;
}

.pinLabel input {
    width: auto;
}

.postCard.pinnedPost {
    border-color: rgba(255, 99, 71, 0.8);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(255, 99, 71, 0.28);
}

.pinBadge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 0.25rem;
    padding: 0.2rem 0.55rem;
    color: var(--white);
    background: rgba(255, 99, 71, 0.35);
    border: 1px solid rgba(255, 99, 71, 0.75);
    border-radius: 999px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

.postMenuWrapper {
    position: relative;
    margin-left: auto;
}

.postMenu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    min-width: 9rem;
    padding: 0.35rem;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid rgba(121, 186, 236, 0.45);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.postMenu[hidden] {
    display: none;
}

.postMenu button {
    padding: 0.55rem 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    text-align: left;
}

.postMenu button:not(:disabled):hover {
    color: var(--white);
    background: rgba(255, 99, 71, 0.25);
}

.subPostCard {
    border-color: rgba(255, 99, 71, 0.38);
}

.subAvatar {
    background: linear-gradient(135deg, var(--blue-bg), var(--deep-blue));
}

.subRequestBadge {
    display: inline-flex;
    width: fit-content;
    margin: 0 0 0.85rem 0;
    padding: 0.35rem 0.8rem;
    color: var(--white);
    background: rgba(255, 99, 71, 0.35);
    border: 1px solid rgba(255, 99, 71, 0.75);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subRequestDetails {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.subRequestDetails div {
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(121, 186, 236, 0.25);
    border-radius: 12px;
}

.subRequestDetails strong,
.subRequestDetails span {
    display: block;
    font-family: var(--font-body);
    text-align: left;
}

.subRequestDetails strong {
    margin-bottom: 0.2rem;
    color: var(--tomato);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.subRequestDetails span {
    color: var(--white);
    font-size: 1rem;
    line-height: 1.25;
}

.subNotesDisplay {
    padding-top: 0.2rem;
}

.commentHeader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.commentAvatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    color: var(--white);
    background: linear-gradient(135deg, var(--tomato), #d64c31);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    box-shadow: 0 0 10px rgba(255, 99, 71, 0.3);
}

.commentMeta {
    align-items: flex-start;
}

.commentMeta strong {
    color: tomato !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.commentMeta span {
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: var(--font-body);
    font-size: 0.75rem;
}

.commentCard p {
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
}

@media screen and (max-width: 650px) {
    .subRequestDetails {
        grid-template-columns: 1fr;
    }

    .postMenu {
        right: auto;
        left: 0;
    }
}

/* =========================================================
    Scratchpad Admin / Auth Controls
    Added for Firebase Auth-based admin-only announcement,
    pin/unpin, and delete controls.
========================================================= */

.scratchpadAdminBar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    width: min(92vw, 900px);
    margin: 1rem auto 0 auto;
    padding: 0.75rem 1rem;

    border: 1px solid rgba(121, 186, 236, 0.28);
    border-radius: 14px;

    background: rgba(0, 0, 0, 0.45);

    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(121, 186, 236, 0.16);
}

.authStatus {
    margin: 0;

    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
    text-shadow: 1px 1px 3px var(--shadow-dark);
}

.authButtonGroup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.authButton {
    min-height: 2.5rem;
    padding: 0.65rem 1rem;

    color: var(--white);
    background:
        linear-gradient(135deg,
            var(--tomato),
            #d64c31);

    border: none;
    border-radius: 999px;

    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(255, 99, 71, 0.35);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.authButtonSecondary {
    background:
        linear-gradient(135deg,
            rgba(121, 186, 236, 0.5),
            rgba(47, 140, 255, 0.35));

    border: 1px solid rgba(121, 186, 236, 0.5);
}

.authButton:hover,
.authButton:focus-visible {
    outline: none;
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(255, 99, 71, 0.5);
}

.authButton[hidden],
.adminOnly[hidden],
.postMenuWrapper[hidden] {
    display: none !important;
}


/* =========================================================
    Scratchpad Admin Post Menus
========================================================= */

.postMenuWrapper {
    position: relative;
    flex-shrink: 0;
}

.postMenu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 20;

    display: flex;
    flex-direction: column;
    gap: 0.35rem;

    min-width: 9rem;
    padding: 0.5rem;

    border: 1px solid rgba(121, 186, 236, 0.35);
    border-radius: 12px;

    background: rgba(0, 0, 0, 0.92);

    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(121, 186, 236, 0.22);
}

.postMenu[hidden] {
    display: none !important;
}

.postMenu button {
    width: 100%;
    padding: 0.55rem 0.75rem;

    color: var(--white);
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;

    font-family: var(--font-body);
    font-size: 0.85rem;
    text-align: left;

    cursor: pointer;

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

.postMenu button:hover,
.postMenu button:focus-visible {
    outline: none;

    color: var(--tomato);
    background: rgba(255, 99, 71, 0.14);
    border-color: rgba(255, 99, 71, 0.5);
}

.postMenu .dangerAction:hover,
.postMenu .dangerAction:focus-visible {
    color: #ffb0a3;
    background: rgba(255, 0, 0, 0.18);
    border-color: rgba(255, 99, 71, 0.75);
}

.commentHeader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.commentMeta {
    flex-grow: 1;
}

.commentDeleteButton {
    flex-shrink: 0;

    width: 2rem;
    height: 2rem;

    color: var(--white);
    background: rgba(255, 99, 71, 0.22);

    border: 1px solid rgba(255, 99, 71, 0.45);
    border-radius: 50%;

    font-family: var(--font-body);
    font-size: 1.2rem;
    line-height: 1;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.commentDeleteButton:hover,
.commentDeleteButton:focus-visible {
    outline: none;
    transform: scale(1.05);
    background: rgba(255, 99, 71, 0.42);
}


/* =========================================================
    Scratchpad Admin Responsive Adjustments
========================================================= */

@media screen and (max-width: 650px) {
    .scratchpadAdminBar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .authButtonGroup {
        width: 100%;
    }

    .authButton {
        width: 100%;
    }

    .postMenu {
        right: auto;
        left: 0;
    }
}
/* =========================================================
   POS COLUMN BACKGROUND OVERRIDE
   Matches the adjacent sticky Team / Player columns.
========================================================= */
.teamStandingsTable thead tr th.positionColumn,
.teamStandingsTable tbody tr td.positionColumn,
.singlesTable thead tr th.positionColumn,
.singlesTable tbody tr td.positionColumn {
    background: rgba(0, 0, 0, 0.7) !important;
    background-image: none !important;
}