/* TF2 Font Face Declarations - Safari Compatible */
@font-face {
    font-family: 'TF2build';
    src: url('Fonts/TF2build.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Safari font loading optimization */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Optimize font loading */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'TF2secondary';
    src: url('Fonts/TF2secondary.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Safari font loading optimization */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Optimize font loading */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'tf2professor';
    src: url('Fonts/tf2professor.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Safari font loading optimization */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Optimize font loading */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* CSS Variables - TF2 Theme Colors */
:root {
    --dark-grey: #34312c;
    --beige: #cdc0af;
    --yellow: #e2c867;
    --white: #fbeccb;
    --green: #4d6b1c;
    --red: #934739;
    --darkest-grey: #292526;
    --beige-muted: #605853; /* beige at 30% over the row bg — the disabled-button tone */
    --blue: #4d5e7f;
    --grey: #807868;
    --grey-hover: rgba(128, 120, 104, 0.6); /* --grey at 60% — the row hover fill */
    --button-gradient-start: #ded3be;
    --button-gradient-mid: #b9ac93;
    --button-gradient-end: #a09073;
    --red-button-start: #a35142;
    --red-button-mid: #73382e;
    --red-button-end: #552a24;
}

/* Font loading optimization */
.fonts-loaded {
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
}

.fonts-loading {
    font-family: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    /* Slight adjustment to match TF2build better during loading */
    font-weight: 900;
    letter-spacing: 0.5px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Safari compatibility */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Safari text rendering fixes */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--darkest-grey);
    color: var(--beige);
    line-height: 1.4;
    overflow-x: auto;
    scroll-padding-top: 120px; /* Account for sticky header height */
    /* Prevent font flash during loading */
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    min-height: 100vh;
    position: relative;
}

/* Header Styles */
.header {
    background-color: var(--dark-grey);
    padding: 2rem 1.5rem; /* Match detail page padding */
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Header Row - using exact same structure as record rows */
.header-row {
    display: -webkit-grid;
    display: -ms-grid;
    display: grid;
    -webkit-grid-template-columns: 1fr auto auto;
    -ms-grid-template-columns: 1fr auto auto;
    grid-template-columns: 1fr auto auto;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-items: start;
    -ms-grid-column-align: start;
    justify-items: start;
    background-color: transparent; /* Remove grey bar background */
    padding: 1rem 1.5rem;
    margin: 0 auto 0.5rem auto; /* Center like records container */
    max-width: 1400px; /* Match records container max-width */
    border-radius: 0; /* Remove border radius */
    /* Safari gap fallback */
    margin-bottom: 0.5rem;
    cursor: default;
}

.header-row > * {
    margin-right: 1rem;
}

.header-row > *:last-child {
    margin-right: 0;
}

/* No hover state for header row */

.header-row .hidden {
    visibility: hidden; /* Hide map name and date but maintain layout */
}

.header-content {
    margin-bottom: 1rem; /* Slightly increased spacing for better balance */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.achievement-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    object-fit: contain;
}

.title {
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 24px; /* Further reduced for compact header */
    font-weight: normal;
    color: var(--beige);
    margin-bottom: 0;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Corner ribbon, pinned to the top-right and turned 24° clockwise.
   Rotation is about the centre, so the box needs half its rotated
   height (~48px) of clearance from the top edge to stay in view. */
.last-updated {
    font-family: 'TF2secondary', Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--yellow);
    position: fixed;
    top: 3rem;
    right: 0.5rem;
    z-index: 10000;
    margin: 0;
    /* Fixed width so the longer hover string doesn't shift the ribbon */
    width: 10rem;
    text-align: center;
    white-space: nowrap;
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
}

.last-updated a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Graffiti tag in the opposite corner, sitting behind the content like the big tag */
.solly-tag-corner {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: -1;
    width: 11rem;
    height: auto;
    opacity: 0.75;
    -webkit-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    transform: rotate(-8deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    /* Decoration only — never eat a click meant for the page */
    pointer-events: none;
}

.last-updated-label {
    color: var(--yellow);
}

.last-updated-hover-text {
    display: none;
    color: #fbeccb;
    text-transform: none;
    letter-spacing: 0.06em;
}

.last-updated a:hover .last-updated-label,
.last-updated a:focus-visible .last-updated-label {
    display: none;
}

.last-updated a:hover .last-updated-hover-text,
.last-updated a:focus-visible .last-updated-hover-text {
    display: inline;
}

.subtitle {
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px; /* Further reduced for compact header */
    font-weight: normal;
    margin-bottom: 0.5rem; /* Reduced spacing between subtitle and navigation */
    letter-spacing: 0.5px;
    color: var(--beige);
}

.subtitle .blue {
    color: #64A136;
}

.subtitle .red {
    color: #64A136;
}

/* Navigation Tabs */
.nav-tabs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    /* Safari gap fallback */
    margin: 1.5rem -0.25rem 0.5rem -0.25rem; /* Reduced margins to fit better */
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.5rem; /* Add vertical spacing between wrapped rows */
}

.nav-tabs .tab-button,
.nav-tabs .tab-dropdown,
.nav-tabs .search-input-tab {
    margin: 0 0.25rem;
}

.tab-button,
.tab-dropdown-toggle {
    background: #766B5E;
    color: #EEE4CF;
    border: none;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 0.5rem 1rem; /* Match search input padding */
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem; /* Increased font size */
    font-weight: normal;
    cursor: pointer;
    line-height: 1; /* Remove extra line spacing */
    padding-top: calc(0.5rem + 2px); /* Slight downward adjustment to compensate for font metrics */
    padding-bottom: calc(0.5rem - 2px);
    box-shadow: 0 0 1px var(--darkest-grey);
    text-transform: uppercase;
    width: 180px; /* Match search input width */
    height: 2.5rem; /* Match search input height exactly */
    flex-shrink: 0;
    /* Prevent text wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Match search input styling */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Safari button styling fixes */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tab-button:hover,
.tab-dropdown-toggle:hover {
    background: #934739;
    color: #F4DCC6;
}

.tab-button.active,
.tab-dropdown-toggle.active {
    background: #934739;
    color: #F4DCC6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Game mode pulldown - replaces the individual mode buttons */
.tab-dropdown {
    position: relative;
    flex-shrink: 0;
}

.tab-dropdown-toggle {
    /* The caret is taken out of the flow and the side padding mirrors it, so the
       label sits on the button's centre like the other tabs rather than being
       pushed off by the caret — short labels like CP and PL made that obvious */
    position: relative;
    justify-content: center;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    width: 180px;
}

.tab-dropdown-label {
    flex: 0 1 auto;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-dropdown-caret {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: transform 0.15s ease;
}

.tab-dropdown.open .tab-dropdown-caret {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}

.tab-dropdown.open .tab-dropdown-toggle {
    background: #934739;
    color: #F4DCC6;
}

.tab-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 60;
    width: 180px;
    padding: 0.25rem;
    background: #5B5348;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.tab-dropdown-menu[hidden] {
    display: none;
}

.tab-dropdown-item {
    background: #766B5E;
    color: #EEE4CF;
    border: none;
    border-radius: 3px;
    width: 100%;
    height: 2.25rem;
    padding: 0.4rem 0.75rem;
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.tab-dropdown-item:hover,
.tab-dropdown-item:focus {
    background: #934739;
    color: #F4DCC6;
    outline: none;
}

.tab-dropdown-item.active {
    background: #934739;
    color: #F4DCC6;
}

/* New button styling - original beige gradient with brown text */
.tab-button.new-button {
    background: linear-gradient(to bottom, 
        var(--button-gradient-start) 0%, 
        var(--button-gradient-mid) 49.519%, 
        var(--button-gradient-end) 97.596%);
    color: var(--darkest-grey);
    box-shadow: 
        0 1px 0 inset #fef7eb,
        0 0 1px var(--darkest-grey);
}

.tab-button.new-button:hover {
    background: #934739;
    color: #F4DCC6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.tab-button.new-button.active {
    background: #934739;
    color: #F4DCC6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Search Input Tab - matches tab button styling */
.search-input-tab {
    background: var(--darkest-grey);
    color: var(--white);
    border: 1px solid var(--beige);
    border-radius: 4px;
    padding: 0.5rem 1rem; /* Match tab button padding */
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem; /* Increased font size to match tab buttons */
    font-weight: normal;
    text-align: center;
    width: 180px; /* Match tab button width */
    height: 2.5rem; /* Match tab button height */
    outline: none;
    /* Prevent text wrapping */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Cross-browser compatibility - Safari specific */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* Center the search field */
    margin: 0 0.25rem;
    /* Match button styling */
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    /* Consistent outline in all states */
    box-shadow: 0 0 1px var(--darkest-grey);
    line-height: 1; /* Remove extra line spacing */
    padding-top: calc(0.5rem + 2px); /* Slight downward adjustment to compensate for font metrics */
    padding-bottom: calc(0.5rem - 2px);
    /* Safari input styling fixes */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Wraps the field so the clear button can sit inside it. Adds no box of its
   own — the input keeps its own margins and drives the width. */
.search-field {
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
}

/* Sits over the field's right padding; only rendered while there's a query */
.search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0 0.25rem;
    font-family: 'TF2build', 'Arial Black', Arial, sans-serif;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--white);
    opacity: 0.6;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
}

.search-clear:hover {
    color: var(--yellow);
    opacity: 1;
}

.search-clear[hidden] {
    display: none;
}

.search-input-tab::placeholder {
    color: var(--white);
    opacity: 0.7;
}

.search-input-tab:hover {
    border: 1px solid var(--yellow);
    box-shadow: 0 0 1px var(--darkest-grey);
    /* No background change on hover */
}

.search-input-tab:focus {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border: 1px solid var(--white);
    box-shadow: 0 0 1px var(--darkest-grey);
}

.search-input-tab:focus::placeholder {
    color: var(--white);
    opacity: 0.5;
}


/* Search Container for KOTH section */
.search-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 2rem 0;
    padding: 0 1rem;
}

/* Header Search Container */
.header-search-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 1rem 0 2rem 0;
    padding: 0 1rem;
}

/* KOTH Search Container - Centered like KOTH button */
.koth-search-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 2rem 0;
    padding: 0 1rem;
}



/* Removed header-row styles - now integrated into main header */



/* Records Container */
.records-container {
    padding: 0.5rem 2rem 2rem; /* Reduced top padding since sticky row is now part of header */
    max-width: 1400px;
    margin: 0 auto;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Record Rows */
.record-row {
    /* Caps the map-name column, so long names wrap instead of running into the
       record. The grid shrinks it further when the viewport is tight. */
    --name-col: 32rem;
    display: -webkit-grid;
    display: -ms-grid;
    display: grid;
    -webkit-grid-template-columns: minmax(0, var(--name-col)) 1fr;
    -ms-grid-template-columns: minmax(0, var(--name-col)) 1fr;
    grid-template-columns: minmax(0, var(--name-col)) 1fr;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-items: start;
    -ms-grid-column-align: start;
    justify-items: start;
    background-color: transparent;
    padding: 1rem 16px;
    /* Both edges are measured from the nav at runtime (see alignRowsToNav in
       script.js): the thumbnail starts on the search bar's left edge, and the
       record group ends on the CHALLENGES button's right edge. Margins rather
       than padding, so the hover fill stops at the row's visual box instead of
       bleeding out to the container edges — less the 16px of breathing room the
       padding adds back, which keeps the content on the nav's edges. */
    margin-left: calc(var(--content-left, 1.5rem) - 16px);
    margin-right: calc(var(--content-right, 1.5rem) - 16px);
    margin-bottom: 0.5rem;
    border-radius: 4px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    /* Safari gap fallback */
}

.record-row > * {
    margin-right: 1rem;
}

.record-row > *:last-child {
    margin-right: 0;
}

.record-row:hover {
    background-color: var(--grey-hover);
    transform: translateY(-2px);
}

.record-row:hover .map-name {
    color: var(--white);
}

.header-row:hover {
    background-color: transparent !important;
    transform: none !important;
}

/* Removed header-row styles - now integrated into main header */


.record-row.highlight {
    background-color: var(--grey);
    position: relative;
}

/* Removed hover animations for record rows */

.map-info {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    /* Safari gap fallback */
}

.map-info > * {
    margin-right: 1rem;
}

.map-info > *:last-child {
    margin-right: 0;
}

.thumbnail-container {
    width: 80px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-thumbnail {
    width: 80px;
    height: 50px;
    max-width: 80px;
    max-height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid var(--beige);
    transition: all 0.3s ease;
    background-color: var(--darkest-grey); /* Placeholder background while loading */
    opacity: 0.7; /* Slightly transparent while loading */
    display: block;
    flex-shrink: 0;
}

/* Smooth fade-in when image loads */
.map-thumbnail[loading="lazy"] {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.map-thumbnail[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

.record-row:hover .map-thumbnail {
    border-color: var(--yellow);
    transform: scale(1.05);
}

.map-name {
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.15rem, 2.2vw, 1.75rem);
    font-weight: normal;
    color: var(--beige);
    text-transform: uppercase;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* Safari gap fallback */
}

.map-name > * {
    margin-right: 1rem;
}

.map-name > *:last-child {
    margin-right: 0;
}

.new-badge {
    background-color: var(--beige);
    color: var(--blue);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.8rem;
    animation: pulse 2s infinite;
    white-space: nowrap;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.date {
    font-family: 'TF2secondary', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    color: var(--yellow);
    text-align: right;
    min-width: 100px;
    display: none; /* Hide all yellow dates */
}

.time-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    /* Record, then PROOF and STRATS, all on one line */
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    /* Ends on the CHALLENGES button's right edge */
    justify-self: end;
    width: auto;
    /* Safari gap fallback */
}

.time-container > * {
    margin-right: 1.25rem;
}

.time-container > *:last-child {
    margin-right: 0;
}

.new-record {
    padding: 0.5rem 1rem; /* Reduced padding */
    border-radius: 4px;
    font-family: 'TF2build', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(1.25rem, 2.2vw, 1.6rem); /* Increased font size to match sticky row */
    font-weight: normal;
    color: var(--white);
    text-align: center;
    /* Fixed, so PROOF and STRATS line up from row to row */
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 7.5rem;
    height: 2.75rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1; /* Remove extra line spacing */
    padding-top: calc(0.5rem + 2px); /* Slight downward adjustment to compensate for font metrics */
    padding-bottom: calc(0.5rem - 2px);
}

/* Header row button styling - no borders but same dimensions */
.header-row .new-record {
    background: linear-gradient(180deg, var(--button-gradient-start) 0%, var(--button-gradient-mid) 50%, var(--button-gradient-end) 100%);
    border: none; /* Remove borders */
    color: var(--darkest-grey);
    font-family: 'TF2secondary', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    box-shadow: none; /* Remove box shadow */
    /* Ensure same dimensions as data row buttons */
    padding: 0.5rem 1rem;
    width: 100px;
    height: 2.5rem;
    font-size: clamp(0.8rem, 1.2vw, 1.1rem);
}

.new-record {
    background-color: var(--green);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Style for "x" (no record) values */
.new-record[data-value="x"] {
    background-color: var(--darkest-grey);
    color: var(--beige);
    opacity: 0.6;
}

/* ── Row Actions: Proof + Strats ── */
/* Sit on the same line as the record, just to the right of it */
.row-actions {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    width: auto;
    flex-shrink: 0;
}

.row-actions > * {
    margin-right: 1.25rem;
}

.row-actions > *:last-child {
    margin-right: 0;
}

.row-btn {
    font-family: 'TF2secondary', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    /* Bare text under the record — no chrome, just the yellow label */
    color: var(--yellow);
    background: none;
    border: none;
    border-radius: 0;
    padding: 0.15rem 0.15rem;
    /* Nudge the label down to compensate for TF2secondary's font metrics */
    padding-top: calc(0.15rem + 2px);
    padding-bottom: calc(0.15rem - 2px);
    min-height: 0;
    cursor: pointer;
    white-space: nowrap;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.row-btn:hover {
    color: var(--white);
    transform: translateY(-1px);
}

.row-btn:active {
    transform: translateY(0);
}

/* Maps still waiting on a proof link or strategy images */
.row-btn.is-disabled,
.row-btn.is-disabled:hover {
    background: none;
    color: var(--beige-muted);
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* ── Strategy Overlay ── */
body.overlay-open {
    overflow: hidden;
}

/* Corner decorations stay out of the overlay's way */
body.overlay-open .last-updated,
body.overlay-open .solly-tag-corner {
    display: none;
}

.strats-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 1.5rem;
}

.strats-overlay[hidden] {
    display: none;
}

.strats-panel {
    background-color: var(--dark-grey);
    border: 2px solid var(--yellow);
    border-radius: 6px;
    width: 100%;
    max-width: 1100px;
    max-height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
    animation: stratsIn 0.2s ease;
}

@keyframes stratsIn {
    from { transform: translateY(-14px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.strats-header {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* Room on both sides so the centred title clears the close button */
    padding: 0.9rem 4.5rem;
    border-bottom: 2px solid var(--darkest-grey);
}

.strats-title {
    font-family: 'TF2build', 'Arial Black', Arial, sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--white);
    text-align: center;
    line-height: 1.15;
    margin: 0;
    /* Sits low in the header rather than optically centred */
    position: relative;
    top: 6px;
}

/* ── Overlay buttons: the "<< BACK" button's shape ── */
.strats-close,
.strats-nav {
    font-family: 'TF2build', Arial, sans-serif;
    letter-spacing: 1px;
    line-height: 1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    /* Nudge the glyph down to compensate for TF2build's font metrics */
    padding-top: 4px;
    transition: background 0.15s, color 0.15s;
}

/* Red by default, grey while hovered, back to red on the press */
.strats-close {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    transform: translateY(-50%);
    font-size: 1.75rem;
    padding: 0.5rem;
    padding-top: calc(0.5rem + 4px);
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: #F4DCC6;
    background: #934739;
}

.strats-close:hover {
    color: #EEE4CF;
    background: #766B5E;
}

.strats-close:active {
    color: #F4DCC6;
    background: #934739;
}

.strats-viewer {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--darkest-grey);
    -webkit-flex: 1;
    flex: 1;
    min-height: 0;
}

.strats-image {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 3px;
    display: block;
}

/* The "<< BACK" button's colours, same as the rest of the overlay chrome */
.strats-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* TF2build draws its brackets small, so they need the extra size here */
    font-size: 2.75rem;
    width: 2.75rem;
    height: 3.5rem;
    color: #EEE4CF;
    background: #766B5E;
}

.strats-nav:hover {
    color: #F4DCC6;
    background: #934739;
}

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

/* Tucked in over the image rather than hugging the panel edges */
.strats-prev { left: 2.25rem; }
.strats-next { right: 2.25rem; }

.strats-caption {
    font-family: 'TF2secondary', Arial, sans-serif;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--beige);
    text-align: center;
    padding: 0.85rem 1rem;
}

/* Removed hover effects for time containers */

/* Loading Animation for Tab Content */
.tab-content {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.tab-content.active {
    opacity: 1;
}

/* Accessibility Improvements - Removed yellow focus borders */

/* Solly Tag Background - Fixed behind control point list */
.solly-tag-background {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: -1; /* Behind the content */
    opacity: 0.3;
    pointer-events: none; /* Don't interfere with clicks */
}

.solly-tag-bg-image {
    max-width: 200px;
    height: auto;
    filter: blur(1px); /* Slight blur to make it more background-like */
}


/* ── Site Footer ── */
.site-footer {
    text-align: center;
    padding: 3rem 1rem 2rem;
    margin-top: 3rem;
}

.footer-imprint-link {
    font-family: 'TF2secondary', Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--yellow);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.15s;
}

.footer-imprint-link:hover {
    opacity: 1;
}

/* Print Styles */
@media print {
    .header {
        position: static;
        background: white;
        color: black;
    }
    
    .record-row {
        break-inside: avoid;
        background: white;
        border: 1px solid black;
    }
    
    .new-record {
        background: #90EE90;
        color: black;
    }
    
}

/* ── Responsive: tablet and phone ──────────────────────────────────────────
   The tab strip scrolls sideways, record rows become two-line cards, and the
   times column collapses to the current record only. */

/* On desktop the strip is transparent so the buttons sit in the nav flex row */
.tab-strip {
    display: contents;
}

@media (max-width: 900px) {
    body {
        overflow-x: hidden;
    }

    .header {
        padding: 0.85rem 0.75rem 0.6rem;
    }

    .header-content {
        margin-bottom: 0.6rem;
    }

    .achievement-icon {
        display: none;
    }

    .title {
        font-size: 1.15rem;
        letter-spacing: 0.5px;
    }

    .solly-tag-corner {
        width: 7rem;
        left: 0.6rem;
        bottom: 0.6rem;
    }

    /* Smaller type shrinks the rotated footprint, so it can ride higher */
    .last-updated {
        font-size: 0.65rem;
        letter-spacing: 1px;
        width: 8rem;
        top: 2.5rem;
        right: 0.25rem;
    }

    .nav-tabs {
        display: block;
        margin: 0;
    }

    /* The wrapper carries the gap to the strip, so its box stays exactly as
       tall as the field and the clear button's 50% stays on the field's centre */
    .nav-tabs .search-field {
        display: block;
        width: 100%;
        margin: 0 0 0.75rem 0;
    }

    /* The field goes full width here and runs under the LAST UPDATED ribbon,
       which sits above the header's stacking context and would swallow the tap.
       The left end of the field is clear, so the button moves there. */
    .search-clear {
        right: auto;
        left: 0.6rem;
    }

    /* Needs the .nav-tabs prefix to outrank the desktop side margins, which
       would otherwise push a 100%-wide field past the strip's right edge */
    .nav-tabs .search-input-tab {
        display: block;
        width: 100%;
        margin: 0;
        min-height: 2.75rem;
        font-size: 1rem; /* keeps iOS from zooming the viewport on focus */
    }

    /* Equal thirds. Grid rather than flex: with flex the buttons' side padding
       is added on top of their share of the free space, so the padding-less
       dropdown wrapper came out narrower than its neighbours. */
    .tab-strip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
        margin: 0;
        padding: 0 0 0.2rem;
    }

    .nav-tabs .tab-button,
    .nav-tabs .tab-dropdown {
        margin: 0;
        min-width: 0;
        width: auto;
    }

    .nav-tabs .tab-button,
    .tab-dropdown-toggle {
        min-height: 2.5rem;
        /* CHALLENGES V2 is the longest label and has to fit its third without
           wrapping, so the type tracks the viewport and the side padding is thin */
        padding: 0.5rem 0.2rem;
        font-size: clamp(0.78rem, 3.45vw, 0.95rem);
        white-space: nowrap;
    }

    .tab-dropdown-toggle {
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Back into the flow so it rides just after the label, the way the
       CLASS SPECIFIC arrow does on the challenges page, rather than sitting
       pinned to the button's right edge */
    .tab-dropdown-caret {
        position: static;
        margin-left: 0.45rem;
        -webkit-transform: none;
        transform: none;
    }

    .tab-dropdown.open .tab-dropdown-caret {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .tab-dropdown-menu {
        width: 100%;
        min-width: 9rem;
    }

    .tab-dropdown-item {
        font-size: 0.8rem;
    }

    .records-container {
        padding: 0.75rem 0.75rem 2rem;
    }

    /* Card: a square thumbnail on the left, the name stacked over PROOF and
       STRATS beside it, and the record centred against the whole stack */
    .record-row {
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "thumb info    time"
            "thumb actions time";
        row-gap: 0.4rem;
        column-gap: 0.6rem;
        align-items: center;
        padding: 0.6rem 1rem;
        /* Cards go edge to edge down here — the nav alignment is desktop-only */
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0.6rem;
        background-color: var(--dark-grey);
    }

    .record-row > * {
        margin-right: 0;
    }

    .record-row:hover {
        transform: none;
    }

    /* Dissolve the wrapper so the thumbnail and the name can sit in different
       areas of the card grid */
    .map-info {
        display: contents;
    }

    .map-info > * {
        margin-right: 0;
    }

    /* Square, tall enough to run the full height of the card */
    .thumbnail-container {
        grid-area: thumb;
        align-self: center;
    }

    .thumbnail-container,
    .map-thumbnail {
        width: 74px;
        height: 74px;
    }

    .map-thumbnail {
        max-width: 74px;
        max-height: 74px;
    }

    .map-name {
        grid-area: info;
        min-width: 0;
        /* Starts at the thumbnail's top edge, nudged 4px down off it */
        align-self: start;
        line-height: 1.1;
        padding-top: 4px;
        font-size: 1.2rem;
        word-break: break-word;
    }

    .row-btn {
        min-height: 0;
        padding: 0.2rem 0.15rem;
        font-size: 0.95rem;
    }

    /* Dissolve the wrapper so the record and the buttons can land on separate
       rows of the card grid */
    .time-container {
        display: contents;
    }

    .time-container > * {
        margin-right: 0;
    }

    /* PROOF over STRATS as a tight pair, flush with the name above them and
       sitting on the thumbnail's bottom edge */
    .row-actions {
        grid-area: actions;
        justify-self: start;
        align-self: end;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
        width: auto; /* let the labels size themselves on a phone */
    }

    /* Margin rather than gap, to match the Safari fallbacks used elsewhere */
    .row-actions > * {
        margin-right: 0;
        margin-bottom: 0;
    }

    /* Bare labels, no padding: the two read as one block and line up with the
       name's left edge */
    .row-actions .row-btn {
        padding: 0;
        line-height: 1.2;
        /* Tap area runs past the end of the word; the matching negative margin
           keeps that slack out of the layout */
        padding-right: 1.5rem;
        margin-right: -1.5rem;
    }

    /* Each label also reaches outward — PROOF upward, STRATS downward — so a
       thumb landing near them still hits. The space between the two is PROOF's
       lower tap area, which is why it doubles as the visible gap. */
    .row-actions .proof-btn {
        padding-top: 0.6rem;
        margin-top: -0.6rem;
        padding-bottom: 0.4rem;
    }

    .row-actions .strats-btn {
        padding-bottom: 0.6rem;
        margin-bottom: -0.6rem;
    }

    .new-record {
        grid-area: time;
        justify-self: end;
        align-self: center;
        -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        min-width: 7rem;
        /* Matches the thumbnail's picture area: the thumbnail's 2px beige border
           reads as an outline, so the green sits inset by that much on each side */
        height: 46px;
        /* Centring puts the TF2build digits a touch high; the uneven top/bottom
           padding drops the string by half the 4px difference */
        padding: 12px 1rem 8px;
    }

    .solly-tag-background {
        display: none !important;
    }

    /* Full-bleed overlay on small screens */
    .strats-overlay {
        padding: 0;
    }

    .strats-panel {
        max-width: none;
        height: 100%;
        max-height: 100%;
        border: none;
        border-radius: 0;
    }

    .strats-viewer {
        padding: 0.5rem;
    }

    .strats-image {
        max-height: none;
        cursor: zoom-in;
    }

    /* Tap to blow the map up, then drag to pan around it */
    .strats-viewer.is-zoomed {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .strats-viewer.is-zoomed .strats-image {
        max-width: none;
        width: 260%;
        cursor: zoom-out;
    }

    .strats-viewer.is-zoomed .strats-nav {
        display: none;
    }

    .strats-nav {
        width: 2.5rem;
        height: 3.25rem;
        font-size: 2.2rem;
    }

    .strats-prev { left: 1rem; }
    .strats-next { right: 1rem; }

    /* Tighter gutters so the bigger title keeps its line on a phone */
    .strats-header {
        padding: 0.75rem 3.75rem;
    }

    .strats-close {
        right: 0.6rem;
    }
}

@media (max-width: 420px) {
    .title {
        font-size: 1rem;
    }

    .map-thumbnail,
    .thumbnail-container {
        width: 64px;
        height: 64px;
    }

    .map-thumbnail {
        max-width: 64px;
        max-height: 64px;
    }

    .map-name {
        font-size: 1.05rem;
    }

    .row-btn {
        padding: 0.35rem 0.15rem;
        font-size: 0.85rem;
    }

    .row-actions > * {
        margin-right: 0;
        margin-bottom: 0;
    }

    .new-record {
        min-width: 5rem;
        /* Tracks the smaller thumbnail's picture area, keeping the 2px nudge */
        height: 36px;
        padding: 10px 0.6rem 6px;
        font-size: 1.15rem;
    }
}