* {
    /*font-family: Trebuchet MS;*/
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif font-size: 13px;
    padding: 0px;
    margin: 0px;
}

body {
    --primary: #F99E1F;
    --primary-dark: #d88200;
    --secondary: #101820;
    --secondary-2: #182738;
    --text: #111827;
    --muted: #6b7280;
    --border: #e5e7eb;
    --card: #ffffff;
    --shadow: 0 10px 30px rgba(0,0,0,.18);

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    margin: 0;
    padding: 30px;
    min-height: 100vh;
    /* Backdrop. Swap images/background.jpg to change it - keep that name.
       The dark colour underneath means a missing image still looks intentional
       instead of falling back to flat grey. */
    background-color: #0b1220;
    background-image:
        linear-gradient(rgba(9,14,24,0.72), rgba(9,14,24,0.82)),
        url("../images/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Hide Google Translate UI chrome */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-gadget { font-size: 0 !important; }
.goog-logo-link { display: none !important; }
.goog-te-gadget span { display: none !important; }
#google_translate_element { display: none !important; }
.goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body > .skiptranslate { display: none !important; }

.container,
.header,
.footer,
table {
    width: 100%;
}

.container {
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin-top: 24px;
    padding: 0;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}


/*
***************************************    
**  General Formating                **
***************************************
*/
a {
    color: #1a73e8;
    text-decoration: none;
    transition: color 0.2s;
}

    a:hover {
        color: #0b57d0;
        text-decoration: underline;
    }

.boldCell {
    font-weight: bold;
}

.table > thead > tr > th {
    background: linear-gradient(135deg, var(--primary), #ffbe45);
    color: #111;
    font-weight: 800;
    border-bottom: 1px solid rgba(0,0,0,.06);
    text-transform: uppercase;
    letter-spacing: .6px;
}

.btn-primary {
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 800;
    transition: background 0.25s, color 0.25s;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
        background: #000;
        color: #fff;
    }

table {
    border-radius: 0px 0px 6px 6px;
    overflow: hidden;
    margin-bottom: 30px;
    background: var(--card);
    box-shadow: var(--shadow);
}

a.home-link-hdr {
    color: #06828A;
}

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



#scores .col-md-12 {
    padding: 0;
}

#scores .team-scores-hdr {
    color: #06828A;
}


.pageDateStamp {
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
    font-style: italic;
    font-size: 12px;
    margin-top: 24px;
}

/*
***************************************    
**  Front Page Event Links           **
***************************************
*/
.eventLinks a {
    display: inline-block;
    font-size: 15px;
    width: 48%;
    padding: 5px 2px;
    margin: 0 2px 5px 0px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
}

    .eventLinks a:hover {
        text-decoration: none;
        background: rgba(56, 189, 248, 0.18);
        border-color: rgba(125, 211, 252, 0.25);
        color: #e6edf3;
    }

.eventLinks h3 {
    text-transform: uppercase;
    color: ##06828A;
    padding: 10px 0;
    font-weight: normal;
    margin: 10;
    padding: 0;
}

.eventResults {
    width: 98%;
    margin: 0 auto;
}

.scheduleTitle {
    font-size: 15px;
    color: #06828A;
    font-weight: bold;
}

.time, .heats, .results {
    width: 90px;
}

.round {
    width: 80px;
}

.homeContainerLeft {
}

.homeContainerRight {
}

    .homeContainerRight h2, .homeContainerLeft h2, .session-tables h4 {
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        margin: 10px 0;
    }

/*
***************************************    
**  Results                          **
***************************************
*/
#results h3 {
    font-size: 26px;
    color: #e6edf3;
    margin: 20px 0 10px 15px;
    text-transform: uppercase;
    font-weight: 900;
}

#results h4 {
    text-transform: uppercase;
    color: rgba(230, 237, 243, 0.92);
}


table.hzTable td, table.hzTable th {
    width: 50px;
    padding: 0;
    text-align: center;
    font-size: 10px;
    border-left: 1px solid #555;
}

table.hzTable {
    border-right: 1px solid #555;
    background-color: transparent;
}

/* Records 
#results div table:first-child{
	margin-bottom: 20px;
	background-color: transparent;
	color: #FFF;
}
#results div table:first-child td{
	padding: 0 10px 0 10px;
	border-left: 3px solid #c0ac7e; 

}
*/

.scoreboard h3 {
    margin: 0;
    padding: 10px 0 0 0;
    color: #7dd3fc;
    text-align: center;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 900;
}

#clock {
    background: rgba(56, 189, 248, 0.20);
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #e6edf3;
    padding: 5px 5px 3px 5px;
    /*width: 150px;*/
}

.place, .place2, .lane, .number, .laps {
    text-align: center
}

.place2{
    color: black;
    font-weight: bold;
}

.time, .delta, .cum, .last {
    text-align: right;
}

.time {
    font-weight: bold;
}

/*
***************************************    
**  Results: Field Series / Splits   **
***************************************
*/
.vertical-table, .horizontal-table, .splits-table {
    border: none;
    padding: 0px;
    margin: 0px;
    border-collapse: collapse;
    background-color: transparent;
}

    .vertical-table th {
        font-size: 10px;
        background-color: #999;
        color: #000;
        text-align: center;
        padding: 2px 0;
        width: 50px;
        font-weight: normal;
    }

    .vertical-table td {
        font-size: 10px;
        text-align: center;
        padding: 2px 0;
    }

    .vertical-table .best-height {
        background-color: rgb(255,143,0);
    }


    .horizontal-table td, .splits-table td {
        font-size: 10px;
        text-align: center;
        padding: 0 10px;
    }




/*
***************************************    
**  Header                           **
***************************************
*/

.header {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-2) 55%, #1f3248 100%);
    color: #fff;
    padding: 35px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.08);
    flex-wrap: wrap;
}

.header::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:rgba(249,158,31,.15);
    border-radius:50%;
    top:-180px;
    right:-100px;
    filter:blur(20px);
}

.header h3, .header h4, .header h5 {
    margin: 0;
    color: #fff;
    font-weight: 800;
    position: relative;
    z-index: 2;
}

.header h3 {
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: 0.2px;
    margin-top: 4px;
}
.header h4 {
    font-size: 1.125rem;
    line-height: 1.35;
    opacity: 0.92;
    font-weight: 700;
    margin-top: 8px;
}
.header h5 {
    font-size: 1rem;
    line-height: 1.35;
    opacity: 0.90;
    margin-top: 4px;
}

.header img.logo {
    height: 68px;
    min-height: 54px;
    max-height: 80px;
    width: auto;
    margin-right: 18px;
    max-width: 45vw;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

/*
***************************************    
**  Footer                           **
***************************************
*/
.footer {
    background: #fff;
    color: #000;
    border-radius: 0px 0px 6px 6px;
    padding: 14px 14px;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow);
    border-top: 1px solid #ccc;
}

/* Your templates use footer-main/footer-logos */
.footer-main {
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
}

.footer-main p,
.footer-main a {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 4px 0;
}

.footer-logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    text-align: right;
    margin-left: auto;
}

    .footer .addr p, .footer .addr a { color: #000; margin: 0 0 6px 0; font-size: 14px; line-height: 1.4; }

    .footer .icons {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 18px;
    }

    .footer .icons img {
        height: 6vw;
        min-height: 32px;
        max-height: 60px;
        width: auto;
        filter: grayscale(0.1) brightness(1);
        transition: filter 0.2s, transform 0.2s;
        max-width: 20vw;
    }

    .footer .icons img:hover {
        filter: grayscale(0) brightness(1.1);
        transform: scale(1.08);
    }


/*
***************************************    
**  Recent Results                   **
***************************************
*/
#recentResults {
    margin: 0 auto;
    background: rgba(56, 189, 248, 0.12);
    margin: 20px 0 10px 0;
    padding: 0 0 5px 0;
    color: #e6edf3;
    border-radius: 12px;
    border: 1px solid rgba(125, 211, 252, 0.18);
}

    #recentResults h3 {
        font-size: 15px;
        font-weight: bold;
        text-align: left;
        color: #e6edf3;
        padding: 10px 10px 10px 10px;
        margin: 0 0 0 0;
        text-transform: uppercase;
    }

    #recentResults a {
        font-size: 16px;
        color: #e6edf3;
        display: block;
        text-decoration: none;
        text-align: left;
        padding: 5px 1px 5px 10px;
    }

        #recentResults a.row0 {
            background: rgba(255, 255, 255, 0.06);
        }

        #recentResults a:hover {
            border-left: 10px solid #15d6af;
            padding-left: 10px;
        }

span.pipe {
    color: rgba(230, 237, 243, 0.70);
}

p.status {
    margin-left: 10px;
}


/*
***************************************    
**  Twitter                          **
***************************************
*/
#twitter {
    margin: 10px auto 10px auto;
}

    #twitter iframe {
        width: 100%;
    }

/*
***************************************    
**  Forcast                       **
***************************************
*/
#forcast {
    background-color: #FFF;
    padding: 10px;
}

    #forcast div {
        margin: 0 auto;
        width: 243px;
    }

/*
***************************************    
**  Realtime                         **
***************************************
*/
#realtime {
    background-color: #fff;
    padding: 10px;
    margin: 0 0 10px 0;
}

    #realtime img {
        width: 100%;
    }

    #realtime p {
        color: #06828A;
        font-size: 11px;
    }





.btn-primary {
    margin: 10px 0 0 15px;
}








/*
***************************************    
**  Styles Under 992px               **
***************************************
*/
@media(max-width:992px) {
    #twitter {
        display: none;
    }

    #wu-links {
        border-bottom: 1px solid #c0ac7e;
        padding: 10px 0 10px 0;
    }

    .header h3, .header h4, .header h5, .header h6 {
        text-align: center;
    }

    .footer .icons {
        text-align: center;
        margin: 10px 0 0 0;
        padding: 10px 0;
    }

        .footer .icons img {
            width: 10%;
        }

    .footer .addr p {
        text-align: center;
    }

    .eventLinks {
        text-align: center;
    }

    .header img.logo {
        margin: auto;
    }
}


/*
***************************************    
**  Styles Under 768px               **
***************************************
*/
@media(max-width:768px) {
    body {
        margin: 0;
        padding: 0;
    }
    /* Bigger button for smaller devices */
    .eventLinks a {
        font-size: 18px;
        padding: 12px 2px;
    }

    #recentResults a {
        font-size: 18px;
    }

    #recentResults h3 {
        font-size: 24px;
    }

    #recentResults span.pipe {
        font-size: 18px;
    }

    .header, .footer {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .container, .container-fluid {
        padding: 16px 4px;
    }

    .eventLinks a {
        width: 100%;
        margin: 0 0 8px 0;
    }
}


/*
***************************************    
**  Styles Under 625px               **
***************************************
*/
@media(max-width:625px) {
    * {
        font-size: 11px;
    }

    .eventLinks a {
        width: 100%;
    }

    #results h3, .home-link-hdr {
        font-size: 22px;
        color: #c0ac7e;
    }

    .header h3 {
        font-size: 1.35rem;
    }

    .header h4 {
        font-size: 1rem;
    }

    .header h5 {
        font-size: 0.9375rem;
    }

    .footer-main p,
    .footer-main a {
        font-size: 13px;
    }

    .header h6 {
        font-size: 9px;
    }

    .time, .heats, .results {
        width: 60px;
    }

    .round {
        width: 50px;
    }
}

/* Modernize tables */
table {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}
td, th {
    padding: 10px 8px;
}

/* Hide old borders */
table, th, td {
    border: none !important;
}

/* Modernized style for Diamond League look */
nav, .nav {
    background: transparent;
    color: #fff;
    border-radius: 0;
    margin-bottom: 18px;
    padding: 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.nav a, nav a {
    color: rgba(255,255,255,.85);
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(135deg, rgba(16,24,32,.70) 0%, rgba(24,39,56,.70) 55%, rgba(31,50,72,.70) 100%);
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.nav a:hover, nav a:hover {
    background: linear-gradient(135deg, rgba(16,24,32,.88) 0%, rgba(24,39,56,.88) 55%, rgba(31,50,72,.88) 100%);
    border-color: rgba(249,158,31,.35);
    box-shadow: 0 10px 22px rgba(0,0,0,.22);
    color: #fff;
    text-decoration: none;
}

.btn, .btn-primary {
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-weight: 800;
    transition: background 0.25s, color 0.25s;
}
.btn:hover, .btn-primary:hover {
    background: #000;
    color: #fff;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: #f8fafc;
}

/* Sportronics-style EN button (uses existing .topbar markup) */
.topbar {
    position: fixed;
    top: 15px;
    right: 25px;
    left: auto;
    z-index: 9999;
    background: transparent;
    border: none;
}

.topbar .topbar-inner {
    max-width: none;
    margin: 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--primary);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

.topbar .brand {
    display: none;
}

.topbar .lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #000;
    font-size: 14px;
    font-weight: 800;
}

.topbar select {
    background: transparent;
    color: #000;
    border: none;
    border-radius: 10px;
    padding: 0;
    outline: none;
}

.topbar select:focus {
    border-color: transparent;
    box-shadow: none;
}

/* Footer text used in your templates */
.footer-main p,
.footer-main a {
    color: #000;
}

.footer-logos img {
    filter: brightness(1.05);
    opacity: 0.95;
}

/* Make bootstrap tables read well on dark */
.table, .table > thead > tr > th, .table > tbody > tr > td {
    color: #111;
}

.table > tbody > tr > td {
    border-top: 1px solid var(--border) !important;
}

.table-hover > tbody > tr:hover {
    background: #f8fafc;
}

/* Teal event bar + beige heat bar (matches screenshot) */
.event-title, tr.event-title > td, tr.event-title > th {
    background: linear-gradient(135deg, #00a9ac 0%, #0081a3 50%, #006b92 100%) !important;
    color: #fff !important;
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 14px 14px !important;
    border-bottom: 2px solid #dbeafe;
}

.heat-info, tr.heat-info > td, tr.heat-info > th {
    background: #fff8e7 !important;
    color: #9a6700 !important;
    font-weight: 700 !important;
    text-align: left !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
    border-top: 1px solid #fde68a;
    border-bottom: 1px solid #fde68a;
}

@media (max-width: 900px) {
    .container { padding: 16px 4px; }
    .header, .footer {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
        text-align: left;
    }
    .header img.logo, .footer .icons img {
        margin-right: 0;
        margin-left: 0;
        max-width: 60vw;
    }
    .footer .icons {
        justify-content: flex-start;
    }
}

/* Force phone layout even on high-DPR devices */
@media (max-width: 992px) {
    .header {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .header > * {
        width: 100%;
    }

    .header img.logo {
        width: auto;
    }

    /* Bootstrap md columns still float on small screens (BS3).
       This causes the "empty right side" you see on mobile. */
    .header .col-md-4,
    .footer .col-md-4 {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .footer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }

    .footer-main,
    .footer-logos {
        width: 100%;
        text-align: left;
    }

    .footer-logos {
        justify-content: flex-start;
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    body {
        padding: 12px;
    }

    .container {
        margin-top: 18px;
    }

    .header {
        padding: 18px;
        gap: 14px;
        justify-content: flex-start;
    }

    /* your templates sometimes put logo inside a bootstrap column */
    .header .col-md-4 {
        width: auto;
        padding: 0;
        margin: 0;
    }

    .header h3, .header h4, .header h5 {
        width: 100%;
    }

    .header h3 { font-size: 1.25rem; }
    .header h4 { font-size: 0.9375rem; }
    .header h5 { font-size: 0.875rem; }

    .footer-main p,
    .footer-main a {
        font-size: 13px;
    }

    .header img.logo {
        height: 40px;
        max-width: 80vw;
    }
    .footer .icons img {
        height: 32px;
        max-width: 40vw;
    }
    .header, .footer {
        padding: 12px 4vw;
        gap: 8px;
    }

    .footer {
        justify-content: flex-start;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-main,
    .footer-logos {
        width: 100%;
        text-align: left;
    }
}

/* Tighten team name <-> flag spacing */
.team-flag {
    margin-right: 6px;
}

.team {
    gap: 6px;
}

/* Also handle other flag markup used by result tables */
.country-wrap {
    gap: 4px;
}

.flag-icon {
    margin-right: 4px;
}

/* Print and PDF buttons */
.print-btn, .pdf-btn {
    background: #00b4d8;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 6px;
    margin-left: 8px;
    font-weight: 500;
    transition: background 0.2s;
}

.print-btn:hover, .pdf-btn:hover {
    background: #0077b6 !important;
    text-decoration: none !important;
}

/* Print styles */
@media print {
    .nav, .footer, .print-btn, .pdf-btn {
        display: none !important;
    }
    
    .container {
        margin: 0;
        padding: 0;
        box-shadow: none;
    }
    
    body {
        background: #fff;
    }
    
    .header {
        background: #fff !important;
        color: #000 !important;
        padding: 0 0 20px 0;
    }
    
    .header h3, .header h4, .header h5 {
        color: #000 !important;
    }
    
    table {
        page-break-inside: avoid;
    }
    
    .row {
        page-break-inside: avoid;
    }
    
    a[href]:after {
        content: none !important;
    }
}

/* Team flag styles */
.team-flag {
    height: 28px;
    width: 42px;
    object-fit: cover;
    margin-right: 10px;
    vertical-align: middle;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-flag:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

.team {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

/* Print styles for flags */
@media print {
    .team-flag {
        height: 24px;
        width: 36px;
        margin-right: 6px;
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .team {
        padding: 4px 6px;
    }
}

/* Mobile styles for flags */
@media (max-width: 768px) {
    .team-flag {
        height: 24px;
        width: 36px;
        margin-right: 8px;
    }
    
    .team {
        padding: 6px 8px;
    }
}

/* ==========================================================
   Live FinishLynx scoreboard (index.html #live-results-target)
   ========================================================== */

.live-scoreboard-box {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0 0 6px 6px;
    padding: 20px 18px 18px;
    margin-top: 8px;
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.live-scoreboard-box::before {
    content: "";
    display: block;
    height: 4px;
    margin: -20px -18px 16px;
    background: linear-gradient(135deg, #00a9ac 0%, #0081a3 50%, #006b92 100%);
}

.live-scoreboard-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.live-time {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 160px;
    background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-2) 55%, #1f3248 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 10px 14px 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.live-time-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    text-align: center;
}

#live-clock {
    background: rgba(0, 0, 0, 0.35);
    font-size: 2rem;
    font-weight: 800;
    font-family: ui-monospace, "Courier New", Consolas, monospace;
    text-align: center;
    color: var(--primary);
    letter-spacing: 0.08em;
    padding: 12px 10px;
    min-width: 0;
    border-radius: 10px;
    border: 2px solid rgba(249, 158, 31, 0.45);
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(249, 158, 31, 0.15);
    flex-shrink: 0;
    float: none;
    line-height: 1.1;
    text-shadow: 0 0 12px rgba(249, 158, 31, 0.35);
}

.live-badge {
    background: var(--secondary);
    color: #fff;
    padding: 6px 12px;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 999px;
    display: inline-block;
    font-weight: 800;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.live-badge::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.live-title {
    color: var(--secondary);
    margin: 4px 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.25;
    width: 100%;
    clear: both;
}

.live-details-bar {
    padding: 12px 14px;
    margin: 12px 0 0;
    background: #fff8e7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    font-size: 14px;
    color: #9a6700;
    line-height: 1.5;
}

.live-details-bar span {
    margin-right: 18px;
    font-weight: 800;
    color: #111;
}

#live-results-target {
    margin-top: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.live-results-placeholder {
    text-align: center;
    color: var(--muted);
    padding: 24px 16px;
    font-size: 14px;
    font-style: italic;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px dashed var(--border);
    margin: 0;
}

/* Tables injected into #live-results-target */
#live-results-target .live-results-table {
    width: 100%;
    margin-bottom: 0;
    border-radius: 0 0 6px 6px;
    background: var(--card);
}

#live-results-target .live-results-table thead th {
    background: linear-gradient(135deg, var(--primary), #ffbe45);
    color: #111;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 8px;
    text-align: center;
    border: none !important;
    white-space: nowrap;
}

#live-results-target .live-results-table thead th.live-th-name,
#live-results-target .live-results-table thead th.live-th-team {
    text-align: left;
}

#live-results-target .live-results-table thead th.live-th-time {
    text-align: right;
}

#live-results-target .live-results-table tbody td {
    padding: 8px 8px;
    font-size: 13px;
    vertical-align: middle;
    border-top: 1px solid var(--border) !important;
}

#live-results-target .live-results-table tbody tr:nth-of-type(odd) {
    background: #f8fafc;
}

#live-results-target .live-results-table tbody tr:hover {
    background: rgba(56, 189, 248, 0.08);
}

#live-results-target .live-col-center {
    text-align: center;
    font-weight: 700;
}

#live-results-target .live-col-name {
    font-weight: 800;
    color: var(--secondary);
    text-align: left;
}

#live-results-target .live-col-team {
    text-align: left;
    color: #374151;
}

#live-results-target .live-col-team.team {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

#live-results-target .live-col-team .team-flag {
    height: 24px;
    width: 36px;
    margin-right: 0;
    flex-shrink: 0;
}

#live-results-target .live-col-team .team-code {
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

#live-results-target .live-col-time {
    text-align: right;
    font-family: ui-monospace, "Courier New", monospace;
    font-weight: 700;
    font-size: 14px;
    color: #111;
}

#live-results-target .live-col-time-sub {
    text-align: right;
    font-family: ui-monospace, "Courier New", monospace;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 768px) {
    .live-scoreboard-header {
        flex-direction: column;
    }

    .live-time {
        width: 100%;
        min-width: 0;
    }

    #live-clock {
        width: 100%;
        font-size: 1.65rem;
    }

    .live-title {
        font-size: 1.1rem;
    }

    .live-details-bar span {
        display: inline-block;
        margin-right: 12px;
        margin-bottom: 4px;
    }

    #live-results-target .live-results-table thead th,
    #live-results-target .live-results-table tbody td {
        font-size: 11px;
        padding: 6px 4px;
    }
}


/*
=================================================================
==  RESPONSIVE FIXES  v1.4                                     ==
==  1) Header : logo left  +  meet name / town / date centred   ==
==  2) Results tables : horizontal scroll box (field series)     ==
==  Keep this block LAST in the file - it overrides the rules    ==
==  above on purpose.                                            ==
=================================================================
*/

/* --------------------------------------------------------------
   1. HEADER LAYOUT
   markup:  .header > .col-md-4 (logo) + h3 [$name] + h4 [$town] + h5 [$date]
   desktop: logo pinned left, the three lines stacked and centred
   -------------------------------------------------------------- */
.header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 26px;
    row-gap: 2px;
    align-items: center;
    justify-items: center;
    text-align: center;
}

.header > .col-md-4 {
    grid-column: 1;
    grid-row: 1 / span 3;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-self: start;
    align-self: center;
}

.header > h3 { grid-column: 2; grid-row: 1; }
.header > h4 { grid-column: 2; grid-row: 2; }
.header > h5 { grid-column: 2; grid-row: 3; }
.header > h6 { grid-column: 2; }

.header > h3,
.header > h4,
.header > h5,
.header > h6 {
    width: 100%;
    text-align: center;
    margin: 0;
}

.header img.logo {
    margin: 0;
    display: block;
}

/* tablet / phone : everything stacked and centred */
@media (max-width: 768px) {
    .header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
        row-gap: 6px;
        justify-items: center;
        align-items: center;
        text-align: center;
        padding: 20px 16px;
    }

    .header > .col-md-4,
    .header > h3,
    .header > h4,
    .header > h5,
    .header > h6 {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
        width: 100%;
        text-align: center;
    }

    .header img.logo {
        margin: 0 auto 4px;
        max-width: 60vw;
    }
}

/* --------------------------------------------------------------
   2. RESULTS TABLES - horizontal scroll box
   Needed for field events exported with "Include Field Series"
   (6 ATTEMPTS columns) so the page itself never scrolls sideways.
   The wrapper is added automatically by js/table-scroll.js
   -------------------------------------------------------------- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;   /* the page never scrolls sideways ... */
}

.container,
.container-fluid {
    max-width: 1300px;
    overflow-x: visible;
}

.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;      /* ... only the table box does */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border-radius: 0 0 6px 6px;
    margin-bottom: 30px;
    /* soft shadow on the edge that still has content off-screen */
    background:
        linear-gradient(to right, var(--card) 30%, rgba(255,255,255,0)) left center / 28px 100% no-repeat,
        linear-gradient(to left,  var(--card) 30%, rgba(255,255,255,0)) right center / 28px 100% no-repeat,
        radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.16), rgba(0,0,0,0)) left center / 12px 100% no-repeat,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right center / 12px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.table-scroll > table {
    margin-bottom: 0;
    box-shadow: none;
}

/* visible, slim scrollbar (desktop + Android) */
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 8px; }
.table-scroll { scrollbar-width: thin; scrollbar-color: var(--primary) rgba(0,0,0,.06); }

/* phones / tablets : let the table take the width it really needs
   and keep every row on a single line, then scroll to it */
@media (max-width: 992px) {
    .table-scroll > table {
        width: auto;
        min-width: 100%;
    }

    .table-scroll > table > thead > tr > th,
    .table-scroll > table > tbody > tr > td,
    .table-scroll > table > tr > td,
    .table-scroll > table > tr > th {
        white-space: nowrap;
        padding: 8px 7px;
        font-size: 12px;
    }

    /* event / heat banner rows must NOT force the table wider */
    .table-scroll .event-title,
    .table-scroll tr.event-title > td,
    .table-scroll tr.event-title > th,
    .table-scroll .heat-info,
    .table-scroll tr.heat-info > td,
    .table-scroll tr.heat-info > th {
        white-space: normal !important;
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    /* the attempts / field-series cells (mark over wind) stay compact */
    .table-scroll table table,
    .table-scroll table table td,
    .table-scroll table table th {
        margin: 0;
        box-shadow: none;
        background: transparent;
        padding: 2px 5px;
        font-size: 11px;
        white-space: nowrap;
    }

    .table-scroll .team-flag {
        height: 18px;
        width: 27px;
        margin-right: 5px;
    }
}

@media (max-width: 600px) {
    .table-scroll > table > thead > tr > th,
    .table-scroll > table > tbody > tr > td {
        padding: 7px 6px;
        font-size: 11.5px;
    }
}

/* printing / PDF export: never clip a scrolled table */
@media print {
    .table-scroll {
        overflow: visible !important;
        background: none !important;
        box-shadow: none !important;
    }
    .table-scroll > table {
        width: 100% !important;
        min-width: 0 !important;
    }
    .table-scroll > table > thead > tr > th,
    .table-scroll > table > tbody > tr > td {
        white-space: normal !important;
    }
    .header {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
    }
}