/* ==========================================================================
   theme.css — LNVHV New Site
   All component, page-layout, and LNVHV-specific styles.
   Requires base.css loaded first.
   Derived exclusively from _lnvhv-STHSMain-CSSOverwriteNEW.css.
   Paths adapted for /new_site/assets/css/ location.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. FONT IMPORTS
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Oswald:wght@300;500&display=swap');

@font-face {
    font-family: 'nhlregular';
    src: url('../fonts/nhl-webfont.woff2') format('woff2'),
         url('../fonts/nhl-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ==========================================================================
   1. LOGIN TOP BAR (.logintopbar)
   Renders above #lnvhvmenu; outputs the login/logout trigger button.
   ========================================================================== */

.logintopbar {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    background: #ffffff;
    border-bottom: 1px solid rgb(210, 210, 210);
    min-height: 42px;
}

.lnvhv_login-container {
    position: relative;
}

.lnvhv_login-button {
    flex: 1 1 150px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background: none;
    color: royalblue;
    cursor: pointer;
    font-weight: 600;
    gap: 5px;
    border-left: 2px solid rgb(210, 210, 210);
}

.lnvhv_login-button:hover {
    background: #f8f8f8;
    text-decoration: none;
}

.lnvhv_login-button img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* Lightbox */
.lnvhv_lightbox {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    min-width: 320px;
    max-width: 90vw;
}

/* Dark overlay behind lightbox */
.lnvhv_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 9998;
}

/* Close button */
.lnvhv_close-button,
.lnvhv_close-button:hover,
.lnvhv_close-button:focus {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: none;
    border: 1px solid #c0c1c2;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lnvhv_logged-in-links {
    display: none;
    margin-top: 10px;
}

.lnvhv_password-error {
    color: red;
    font-size: 13px;
    margin-top: 4px;
}


/* ==========================================================================
   2. NAVIGATION — PRIMARY MENU (#lnvhvmenu)
   ========================================================================== */

/* --- Reset for both menus --- */
#lnvhvmenu,
#lnvhvmenu ul,
#lnvhvmenu ul li,
#lnvhvmenu ul li a,
#lnvhvmenu #menu-button,
#lnvhvmenuLogin,
#lnvhvmenuLogin ul,
#lnvhvmenuLogin ul li,
#lnvhvmenuLogin ul li a,
#lnvhvmenuLogin #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
    -moz-border-radius: 5px;
}

/* Override box-sizing scoped to menus only */
#lnvhvmenu *,
#lnvhvmenu *::before,
#lnvhvmenu *::after {
    box-sizing: unset;
}

#lnvhvmenu::after,
#lnvhvmenu > ul::after,
#lnvhvmenuLogin::after,
#lnvhvmenuLogin > ul::after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

#lnvhvmenu #menu-button,
#lnvhvmenuLogin #menu-button {
    display: none;
}

#lnvhvmenu,
#lnvhvmenuLogin {
    font-family: 'Open Sans', sans-serif;
}

/* --- Main nav bar --- */
#lnvhvmenu {
    background: #333333;
    color: white;
    border-radius: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
}

#lnvhvmenu > ul {
    font-family: 'Open Sans', sans-serif;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 1024px) {
    #lnvhvmenu {
        position: relative;
    }
}

/* --- Top-level items --- */
#lnvhvmenu > ul > li,
#lnvhvmenuLogin > ul > li {
    float: left;
}

#lnvhvmenu.align-center > ul,
#lnvhvmenuLogin.align-center > ul {
    font-size: 0;
    text-align: center;
}

#lnvhvmenu.align-center > ul > li,
#lnvhvmenuLogin.align-center > ul > li {
    display: inline-block;
    float: none;
}

#lnvhvmenu.align-center ul ul {
    text-align: left;
}

#lnvhvmenu.align-right > ul > li,
#lnvhvmenuLogin.align-right > ul > li {
    float: right;
}

#lnvhvmenu > ul > li > a {
    padding: 17px;
    font-size: 15px;
    letter-spacing: 1px;
    text-decoration: none;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
}

#lnvhvmenu > ul > li:hover > a {
    color: white;
    background: royalblue;
    border-radius: 0;
}

#lnvhvmenu > ul > li.has-sub > a {
    padding-right: 30px;
}

/* Plus/minus indicators */
#lnvhvmenu > ul > li.has-sub > a::after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: white;
    content: '';
}

#lnvhvmenu > ul > li.has-sub > a::before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: white;
    content: '';
    transition: all 0.25s ease;
}

#lnvhvmenu > ul > li.has-sub:hover > a::before {
    top: 23px;
    height: 0;
}

#lnvhvmenu > ul > li.has-sub:hover > a {
    color: white;
    background: royalblue;
}

/* All indicator pseudo-elements white in dark nav */
#lnvhvmenu > ul > li.has-sub > a::before,
#lnvhvmenu > ul > li.has-sub > a::after,
#lnvhvmenu > ul ul > li.has-sub > a::before,
#lnvhvmenu > ul ul > li.has-sub > a::after {
    background: white;
}

/* --- Dropdown sub-menus --- */
#lnvhvmenu ul ul {
    position: absolute;
    left: -9999px;
    border-radius: 0;
}

#lnvhvmenu ul ul li {
    height: 0;
    transition: all 0.25s ease;
}

#lnvhvmenu li:hover > ul {
    left: auto;
}

#lnvhvmenu li:hover > ul > li {
    height: 48px;
}

#lnvhvmenu ul ul ul {
    margin-left: 100%;
    top: 0;
}

#lnvhvmenu ul ul li,
#lnvhvmenu ul ul li a,
#lnvhvmenu ul ul ul li,
#lnvhvmenu ul ul ul li a {
    display: flex;
    align-items: center;
    background: #333333;
    color: white;
    border-radius: 0;
    border-bottom: none;
}

#lnvhvmenu ul ul li a {
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    padding: 11px 15px;
    width: 300px;
    font-size: 15px;
    text-decoration: none;
    color: white;
    font-weight: 400;
    background: #333333;
    z-index: 1;
    height: 48px;
}

#lnvhvmenu ul ul li:last-child > a,
#lnvhvmenu ul ul li.last-item > a {
    border-bottom: 0;
}

#lnvhvmenu ul ul li:hover {
    background: royalblue;
    color: white;
    text-decoration: none;
}

#lnvhvmenu ul ul li a,
#lnvhvmenu ul ul li:hover a {
    background: none;
    text-decoration: none;
}

#lnvhvmenu ul ul li:hover > a,
#lnvhvmenu ul ul li a:hover {
    text-decoration: underline;
}

/* Sub-sub-level plus/minus */
#lnvhvmenu ul ul li.has-sub > a::after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: white;
    content: '';
}

#lnvhvmenu ul ul li.has-sub > a::before {
    position: absolute;
    top: 50%;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: white;
    content: '';
    transform: translateY(-3px);
    transition: all 0.25s ease;
}

#lnvhvmenu ul ul > li.has-sub:hover > a::before {
    top: 17px;
    height: 0;
}

/* --- Logo / home button --- */
#lnvhvmenu .MenuImage {
    display: flex;
    align-items: center;
    font-family: 'nhlregular';
    top: 0;
    padding: 0 20px 0 0;
}

#lnvhvmenu .MenuImage:hover > a {
    background: initial;
    background-color: initial;
}

#lnvhvmenu .MenuImage a {
    font-size: 30px;
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0;
}

@media screen and (max-width: 1024px) {
    #lnvhvmenu .MenuImage a {
        padding: 20px;
    }
}

#STHSImageHeader {
    display: flex;
}

#STHSImageHeader img {
    display: block;
    width: 35px;
    height: auto;
}

@media screen and (max-width: 1365px) {
    #STHSImageHeader {
        display: none;
    }
}

@media screen and (max-width: 1400px) {
    #lnvhvmenu > ul > li.has-sub > a {
        padding-right: 20px;
    }
    .MenuImageDiv {
        display: none;
    }
    .STHSPHP_Login {
        display: none;
    }
}

/* --- Team logo strip (desktop) --- */
.STHSPHPMenuDiv {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 3px;
    margin: 10px 0;
}

.STHSPHPMenuDiv a {
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.STHSPHPMenuDiv img {
    width: 25px;
    height: auto;
    margin: 0;
    padding: 0;
}

.STHSPHPMenuDivMobile {
    display: none;
}

/* --- Teams mega-menu (desktop grid layout) --- */
#lnvhvmenu .regularsub a {
    display: flex;
    line-height: 1.4;
}

#lnvhvmenu .teamsgrid {
    display: block;
}

.teamsmenu .conferencetitle {
    font-weight: 700;
    display: none !important;
}

.teamsmenu .divisiontitle {
    padding-left: 0;
}

@media screen and (min-width: 1024px) {
    #lnvhvmenu .teamsmenu {
        background: #333333;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px 20px 20px 20px;
    }

    #lnvhvmenu .teamsmenu ul {
        column-count: 2;
        position: relative;
        left: 0;
        margin-left: 0;
        padding: 0;
    }

    #lnvhvmenu li:hover .teamsmenu > li {
        height: auto !important;
    }

    .conferencelink {
        display: none !important;
    }

    .teamsmenu .conferencetitle {
        display: flex !important;
        padding-left: 0 !important;
    }

    .teamsmenu .divisiontitle {
        display: flex !important;
        padding-left: 0 !important;
    }

    /* Force the 2nd division in a conference to start its own column
       deterministically. column-count's default height-based balancing
       (see the column-count: 2 rule above) has no notion of the
       division boundary, so it can break one item early/late and strand
       the 1st division's last team next to the 2nd division's header
       (confirmed: e.g. Winnipeg Jets rendering above "Division
       Pacifique" instead of under "Division Centrale"). This replaces
       reliance on the empty <li class="conferencetitle"></li> spacer
       with an explicit, content-independent break. */
    .teamsmenu .divisiontitle ~ .divisiontitle {
        break-before: column;
        -webkit-column-break-before: always;
    }

    #lnvhvmenu li:hover > .teamsmenu {
        left: -260px;
    }

    #lnvhvmenu ul .teamsmenu li a:hover {
        text-decoration: underline;
    }

    #lnvhvmenu li:hover ul li {
        height: auto;
        min-height: 34px;
    }

    #lnvhvmenu ul .teamsmenu li,
    #lnvhvmenu ul .teamsmenu li a,
    #lnvhvmenu ul .teamsmenu ul li,
    #lnvhvmenu ul .teamsmenu ul li a {
        display: flex;
        align-items: center;
        background: #333333;
        color: white;
        border-radius: 0;
        border-bottom: none;
        font-size: 12px;
    }

    #lnvhvmenu ul ul li a {
        padding: 0;
    }

    #lnvhvmenu ul .teamsmenu li:hover,
    #lnvhvmenu ul .teamsmenu .teamsmenuconf:hover {
        background: #333333;
        color: white;
        text-decoration: none;
    }

    #lnvhvmenu ul .teamsmenu ul li:not(.conferencetitle):hover {
        background: royalblue;
        color: white;
        text-decoration: none;
    }

    #lnvhvmenu ul .teamsmenu ul li.conferencetitle:hover,
    #lnvhvmenu ul .teamsmenu ul li.divisiontitle:hover {
        background: #333333;
        text-decoration: none;
    }

    #lnvhvmenu ul .teamsmenu li a,
    #lnvhvmenu ul .teamsmenu li:hover a {
        height: 34px;
        background: none;
        text-decoration: none;
    }

    #lnvhvmenu .teamsmenu li ul li {
        max-width: 180px;
    }

    #lnvhvmenu .regularsub li {
        padding: 0 10px;
    }
}

/* --- Mobile / responsive menu --- */
@media all and (max-width: 768px),
       only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
       only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
       only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
       only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
       only screen and (min-resolution: 192dpi) and (max-width: 1024px),
       only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

    #lnvhvmenu {
        width: 100%;
    }

    #lnvhvmenu ul {
        width: 100%;
        display: none;
    }

    #lnvhvmenu > ul.open {
        display: block;
    }

    #lnvhvmenu.align-center > ul {
        text-align: left;
    }

    #lnvhvmenu ul li {
        width: 100%;
        border-top: 1px solid rgba(120, 120, 120, 0.2);
    }

    #lnvhvmenu ul ul li,
    #lnvhvmenu li:hover > ul > li {
        height: auto;
    }

    #lnvhvmenu ul li a,
    #lnvhvmenu ul ul li a {
        width: 100%;
        border-bottom: 0;
    }

    #lnvhvmenu > ul > li {
        float: none;
    }

    #lnvhvmenu ul ul li a {
        padding-left: 25px;
        color: #000000;
        background: none;
    }

    #lnvhvmenu ul ul ul li a {
        padding-left: 15px;
    }

    #lnvhvmenu ul ul li:hover > a,
    #lnvhvmenu ul ul li.active > a {
        color: #191919;
    }

    #lnvhvmenu ul ul,
    #lnvhvmenu ul ul ul,
    #lnvhvmenu.align-right ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
    }

    #lnvhvmenu > ul > li.has-sub > a::after,
    #lnvhvmenu > ul > li.has-sub > a::before,
    #lnvhvmenu ul ul > li.has-sub > a::after,
    #lnvhvmenu ul ul > li.has-sub > a::before {
        display: none;
    }

    #lnvhvmenu ul ul li,
    #lnvhvmenu ul ul li a,
    #lnvhvmenu ul ul ul li,
    #lnvhvmenu ul ul ul li a {
        display: block;
        background: #e1e1e1;
        color: #333333;
    }

    #lnvhvmenu ul ul ul li.conferencetitle,
    #lnvhvmenu ul ul ul li.divisiontitle {
        min-height: 48px;
        padding: 15px;
        font-size: 15px;
        font-weight: 700;
    }

    #lnvhvmenu ul ul ul li.conferencetitle:hover,
    #lnvhvmenu ul ul ul li.divisiontitle:hover {
        background: #e1e1e1;
        color: #333333;
    }

    /* Hamburger button */
    #lnvhvmenu #menu-button {
        display: block;
        padding: 17px;
        color: white;
        background: #333333;
        cursor: pointer;
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 700;
    }

    #lnvhvmenu #menu-button::after {
        position: absolute;
        top: 22px;
        right: 17px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid white;
        border-bottom: 2px solid white;
        content: '';
    }

    #lnvhvmenu #menu-button::before {
        position: absolute;
        top: 16px;
        right: 17px;
        display: block;
        height: 2px;
        width: 20px;
        background: white;
        content: '';
    }

    #lnvhvmenu #menu-button.menu-opened::after {
        top: 23px;
        border: 0;
        height: 2px;
        width: 15px;
        background: white;
        transform: rotate(45deg);
    }

    #lnvhvmenu #menu-button.menu-opened::before {
        top: 23px;
        background: white;
        width: 15px;
        transform: rotate(-45deg);
    }

    /* Sub-menu toggle button */
    #lnvhvmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid rgba(120, 120, 120, 0.2);
        height: 48px;
        width: 48px;
        cursor: pointer;
    }

    #lnvhvmenu .submenu-button.submenu-opened {
        background: #f2f2f2;
    }

    #lnvhvmenu ul ul .submenu-button {
        height: 48px;
        width: 48px;
    }

    #lnvhvmenu .submenu-button::before,
    #lnvhvmenu .submenu-button::after {
        background: white;
    }

    #lnvhvmenu .submenu-button::after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        content: '';
    }

    #lnvhvmenu ul ul .submenu-button::after {
        top: 50%;
        right: 50%;
        transform: translateY(0px) translateX(4px);
    }

    #lnvhvmenu .submenu-button.submenu-opened::after {
        background: #000000;
    }

    #lnvhvmenu .submenu-button::before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        content: '';
    }

    #lnvhvmenu ul ul .submenu-button::before {
        top: 50%;
        right: 50%;
        transform: translateY(-3px) translateX(1px);
    }

    #lnvhvmenu .submenu-button.submenu-opened::before {
        display: none;
    }

    #lnvhvmenu ul ul li .submenu-button::after,
    #lnvhvmenu ul ul li .submenu-button::before {
        background: black;
    }

    .MenuImageDiv {
        display: none;
    }

    .MenuAfterImage {
        padding-left: 17px;
    }

    .STHSPHPMenuDiv {
        display: none;
    }

    .STHSPHPMenuDivMobile {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 10px;
        margin: 0;
        line-height: 1;
    }

    .STHSPHPMenuDivMobile select {
        padding: 10px;
        border: 1px solid #f0f1f2;
        width: 100%;
    }

    .STHSPHPMenuDivTeamImage {
        width: 15px;
        height: auto;
    }

    .STHSPHP_Login {
        display: none;
    }

    @media screen and (max-width: 768px) {
        #lnvhvmenu .teamsmenu.open span {
            display: none;
        }
    }
}

/* --- lnvhvmenuLogin (secondary login nav, legacy compat) --- */
#lnvhvmenuLogin > ul > li > a {
    padding: 17px;
    font-size: 15px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #000000;
    font-weight: 700;
    text-transform: uppercase;
}

#lnvhvmenuLogin > ul > li:hover > a {
    color: #191919;
}

#lnvhvmenuLogin > ul > li.has-sub > a {
    padding-right: 30px;
}

#lnvhvmenuLogin > ul > li.has-sub > a::after {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #000000;
    content: '';
}

#lnvhvmenuLogin > ul > li.has-sub > a::before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #000000;
    content: '';
    transition: all 0.25s ease;
}

#lnvhvmenuLogin > ul > li.has-sub:hover > a::before {
    top: 23px;
    height: 0;
}

#lnvhvmenuLogin ul ul {
    position: absolute;
    left: -9999px;
}

#lnvhvmenuLogin ul ul li {
    height: 0;
    transition: all 0.25s ease;
}

#lnvhvmenuLogin li:hover > ul {
    left: auto;
}

#lnvhvmenuLogin li:hover > ul > li {
    height: 35px;
}

#lnvhvmenuLogin ul ul ul {
    margin-left: 100%;
    top: 0;
}

#lnvhvmenuLogin ul ul li a {
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    padding: 11px 15px;
    width: 200px;
    font-size: 15px;
    text-decoration: none;
    font-weight: 400;
    background: #ffffff;
    z-index: 1;
}

#lnvhvmenuLogin ul ul li:last-child > a,
#lnvhvmenuLogin ul ul li.last-item > a {
    border-bottom: 0;
}

#lnvhvmenuLogin ul ul li:hover > a,
#lnvhvmenuLogin ul ul li a:hover {
    text-decoration: underline;
}

#lnvhvmenuLogin ul ul li.has-sub > a::after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #000000;
    content: '';
}

#lnvhvmenuLogin ul ul li.has-sub > a::before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #000000;
    content: '';
    transition: all 0.25s ease;
}

#lnvhvmenuLogin ul ul > li.has-sub:hover > a::before {
    top: 17px;
    height: 0;
}


/* ==========================================================================
   3. SUB-NAVIGATION BARS
   ========================================================================== */

/* --- .submenuwrapper (team page tab nav, schedule carousel nav) --- */
header.lnvhvsubmenu {
    background: #ffffff;
}

.submenuwrapper {
    background: #ffffff;
    border-bottom: 1px solid rgb(210, 210, 210);
    display: flex;
    position: relative;
    align-items: center;
}

@media screen and (max-width: 640px) {
    .submenuwrapper::before {
        content: '>';
        position: absolute;
        right: 5px;
        color: rgba(0, 0, 0, 0.35);
        font-size: 16px;
        background: none;
        z-index: 9999;
    }
}

div.submenuwrapper {
    padding: 0 20px;
}

.lnvhvsubmenu .submenuwrapper ul {
    background: #ffffff;
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.lnvhvsubmenu .submenuwrapper ul::-webkit-scrollbar {
    display: none;
}

@media only screen and (max-width: 1024px) {
    .lnvhvsubmenu .submenuwrapper ul {
        position: relative;
    }
}

@media only screen and (min-width: 1024px) {
    .lnvhvsubmenu nav ul {
        padding: 0 0 0 20px;
        width: 100%;
    }
}

/* Sub-nav link base */
.submenuwrapper .navlink {
    align-items: center;
    color: rgb(51, 51, 51);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    margin-right: 20px;
    padding: 14px 0;
    text-transform: uppercase;
    height: 100%;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 0) !important;
}

/* Bold-width pre-render trick (prevents layout shift) */
.submenuwrapper .navlink::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.submenuwrapper .navlink::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.submenuwrapper .navlink.active {
    background-color: #ffffff;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 1) !important;
    color: rgb(37, 37, 37);
    cursor: default;
    font-weight: bold;
}

.submenuwrapper .navlink:hover {
    font-weight: bold;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 0.5) !important;
    text-decoration: none;
}

/* --- .lnvhv__submenu (inline horizontal submenu, used inside team pages) --- */
.lnvhv__submenu {
    background: #ffffff;
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.lnvhv__submenu::-webkit-scrollbar {
    display: none;
}

.lnvhv__submenu-link {
    align-items: center;
    color: rgb(51, 51, 51);
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    margin-right: 20px;
    padding: 14px 0;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 0) !important;
}

.lnvhv__submenu-link::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.lnvhv__submenu-link::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

a.lnvhv__submenu-link,
a:visited.lnvhv__submenu-link {
    color: rgb(51, 51, 51);
}

a:hover.lnvhv__submenu-link {
    text-decoration: none;
}

.lnvhv__submenu-link:hover {
    font-weight: bold;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 0.5) !important;
}

.lnvhv__submenu-link.active {
    background-color: #ffffff;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 1) !important;
    color: rgb(37, 37, 37);
    cursor: default;
    font-weight: bold;
}


/* ==========================================================================
   4. SORTABLE TABLES
   ========================================================================== */

.sortable {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    background-color: white;
    margin: 0;
    width: 100%;
    text-align: left;
    border-spacing: 0;
    border: 0;
    border-width: 0;
}

/* Header row */
.sortable th,
.sortable thead td,
.sortable thead tr::before,
.sortable tbody.teamavg {
    font-size: 13px;
    padding: 7px 8px;
    text-shadow: none;
    background-color: rgba(var(--teamcolorprimary), 1);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.sortable tbody.teamavg {
    cursor: default;
}

.sortable th.subdivide {
    background-color: rgba(var(--teamcolorprimary), 0.2);
    color: rgba(var(--teamcolorprimary), 1);
    font-weight: 600;
    cursor: default;
}

.sortable-no-sort th {
    background-color: #ababab;
    color: black;
}

/* Body / footer cells */
.sortable tbody td,
.sortable tfoot th,
.sortable tfoot td {
    padding: 7px 8px;
}

.sortable tbody tr td:first-of-type,
.sortable thead tr th:first-of-type {
    padding-left: 5px;
}

/* Border reset */
.sortable th,
.sortable td {
    border: 0;
    border-width: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
}

.sortable .header,
.sortable .sortable-header {
    padding: 7px 4px;
}

.sortable .header *,
.sortable .sortable-header * {
    margin-right: 15px;
}

/* Striped rows */
.sortable tbody tr:nth-child(even),
.sortable tfoot tr:nth-child(even) {
    background-color: #ffffff;
}

.sortable tbody tr:nth-child(odd),
.sortable tfoot tr:nth-child(odd) {
    background-color: #F0F1F2;
}

/* Full-width thead/tbody */
.sortable thead,
.sortable tbody {
    width: 100% !important;
}

/* Sticky first column */
.sortable > * > tr > th,
.sortable > * > tr > td {
    position: relative;
}

.sortable > *:not(.sortable-no-sort) > tr > th:first-child,
.sortable > *:not(.sortable-no-sort) > tr > td:first-child {
    border-left: 0;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    margin: 0;
    z-index: 2;
}

/* Sticky thead */
.sortable thead {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 55;
}

.sortable > .sortable-no-sort > tr > td {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
}

/* First-column text styling */
.sortable:not(.STHSPHPTeam_CoachesTable) > * > tr > td:first-child {
    color: black;
    background-color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.sortable:not(.STHSPHPTeam_CoachesTable) > tbody.teamavg > tr > td:first-child {
    background-color: rgba(var(--teamcolorprimary), 1);
    color: white;
    font-weight: 600;
}

/* First-column links */
.sortable > *:not(.sortable-no-sort) > tr > th:first-child a,
.sortable > *:not(.sortable-no-sort) > tr > td:first-child a {
    color: black;
    text-decoration: none;
}

.sortable > *:not(.sortable-no-sort) > tr > th:first-child a:hover,
.sortable > *:not(.sortable-no-sort) > tr > td:first-child a:hover {
    text-decoration: underline;
}

/* Row hover highlight */
.sortable tbody > tr.hover > td,
.sortable:not(.STHSPHPTeam_CoachesTable) tbody > tr:hover > td,
.sortable:not(.STHSPHPTeam_CoachesTable) tbody > tr.even:hover > td,
.sortable:not(.STHSPHPTeam_CoachesTable) tbody > tr.odd:hover > td {
    border-top: 1px solid royalblue;
    border-bottom: 1px solid royalblue;
    background-color: initial;
}

/* Sorted column.
   sortable.js marks only the HEADER cell (th.sorttable_sorted / _reverse);
   assets/js/main.js (section 4) copies that state onto the column's BODY cells
   as .lnvhv-sortcol, and clears it again on "Tri par défaut".
   The header must stay OPAQUE: the thead is position:sticky, so a see-through
   sorted header lets the rows scrolling beneath it show through (their numbers
   appeared on top of the header's colour).  The header therefore keeps its own
   solid colour and text colour and is only lightened with a flat overlay layer
   (still opaque); the tint that marks the sorted column sits on the body cells.
   Never give a sorted th `background: none` or a translucent background-color. */
.sortable th.sorttable_sorted,
.sortable th.sorttable_sorted_reverse {
    background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22));
    cursor: pointer;
}

.sortable td.lnvhv-sortcol {
    background-color: rgba(var(--teamcolorprimary), 0.1);
}

.sortable th {
    padding-left: 8px;
    padding-right: 8px;
}

.sortable th.sorttable_sorted,
.sortable th.sorttable_sorted_reverse {
    padding-left: 3px;
    padding-right: 3px;
    vertical-align: top;
}

.STHSW140Min.sorttable_sorted,
.STHSW140Min.sorttable_sorted_reverse {
    width: 150px;
    min-width: 150px;
}

/* Sort arrow.
   sortable.js marks the sorted header .sorttable_sorted (first click; the
   library's own indicator is a down triangle) or .sorttable_sorted_reverse
   (second click; an up triangle).  The library's own indicator spans are hidden
   just below, because this arrow replaces them.
   The arrow is DRAWN BY THIS STYLESHEET -- a CSS triangle in the header's own
   text colour (currentColor) -- and is not loaded from an image file.  It used to
   be background: url(../../images/icons/lnvhv-sort-dn.svg), a path relative to
   THIS file: from assets/css/ that lands in new_site/images/icons/, while the
   site's images are served from the web-root /images/ folder ($ImagesCDNPath =
   ".."), so the arrow only worked if the two icon files had been uploaded to
   new_site/images/icons/.  Without them a sorted header showed the room made for
   the arrow (the reduced side padding above) with no arrow in it.
   A drawn arrow cannot go missing when a file or this stylesheet moves, and
   because it follows `color` it stays readable on the light-primary teams, whose
   header text is dark (the --teamcolortextonprimary override on the team pages).
   Footprint: 8px triangle + 2px margin = the 10px that the sorted header's
   reduced side padding (8px -> 3px) frees up, so a header keeps its width when it
   is sorted.  The arrow is an inline-block 5px tall, raised 2px off the baseline,
   i.e. entirely inside the header's 21px line box: it never changes a header's
   height, which must stay identical in every state (see .divTablesorter,
   contain: paint).  Do not make it taller than the line or give it vertical
   margins. */
.sortable:not(.sortable-noicons) th::after {
    content: "";
}

.sortable:not(.sortable-noicons) th.sorttable_sorted::after,
.sortable:not(.sortable-noicons) th.sorttable_sorted_reverse::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 0 0 2px;
    padding: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    vertical-align: 2px;
}

.sortable:not(.sortable-noicons) th.sorttable_sorted::after {
    border-top: 5px solid currentColor;
}

.sortable:not(.sortable-noicons) th.sorttable_sorted_reverse::after {
    border-bottom: 5px solid currentColor;
}

#sorttable_sortfwdind,
#sorttable_sortrevind {
    display: none;
}

/* Row-numbered tables */
.rownums.sortable tbody {
    counter-reset: sortabletablescope;
}

.rownums.sortable thead tr::before,
.rownums.sortable tfoot tr::before {
    content: "";
    display: table-cell;
    border: 0;
    border-width: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    width: 25px;
}

.rownums.sortable tbody tr::before {
    content: counter(sortabletablescope);
    counter-increment: sortabletablescope;
    display: table-cell;
    padding: 7px 8px;
    border: 0;
    border-width: 0;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    white-space: nowrap;
    color: black;
    background-color: rgba(255, 255, 255, 0.7);
}

/* Avg row */
.lnvhvtablesorter-avg {
    background-color: #333333 !important;
    color: white !important;
}

/* Scrollable table wrapper */
.divTablesorter {
    display: block;
    width: 100%;
    max-height: 600px;
    overflow: scroll;
    z-index: 3;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto;
    background-color: #ffffff;
    /* contain: paint -- KEEP.  It makes the table paint identically wherever
       the wrapper sits on the page.
       Without it Chromium paints the sticky header row and the sticky first
       column (they are separate layers) at the wrapper's SUB-PIXEL offset.  When
       that offset changes after the first paint (an image or other content above
       the table finishing loading, a layout change above it) only the cells that
       are repainted afterwards take the new offset.  At fractional display
       scaling (Windows 125 / 150 / 175 %, or browser zoom) that showed as:
       clicking a header made it 1px taller with its text 1px lower, the
       previously clicked headers stayed that way, "Tri par defaut" did not undo
       it, and the headers never clicked kept a light line under them.  With
       containment the table interior is painted from the wrapper's own origin,
       so every cell is always painted the same, whenever the wrapper moves. */
    contain: paint;
}

.divTablesorter::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
    min-height: 4px;
}

@media screen and (min-width: 1025px) {
    .divTablesorter::-webkit-scrollbar {
        width: 20px;
        min-height: 20px;
    }
}

.divTablesorter::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(var(--teamcolorprimary), 0.5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Tab main area */
.STHSPHPTeamStat_Main .tabsmain > div .tabmain {
    width: 100%;
    margin: 20px 0;
    position: relative;
}

.STHSPHPTeamStat_Main .tabsmain > div .active[id*='tabmain'] {
    display: grid;
}

/* Team logo inside table */
.STHSPHPPlayersStatsTeamImage {
    width: 24px;
    height: 24px;
    margin: 0 5px;
    padding: 0;
}

/* --- Traded-player stat rows (Statistics tab: pro-team.php / farm-team.php) ---
   Main row shows this badge instead of a team crest once a player/goalie has
   appeared for more than one team this season (server sets
   $row['_multiTeamRows']); one dimmed row per team is rendered directly
   beneath it, matching legacy's inline opacity:0.5 treatment. */
.STHSPHPTotLabel {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #666666;
    color: #ffffff;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.02em;
    border-radius: 3px;
    height: 16px;
    padding: 0 5px;
}

tr.STHSPHPSubRow {
    opacity: 0.5;
}

/* Sub-rows are a breakdown of the row directly above them, not additional
   roster entries -- excluded from the row-count column so numbering stays
   aligned with actual players/goalies regardless of how many were traded. */
.rownums.sortable tbody tr.STHSPHPSubRow::before {
    content: "";
    counter-increment: none;
}

/* Width helpers */
.STHSW250 { width: 250px; }
.STHSW140Min { min-width: 140px; }
.STHSW55 { min-width: 55px; }
.STHSW45 { min-width: 45px; }
.STHSW30 { min-width: 30px; }
.STHSW25 { min-width: 25px; }

/* Alignment helpers */
.lnvhvtd-left  { text-align: left; }
.lnvhvtd-center { text-align: center; }
.lnvhvtd-right  { text-align: right; }


/* ==========================================================================
   5. STANDINGS (.lnvhv__Standings)
   ========================================================================== */

.lnvhv__Standings {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lnvhv__Standings .divTablesorter {
    display: block;
    width: 100%;
    overflow-x: scroll;
    z-index: 3;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin: 0 auto;
}

.lnvhv__Standings .divTablesorter h2 {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    margin: 0;
    z-index: 50;
}

/* Second column sticky (team name) */
.lnvhv__Standings .sortable > * > tr > th:nth-child(2),
.lnvhv__Standings .sortable > * > tr > td:nth-child(2) {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    margin: 0;
    z-index: 50;
    min-width: 145px;
}

.lnvhv__Standings .sortable > * > tr > td:first-child {
    color: black;
    background-color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    position: relative;
}

.lnvhv__Standings .sortable > * > tr > th:first-child,
.lnvhv__Standings .sortable > * > tr > td:first-child {
    position: relative;
}

.lnvhv__Standings .sortable > * > tr > td:nth-child(2) {
    color: black;
    background-color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.lnvhv__Standings .sortable > *:not(.sortable-no-sort) > tr > th:nth-child(2) a,
.lnvhv__Standings .sortable > *:not(.sortable-no-sort) > tr > td:nth-child(2) a {
    color: black;
    text-decoration: none;
}

.lnvhv__Standings .sortable > *:not(.sortable-no-sort) > tr > th:nth-child(2) a:hover,
.lnvhv__Standings .sortable > *:not(.sortable-no-sort) > tr > td:nth-child(2) a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   6. SCORES PAGE (.lnvhv__Scores)
   ========================================================================== */

.lnvhv__Scores {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

@media (min-width: 1024px) {
    .lnvhv__Scores {
        padding: 40px;
    }
}

@media (min-width: 1248px) {
    .lnvhv__Scores {
        padding: 20px;
    }
}

.lnvhv__Scores-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(1 / 1 * 100% - (1 - 1 / 1) * 24px);
    max-width: 678px;
    background-color: #f0f1f2;
    border: 1px solid #f0f1f2;
    border-radius: 8px;
}

.lnvhv__Scores-box-upcoming {
    background-color: white;
}

@media (min-width: 768px) {
    .lnvhv__Scores-box {
        width: calc(1 / 2 * 100% - (1 - 1 / 2) * 24px);
    }
}

@media (min-width: 1248px) {
    .lnvhv__Scores-box {
        width: calc(1 / 3 * 100% - (1 - 1 / 3) * 24px);
    }
}

.lnvhv__Scores .lnvhv__leaguetype {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 0 16px;
}

.lnvhv__Scores .lnvhv__leaguetype-box {
    display: flex;
    text-align: left;
}

.lnvhv__Scores .lnvhv__leaguetype-content {
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: -0.01px;
    display: flex;
    height: 22px;
    border-radius: 4px;
    background-color: white;
    color: #121212;
    text-align: center;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
}

.lnvhv__Scores-box-upcoming .lnvhv__leaguetype-content {
    background-color: #f0f1f2;
}

.lnvhv__Scores-teams {
    display: flex;
    flex-direction: column;
    height: 110px;
    gap: 8px;
    margin: 16px 16px 16px 10px;
}

.lnvhv__Scores-teamrow {
    display: flex;
    height: 55px;
    justify-content: space-between;
    align-items: center;
}

.lnvhv__Scores .lnvhv__team-logo {
    font-size: 48px;
    line-height: 48px;
    font-weight: 500;
    height: 40px;
    display: flex;
    justify-content: center;
    margin-left: 5px;
}

.lnvhv__Scores .lnvhv__team-logo-wrapper {
    display: flex;
    flex: 1;
}

.lnvhv__Scores .lnvhv__team-logo-container {
    display: flex;
    align-items: center;
    flex: 1 1 0%;
    color: #000000;
}

.lnvhv__Scores .lnvhv__team-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.lnvhv__Scores .lnvhv__teaminfo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: -0.01px;
    width: 100%;
    padding-left: 7px;
    color: black;
}

.lnvhv__Scores .lnvhv__teaminfo-name {
    font-size: 14px;
    line-height: 19.6px;
    font-weight: 700;
    width: 144px;
    height: 22px;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .lnvhv__Scores .lnvhv__teaminfo-name {
        font-size: 16px;
        line-height: 22.4px;
        font-weight: 700;
    }
}

.lnvhv__Scores .lnvhv__teaminfo-data {
    display: flex;
    flex-direction: row;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: -0.01px;
    color: #6F6F6F;
}

.lnvhv__Scores .lnvhv__team-score {
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    display: initial;
    width: 100%;
    max-width: 50px;
    height: 34px;
    text-align: right;
    color: #121212;
    padding-top: 6px;
}

.lnvhv__Scores .lnvhv__team-record {
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 700;
    display: initial;
    width: 100%;
    max-width: 200px;
    height: 34px;
    text-align: right;
    color: #121212;
    padding-top: 6px;
}

/* 3 Stars section */
.lnvhv__Scores .lnvhv__3stars {
    display: flex;
    flex-direction: column;
}

.lnvhv__Scores .lnvhv__3stars-title {
    font-size: 12px;
    line-height: 12px;
    font-weight: 700;
    width: 150px;
    min-height: 17px;
    padding-left: 16px;
}

.lnvhv__Scores .lnvhv__3stars-scrollbox {
    margin-left: 16px;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
}

.lnvhv__3stars-scrollbox::-webkit-scrollbar {
    -webkit-appearance: none;
    display: none;
}

.lnvhv__Scores .lnvhv__3stars-wrapper {
    display: inline-flex;
    margin: 4px 0;
}

.lnvhv__Scores .lnvhv__3stars-item {
    display: flex;
    min-width: 210px;
    height: 64px;
    background-color: white;
    border-radius: 8px;
    margin-right: 16px;
    justify-content: space-between;
}

.lnvhv__Scores .lnvhv__3stars-item-content {
    display: flex;
    align-items: center;
}

.lnvhv__Scores .lnvhv__3stars-player {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
}

.lnvhv__Scores .lnvhv__starinfo {
    display: flex;
    flex-direction: column;
    margin: 8px;
    white-space: nowrap;
}

.lnvhv__Scores .lnvhv__starinfo-player {
    display: flex;
}

.lnvhv__Scores .lnvhv__starinfo-player .name {
    max-width: 128px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 50px;
    display: flex;
    align-items: center;
}

/* Scroll navigation dots/arrows */
.lnvhv__Scores .scrollnav {
    margin: 4px 0;
    align-items: center;
    align-content: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.lnvhv__Scores .scrollnav .arrows {
    user-select: none;
    width: 1em;
    height: 1em;
    display: inline-block;
    fill: royalblue;
    flex-shrink: 0;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, 0.5s;
    font-size: 24px;
    cursor: default;
}

.lnvhv__Scores .scrollnav .arrows.active {
    cursor: pointer;
}

.lnvhv__Scores .scrollnav .lines {
    transition: 0.5s;
    width: 12px;
    background: #C5C5C7;
    height: 2px;
    margin: 0 2px;
    cursor: pointer;
}

.lnvhv__Scores .scrollnav .lines.active {
    transition: 0.5s;
    width: 24px;
    background: #0042BB;
    height: 2px;
    margin: 0 2px;
    cursor: pointer;
}

.lnvhv__Scores .linkbox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 44px;
    width: 100%;
    border-top: solid 1px #E5E5E5;
    cursor: pointer;
}

.lnvhv__Scores .linkbox a {
    color: royalblue;
}

.lnvhv__Scores .bold {
    font-weight: 700;
}


/* ==========================================================================
   7. STATS PAGE & LEADERS WIDGET
   ========================================================================== */

.lnvhv__Stats {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.lnvhvstats__leaders-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.lnvhvstats__leaders-content {
    background: #ffffff;
    box-shadow: none;
    margin-bottom: 0;
    padding: 30px 20px 10px;
    flex: 1 1 25%;
    position: relative;
}

.lnvhvstats__leaders-content h2 {
    padding: 10px 0;
}

/* Tab nav inside leaders box */
.lnvhvstats__leaders-box-nav {
    background: #ffffff;
    border-bottom: 1px solid rgb(210, 210, 210);
    display: flex;
    color: #333333;
    white-space: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.lnvhvstats__leaders-box-nav::-webkit-scrollbar {
    display: none;
}

.lnvhvstats__leaders-box-navlink {
    align-items: center;
    color: rgb(51, 51, 51);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    font-size: 16px;
    margin-right: 10px;
    padding: 14px 0;
    text-transform: uppercase;
    height: 100%;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 0) !important;
}

.lnvhvstats__leaders-box-navlink::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.lnvhvstats__leaders-box-navlink::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.newsItem .lnvhvstats__leaders-box-navlink {
    font-size: 14px;
}

a.lnvhvstats__leaders-box-navlink,
a:visited.lnvhvstats__leaders-box-navlink {
    color: rgb(51, 51, 51);
}

.lnvhvstats__leaders-box-navlink:hover {
    font-weight: bold;
    text-decoration: none;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 0.5) !important;
}

.lnvhvstats__leaders-box-navlink.active {
    background-color: #ffffff;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 1) !important;
    color: rgb(37, 37, 37);
    cursor: default;
    font-weight: bold;
}

/* Leaders list (rank/logo/name/pos/value grid) */
.lnvhvstats__leaders-list-container {
    display: block;
    padding-top: 20px;
}

.lnvhvstats__leaders-list {
    display: grid;
    grid-template-columns: 30px 30px auto 30px 30px;
    grid-template-areas: 'rank logo name pos value';
    align-items: center;
    gap: 5px;
}

.lnvhvstats__leaders-list .lnvhvplayermugshot-container {
    width: 100%;
}

.lnvhvstats__leaders-list .teamleaders-name {
    display: flex;
}

.lnvhvstats__leaders-list .lnvhvplayermugshot-photo {
    width: 110px;
    height: 110px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #f1f1f5;
    border: 3px solid rgba(var(--teamcolorprimary), 1);
    border-radius: 50%;
}

.lnvhvstats__leaders-list .lnvhvplayermugshot-photo > img {
    margin-bottom: -10px;
}

.lnvhvstats__leaders-list-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    align-items: center;
    padding: 5px;
}

.lnvhvstats__leaders-list-first {
    margin-bottom: 10px;
    grid-column: 1 / span 5;
}

.lnvhvstats__leaders-list-first .teamleaders_place {
    display: flex;
    background: white;
    padding: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    top: 10px;
}

.lnvhvstats__leaders-list-name a {
    text-decoration: none;
    color: black;
}

.lnvhvstats__leaders-list-name a:hover {
    text-decoration: underline;
}

.lnvhvstats__leaders-list-rank {
    width: 20px;
}

.lnvhvstats__leaders-list-name {
    text-align: left;
    padding: 10px 0 5px 0;
}

.lnvhvstats__leaders-list-position {
    text-align: center;
}

.lnvhvstats__leaders-list-value {
    text-align: right;
    font-weight: 600;
}

.lnvhv-abbre {
    text-transform: uppercase;
}


/* ==========================================================================
   8. PLAYER MUGSHOT / PHOTO WIDGET
   ========================================================================== */

.lnvhvplayermugshot-container {
    width: 44px;
    text-align: center;
    position: relative;
    padding: 2px 4px 2px 0;
    display: inline-block;
}

.lnvhvplayermugshot-name {
    margin-left: 10px;
}

.lnvhvplayermugshot-photo {
    width: 36px;
    height: 36px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #f1f1f5;
    border-radius: 50%;
}

.lnvhvplayermugshot-logo {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
    border-radius: 50%;
    border-style: none;
    vertical-align: bottom;
    z-index: 100;
}


/* ==========================================================================
   9. TEAM PAGE HEADER (.lnvhv__Teams__Header)
   ========================================================================== */

.lnvhv__Teams__Header {
    width: 100%;
    margin: 0;
    padding: 20px 0 0 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    line-height: 1;
    border-collapse: collapse;
    border-spacing: 0;
    list-style: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

@media only screen and (max-width: 800px) {
    .lnvhv__Teams__Header {
        padding: 20px 20px 0 20px;
    }
}

.lnvhv__Teams__Header * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    line-height: 1;
    border-collapse: collapse;
    border-spacing: 0;
    list-style: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

.lnvhv__Teams__Header .lnvhvteam {
    display: flex;
    align-items: center;
}

.lnvhv__Teams__Header .teamlogo--container {
    position: relative;
}

/* object-fit:contain (round 2): browser default (fill) stretches the
   artwork asymmetrically whenever a team's actual logo file isn't a square
   canvas (confirmed by reproducing the exact reported oval-distortion in a
   real browser). Zero visual effect for an already-square source (contain
   === fill when the aspect ratio already matches), so this is a strict
   improvement with no downside.

   max-width:none (round 4): base.css's global "img { max-width:100%; }"
   was confirmed — via a controlled real-browser A/B test — to be the cause
   of the logo rendering smaller than intended, overriding round 3's
   --logo-size recalibration attempt (which was chasing the wrong variable:
   base.css already owns --logo-size correctly, see below). Root cause is a
   flex-shrink/min-content interaction, not a literal width clamp (confirmed
   by testing an empty figure with no <img> child at all, which shrank
   identically) — the responsive-image rule changes how the browser treats
   this flex item's shrink floor. base.css itself is intentionally left
   untouched (its own header says "DO NOT add component-specific or
   page-specific rules here"); this override lives in theme.css instead,
   at higher specificity than the generic "img" selector, so it doesn't
   affect any other image on the site. */
.lnvhv__Teams__Header .teamlogo {
    height: calc(var(--logo-size) / 2);
    width: calc(var(--logo-size) / 2);
    max-width: none;
    object-fit: contain;
}

.lnvhv__Teams__Header .teaminfo--container {
    display: flex;
    margin-left: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.lnvhv__Teams__Header h2.teaminfo-name {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    padding: 0;
    line-height: 1;
    margin-bottom: 3px;
}

.lnvhv__Teams__Header .teaminfo-location {
    font-size: 16px;
}

.lnvhv__Teams__Header .teaminfo-stats {
    font-size: 16px;
    text-align: right;
}

.lnvhv__Teams__Header .teaminfo-record,
.lnvhv__Teams__Header .teaminfo-points,
.lnvhv__Teams__Header .teaminfo-ranking {
    font-size: 16px;
}

.lnvhv__Teams__Header .teaminfo-ranking {
    font-size: 14px;
    margin-top: 5px;
}

.lnvhv__Teams__Header .teaminfo-points {
    display: none;
}

.lnvhv__Teams__Header .teaminfo-points-value {
    font-weight: 700;
}

.lnvhv__Teams__Header .teaminfo-ranking {
    display: block;
}

/* Team stat bar (right side of header) */
.lnvhv__Teams__Header .teamstats {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    border-left: 3px solid rgba(var(--teamcolorprimary), 1);
    background-color: #F0F1F2;
}

.lnvhv__Teams__Header .teamstats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lnvhv__Teams__Header .teamstats::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent rgba(var(--teamcolorsecondary), 1);
    transform: translateY(-50%);
}

.lnvhv__Teams__Header abbr {
    text-decoration: none;
}

.lnvhv__Teams__Header .teamstats-name {
    text-transform: uppercase;
    font-size: 12px;
}

.lnvhv__Teams__Header .teamstats-value {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    margin-bottom: 3px;
    font-size: 28px;
}

.lnvhv__Teams__Header .teamstats-rank {
    font-size: 12px;
}

.lnvhv__Teams__Header .teamstats::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 7px;
    border-color: transparent transparent transparent rgba(var(--teamcolorprimary), 1);
    transform: translateY(-50%);
}

/* --logo-size: base.css already defines this correctly at all three
   breakpoints (144/288/320px) and theme.css should not redefine it —
   rounds 1 and 3 both added overrides here, chasing a symptom (the logo
   rendering smaller than the legacy page) that was actually caused by
   base.css's global "img { max-width:100%; }" rule interacting with this
   component's flex layout, not by a missing or wrong --logo-size value.
   See the max-width:none override on .lnvhv__Teams__Header .teamlogo
   above, which is the real fix (round 4) — confirmed via a controlled
   real-browser A/B test with base.css's OWN unmodified --logo-size values
   in place. */

@media screen and (min-width: 800px) {
    .lnvhv__Teams__Header .lnvhvteam--container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lnvhv__Teams__Header .lnvhvteam {
        margin-bottom: 8px;
    }

    .lnvhv__Teams__Header .teaminfo--container {
        flex-direction: column;
        align-items: initial;
    }

    .lnvhv__Teams__Header .teaminfo {
        margin-bottom: 16px;
    }

    #wrapper .lnvhv__Teams__Header h2.teaminfo-name {
        font-size: 40px;
    }

    .lnvhv__Teams__Header .teaminfo-location {
        font-size: 24px;
    }

    .lnvhv__Teams__Header .teaminfo-stats {
        text-align: left;
    }

    .lnvhv__Teams__Header .teaminfo-record,
    .lnvhv__Teams__Header .teaminfo-points {
        font-size: 20px;
    }

    .lnvhv__Teams__Header .teaminfo-points {
        display: inline;
    }

    .lnvhv__Teams__Header .teamstats {
        width: 50%;
        height: 120px;
        border-left-width: 5px;
    }

    .lnvhv__Teams__Header .teamstats::before {
        border-width: 22px 0 22px 22px;
    }

    .lnvhv__Teams__Header .teamstats-name {
        font-size: 14px;
    }

    .lnvhv__Teams__Header .teamstats-value {
        font-size: 40px;
    }

    .lnvhv__Teams__Header .teamstats::after {
        left: -2px;
        border-width: 16px 0 16px 16px;
    }
}

@media screen and (min-width: 1200px) {
    .lnvhv__Teams__Header .teamstats-name {
        font-size: 20px;
    }
}

@media screen and (max-width: 800px) {
    .lnvhv__Teams__Header .teamstats {
        padding-top: 8px;
        padding-bottom: 8px;
        width: 100%;
        height: 74px;
    }
}

/* GM contact bar */
.GMContact {
    display: flex;
    padding: 10px 20px;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media screen and (min-width: 640px) {
    .GMContact {
        justify-content: left;
    }
}

.GMContact a {
    display: flex;
    background-color: rgba(var(--teamcolorprimary), 1);
    padding: 5px 10px;
    line-height: 1;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    max-width: 50%;
}


/* ==========================================================================
   10. TEAM PAGE LEADERS (.lnvhv__Leaders__Team)
   ========================================================================== */

.lnvhv__Leaders__Team {
    overflow: hidden;
}

.lnvhv__Leaders__Team * {
    line-height: 1;
}

.lnvhv__Leaders__Team .lnvhvstats__leaders-container {
    display: grid;
    grid-template: auto 1fr / 1fr 1fr;
    grid-area: leaders;
    flex: 3 1 0%;
    gap: 20px;
    padding: 20px;
}

@media only screen and (min-width: 760px) {
    .lnvhv__Leaders__Team .lnvhvstats__leaders-container {
        display: grid;
        grid-template: auto / 1fr 1fr 1fr 1fr;
    }
}

/* Leaders card with SVG background */
.lnvhvstats__leaders-item-content {
    box-shadow: none;
    margin-bottom: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #F0F1F2;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="906" height="272" viewBox="0 0 906 272" fill="none"><path d="M152.341 248.317L152.335 248.311L152.33 248.306C101.788 197.689 101.744 122.352 114.72 59.7858C140.073 -58.1446 213.179 -143.947 334.263 -200.284C455.372 -256.634 624.473 -283.5 841.755 -283.5C1072.05 -283.5 1215.4 -251.311 1296.02 -191.18C1336.31 -161.128 1360.94 -124.091 1372.92 -80.5745C1384.88 -37.1519 1384.25 12.7509 1374 68.6431L928.551 68.618C937.848 9.82864 924.834 -28.0033 896.416 -50.5305C883.344 -63.5919 865.833 -71.5892 844.527 -76.3239C823.214 -81.0602 798.07 -82.5386 769.712 -82.5386C672.776 -82.5386 615.757 -48.2502 602.693 8.79034L602.692 8.79575C600.794 17.527 600.657 26.5493 602.289 35.3343C603.922 44.1192 607.291 52.49 612.199 59.9564L612.214 59.9793L612.232 60.0004C619.401 68.6657 633.379 76.9364 652.472 85.0398C671.586 93.152 695.903 101.127 723.831 109.167C762.831 120.394 808.909 131.756 857.739 143.797C878.838 149 900.45 154.329 922.228 159.829C994.418 178.061 1068.43 198.17 1131.63 221.762C1194.85 245.361 1247.15 272.417 1276.01 304.504L1276.01 304.505C1293.09 323.36 1309.58 347.804 1319.01 380.49C1328.44 413.176 1330.8 454.132 1319.6 506.025C1308.24 556.287 1286.41 603.589 1255.53 644.844C1224.68 686.071 1185.48 720.333 1140.5 745.397C905.881 761.773 673.13 798.52 444.878 855.223C208.73 844.586 93.215 797.345 40.6639 729.775C-11.808 662.306 -1.64327 574.403 14.2753 481.794H478.518C466.82 541.746 469.198 585.462 491.717 613.889L491.725 613.898L491.732 613.907C516.546 642.413 554.606 657.787 614.932 657.787C662.203 657.787 712.766 652.47 753.893 636.048C795.032 619.622 826.785 592.056 836.28 547.553C838.178 538.823 838.315 529.801 836.683 521.017C835.05 512.232 831.681 503.861 826.773 496.395L826.766 496.385C820.775 487.697 807.572 479.366 788.959 471.17C770.319 462.961 746.157 454.849 718.137 446.645C677.534 434.757 628.788 422.664 576.942 409.802C557.233 404.913 537.076 399.912 516.747 394.77C442.932 376.096 366.849 355.544 301.696 331.62C236.523 307.688 182.368 280.408 152.341 248.317Z" stroke="%23ffffff"/></svg>'), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="906" height="272" viewBox="0 0 906 272" fill="none"><path d="M152.341 248.317L152.335 248.311L152.33 248.306C101.788 197.689 101.744 122.352 114.72 59.7858C140.073 -58.1446 213.179 -143.947 334.263 -200.284C455.372 -256.634 624.473 -283.5 841.755 -283.5C1072.05 -283.5 1215.4 -251.311 1296.02 -191.18C1336.31 -161.128 1360.94 -124.091 1372.92 -80.5745C1384.88 -37.1519 1384.25 12.7509 1374 68.6431L928.551 68.618C937.848 9.82864 924.834 -28.0033 896.416 -50.5305C883.344 -63.5919 865.833 -71.5892 844.527 -76.3239C823.214 -81.0602 798.07 -82.5386 769.712 -82.5386C672.776 -82.5386 615.757 -48.2502 602.693 8.79034L602.692 8.79575C600.794 17.527 600.657 26.5493 602.289 35.3343C603.922 44.1192 607.291 52.49 612.199 59.9564L612.214 59.9793L612.232 60.0004C619.401 68.6657 633.379 76.9364 652.472 85.0398C671.586 93.152 695.903 101.127 723.831 109.167C762.831 120.394 808.909 131.756 857.739 143.797C878.838 149 900.45 154.329 922.228 159.829C994.418 178.061 1068.43 198.17 1131.63 221.762C1194.85 245.361 1247.15 272.417 1276.01 304.504L1276.01 304.505C1293.09 323.36 1309.58 347.804 1319.01 380.49C1328.44 413.176 1330.8 454.132 1319.6 506.025C1308.24 556.287 1286.41 603.589 1255.53 644.844C1224.68 686.071 1185.48 720.333 1140.5 745.397C905.881 761.773 673.13 798.52 444.878 855.223C208.73 844.586 93.215 797.345 40.6639 729.775C-11.808 662.306 -1.64327 574.403 14.2753 481.794H478.518C466.82 541.746 469.198 585.462 491.717 613.889L491.725 613.898L491.732 613.907C516.546 642.413 554.606 657.787 614.932 657.787C662.203 657.787 712.766 652.47 753.893 636.048C795.032 619.622 826.785 592.056 836.28 547.553C838.178 538.823 838.315 529.801 836.683 521.017C835.05 512.232 831.681 503.861 826.773 496.395L826.766 496.385C820.775 487.697 807.572 479.366 788.959 471.17C770.319 462.961 746.157 454.849 718.137 446.645C677.534 434.757 628.788 422.664 576.942 409.802C557.233 404.913 537.076 399.912 516.747 394.77C442.932 376.096 366.849 355.544 301.696 331.62C236.523 307.688 182.368 280.408 152.341 248.317Z" stroke="%23ffffff"/></svg>');
    background-size: cover, cover;
    background-position-x: -50px, -480px;
    position: relative;
    border-radius: 8px;
}

/* Leaders card typography */
.teamleaders_title {
    font-family: 'Oswald', sans-serif;
    color: black;
    text-transform: uppercase;
    font-size: 16px;
}

.teamleaders_stat {
    font-family: 'Oswald', sans-serif;
    color: black;
    text-transform: uppercase;
    font-size: 40px;
    padding: 10px 0 20px 0;
}

.teamleaders_info {
    color: black;
    display: flex;
    align-items: center;
    gap: 5px;
}

.teamleaders_name {
    font-weight: 600;
    font-size: 20px;
    padding: 10px 0;
    text-align: center;
    min-height: 60px;
}

.teamleaders_pos {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 300;
    font-size: 14px;
}

.teamleaders_info a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: black;
}

.teamleaders_info a:hover {
    text-decoration: underline;
}

/* ADDED (Phase 2 item 4): stack position under name on mobile, similar to
   the lineup page — previously name+position sat side-by-side in a row,
   cramped at narrow widths. Breakpoint matches the existing
   .lnvhvstats__leaders-container mobile/desktop split (760px) above; this is
   the complementary "below that breakpoint" query. */
@media only screen and (max-width: 759px) {
    .teamleaders_info {
        flex-direction: column;
    }
    .teamleaders_name {
        min-height: 0;
    }
}

/* Large mugshot on team leaders card */
.lnvhv__Leaders__Team .lnvhvplayermugshot-container {
    width: 110px;
    text-align: center;
    position: relative;
    padding: 2px 0;
    display: inline-block;
}

.lnvhv__Leaders__Team .lnvhvplayermugshot-name {
    margin-left: 10px;
}

.lnvhv__Leaders__Team .lnvhvplayermugshot-photo {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #f1f1f5;
    border: 3px solid rgba(var(--teamcolorsecondary), 1);
    box-shadow: 0 0 0 6px rgba(var(--teamcolorprimary), 1);
    border-radius: 50%;
}

.lnvhv__Leaders__Team .lnvhvplayermugshot-logo {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: white;
    border-radius: 50%;
    border-style: none;
    vertical-align: bottom;
    z-index: 100;
}


/* ==========================================================================
   11. SCHEDULE CAROUSEL (Swiper-based)
   ========================================================================== */

.stats-widget__container {
    margin: 20px;
}

/* Full reset scoped to carousel */
.lnvhv-schedule-carousel * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    line-height: 1;
    border-collapse: collapse;
    border-spacing: 0;
    list-style: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    box-sizing: content-box;
}

.lnvhv-schedule-carousel a,
.lnvhv-schedule-carousel a:visited {
    color: black;
}

.lnvhv-schedule-carousel a:hover,
.lnvhv-schedule-carousel a:focus {
    background: rgba(var(--teamcolorprimary), 0.2);
    text-decoration: none;
}

/* Swiper layout */
.lnvhv-schedule-carousel__swiper {
    display: flex;
}

/* .swiper must clip its slides and serve as the positioning context for the
   navigation buttons that now live inside it, after .swiper-wrapper. */
.lnvhv-schedule-carousel__swiper .swiper {
    overflow: hidden;
    position: relative;
    flex: 1;
    min-width: 0;
    z-index: 1;
}

/* Navigation buttons inside .swiper — absolutely positioned at the edges,
   above slides (z-index 10 vs slides z-index 1). */
.lnvhv-schedule-carousel__swiper .swiper .lnvhv-schedule-carousel__swiper__control {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 10;
    cursor: pointer;
}
.lnvhv-schedule-carousel__swiper .swiper .lnvhv-schedule-carousel__swiper__control--prev {
    left: 0;
}
.lnvhv-schedule-carousel__swiper .swiper .lnvhv-schedule-carousel__swiper__control--next {
    right: 0;
}

.lnvhv-schedule-carousel__swiper__control {
    min-width: 30px;
}

.lnvhv-schedule-carousel__swiper__control--prev {
    width: 30px;
    background: #a0a5ad;
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
    position: relative;
}

.lnvhv-schedule-carousel__swiper__control--prev::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #fff;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 8px;
    box-sizing: unset;
}

.lnvhv-schedule-carousel__swiper__control--next {
    position: relative;
    border-bottom-right-radius: 6px;
    border-top-right-radius: 6px;
    background: #a0a5ad;
    cursor: pointer;
}

.lnvhv-schedule-carousel__swiper__control--next::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #ffffff;
    position: absolute;
    top: 50%;
    transform: rotate(180deg) translateY(50%);
    left: 11px;
    box-sizing: unset;
}

.swiper-container {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform, -webkit-transform;
    box-sizing: content-box;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform, -webkit-transform;
}

.lnvhv-schedule-carousel__swiper .swiper-slide {
    margin: 0 5px;
    width: auto !important;
}

/* Individual event card */
.lnvhv-schedule-carousel__event {
    position: relative;
    width: 185px;
    height: calc(100% - 22px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #EAEAEA;
    border-radius: 6px;
    text-align: center;
    gap: 5px;
    background-color: white;
    color: #323232;
    text-decoration: none;
    box-shadow: none;
    transition: box-shadow 0.5s;
}

.lnvhv-schedule-carousel__event--final {
    background-color: #E9ECEF;
}

/* REVERTED THIS ROUND (carousel highlight behavior session): round 3 swapped
   this selector from ".swiper-slide-active .lnvhv-schedule-carousel__event"
   to a server-rendered ".lnvhv-schedule-carousel__event--current" class, to
   work around a real wrong-slide-highlighted bug. Confirmed via direct
   video analysis of the legacy site that legacy's own highlight is exactly
   ".swiper-slide-active" — it moves with every prev/next click, it isn't
   pinned to "the next game" the way the round-3 workaround made it. Also
   confirmed (real-DOM simulation using the actual swiper.js source) that
   round 3's bug was a downstream symptom of recentGames only ever having
   ~1 day of history — already fixed at the data layer earlier this
   session — and that with real history restored, Swiper's own
   .swiper-slide-active tracking stays correctly in sync with its
   activeIndex through repeated navigation, on both desktop and mobile
   geometries. See pro-team.php's Swiper init comment for the full
   reasoning, including one still-open nuance (flagged, not fixed) about
   very-early-season + very-wide-viewport combinations. */
.swiper-slide-active .lnvhv-schedule-carousel__event {
    border: 1px solid rgba(var(--teamcolorprimary), 1);
}

@media screen and (max-width: 1200px) {
    .lnvhv-schedule-carousel__event {
        width: 140px;
    }
}

@media screen and (max-width: 800px) {
    .lnvhv-schedule-carousel__event {
        width: 100px;
    }
}

.lnvhv-schedule-carousel__event__date {
    font-family: 'Open Sans', sans-serif;
    color: #323232;
    text-transform: uppercase;
    font-size: 12px;
}

.lnvhv-schedule-carousel__event__competitors {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
}

.lnvhv-image__container {
    position: relative;
}

.lnvhv-image__container--competitor {
    height: calc(112px / 2);
    width: calc(112px / 2);
}

.lnvhv-image__image {
    opacity: 0;
    white-space: nowrap;
    transition: opacity 0.625s ease;
}

.lnvhv-image__container--competitor img {
    height: calc(112px / 2);
    width: calc(112px / 2);
}

.lnvhv-image__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.lnvhv-schedule-carousel__event__detail {
    font-size: 16px;
}

.lnvhv-schedule-carousel__event__outcome {
    font-weight: 300;
}

.lnvhv-schedule-carousel__event--nhl {
    display: flex;
    flex-direction: column;
}

.lnvhv-translations--screen-reader-only {
    position: absolute;
    top: auto;
    left: -999em;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lnvhv-schedule-carousel__event__outcome--win {
    font-weight: 600;
    color: #1C8937;
}

.lnvhv-schedule-carousel__event__outcome--loss {
    font-weight: 600;
    color: #B92525;
}


/* ==========================================================================
   12. TEAM PAGE CONTENT & SCORE DISPLAY
   ========================================================================== */

.lnvhvteams-content {
    display: flex;
    flex-direction: column;
}

.lnvhvteams-content h2,
.lnvhvteams-content h3 {
    padding: 20px 10px 10px 10px;
}

/* Small score display (used in team page sidebar / home) */
.lgscores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    color: rgb(130, 130, 130);
    gap: 5px;
    font-size: 12px;
}

.seeallscores {
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 10px;
}

.lgscores .lnvhv-schedule-carousel__event__outcome {
    font-weight: 600;
}

.lgscores .lnvhv-image__container--competitor {
    height: auto;
    width: 30%;
}

.lgscores .lnvhv-image__container--competitor img {
    height: auto;
    width: 80%;
}

.lgscores .winner {
    color: black;
}

.lgscores .lnvhv-schedule-carousel__event_scores {
    text-align: right;
}

.lgscores figure {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-transform: uppercase;
    gap: 5px;
}


/* ==========================================================================
   13. TEAM LINES
   ========================================================================== */

.lnvhv__line-header {
    text-align: left;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
}

.lnvhv__line-header::after {
    background-color: rgb(210, 210, 210);
    content: "";
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    margin-right: -50%;
}

.lnvhv__line-title-container {
    text-align: center;
    white-space: nowrap;
    padding: 10px;
    line-height: 1;
    display: flex;
    gap: 10px;
}

.lnvhv__line-title-box {
    padding: 10px;
    background-color: rgba(var(--teamcolorprimary), 1);
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    border-radius: 8px;
}

.lnvhv__line-title-info {
    padding: 10px;
    background-color: #F0F1F2;
    color: black;
    font-size: 12px;
    font-weight: 300;
    margin: 0;
    border-radius: 8px;
    text-transform: uppercase;
}

.lnvhv__line-title {
    color: white;
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.lnvhv__line {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
    padding: 10px;
    flex-wrap: wrap;
}

.lnvhv__line-player-container {
    width: 100%;
    max-width: 350px;
    background: white;
    display: flex;
    align-items: center;
    flex: 1 1 28%;
}

/* Line mugshot context */
.lnvhv__line .lnvhvplayermugshot-container {
    width: 56px;
    text-align: center;
    position: relative;
    padding: 2px 4px 2px 0;
    display: inline-block;
}

.lnvhv__line .lnvhvplayermugshot-photo {
    width: 48px;
    height: 48px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #f1f1f5;
    border-radius: 50%;
}

@media screen and (max-width: 640px) {
    .lnvhv__line .lnvhvplayermugshot-container {
        display: none;
    }
}

.lnvhv__line-player {
    border-radius: 8px;
    position: relative;
    display: flex;
    gap: 8px;
    width: 100%;
    background-color: #F0F1F2;
    font-size: 16px;
    padding: 6px 3px 8px 6px;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100%;
    max-width: 350px;
}

.lnvhv__line-player-info {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: left;
    padding: 5px 10px;
    background: white;
    border-radius: 3px;
}

.lnvhv__line-player-position {
    text-transform: uppercase;
    padding: 3px;
    margin: 0 0 0 8px;
}

.lnvhv__line-player-number {
    text-transform: uppercase;
    padding: 3px;
    margin: 0 8px 0 0;
}

.lnvhv__line-player-name {
    flex-grow: 1;
    align-items: self-start;
    flex-basis: 100%;
    font-weight: 600;
    padding: 0 3px 0 0;
    margin: 0 8px;
    background: none;
    border-radius: 0;
}

a.lnvhv__line-player-link,
a:hover.lnvhv__line-player-link {
    color: #323232;
}

@media screen and (min-width: 640px) {
    .lnvhv__line-player-link > span {
        display: block;
    }
}

.lnvhv__line-player-divider {
    display: none;
    margin: 5px 0;
    width: 2px;
    background-color: white;
}

.lnvhv__line-player-position span {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 3px;
    line-height: 1;
}

.lnvhv__line-player-number span {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 3px;
    line-height: 1;
}

@media screen and (max-width: 480px) {
    .lnvhv__line {
        gap: 10px;
    }

    .lnvhv__line-player {
        font-size: 13px;
    }
}


/* ==========================================================================
   14. DEPTH CHARTS
   ========================================================================== */

.lnvhv__depthchart-container .divTablesorter {
    max-height: fit-content;
    overflow: auto;
}

.lnvhv__depthchart-container .sortable td:first-child,
.lnvhv__depthchart-container .sortable th:first-child {
    width: min-content;
    min-width: 50%;
}

.lnvhv__depthchart-container {
    display: flex;
    flex: 1 1 50%;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
}

.lnvhv__depthchart {
    flex-direction: column;
    flex: 1 1 18%;
    background: #f0f1f2;
}

.lnvhv__depthchart-title {
    background: white;
    color: black;
    font-size: 28px;
    line-height: 42px;
    padding: 10px 10px 0;
    text-align: center;
}


/* ==========================================================================
   15. TEAM STATS WIDGETS
   ========================================================================== */

.lnvhv__teamstats-wrapper h2 {
    line-height: 1;
    padding-top: 0;
}

.lnvhv__teamstats-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px 0;
}

.lnvhv__teamstats-container {
    display: flex;
    flex-direction: column;
    text-align: center;
    flex: 1 1 350px;
}

.teamstats-category {
    background-color: #f0f1f2;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.teamstats-category h3 {
    border-bottom: 1px solid rgba(var(--teamcolorprimary), 1);
    background: rgba(var(--teamcolorprimary), 0.2);
    color: rgba(var(--teamcolorprimary), 1);
    align-self: flex-start;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    flex: 1 1 100%;
    display: none;
}

.stat-type {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-type:first-child {
    padding-left: 10px;
}

.stat-type:last-child {
    padding-right: 10px;
}

.stat-title {
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 3px;
    background: white;
    display: block;
    padding: 5px 8px;
    margin: 10px 0 5px 0;
}

.stat-number {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    margin-bottom: 3px;
    font-size: 28px;
}

.stat-rank {
    font-size: 12px;
    border-radius: 3px;
    background: white;
    display: block;
    padding: 5px 8px;
    margin: 5px 0 10px 0;
}


/* ==========================================================================
   16. STATUS ICONS (inline badges)
   ========================================================================== */

.iconInjury {
    background: red;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    width: 12px;
    height: 12px;
    margin-left: 5px;
}

.iconInjury::after {
    content: "+";
    color: white;
    font-weight: 600;
    font-size: 13px;
    line-height: 100%;
}

.icon1way {
    background: orange;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    width: min-content;
    height: 16px;
    margin-left: 5px;
}

.icon1way::after {
    content: "1 way";
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    font-size: 10px;
    line-height: 100%;
    padding: 3px;
}

.iconFarm {
    background: rgba(var(--teamcolorprimary), 0.2);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    width: min-content;
    height: 16px;
    margin-left: 5px;
}

.iconFarm::after {
    content: "FARM";
    text-transform: uppercase;
    color: rgba(var(--teamcolorprimary), 1);
    font-weight: 600;
    font-size: 10px;
    line-height: 100%;
    padding: 3px;
}

.iconScratch {
    background: #F0F1F2;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    width: min-content;
    height: 16px;
    margin-left: 5px;
}

.iconScratch::after {
    content: "Rayé";
    text-transform: uppercase;
    color: #6F6F6F;
    font-weight: 600;
    font-size: 10px;
    line-height: 100%;
    padding: 3px;
}

.iconRookie {
    background: royalblue;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    width: min-content;
    height: 16px;
    margin-left: 5px;
}

.iconRookie::after {
    content: "R";
    text-transform: uppercase;
    color: white;
    font-weight: 600;
    font-size: 10px;
    line-height: 100%;
    padding: 3px;
}


/* ==========================================================================
   17. TEAM SCHEDULE TABLE
   ========================================================================== */

.teamsched-image {
    max-width: 35px;
    height: auto;
}

@media screen and (max-width: 640px) {
    .teamsched-image {
        max-width: 25px;
        height: auto;
    }
}

.teamsched-matchup {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teamsched-matchup a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.teamsched-result {
    font-weight: 600;
}

.myTeamWon {
    color: #1C8937;
}

.myTeamLost {
    color: #B92525;
}

#teamschedule .divTablesorter {
    max-width: 720px;
}


/* ==========================================================================
   18. HOMEPAGE LAYOUT
   ========================================================================== */

.main-content .GMContact {
    padding-left: 0;
}

.main-content .GMContact a {
    padding: 10px 20px;
}

/* Two-column grid: sidebar left, main content right */
.left-sidebar-grid {
    display: grid;
    grid-template-areas:
        'main-content'
        'left-sidebar';
    gap: 40px;
    padding: 0 20px;
}

.left-sidebar-grid > .main-content {
    grid-area: main-content;
    padding: 30px 0 10px;
    border-radius: 8px;
    border: 1px solid #f0f1f2;
}

.left-sidebar-grid > .main-content > * {
    padding: 0 20px;
}

.left-sidebar-grid > .left-sidebar {
    grid-area: left-sidebar;
    border-radius: 8px;
    border: 1px solid #f0f1f2;
}

@media (min-width: 768px) {
    /* Tablet: switch to 2-column layout early — sidebar left, news right */
    .left-sidebar-grid {
        grid-template-columns: 240px 1fr;
        grid-template-areas: 'left-sidebar main-content';
    }
}

@media (min-width: 1024px) {
    .left-sidebar-grid {
        grid-template-columns: 320px auto auto;
        grid-template-areas: 'left-sidebar main-content main-content';
    }
}

/* Homepage sidebar */
.hp_sidebar {
    padding: 30px 20px 10px;
}

/* Homepage CTAs */
.indexCTAs {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    margin: 0 0 20px 0;
    overflow-x: auto;
    flex-wrap: wrap;
    padding: 0;
    gap: 10px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.indexCTAs > li {
    background-color: royalblue;
    padding: 10px;
    color: white;
    border-radius: 8px;
}

.indexCTAs > li > a {
    display: flex;
    color: white;
}

/* Tribute/banner image on homepage */
.lnvhv_tribute {
    width: 100%;
    height: auto;
}

.lnvhv_tribute img {
    max-height: 100%;
    max-width: 100%;
}

/* Streak leaders on homepage */
.lnvhvstats_streaks .lnvhvstats__leaders-list:first-child {
    padding-bottom: 20px;
}


/* ==========================================================================
   19. NEWS ITEMS
   ========================================================================== */

.newsItem h1 {
    border-bottom: 1px solid rgb(210, 210, 210);
    font-size: 18px;
    line-height: 22px;
    padding: 10px 0;
}

.newsItem {
    display: flex;
    flex-direction: column;
    padding-bottom: 40px !important;
    margin: 40px 0;
    border-bottom: 1px solid #333333;
}

.newsItem p > img {
    max-width: 100%;
}

.newsItem:last-child {
    padding-bottom: 0;
}

.newsItem br {
    display: none;
}

.newsItem h2 {
    font-size: 20px;
    line-height: 1;
    margin: 0;
    padding: 0 0 20px 0;
}

.newsItem h3 {
    margin: 0;
    padding: 0 0 20px 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: normal;
}

.newsItem h2:first-of-type {
    font-size: 36px;
    line-height: 40px;
    margin: 0;
    padding: 0 0 20px 0;
    text-transform: uppercase;
}

.left-sidebar .newsItem {
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
}

.newsItem .lnvhvstats__leaders-box-navlink {
    font-size: 14px;
}

.newsItem .lnvhvtrade__team-box-navlink {
    font-size: 14px;
}


/* ==========================================================================
   20. PLAYOFF BRACKET
   ========================================================================== */

.lnvhv-playoffbracket {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.lnvhv-playoffcol {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-left: 20px;
    padding-top: 20px;
}

.lnvhv-playoffbox {
    flex: 1 1 20%;
    position: relative;
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    padding: 10px;
    border: 1px solid #EAEAEA;
    border-radius: 6px;
    box-shadow: 0 0 5px 0 #dedede;
    text-align: left;
    gap: 5px;
}

.lnvhv-playoffbox figure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5px;
}

.lnvhv-playoffbox figure img {
    height: calc(112px / 2);
    width: calc(112px / 2);
}

.lnvhv-playoffwinner {
    width: 100%;
}


/* ==========================================================================
   21. TRANSACTIONS
   ========================================================================== */

.lnvhv-transactions-container {
    margin: 20px;
}

.lnvhv-transactionstxt {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: 'date transaction';
    align-items: top;
    justify-content: left;
    gap: 10px;
    padding-bottom: 10px;
}

.lnvhv-transactionstxt > span:first-of-type {
    grid-area: date;
    font-weight: bold;
}

/* Trades cell (team logos side by side) */
.tradesTeamsCell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 10px;
}

.tradesTeamsCell img:first-of-type {
    width: 25px;
    height: auto;
}

.tradesTeamsCell img {
    width: 15px;
    height: auto;
}

.tradesTeamsCell img:last-of-type {
    width: 25px;
    height: auto;
}

/* --- Unified Team Log feed (Transactions tab, this session) ---
   Vertical timeline: date-grouped, category-badged rows. Trade rows reuse
   .tradesTeamsCell above unchanged; every other category renders the raw
   TeamLog.Text next to a small fixed-palette badge (deliberately NOT
   team-colored, so it stays legible against the team-colored date header
   directly above it). */

.txn-feed {
    display: flex;
    flex-direction: column;
}

.txn-date-header {
    background-color: rgba(var(--teamcolorprimary), 0.15);
    color: rgba(var(--teamcolorprimary), 1);
    font-weight: 600;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 4px;
    margin-top: 16px;
}

.txn-date-header:first-child {
    margin-top: 0;
}

.txn-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgb(230, 230, 230);
}

.txn-item:last-child {
    border-bottom: none;
}

.txn-item-text {
    flex: 1 1 auto;
    min-width: 0;
}

.txn-item--trade .tradesTeamsCell {
    padding: 0;
}

.txn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.txn-badge--trade {
    background: rgba(65, 105, 225, 0.15);
    color: rgb(65, 105, 225);
}

.txn-badge--signing {
    background: rgba(46, 125, 50, 0.15);
    color: rgb(46, 125, 50);
}

.txn-badge--roster {
    background: rgba(0, 131, 143, 0.15);
    color: rgb(0, 131, 143);
}

.txn-badge--leadership {
    background: rgba(106, 27, 154, 0.15);
    color: rgb(106, 27, 154);
}

.txn-badge--draft {
    background: rgba(230, 81, 0, 0.15);
    color: rgb(230, 81, 0);
}

.txn-badge--waiver {
    background: rgba(141, 110, 0, 0.15);
    color: rgb(141, 110, 0);
}

.txn-badge--other {
    background: #F0F1F2;
    color: #6F6F6F;
}

/* --- Single-select transaction-type filter buttons (history-depth /
   filters follow-up session). Each button's accent color matches its
   corresponding .txn-badge--* above (same literal values, kept separate
   rather than refactoring the badges to share these variables, so the
   already-shipped badge rules stay untouched). --- */

.txn-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.txn-filter-btn {
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 3px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    background: rgba(var(--txn-filter-color), 0.15);
    color: rgb(var(--txn-filter-color));
}

.txn-filter-btn.active {
    background: rgb(var(--txn-filter-color));
    color: #fff;
}

.txn-filter-btn--all {
    --txn-filter-color: 111, 111, 111;
}

.txn-filter-btn--trade {
    --txn-filter-color: 65, 105, 225;
}

.txn-filter-btn--signing {
    --txn-filter-color: 46, 125, 50;
}

.txn-filter-btn--roster {
    --txn-filter-color: 0, 131, 143;
}

.txn-filter-btn--leadership {
    --txn-filter-color: 106, 27, 154;
}

.txn-filter-btn--draft {
    --txn-filter-color: 230, 81, 0;
}

.txn-filter-btn--waiver {
    --txn-filter-color: 141, 110, 0;
}

@media screen and (max-width: 480px) {
    .txn-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .txn-item--trade .tradesTeamsCell {
        justify-content: flex-start;
    }
}


/* --- 21b. TRANSACTIONS PAGE (transactions.php) ---------------------------
   Additive to the Pro Team tab rules above — nothing there is changed.

   - .txn-t1 … .txn-t12: one colour per STHS TransactionType, set once as
     --txn-filter-color (r, g, b) and consumed by the existing .txn-filter-btn
     rules and by .txn-badge--lt below. Trade (t1) and Waiver (t3) use the same
     values as the Pro Team tab's Trade / Waiver so the two places match.
   - Filter pills are links on this page (server-side filtering), so they get
     link-state overrides: the global a / a:visited colour would otherwise
     win over the plain .txn-filter-btn colour.
   - .txn-item--accent: LeagueLog.Color as a left bar (--txn-accent).
   ------------------------------------------------------------------------ */

.txn-t1  { --txn-filter-color: 65, 105, 225; }
.txn-t2  { --txn-filter-color: 180, 48, 8; }
.txn-t3  { --txn-filter-color: 141, 110, 0; }
.txn-t4  { --txn-filter-color: 46, 125, 50; }
.txn-t5  { --txn-filter-color: 183, 28, 28; }
.txn-t6  { --txn-filter-color: 136, 14, 79; }
.txn-t7  { --txn-filter-color: 106, 27, 154; }
.txn-t8  { --txn-filter-color: 0, 105, 120; }
.txn-t9  { --txn-filter-color: 40, 53, 147; }
.txn-t10 { --txn-filter-color: 2, 100, 160; }
.txn-t11 { --txn-filter-color: 93, 64, 55; }
.txn-t12 { --txn-filter-color: 90, 90, 90; }

.txn-badge--lt {
    background: rgba(var(--txn-filter-color), 0.15);
    color: rgb(var(--txn-filter-color));
}

a.txn-filter-btn,
a.txn-filter-btn:visited {
    color: rgb(var(--txn-filter-color));
    text-decoration: none;
}

a.txn-filter-btn:hover,
a.txn-filter-btn:focus-visible {
    background: rgba(var(--txn-filter-color), 0.28);
    text-decoration: none;
}

a.txn-filter-btn.active,
a.txn-filter-btn.active:visited,
a.txn-filter-btn.active:hover {
    background: rgb(var(--txn-filter-color));
    color: #fff;
}

.txn-item--accent {
    border-left: 4px solid var(--txn-accent);
    padding-left: 8px;
}

.txn-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    margin: 16px 0 0;
}

.txn-toolbar__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.txn-toolbar__field label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(80, 80, 80);
}

.txn-toolbar .STHSSelect {
    min-width: 180px;
    max-width: 100%;
    box-sizing: border-box;
}

.txn-summary {
    margin: 16px 0 12px;
    font-size: 13px;
    color: rgb(90, 90, 90);
}

/* the pills already carry 16px below them */
.txn-filters + .txn-summary {
    margin-top: 0;
}

.txn-empty {
    margin: 20px 0;
}

.txn-pager {
    margin: 20px 0 10px;
}

.txn-pager__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.txn-pager__link {
    display: inline-block;
    min-width: 34px;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid rgb(210, 210, 210);
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

a.txn-pager__link,
a.txn-pager__link:visited {
    color: rgb(51, 51, 51);
}

a.txn-pager__link:hover,
a.txn-pager__link:focus-visible {
    background: rgba(var(--teamcolorprimary), 0.15);
    text-decoration: none;
}

.txn-pager__link.is-current {
    background: rgb(var(--teamcolorprimary));
    border-color: rgb(var(--teamcolorprimary));
    color: rgb(var(--teamcolortextonprimary, 255, 255, 255));
    font-weight: 600;
}

.txn-pager__link.is-disabled {
    color: rgb(150, 150, 150);
    background: rgb(247, 247, 247);
}

.txn-pager__gap {
    padding: 0 2px;
    color: rgb(120, 120, 120);
}

@media screen and (max-width: 480px) {
    .txn-toolbar__field {
        flex: 1 1 100%;
    }

    .txn-toolbar .STHSSelect {
        width: 100%;
    }
}


/* ==========================================================================
   22. TRADE INTERFACE
   ========================================================================== */

.lnvhvtrade__team-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.lnvhvtrade__team-content {
    box-shadow: none;
    margin-bottom: 0;
    padding: 30px 20px 10px;
    flex: 1 1 25%;
}

.lnvhvtrade__team-box-nav {
    background: #ffffff;
    border-bottom: 1px solid rgb(210, 210, 210);
    display: flex;
    color: #333333;
    white-space: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.lnvhvtrade__team-box-nav::-webkit-scrollbar {
    display: none;
}

.lnvhvtrade__team-box-navlink {
    align-items: center;
    color: rgb(51, 51, 51);
    cursor: pointer;
    display: flex;
    font-size: 16px;
    margin-right: 20px;
    padding: 14px 0;
    text-transform: uppercase;
    text-decoration: none;
}

a.lnvhvtrade__team-box-navlink,
a:visited.lnvhvtrade__team-box-navlink {
    color: rgb(51, 51, 51);
}

.lnvhvtrade__team-box-navlink:hover {
    font-weight: bold;
    text-decoration: none;
}

.lnvhvtrade__team-box-navlink.active {
    background-color: #ffffff;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 1) !important;
    border-top: 4px solid rgba(0, 0, 0, 0);
    color: rgb(37, 37, 37);
    cursor: default;
    font-weight: bold;
}

.lnvhvtrade__team-list-container {
    display: block;
    padding-top: 20px;
}

.lnvhvtrade__team-list {
    display: block;
}

.lnvhvtrade__team-list .lnvhvplayermugshot-container {
    width: 100%;
}

.lnvhvtrade__team-list .teamleaders-name {
    display: flex;
}

.lnvhvtrade__team-list .lnvhvplayermugshot-photo {
    width: 110px;
    height: 110px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #f1f1f5;
    border: 3px solid rgba(var(--teamcolorprimary), 1);
    border-radius: 50%;
}

.lnvhvtrade__team-list-item {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    align-items: center;
    padding: 5px;
}

.lnvhvtrade__team-list-first {
    margin-bottom: 10px;
    grid-column: 1 / span 5;
}

.lnvhvtrade__team-list-first .teamleaders_place {
    display: flex;
    background: white;
    padding: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px;
    top: 10px;
}

.lnvhvtrade__team-list-name a {
    text-decoration: none;
    color: black;
}

.lnvhvtrade__team-list-name a:hover {
    text-decoration: underline;
}

.lnvhvtrade__team-list-rank {
    width: 20px;
}

.lnvhvtrade__team-list-name {
    text-align: left;
    padding: 10px 0 5px 0;
}

.lnvhvtrade__team-list-position {
    text-align: center;
}

.lnvhvtrade__team-list-value {
    text-align: right;
    font-weight: 600;
}

a.tradeBtn,
a.tableRemoveBtn {
    color: royalblue;
    font-size: 28px;
    font-weight: 600;
}

a.tradeBtn[data-tradeMod="AddTrade"] {
    opacity: 1;
}

a.tradeBtn[data-tradeMod="RemoveTrade"] {
    opacity: 0.5;
}

a.tableRemoveBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #EF6461;
    color: white;
    padding: 5px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    width: 30px;
    height: 30px;
}

.STHSPHPTradeTeamImage {
    width: 48px;
    height: 48px;
    padding: 0;
    margin-right: 8px;
    vertical-align: middle;
}

/* Trade summary grid */
.tradeSummary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tradeSummary-team {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tradeSummary-team table {
    border-spacing: 0;
}

.tradeSummary-team table tr td {
    padding: 10px;
    border-bottom: 1px solid #c0c1c2;
}

.tradeSummary-team table tr td:last-child {
    text-align: center;
}

.tradeSummary-team table tr:nth-child(even) {
    background-color: #ffffff;
}

.tradeSummary-team table tr:nth-child(odd) {
    background-color: #F0F1F2;
}

/* Trade form fields */
.tradefield {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
}

.tradefield input,
.tradefield textarea {
    padding: 10px;
    border: 1px solid #c0c1c2;
    width: 100%;
}

.tradefield input:focus,
.tradefield textarea:focus {
    border: 1px solid royalblue;
    outline: none;
}

/* Trade submit button */
.trade-button-container {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-self: center;
    align-items: center;
    background: linear-gradient(180deg, royalblue, rgb(72, 115, 244));
    border-radius: 8px;
    padding: 1px;
    margin-top: 20px;
}

.trade-button {
    flex: 1 1 100%;
    background: linear-gradient(180deg, royalblue, rgb(53, 84, 179));
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-weight: 600;
    border: 0;
}

.trade-button:hover {
    cursor: pointer;
    background: royalblue;
}

.tradeteamselect {
    width: max-content;
    padding: 40px 0 0 0;
}

.tradeteamselect .lnvhvfield > * {
    flex: 1 1 320px;
}

.tradeteamselect .lnvhvfield {
    flex-direction: unset;
    align-items: center;
}

#Trade .lnvhvtrade__team-content {
    padding-top: 0;
}


/* ==========================================================================
   23. CUP BANNERS / CHAMPIONS PAGE
   ========================================================================== */

.cupbanners {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.lnvhv_champs {
    max-width: 230px;
    height: 400px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background: white;
    padding-bottom: 10px;
    margin-bottom: 40px;
}

.lnvhv_champs .outside {
    fill: none;
    stroke-width: 2px;
}

.lnvhv_champs .inside {
    fill: white;
    stroke-width: 1px;
}

.lnvhv_champs svg {
    position: absolute;
    top: 0;
    left: 0;
}

.banner_container {
    position: relative;
    background: none;
    font-family: 'Open Sans', sans-serif;
    color: black;
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
}

.banner_title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 600;
}

.banner_year {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 300;
    padding-top: 10px;
}

.banner_teamname {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 28px;
    color: black;
    text-wrap: wrap;
    padding: 0 40px;
}

.banner_teamgm {
    padding-top: 10px;
}

/* Phones: the banner is the 230px banner scaled down (see the block below),
   not re-laid-out. The previous phone rules here shrank the fonts and the
   padding but left the ~120px team logo and the frame art alone, and the
   frame art scales with the banner's WIDTH — so on a 160px banner the name
   and GM lines ran past the frame's lower edge. */
@media screen and (max-width: 420px) {
    .cupbanners {
        gap: 10px;
        padding: 10px;
    }
}

/* --- Banner additions (Chat #7: champions.php, Pro Team page, homepage) ----
   Section 23 above is the legacy banner, unchanged except that its phone
   rules were replaced by the scaling below. */

/* ONE number sizes every small banner: 0.6957 = 160px / 230px. Change it here
   and the phone wall, the Pro Team shelf and the homepage widget all follow. */
.cupbanners {
    --cupbanner-scale: 0.6957;
}

/* How the scaling works: CSS zoom multiplies every length inside the banner —
   fonts, paddings, gaps, the 400px box, the ~120px logo AND the frame art
   (which is drawn at 100% of the banner width) — so a small banner is an
   exact miniature of the 230px one and its text can never leave the frame.
   Without zoom support (very old browsers) the banner simply stays 230px. */
@supports (zoom: 1) {
    .cupbanners--compact .lnvhv_champs {
        zoom: var(--cupbanner-scale);
    }

    @media screen and (max-width: 420px) {
        .lnvhv_champs {
            zoom: var(--cupbanner-scale);
        }
    }
}

/* The team logo and team name link to the team page; the banner keeps its
   own black-on-white look instead of the site's link colour. */
.lnvhv_champs a,
.lnvhv_champs a:visited,
.lnvhv_champs a:hover {
    color: inherit;
    text-decoration: none;
}

/* A logo file bigger than the usual ~120px must not push the text out of the
   frame: the frame is a fixed 400px tall, so the logo is capped at 120px (the
   size the layout was drawn for). Normal logos are not affected. */
.lnvhv_champs .banner_teamlogo img {
    max-height: 120px;
}

.lnvhv_champs .banner_teamname a:hover,
.lnvhv_champs .banner_teamname a:focus-visible {
    text-decoration: underline;
}

/* Compact wall (Pro Team Home tab shelf, homepage widget): left-aligned so a
   shelf lines up with the Team Leaders cards above it (they sit 20px in). On
   phones it takes the same tighter 10px spacing as the full wall, so two
   banners sit side by side on any screen from about 340px up. */
.cupbanners--compact {
    gap: 20px;
    padding: 20px;
    justify-content: flex-start;
}

@media screen and (max-width: 420px) {
    .cupbanners--compact {
        gap: 10px;
        padding: 10px;
    }
}

/* A single banner (homepage widget) sits centred in its card. Nothing follows
   it, so it keeps no row gap beneath it (that is what made the space under the
   banner larger than the space above it), and no side padding: the card
   already insets its content 20px, and in the 240px tablet sidebar the
   160px banner would otherwise be wider than the room left for it. */
.cupbanners--compact.cupbanners--single {
    justify-content: center;
    padding: 20px 0;
}

.cupbanners--single .lnvhv_champs {
    margin-bottom: 0;
}

/* Heading + banners + "All champions" link on the Pro Team page. The heading
   keeps the same 10px side padding as every other .lnvhv-contentmain h2 (that
   rule comes later in this file, so it is restated here to stay in step with
   it rather than rely on which one wins); the banners and the link line up
   with the Team Leaders cards (20px in). */
.lnvhv-cup-shelf {
    padding: 0;
}

.lnvhv-cup-shelf h2 {
    padding: 20px 10px;
}

.lnvhv-cup-shelf__more {
    margin: 0 20px 20px;
}

@media screen and (max-width: 420px) {
    .lnvhv-cup-shelf__more {
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* Homepage champion widget — its own size and spacing, independent of the Pro
   Team shelf and champions.php (they keep --cupbanner-scale from .cupbanners).
   Full-size banner; no top margin (the widget sits at the top of the sidebar);
   the "all champions" link centred under the banner. */
.lnvhv-current-champion .cupbanners {
    --cupbanner-scale: 1;
}

.newsItem.lnvhv-current-champion {
    margin-top: 0;
}

.lnvhv-current-champion .lnvhv-cup-shelf__more {
    margin: 0 0 20px;
    text-align: center;
}

/* The frame art hangs ~34px below the banner's 400px box (that is what the
   legacy 40px bottom margin is for). With the link underneath, give the box
   enough bottom margin that the link clears the art's lower point. */
.lnvhv-current-champion .cupbanners--single .lnvhv_champs {
    margin-bottom: 30px;
}

/* Tablet (768-1023px): the sidebar is only 240px wide, which leaves ~198px
   inside the card — a full 230px banner would not fit, so it steps down. */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .lnvhv-current-champion .cupbanners {
        --cupbanner-scale: 0.8;
    }
}

/* Champions page: team filter above the wall (page also hides non-matching
   banners with the [hidden] attribute). */
.lnvhv_champs[hidden] {
    display: none;
}


/* ==========================================================================
   24. PLAYER / GOALIE PAGE HEADER (.lnvhv__Players__Header)
   ========================================================================== */

.lnvhv__Players__Header {
    width: 100%;
    margin: 0;
    padding: 40px 0 0 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    line-height: 1;
    border-collapse: collapse;
    border-spacing: 0;
    list-style: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

.lnvhv__Players__Header * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    line-height: 1;
    border-collapse: collapse;
    border-spacing: 0;
    list-style: none;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

.lnvhv__Players__Header .lnvhvplayer {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.lnvhv__Players__Header .playerphoto--container {
    position: relative;
}

.lnvhv__Players__Header .playerphoto {
    height: auto;
    flex: 1 1 10%;
}

.lnvhv__Players__Header .lnvhvplayermugshot-container {
    width: auto;
    border-radius: 50%;
    overflow: hidden;
    background: #f0f1f2;
    margin-left: 10px;
}

.lnvhv__Players__Header .lnvhvplayermugshot-container img {
    width: 100%;
    max-width: 180px;
    display: block;
}

.lnvhv__Players__Header .lnvhvplayermugshot-photo {
    width: 100px;
    height: 100px;
    background-color: #f0f1f2;
}

@media screen and (max-width: 640px) {
    .lnvhv__Players__Header .playerphoto {
        flex: 1 1 100%;
        display: flex;
        justify-content: center;
    }

    .lnvhv__Players__Header .lnvhvplayermugshot-container {
        margin-left: 0;
    }
}

.lnvhv__Players__Header .teaminfo--container {
    display: flex;
    margin-left: 16px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Player ID panel */
.lnvhv__Players__Header .playerid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    border-left: 3px solid rgba(var(--teamcolorprimary), 1);
    background-color: #F0F1F2;
    flex: 1 1 60%;
    padding: 20px 0;
    align-self: stretch;
}

.lnvhv__Players__Header .playerid-item {
    display: flex;
    align-items: center;
    padding-left: 40px;
}

.lnvhv__Players__Header .playerid::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent rgba(var(--teamcolorsecondary), 1);
    transform: translateY(-50%);
}

.lnvhv__Players__Header abbr {
    text-decoration: none;
}

.lnvhv__Players__Header .playerid-name {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    margin-bottom: 3px;
    font-size: 2.5rem;
    padding-bottom: 10px;
}

.playerid-logo {
    width: 35px;
    height: auto;
}

.lnvhv__Players__Header .playerid-position,
.lnvhv__Players__Header .playerid-draft {
    font-size: 16px;
}

.lnvhv__Players__Header .playerid-position {
    padding-left: 10px;
}

.lnvhv__Players__Header .playerid::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 7px;
    border-color: transparent transparent transparent rgba(var(--teamcolorprimary), 1);
    transform: translateY(-50%);
}

/* Player bio info panel */
.lnvhvplayerinfo-container {
    padding: 20px;
    border: 1px solid #f0f1f2;
    flex: 1 1 25%;
    display: flex;
    align-self: stretch;
    align-items: center;
    justify-content: center;
}

.lnvhvplayerinfo {
    width: 100%;
    display: grid;
    grid-template: auto / 1fr 1fr;
    font-size: 16px;
    gap: 10px;
    align-items: center;
}

.lnvhvplayerinfo-title {
    text-transform: uppercase;
    grid-column: 1 / 3;
    width: 100%;
    font-weight: 600;
}

.lnvhvplayerinfo-value {
    font-weight: 600;
}

/* Player streak stats */
.playerstreaks {
    justify-content: space-around;
}

.playerstreaks .stat-type {
    flex: 1 1 150px;
    padding: 0;
    padding-bottom: 10px;
}

/* Player stats table (no sticky first col) */
#playerStatsPro .sortable > * > tr > th:first-child,
#playerStatsPro .sortable > * > tr > td:first-child,
#playerStatsFarm .sortable > * > tr > th:first-child,
#playerStatsFarm .sortable > * > tr > td:first-child,
#goalieStatsPro .sortable > * > tr > th:first-child,
#goalieStatsPro .sortable > * > tr > td:first-child,
#goalieStatsFarm .sortable > * > tr > th:first-child,
#goalieStatsFarm .sortable > * > tr > td:first-child,
#multipleTeamPlayerStats .sortable > * > tr > th:first-child,
#multipleTeamPlayerStats .sortable > * > tr > td:first-child {
    position: relative;
    font-weight: 300;
}

@media screen and (min-width: 800px) {
    .lnvhv__Players__Header .lnvhvplayer--container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lnvhv__Players__Header .lnvhvplayer {
        margin-bottom: 8px;
    }

    .lnvhv__Players__Header .playerid {
        width: 50%;
        border-left-width: 5px;
    }

    .lnvhv__Players__Header .playerid::before {
        border-width: 22px 0 22px 22px;
    }

    .lnvhv__Players__Header .playerid-name {
        padding-bottom: 0;
    }

    .lnvhv__Players__Header .playerid::after {
        left: -2px;
        border-width: 16px 0 16px 16px;
    }
}

@media screen and (min-width: 1200px) {
    .lnvhv__Players__Header .playerid-name {
        font-size: 40px;
    }
}

@media screen and (max-width: 800px) {
    .lnvhv__Players__Header .playerid {
        padding-top: 8px;
        padding-bottom: 8px;
        width: 100%;
        height: 115px;
    }
}


/* ==========================================================================
   25. PROSPECTS & DRAFT PICKS
   ========================================================================== */

.lnvhv__draftprospects {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.lnvhv__prospects h2,
.lnvhv__draft h2 {
    background: white;
}

.lnvhv__prospects,
.lnvhv__draft {
    flex: 1 1 48%;
    min-width: 0;
    background: #f0f1f2;
}

.lnvhv__prospects th,
.lnvhv__prospects td {
    width: calc(80% / 3);
}

.lnvhv__prospects th:first-child,
.lnvhv__prospects td:first-child {
    width: 20%;
}

.lnvhv__draft th,
.lnvhv__draft td {
    width: calc(85% / 5);
}

.lnvhv__draft th:first-child,
.lnvhv__draft td:first-child {
    width: 15%;
    text-wrap: wrap;
}

.lnvhv__draft img {
    margin: 5px;
}


/* ==========================================================================
   26. OVERVIEW BOX
   ========================================================================== */

.lnvhv__overview {
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px solid #f0f1f2;
    background: white;
    border-radius: 8px;
    flex-wrap: wrap;
}

.lnvhv__overview-row {
    display: flex;
    flex-direction: column;
    flex: 1 1 100px;
}

.lnvhv__overview-title,
.lnvhv__overview-value {
    flex: 1 1 50%;
    padding: 10px;
}

.lnvhv__overview-value {
    font-weight: 600;
}


/* ==========================================================================
   27. PLAYER COMPARE
   ========================================================================== */

.lnvhv__compare-selections {
    padding: 20px;
}

.compare-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        'team1 team2'
        'player1 player2'
        'button button';
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.compare-container select {
    padding: 10px;
    border: 1px solid #f0f1f2;
    width: 100%;
}

.compare-team { width: 100%; }
.compare-player { width: 100%; }
.compare-team.team1 { grid-area: team1; }
.compare-player.player1 { grid-area: player1; }
.compare-team.team2 { grid-area: team2; }
.compare-player.player2 { grid-area: player2; }

.compare-button-container {
    grid-area: button;
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-self: center;
    align-items: center;
    background: linear-gradient(180deg, royalblue, rgb(72, 115, 244));
    border-radius: 8px;
    padding: 1px;
}

.compare-button {
    flex: 1 1 100%;
    background: linear-gradient(180deg, royalblue, rgb(53, 84, 179));
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-weight: 600;
    border: 0;
}

.compare-button:hover {
    cursor: pointer;
    background: royalblue;
}

@media (min-width: 768px) {
    .lnvhv__compare-selections {
        padding: 40px;
    }
}

.lnvhv__compare-result {
    display: grid;
    grid-template-columns: auto max-content auto;
    align-items: center;
    justify-content: center;
}

.playerPhoto .lnvhvplayermugshot-container {
    width: 100%;
    padding: 5px;
}

.playerPhoto .lnvhvplayermugshot-photo {
    width: 110px;
    height: 110px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #f1f1f5;
    border: 3px solid rgba(var(--teamcolorprimary), 1);
    border-radius: 50%;
}

.playerID {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.playerCatTitle {
    grid-column: 1 / span 3;
    padding: 10px;
    text-align: center;
    background-color: #f0f1f2;
    margin-top: 10px;
}

.playerRowTitle {
    text-align: center;
    padding: 10px;
}

.player1value {
    text-align: right;
    padding: 10px;
}

.player2value {
    text-align: left;
    padding: 10px;
}


/* ==========================================================================
   28. SALARY CALCULATOR
   ========================================================================== */

.lnvhv__salarycalc-selections {
    padding: 20px;
}

.salarycalc-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        'fields'
        'result';
    gap: 40px;
    align-items: start;
    justify-content: center;
}

.salarycalc-fields {
    grid-area: fields;
}

.salarycalc-container select {
    padding: 10px;
    border: 1px solid #f0f1f2;
    width: 100%;
}

.salarycalc-button-container {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-self: center;
    align-items: center;
    background: linear-gradient(180deg, royalblue, rgb(72, 115, 244));
    border-radius: 8px;
    padding: 2px;
}

.salarycalc-button {
    flex: 1 1 100%;
    background: linear-gradient(180deg, royalblue, rgb(53, 84, 179));
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-weight: 600;
    border: 0;
}

.salarycalc-button:hover {
    cursor: pointer;
    background: royalblue;
}

@media (min-width: 768px) {
    .lnvhv__salarycalc-selections {
        padding: 40px;
    }

    .salarycalc-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 'fields result';
    }
}

.lnvhv__salarycalc-result {
    grid-area: result;
    display: grid;
    grid-template-columns: auto max-content auto;
    align-items: center;
    justify-content: center;
}


/* ==========================================================================
   29. ROSTERS PAGE TEAM HEADER
   ========================================================================== */

.lnvhvTeamHdr__row {
    margin-top: 40px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 40px;
    background: white;
    padding: 20px;
}

.lnvhvTeamHdr__column {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: white;
}

.STHSPHPTeamHeader_Logo.lnvhvTeamHdr__column {
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
}

.STHSPHPTeamHeader_Logo.lnvhvTeamHdr__column .STHSPHPTeamHeader_TeamName {
    margin: 0;
    background: white;
    font-size: 2rem;
    text-align: left;
}

.STHSPHPTeamHeader_Logo.lnvhvTeamHdr__column img {
    width: 60px;
    height: 60px;
    line-height: 0;
}

.teamsAnchorsMenu {
    background: #333333;
    position: fixed;
    bottom: 0;
    left: 0;
    top: unset;
    right: unset;
    margin: 0;
    display: flex;
    padding: 10px;
    align-items: middle;
    justify-content: center;
    width: max-content;
    z-index: 9999;
}

#teamsAnchorsMenu {
    width: 100%;
    max-width: 160px;
    margin: 0 auto;
    font-size: 1.1rem;
    padding: 10px;
}

@media screen and (max-width: 600px) {
    .lnvhvTeamHdr__row {
        grid-template-columns: auto;
        gap: 10px;
    }

    .STHSPHPTeamHeader_Logo.lnvhvTeamHdr__column {
        gap: 0;
    }

    .STHSPHPTeamHeader_Logo.lnvhvTeamHdr__column .STHSPHPTeamHeader_TeamName {
        margin-left: 10px;
    }
}


/* ==========================================================================
   30. FORM ELEMENTS (global)
   ========================================================================== */

.lnvhvform {
    display: flex;
    flex-direction: column;
    justify-content: left;
    width: 100%;
    padding: 10px;
    gap: 20px;
}

.lnvhvform select,
.lnvhvform input:not(.submitBtn),
.lnvhvform textarea {
    padding: 10px;
    border: 1px solid #c0c1c2;
    width: 100%;
}

.lnvhvform select:focus,
.lnvhvform input:not(.submitBtn):focus,
.lnvhvform textarea:focus {
    border: 1px solid royalblue;
    outline: none;
}

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

.lnvhvfield label {
    font-weight: 600;
    font-size: 13px;
}

/* Submit button */
.submitBtn-container {
    width: 100%;
    max-width: 320px;
    display: flex;
    justify-self: center;
    align-items: center;
    background: linear-gradient(180deg, royalblue, rgb(72, 115, 244));
    border-radius: 8px;
    padding: 1px;
}

.submitBtn {
    flex: 1 1 100%;
    background: linear-gradient(180deg, royalblue, rgb(53, 84, 179));
    border-radius: 8px;
    padding: 10px;
    color: white;
    font-weight: 600;
    border: 0;
    text-transform: uppercase;
    max-width: 320px;
    cursor: pointer;
}

.submitBtn:hover {
    background: royalblue;
}

.lnvhvform .error {
    color: #ff0000;
}

.lnvhvform_sucess {
    display: block;
    background-color: #1C8937;
    color: white;
    font-size: 16px;
    padding: 10px 20px;
}

/* Select dropdowns */
.STHSSelect {
    padding: 8px;
    border: 1px solid #c0c1c2;
    background: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
}

.STHSSelect:focus {
    border: 1px solid royalblue;
    outline: none;
}

/* Generic submit buttons */
.SubmitButton {
    background: royalblue;
    color: white;
    border: 0;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 4px;
}

.SubmitButton:hover {
    background: rgb(53, 84, 179);
}

.SubmitButtonSmall {
    background: royalblue;
    color: white;
    border: 0;
    padding: 4px 8px;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

.SubmitButtonSmall:hover {
    background: rgb(53, 84, 179);
}

/* League signup page */
.lnvhv-contentmain.leaguesignup {
    display: grid;
    grid-template-areas:
        'title'
        'availteamsbtn'
        'signupform'
        'availableteams';
    gap: 40px;
}

.lnvhv-contentmain.leaguesignup > h1 {
    grid-area: title;
}

.availableTeams {
    grid-area: availableteams;
    padding-top: 20px;
    overflow: auto;
}

.signupform {
    grid-area: signupform;
    padding: 0 20px;
}

.available-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.available-team {
    display: block;
    max-width: 100%;
}

.availableTeams header.lnvhvsubmenu {
    display: grid;
    grid-template-columns: auto 150px;
}

@media screen and (min-width: 640px) {
    .lnvhv-contentmain.leaguesignup {
        grid-template-areas:
            'title title'
            'signupform availableteams';
    }
}

.availableTeams .GMContact {
    justify-content: left;
}

.availableTeams .GMContact a {
    padding: 10px;
    max-width: 100%;
    font-size: 12px;
    text-align: center;
}

.availableTeams .lnvhv__Teams__Header .teamlogo {
    height: 60px;
    width: 60px;
}

.availTeamsLink,
.availTeamsLink:active,
.availTeamsLink:visited,
.availTeamsLink:hover {
    grid-area: availteamsbtn;
    display: flex;
    padding: 10px 20px;
    color: white;
    background-color: royalblue;
    border-radius: 8px;
    margin: 0 40px;
    text-decoration: none;
}

.availTeamsLink::after {
    content: "\25bc";
    padding-left: 0.5em;
}

@media screen and (min-width: 640px) {
    .availTeamsLink {
        display: none;
    }
}


/* ==========================================================================
   31. EMAIL BUTTON
   ========================================================================== */

.emailBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.emailBtn a:last-child {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: royalblue;
    width: 30px;
    height: 30px;
}

.emailBtn a:last-child:hover {
    background: darkblue;
}

.emailBtn a:last-child img {
    width: 15px;
    height: auto;
}


/* ==========================================================================
   32. MISC / UTILITY
   ========================================================================== */

.STHSCenter {
    text-align: center;
}

/* Total row highlight */
.STHSTotal {
    background-color: #F0F1F2 !important;
    font-weight: 600;
}

/* Team logo sizes in various contexts */
.STHSPHPMenuTeamImage {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
}

/* Pro/Farm team-page sub-nav toggle logo (pro-team.php <-> farm-team.php
   link for the same organization, rendered as the last item in the
   ".lnvhvsubmenu .submenuwrapper" tab strip). Root cause of the
   "extremely tiny on mobile" report, confirmed by Andreas directly from
   his own live DevTools inspection (not guessed at locally): base.css's
   global `img { max-width: 100%; height: auto; }` rule (base.css:134 —
   that file is not present in this session's local mirror at all)
   constrains this image's rendered size to a percentage of its own
   narrow containing block on mobile. This rule neutralizes max-width for
   THIS element only, scoped to the sub-nav-toggle context specifically —
   it deliberately does NOT touch:
     - base.css's own global img rule itself, which still applies
       everywhere else on the site exactly as before;
     - .STHSPHPMenuTeamImage's own base rule directly above, which stays
       20x20 — that class is ALSO used by inc-menu.php's unrelated
       ÉQUIPES-dropdown team list (a plain list of links with a small
       logo next to each team name), which does not sit inside
       ".lnvhvsubmenu .submenuwrapper" and is therefore untouched by this
       more specific selector.
   Two classes deep (.lnvhvsubmenu .submenuwrapper .STHSPHPMenuTeamImage)
   outranks base.css's bare "img" selector on specificity alone, so this
   wins regardless of stylesheet load order — no !important needed unless
   base.css's own rule turns out to carry one too (unconfirmed; ask if
   this doesn't take effect live). Tab-strip POSITION is unrelated to this
   rule and stays exactly as originally designed — see farm-team.php's own
   comment at this toggle's markup, and the Master Instructions' binding
   rule against ever repositioning it.

   Cross-checked against this file's own earlier ".lnvhv__Teams__Header
   .teamlogo" override above (search "round 4"), which hit this exact same
   base.css rule and found a bare width/height re-declaration wasn't
   enough there — only max-width:none worked, due to a flex-shrink/min-
   content interaction on an element that IS itself a flex item. Rather
   than assume that precedent applied unchanged here, this fix was
   verified with a real dual-scenario Playwright A/B test (a synthetic
   stand-in for base.css containing only the exact rule Andreas's own
   DevTools screenshot showed, plus this real stylesheet and the real
   toggle markup): reproduces the reported bug at a measured 8x8px
   without this rule, resolves to exactly 45x45px with it, at 320/375/
   414px viewports. A fixed max-width (rather than max-width:none) is
   empirically sufficient here — confirmed, not assumed — because this
   element sits two levels deeper than the .teamlogo case (ul[flex] >
   li[flex item] > a[normal] > img), inside a non-flex <a>, so it's never
   itself a flex item subject to the same shrink interaction. */
.lnvhvsubmenu .submenuwrapper .STHSPHPMenuTeamImage {
    max-width: 45px;
    width: 45px;
    height: 45px;
}

/* Out-of-date version warning */
.STHSPHPMenuOutOfDate {
    background: #dc3545;
    color: white;
    padding: 8px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
}

/* Content main padding adjustments */
.lnvhv-contentmain h2 {
    padding: 20px 10px;
}

/* Logo image in team logo menu strip (mobile) */
.STHSPHPMenuDivTeamImage {
    width: 15px;
    height: auto;
}

/* ==========================================================================
   14. BOXSCORE PAGE (STHSBoxScore_*)
   Added: Fix & Align pass following Issue 12 / boxscore.php rebuild.
   Authored fresh to match the legacy _lnvhv-Boxscore.php visual layout —
   the original component CSS was never ported into this file. Uses only
   colors/spacing/variables already established elsewhere in this file.
   ========================================================================== */

/* --- Tag-agnostic companion to the existing header.lnvhvsubmenu rule ---
   boxscore.php wraps its tab nav in a <div class="lnvhvsubmenu">, not a
   <header>, so the element-qualified rule above never matched it. */
.lnvhvsubmenu {
    background: #ffffff;
}

/* --- Main matchup heading (team logos + names) --- */
.STHSBoxScore_Result {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 600;
    padding: 20px 10px 6px;
    text-align: left;
}

.STHSBoxScore_Result span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.STHSBoxScore_TeamImageLarge {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.STHSBoxScore_TeamImage {
    width: 22px;
    height: 22px;
    object-fit: contain;
    margin-right: 6px;
    vertical-align: middle;
}

.STHSBoxScore_NowTime {
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    color: rgb(102, 102, 102);
    padding: 0 10px 20px;
}

/* --- GOALS / SHOTS summary card panels --- */
.STHSBoxScore_GoalsShotsMainTable {
    width: auto;
    margin: 0 0 20px;
    border-collapse: separate;
    border-spacing: 0;
}

.STHSBoxScore_Goals,
.STHSBoxScore_Shots {
    vertical-align: top;
    width: auto;
    padding: 0;
}

.STHSBoxScore_Goals {
    padding-right: 20px;
}

.STHSBoxScore_GoalsTable,
.STHSBoxScore_ShotsTable {
    width: auto;
    min-width: 280px;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgb(247, 247, 247);
}

/* Uniform light-gray card: legacy paints header AND body the same shade,
   so backgrounds are set explicitly on every cell (a wrapper element's
   background can't be trusted to show through here). */
.STHSBoxScore_GoalsTable th,
.STHSBoxScore_ShotsTable th,
.STHSBoxScore_GoalsTable td,
.STHSBoxScore_ShotsTable td {
    background: rgb(247, 247, 247);
    border: none;
}

.STHSBoxScore_GoalsTable th,
.STHSBoxScore_ShotsTable th {
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 16px 6px;
}

.STHSBoxScore_GoalsTable tr:last-child td,
.STHSBoxScore_ShotsTable tr:last-child td {
    padding-bottom: 14px;
}

.STHSBoxScore_GoalsPeriodHeader,
.STHSBoxScore_ShotsPeriodHeader,
.STHSBoxScore_GoalsTotalHeader,
.STHSBoxScore_ShotsTotalHeader {
    text-align: center !important;
    font-size: 12px;
    font-weight: 700;
    color: rgb(102, 102, 102);
    padding: 4px 6px !important;
    border: none;
}

.STHSBoxScore_GoalsTeamName,
.STHSBoxScore_ShotsTeamName {
    padding: 8px 12px;
    font-weight: 600;
    white-space: nowrap;
    border: none;
}

.STHSBoxScore_GoalsPeriod,
.STHSBoxScore_ShotsPeriod,
.STHSBoxScore_GoalsTotal,
.STHSBoxScore_ShotsTotal {
    text-align: center;
    padding: 8px 6px;
    border: none;
}

.STHSBoxScore_GoalsTotal,
.STHSBoxScore_ShotsTotal {
    font-weight: 700;
    font-style: italic;
}

@media screen and (max-width: 640px) {
    .STHSBoxScore_GoalsShotsMainTable,
    .STHSBoxScore_GoalsShotsMainTable > tr,
    .STHSBoxScore_Goals,
    .STHSBoxScore_Shots {
        display: block;
        width: 100%;
    }
    .STHSBoxScore_Goals {
        padding-right: 0;
    }
    .STHSBoxScore_Shots {
        margin-top: 16px;
    }
}

/* --- Period-by-period Goals | Penalties table --- */
.STHSBoxScore_PeriodPerPeriod {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin-bottom: 20px;
}

/* GOALS / PENALTIES column headers: plain bold uppercase, no band, no rule
   line — the gray treatment belongs only to the period-band cells below. */
.STHSBoxScore_PeriodPerPeriod > tbody > tr > th,
.STHSBoxScore_PeriodPerPeriod > tr > th {
    text-align: left;
    padding: 12px;
    background: transparent;
    border: none;
    font-size: 15px;
    text-transform: uppercase;
}

.STHSBoxScore_PeriodPerPeriod > tbody > tr > td,
.STHSBoxScore_PeriodPerPeriod > tr > td {
    vertical-align: top;
    padding: 6px 14px;
    border: none;
    font-size: 13px;
    line-height: 1.6;
}

/* Rounded light-gray period bands (1st period / Goalie Stats / 3 Stars…) —
   border-radius works because the table uses border-collapse: separate. */
.STHSBoxScore_PeriodPerPeriod_Header {
    background: rgb(240, 240, 240) !important;
    font-weight: 700 !important;
    padding: 10px 16px !important;
    border-radius: 6px;
}

/* --- Team-stat sortable table: logo + name cell --- */
.STHSBoxScore_TeamStatTeamName {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* --- Per-team roster section heading (Team Stats tab) --- */
.STHSBoxScore_PlayerStatTitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 20px 0 10px;
    padding: 8px 0;
}

/* --- Lines tab --- */
.STHSBoxScore_TeamLine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 20px;
    text-transform: uppercase;
}

.STHSBoxScore_Lines_Table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 4px;
    font-size: 13px;
}

.STHSBoxScore_Lines_Table th {
    background: rgb(236, 236, 236);
    text-align: center;
    font-weight: 700;
    padding: 8px;
    border: none;
}

.STHSBoxScore_Lines_Table td {
    text-align: center;
    padding: 7px 8px;
    border: none;
}

.STHSBlankDiv {
    height: 16px;
}

/* --- Play-by-Play tabs --- */
.STHSBoxScore_PlayByPlayTitle {
    font-size: 22px;
    font-weight: 700;
    padding: 20px 0 10px;
}

.STHSBoxScore_PlayByPlayPeriod {
    font-size: 17px;
    font-weight: 700;
    margin-top: 16px;
    padding: 6px 0;
}

/* --- Missing column-width utilities (STHSW25/STHSW55/STHSW250/STHSW140Min
   already exist above; these three are used by boxscore markup only) --- */
.STHSW200 { min-width: 200px; }
.STHSW35  { min-width: 35px; }
.STHSW140 { min-width: 140px; }

/* --- STHSW75: used by the Finance tab's cap-table year columns and
   legacy-precedented (the same class name appears throughout
   _lnvhv-TeamSalaryCapDetailDB.php's own year-column headers) but never
   actually defined anywhere in this file until now. --- */
.STHSW75  { min-width: 75px; }

/* --- .divTablesorter_boxscore: unlike the sitewide .divTablesorter, the
   legacy boxscore renders content at full natural height with no border
   frame and no internal scrollbox (confirmed against full-page legacy
   captures — the earlier 600px/border treatment was wrong and was drawing
   a spurious outer rectangle around the GOALS/SHOTS cards). Horizontal
   overflow protection only, for wide tables on narrow screens. --- */
.divTablesorter_boxscore {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin: 0 0 16px;
    background: transparent;
}

.divTablesorter_boxscore::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 4px;
}

.divTablesorter_boxscore::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(var(--teamcolorprimary), 0.5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* --- Tab panels: initial state. JS (in boxscore.php) toggles the .active
   class and inline display on click — :target is NOT used, because
   history.pushState() doesn't re-evaluate :target in most browsers.
   Real fetched markup ships tabmain1 with class="tabmain active". --- */
#lnvhv-boxscore-main .tabmain {
    display: none;
    width: 100%;
    margin: 20px 0;
    line-height: 1.6;
}

#lnvhv-boxscore-main .tabmain.active {
    display: block;
}

/* --- Tab nav active-state. Two selectors because the two markup shapes
   differ: real fetched games carry "initialactive" on the <li>
   (game_html_transform's frozen "activemain -> initialactive" rename);
   the synthetic test-mode markup carries it on the <a> itself. --- */
#lnvhv-boxscore-main .submenuwrapper .navlink.initialactive,
#lnvhv-boxscore-main .submenuwrapper li.initialactive .navlink {
    background-color: #ffffff;
    border-bottom: 4px solid rgba(var(--teamcolorprimary), 1) !important;
    color: rgb(37, 37, 37);
    cursor: default;
    font-weight: bold;
}

/* ══════════════════════════════════════════════════════════════
   team-career.php — Career Team Stats
   ══════════════════════════════════════════════════════════════ */

.lnvhv-team-career__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.lnvhv-team-career__logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
}

.lnvhv-team-career__header h1 {
    margin: 0;
    font-size: 1.5rem;
}

.lnvhv-team-career__summary {
    margin-bottom: 24px;
}

.lnvhv-team-career__summary h2,
.lnvhv-team-career__leaders h2 {
    margin: 0 0 8px;
    font-size: 1.1rem;
}

.lnvhv-team-career__summary-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    border-left: 3px solid rgba(var(--teamcolorprimary), 1);
    background-color: #F0F1F2;
    padding: 12px 8px;
    gap: 12px;
}

.lnvhv-team-career__summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 130px;
    flex: 1 1 130px;
    text-align: center;
}

.lnvhv-team-career__summary-label {
    text-transform: uppercase;
    font-size: 12px;
}

.lnvhv-team-career__summary-value {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    margin-bottom: 3px;
    font-size: 24px;
    white-space: nowrap;
}

.lnvhv-team-career__summary-rank {
    font-size: 12px;
}

.lnvhv-team-career__leaders {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lnvhv-team-career__leaders h2 {
    margin-top: 20px;
}

.lnvhv-team-career__leaders h2:first-child {
    margin-top: 0;
}

/* Mobile: full-width stacked summary items, no side-by-side squeeze */
@media screen and (max-width: 600px) {
    .lnvhv-team-career__header {
        flex-wrap: wrap;
    }

    .lnvhv-team-career__summary-grid {
        flex-direction: column;
        align-items: stretch;
        border-left-width: 5px;
    }

    .lnvhv-team-career__summary-item {
        min-width: 0;
        width: 100%;
        padding: 6px 0;
    }

    .lnvhv-team-career__summary-item + .lnvhv-team-career__summary-item {
        border-top: 1px dotted #ccc;
    }

    .lnvhv-team-career__summary-value {
        font-size: 22px;
    }
}

/* ==========================================================================
   15. FINANCE TAB — CAP TABLE (pro-team.php, teamPage=Finance)
   Position-grouped contract/cap table replacing the legacy per-position
   "Moyenne" footer rows with a PuckPedia-style summary bar above each
   group. The bar reuses the sortable table's existing th.subdivide tint
   (rgba(var(--teamcolorprimary), 0.2)) rather than inventing a parallel
   color language. Warning-tier colors on the grand total are semantic
   (green/amber/orange/red) and deliberately NOT team-colored, since "over
   the cap" needs to read as a warning regardless of which team's colors
   are currently active.
   ========================================================================== */

.financecap-group {
    margin-bottom: 28px;
}

.financecap-group-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
    background-color: rgba(var(--teamcolorprimary), 0.2);
    color: rgba(var(--teamcolorprimary), 1);
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 4px 4px 0 0;
}

.financecap-group-count {
    font-size: 15px;
}

.financecap-group-label {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.financecap-group-sum {
    margin-left: auto;
    font-size: 14px;
}

.financecap-group-pct {
    font-size: 14px;
    opacity: 0.85;
}

.financecap-group .divTablesorter {
    margin-top: 0;
}

/* Scoped spacing fix for Finance's overview panel specifically — the
   shared .teamstats-category/.stat-type pattern (also used 9x on the
   Stats tab) has almost no bottom breathing room by design (.stat-number
   only carries a 3px margin-bottom), which reads as cramped once Finance
   wraps 7 items onto two rows. Scoped to .financecap-overview rather than
   editing the shared rule, so the Stats tab's own usage is untouched. */
.financecap-overview .teamstats-category {
    padding-bottom: 14px;
}

/* No-trade-clause icon, shown inline next to a cap-hit dollar amount
   (replaces the removed Termes column, which previously listed all five
   legacy flag codes in their own column — only NTC gets icon treatment). */
.financecap-ntc {
    display: inline-flex;
    vertical-align: -3px;
    margin-right: 5px;
    color: #1f2937;
}

/* UFA / RFA free-agency status badges */
.financecap-fastatus {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
    border-radius: 3px;
    color: #ffffff;
    white-space: nowrap;
}

.financecap-fastatus--ufa {
    background-color: #d64550;
}

.financecap-fastatus--rfa {
    background-color: #3b6fd6;
}

/* Cap-excluded player marker (still listed, excluded from group/grand sums) */
.financecap-row--excluded {
    opacity: 0.72;
}

.financecap-excluded-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 3px;
    background-color: rgba(51, 51, 51, 0.08);
    color: #666666;
    vertical-align: middle;
    white-space: nowrap;
}

/* Grand-total table (financecap-totals): a real <table> using the same
   column structure as the group tables above it (6-col label span + Cap%
   + 5 year columns), inside the same .divTablesorter wrapper — this is
   what gives it identical column alignment AND identical mobile
   horizontal-scroll behavior for free, replacing an earlier flex-based
   version that could drift out of alignment and wrapped instead of
   scrolling on narrow screens. */
.financecap-totals {
    margin-bottom: 20px;
}

.financecap-totals-spacer {
    cursor: default;
}

.financecap-special-tr td {
    background-color: #f5f5f5;
    color: #555555;
}

.financecap-total-tr td {
    font-weight: 600;
}

.financecap-total-tr--ok td {
    background-color: rgba(76, 175, 80, 0.15);
    color: #2e7d32;
}

.financecap-total-tr--watch td {
    background-color: rgba(255, 193, 7, 0.2);
    color: #8a6100;
}

.financecap-total-tr--high td {
    background-color: rgba(255, 152, 0, 0.2);
    color: #a35700;
}

.financecap-total-tr--over td {
    background-color: rgba(214, 69, 80, 0.9);
    color: #ffffff;
}

.financecap-legend,
.financecap-note,
.financecap-disabled-note,
.financecap-nodata {
    font-size: 12px;
    color: #666666;
    padding: 10px;
    line-height: 1.6;
}

@media screen and (max-width: 640px) {
    .financecap-group-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .financecap-group-sum {
        margin-left: 0;
    }
}


/* ==========================================================================
   27b. PLAYER COMPARE — searchable picker + server-side comparison colors
   (Compare page build — additive only; nothing in section 27 above changed)
   ========================================================================== */

/* Picker layout: two search inputs + button, no team1/team2 row (legacy's
   Team selects are gone — a single searchable player/goalie picker replaces
   the Team->Player cascade, so .compare-team is never rendered here). */
.compare-container.compare-container--picker {
    grid-template-areas:
        'player1 player2'
        'button button';
}

@media (max-width: 480px) {
    .compare-container.compare-container--picker {
        grid-template-columns: 1fr;
        grid-template-areas:
            'player1'
            'player2'
            'button';
    }
}

.compare-player input[type="text"] {
    padding: 10px;
    border: 1px solid #f0f1f2;
    width: 100%;
    /* Without this, width:100% + the padding/border above renders the
       input ~22px wider than its own container under the default
       content-box model -- caught empirically while verifying the new
       .cmp-picker-results list below, which sizes itself (via left:0/
       right:0, no explicit width) to the container's real content width
       and so didn't line up with the wider input above it. */
    box-sizing: border-box;
}

/* Custom typeahead (replaces the native <input list>/<datalist> combo) --
   the native browser/OS suggestion popup wasn't part of this page's DOM,
   so this page's CSS had no control over its background, opacity, or
   open/close animation at all; that's what made it render inconsistently
   across devices. This list is page-rendered, so it's fully ours to style
   and it behaves the same everywhere. */
.compare-player {
    position: relative;
}

.cmp-picker-results {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 500;
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #f0f1f2;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.cmp-picker-option {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 0.95em;
    border-bottom: 1px solid #f5f5f6;
}

.cmp-picker-option:last-child {
    border-bottom: 0;
}

.cmp-picker-option.is-active,
.cmp-picker-option:hover {
    background: royalblue;
    color: #fff;
}

/* Inline notice text: "player not found" near a picker input, or "no games
   played at this level" in place of the Stats rows. */
.cmp-note {
    text-align: center;
    padding: 6px 10px;
    color: #666;
    font-size: 0.9em;
}

.lnvhv__compare-result .cmp-note {
    grid-column: 1 / span 3;
}

/* Server-computed comparison state per cell. Tints reuse the site's
   existing win/loss colors (.lnvhv-schedule-carousel__event__outcome--win/
   --loss, #1C8937 / #B92525) rather than introducing a new palette. Light
   background only (no bold/colored text) to keep the numbers themselves
   readable; the tint plus the arrow below carries the signal so it isn't
   color-only. */
.cmp-better {
    background-color: rgba(28, 137, 55, 0.14);
}

.cmp-worse {
    background-color: rgba(185, 37, 37, 0.12);
}

.cmp-tie {
    background-color: transparent;
}

.cmp-arrow-up {
    color: #1C8937;
}

.cmp-arrow-down {
    color: #B92525;
}

/* ---- Compare revision 2 additions: Ratings diff display, expandable
   Stats, per-side Farm tag (all additive on top of the block above) ---- */

.cmp-diff {
    font-size: 0.85em;
    opacity: 0.85;
}

.cmp-diff-better {
    color: #1C8937;
}

.cmp-diff-worse {
    color: #B92525;
}

.cmp-level-tag {
    font-size: 0.75em;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    margin-left: 4px;
}

.cmp-stat-extra {
    display: none;
}

.cmp-stats-toggle {
    grid-column: 1 / span 3;
    text-align: center;
    padding: 10px;
    margin-top: 4px;
    background: none;
    border: none;
    color: royalblue;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.cmp-stats-toggle:hover {
    text-decoration: underline;
}