:root {
    --primary-dark: #000000;
    --secondary-dark: #141414;
    --tertiary-dark: #0E0E0E;
    --border-color: #30363d;
    --text-primary: #c9d1d9;
    --text-secondary: #8b949e;
    --accent-orange: #f67d37;
    --accent-purple: #a371f7;
    --accent-grey: #8b949e;
    --accent-purple-dark: #8b949e;
    --accent-yellow: #f1c40f;
    --accent-dark-grey: #464541;
    --accent-spider-fill: rgba(240, 124, 58, 0.4);
    --font-heading: 'Teko', sans-serif;
    --font-body: 'Raleway', sans-serif;
}

html {
    /* clip, not hidden: hidden makes html/body scroll containers, which
       silently breaks every position: sticky on the site (header, sidebars,
       section navs). clip trims sideways overflow the same way without that.
       hidden stays first as the fallback for browsers without clip. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    background-color: var(--primary-dark);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
    width: 100%;
}

body.castaway-bg {
    background-color: var(--tertiary-dark);
    /* background-color: var(--primary-dark);
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(240, 124, 58, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, var(--secondary-dark) 0%, transparent 50%),
        radial-gradient(rgba(255, 255, 255, 0.04) 1.5px, transparent 1.5px); */
    background-size: 100% 100%, 100% 100%, 24px 24px;
    background-attachment: fixed;
}

header {
    background-color: var(--secondary-dark);
    border-bottom: 1px solid var(--border-color);
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    height: 70px;
}

.logo {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 2px;
    white-space: nowrap;
}

.logo .fa-fire-alt {
    color: var(--accent-orange);
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    margin-left: 20px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--accent-orange);
}

.dropbtn {
    color: var(--text-secondary);
    font-size: 1.1rem;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
    transition: color 0.3s ease;
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-left: 20px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--secondary-dark);
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    margin-top: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    /* the Leaderboards menu is long — scroll it rather than run off-screen */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.dropdown-content a {
    margin-left: 0;
    padding: 6px 16px;
    font-size: 0.95rem;
    white-space: nowrap;
    display: block;
    text-align: center;
}

/* First entry of a menu — the section's own hub page */
.dropdown-content a.dropdown-hub {
    color: var(--text-primary);
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.dropdown-content a.dropdown-hub:hover {
    color: var(--accent-orange);
}

.dropdown-content a:hover {
    background-color: var(--primary-dark);
}

.dropdown-content.show {
    display: block;
}

.dropbtn:hover {
    color: var(--accent-orange);
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.8rem;
    cursor: pointer;
}

@media (max-width: 850px) {
    header {
        padding: 0 1rem;
    }
    
    .logo {
        font-size: 1.7rem;
        letter-spacing: 1px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--secondary-dark);
        flex-direction: column;
        padding: 1rem 0;
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        margin: 0.8rem 0;
    }

    .dropdown {
        margin: 0.8rem 0;
        text-align: center;
    }

    .dropdown-content {
        position: relative;
        left: 0;
        transform: none;
        min-width: 100%;
        box-shadow: none;
        border: none;
        background-color: var(--primary-dark);
        max-height: 50vh;
    }

    /* .nav-links a sets 0.8rem margins above — keep menu items tight in here */
    .dropdown-content a {
        margin: 0;
    }

    .dropdown-content a.dropdown-hub {
        margin-bottom: 4px;
    }
}

.hero {
    /* https://images.unsplash.com/photo-1517594422361-5eeb8ae275a9?q=80&w=2304&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D */
    /* https://raw.githubusercontent.com/doehm/survivoR/refs/heads/master/dev/images/flame.png */
    /* 'https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?q=80&w=2070' */
    /* background: linear-gradient(rgba(13, 17, 23, 0.8), rgba(13, 17, 23, 0.8)), url('https://raw.githubusercontent.com/doehm/survivoR/refs/heads/master/dev/images/flame.png') no-repeat center center/cover; */
    background: linear-gradient(rgba(1, 1, 1, 0.8), rgba(10, 10, 9, 0.8)), url('https://raw.githubusercontent.com/doehm/survivoR/refs/heads/master/dev/images/flame.png') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 6rem 2rem;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 5rem;
    margin: 0;
    letter-spacing: 3px;
    color: var(--accent-orange);
    text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 1rem auto 0;
    color: var(--text-primary);
}

/* Leaderboard Layout Styles */
.leaderboard-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: -2rem;
    max-width: calc(100% + 4rem);
    box-sizing: border-box;
    position: relative;
}

.leaderboard-layout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 320px;
    background-color: var(--secondary-dark);
    border-right: 1px solid var(--border-color);
    z-index: 0;
}

.leaderboard-sidebar {
    flex: 0 0 320px;
    background-color: transparent;
    border-right: none;
    padding: 2rem 1.5rem;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
    box-sizing: border-box;
    z-index: 1;
}

.leaderboard-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    color: var(--accent-orange);
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.leaderboard-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}

.sidebar-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 1.5rem 0;
}

.leaderboard-content {
    flex-grow: 1;
    min-width: 0;
    max-width: calc(100% - 320px);
    padding: 2rem;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

main {
    padding: 2rem;
    max-width: 2100px;
    margin: 0 auto;
}

main.article-page {
    max-width: 1000px;
}

/* Leaderboard pages built around prose and record cards rather than a wide data
   table. The container itself is left alone, so the sidebar sits exactly where it
   does on every other leaderboard; only the content column is held to a readable
   measure, centred in whatever room is left over (auto margins on a flex item
   absorb the free space either side).

   Above the stacking breakpoint only: once .leaderboard-layout becomes a column
   it keeps align-items: flex-start, so the content column is sized by its
   contents and needs the stock max-width: 100% to stay inside the display. */
@media (min-width: 993px) {
    main.lb-narrow .leaderboard-content {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }
}

main.home-page {
    max-width: 1100px;
}

.home-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 2rem auto;
}

.home-section-header .section-title {
    text-align: center;
    margin: 0 0 0.5rem 0;
}

.home-section-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
    letter-spacing: 1px;
    color: var(--text-primary); 
    margin: 0px 0px 20px 20px; 
    line-height: 1.1;
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 4rem auto 2rem auto;
    width: 100%;
    max-width: 1400px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.card {
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card:not(.no-hover):hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(240, 124, 58, 0.2);
    border-color: var(--accent-orange);
}

.card h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin: 0;
    color: var(--text-primary);
}

.season-tab-header {
    font-size: 7rem; 
    font-family: var(--font-heading); 
    color: var(--text-secondary); 
    line-height: 0.5; 
    opacity: 0.1; 
    pointer-events: none;
    transform: translateY(30px);
}

.pill-grid-container {
    display: grid;
    /* The season tab pane is capped at 1180px, so a 380px minimum tipped this
       to 2 columns and left a lot of dead space to the right of each pill.
       360px keeps 3 columns, and because the tracks are 1fr they stretch to
       377px each anyway — wider than the minimum, and enough for the detail
       lines once the badges are sized down below. */
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
}

/* Season page castaway sections (Tribes / Boot Risk / F3 Chance / Position) */
#castaways-group-filter {
    margin-bottom: 1.5rem;
}

.castaway-group + .castaway-group {
    margin-top: 2rem;
}

.castaway-group-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.castaway-group-title .tag,
.castaway-group-title .tribe-pill {
    font-family: var(--font-body);
    font-size: 0.9rem;
}

.castaway-group-count {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Season page castaway roster — one row per castaway. The column template is
   shared by the header and every row, so columns line up across sections. */
.roster {
    --roster-cols: minmax(190px, 2.2fr) minmax(90px, 1fr) minmax(120px, 1.2fr) minmax(60px, 0.6fr) minmax(95px, 1fr) minmax(110px, 1.1fr);
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.roster-head,
.roster-row {
    display: grid;
    grid-template-columns: var(--roster-cols);
    align-items: center;
    column-gap: 1rem;
    padding: 0 1rem;
}

.roster-head {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.roster-row {
    min-height: 56px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background-color 0.15s ease;
}

.roster-row + .roster-row {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.roster-row:hover {
    background: rgba(240, 124, 58, 0.08);
}

.roster-row:hover .roster-name-text {
    color: var(--accent-orange);
}

.roster-cell {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.roster-name {
    gap: 0.75rem;
}

/* A 60px-high window onto the large 2:3 cutout. The cutouts are full-body
   with plenty of headroom, so scale up from the top to land on head and
   shoulders. A plain photo fallback (.is-photo, e.g. NZ) is already framed
   tightly, so it isn't zoomed. */
.roster-avatar {
    width: 54px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 6px;
}

.roster-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(2);
    transform-origin: 50% 4%;
}

.roster-avatar.is-photo img {
    transform: none;
}

/* Name with the tribe pill tucked underneath. */
.roster-name-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    min-width: 0;
}

.roster-cell .roster-name-stack .tribe-pill {
    font-size: 0.6rem;
    padding: 0.08rem 0.4rem;
    line-height: 1.3;
}

.roster-name-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-weight: bold;
    font-size: 1rem;
    transition: color 0.15s ease;
}

.roster-adv {
    display: inline-flex;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--accent-yellow);
}

.roster-cell .tribe-pill,
.roster-cell .tag {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.roster-f3 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    max-width: 110px;
    font-weight: bold;
}

.roster-bar {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    overflow: hidden;
}

.roster-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--accent-orange);
}

/* Boots column: percentage with a dot per vote cast beneath it. */
.roster-boots {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.roster-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    max-width: 100px;
}

.roster-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    opacity: 0.45;
}

.roster-dot.is-hit {
    opacity: 1;
    background: var(--accent-orange);
}

.roster-sub,
.roster-muted {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.roster-result {
    color: var(--text-secondary);
}

.roster-strong {
    font-weight: bold;
}

.roster-tags {
    flex-wrap: wrap;
    gap: 0.3rem;
}

.roster-num {
    justify-content: flex-end;
    text-align: right;
}

.roster-flame {
    color: var(--accent-orange);
    margin-right: 0.3rem;
}

/* Phones: drop the header and fold each row into two lines — name (with its
   tribe pill), then the other five columns as a strip with each label above
   its value — so nothing needs sideways scrolling. */
@media (max-width: 700px) {
    .roster-head {
        display: none;
    }
    .roster-row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 0.5rem;
        row-gap: 0.6rem;
        padding: 0.75rem 0.9rem;
    }
    .roster-name {
        grid-column: 1 / -1;
    }
    .roster-cell[data-label] {
        align-self: start;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
    .roster-cell[data-label]::before {
        content: attr(data-label);
        font-size: 0.6rem;
        font-weight: bold;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }
    .roster-row .roster-cell .tag {
        font-size: 0.62rem;
        padding: 0.12rem 0.4rem;
    }
    .roster-f3 {
        max-width: 70px;
    }
    .roster-result {
        font-size: 0.8rem;
        line-height: 1.25;
    }
    .roster-num {
        justify-content: flex-start;
        text-align: left;
    }
}

.castaway-pill {
    display: flex;
    align-items: center;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.25rem 1.5rem 0.25rem 0.25rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    gap: 1.2rem;
}

.castaway-pill:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(240, 124, 58, 0.2);
    border-color: var(--accent-orange);
}

.pill-image-wrapper {
    /* 96px: large enough to anchor the card, while leaving ~229px beside it —
       about 10px more than the widest badge row needs, so the badges stay on
       one line at three columns. */
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 0px solid var(--accent-orange);
    flex-shrink: 0;
    margin-left: 0.3rem;
    overflow: hidden;
}

.pill-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.25);
    transform-origin: top center;
}

.pill-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    overflow: hidden;
}

.pill-info h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin: 0;
    color: var(--accent-orange);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pill-season {
    font-size: 0.8rem;
    color: var(--text-primary);
    margin: 0.1rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pill-result {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin: 0.15rem 0 0 0;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 1rem 0;
    justify-content: flex-start;
}

.pill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

/* --- Live prediction details on the castaway pills ----------------------- */

.pill-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.1rem;
}

.pill-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--text-primary);
    white-space: nowrap;
}

.pill-stat i {
    font-size: 0.65rem;
    color: var(--accent-orange);
}

.pill-stat-label {
    font-size: 0.62rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

/* Scoped to the pills so the shared .tag size used elsewhere is untouched.
   At 0.6rem the majority and boot-risk badges sit on one line inside the
   ~241px of info width a 3-column pill gives, with ~22px to spare. */
.castaway-pill .tag {
    font-size: 0.6rem;
    padding: 0.2rem 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.castaway-pill .pill-tags {
    margin-top: 0.35rem;
    margin-bottom: 0;
    gap: 0.35rem;
}

/* Scaled down from the default .tribe-pill used on the overview and stats
   table, so it sits inline next to the place/Live text without enlarging the row. */
/* Scoped to .castaway-pill so it outranks .tribe-pill, which is defined later
   in this file — at equal specificity that rule was winning and forcing the
   chip back to its full 0.9rem size. Matches .castaway-pill .tag exactly. */
.castaway-pill .pill-tribe-tag {
    padding: 0.2rem 0.45rem;
    font-size: 0.6rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
    margin-left: 0.45rem;
    vertical-align: middle;
    border: none;
}
/* Idols / advantages currently held, beside the tribe tag. */
.castaway-pill .pill-advantages {
    display: inline-flex;
    gap: 0.3rem;
    margin-left: 0.45rem;
    vertical-align: middle;
    color: var(--accent-yellow);
    font-size: 0.8rem;
}
/* Key for those icons, under the castaways section subtitle. */
.adv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin: -0.25rem 0 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}
.adv-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.adv-legend-item i {
    color: var(--accent-yellow);
}

.tag-majority {
    background-color: #2ecc71;
    color: var(--primary-dark);
}

.tag-minority {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.tag-risk-low {
    background-color: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.5);
}

.tag-risk-moderate {
    background-color: rgba(240, 196, 25, 0.18);
    color: var(--accent-yellow);
    border: 1px solid rgba(240, 196, 25, 0.5);
}

.tag-risk-high {
    background-color: rgba(231, 76, 60, 0.18);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.5);
}

.tag {
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.tag-merge {
    background-color: var(--accent-yellow);
    color: var(--primary-dark);
}

.tag-jury {
    background-color: var(--accent-purple);
    color: #fff;
}

.tag-ftc {
    background-color: var(--accent-orange);
    color: #fff;
}

.tag-win {
    background-color: #2ecc71;
    color: var(--primary-dark);
}

.tag-season {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.tribe-pill {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.5px;
}

.profile-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 95%;
    max-width: 2400px;
    margin: 2rem auto;
    box-sizing: border-box;
}

/* Season Tabs */
.season-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    max-width: 100%;
}

.season-tab {
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.5rem 1.5rem;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    transition: background-color 0.3s, color 0.3s;
    border-bottom: none;
}

.tab-text-mobile {
    display: none;
}

.season-tab:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.season-tab.active {
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    border-color: var(--accent-orange);
}

/* Season Overview Content Layout */
.season-overview-layout {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2.5rem;
    padding: 1rem 0;
    align-items: start;
}

.season-overview-layout-reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 1rem 0;
    align-items: start;
}

/* The Edit's charts stack in a single full-width column at every size:
   Castaway Edit Index first, then the line charts. Plain block flow, so the
   cards' own 2rem margins set the spacing. */
.sn-edit-charts {
    padding: 1rem 0;
}

/* Sort buttons above the Castaway Edit Index rows. */
.edit-index-sort {
    justify-content: center;
    align-items: center;
}

.edit-index-sort-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-right: 0.25rem;
}

.season-overview-left {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    /* Same grid-item blowout guard as .season-overview-right above. */
    min-width: 0;
}

.season-overview-right {
    display: flex;
    flex-direction: column;
    /* Grid items default to min-width: auto, so they refuse to shrink below
       their content's intrinsic width. A momentarily oversized canvas would
       blow this track out and stretch the whole page sideways — and because
       the chart then measures that blown-out width, it never recovered. */
    min-width: 0;
}

/* Season Sidebar Layout */
.season-layout {
    display: flex;
    flex-direction: row;
    padding: 0;
    max-width: 100%;
    min-height: calc(100vh - 70px);
    position: relative;
}

.season-layout::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    background-color: var(--secondary-dark);
    border-right: 1px solid var(--border-color);
    z-index: 0;
}

.sidebar-slim {
    width: 60px;
    background-color: transparent;
    border-right: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
    flex-shrink: 0;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
    z-index: 10;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    align-items: center;
}

.sidebar-nav .sidebar-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 1.3rem;
    font-family: var(--font-heading);
    font-weight: 700;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.sidebar-nav .sidebar-tab:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
}

.sidebar-nav .sidebar-tab.active {
    background-color: rgba(240, 124, 58, 0.15);
    color: var(--accent-orange);
    border-left: 3px solid var(--accent-orange);
    border-radius: 0 8px 8px 0;
}

/* --- Expandable sidebar (season and castaway pages, desktop only) --------
   A toggle at the top of the rail widens it to show a label beside each
   icon. app.js puts .sidebar-expanded on the layout and remembers it.
   Labels stay hidden otherwise, and the mobile bottom bar never shows the
   toggle or the labels. */

.sidebar-tab-label {
    display: none;
}

.sidebar-expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 44px;
    height: 32px;
    margin-bottom: 1rem;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.sidebar-expand-toggle:hover,
.sidebar-expand-toggle:focus-visible {
    color: var(--accent-orange);
}

@media (min-width: 769px) {
    .season-layout::before,
    .season-layout .sidebar-slim {
        transition: width 0.25s ease;
    }

    .season-layout.sidebar-expanded::before,
    .season-layout.sidebar-expanded .sidebar-slim {
        width: 210px;
    }

    .season-layout.sidebar-expanded .season-content {
        max-width: calc(100% - 210px);
    }

    .season-layout.sidebar-expanded .sidebar-nav {
        align-items: stretch;
        gap: 0.4rem;
        padding: 0 0.75rem;
        box-sizing: border-box;
    }

    .season-layout.sidebar-expanded .sidebar-nav .sidebar-tab {
        width: auto;
        justify-content: flex-start;
        gap: 0.85rem;
        padding: 0 0.85rem;
    }

    .season-layout.sidebar-expanded .sidebar-tab i,
    .season-layout.sidebar-expanded .sidebar-expand-toggle i {
        width: 1.4rem;
        text-align: center;
        flex-shrink: 0;
    }

    .season-layout.sidebar-expanded .sidebar-tab-label {
        display: inline;
        font-family: var(--font-body);
        font-size: 0.95rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .season-layout.sidebar-expanded .sidebar-expand-toggle {
        width: calc(100% - 1.5rem);
        justify-content: flex-start;
        padding: 0 0.85rem;
    }
}

@media (max-width: 768px) {
    .sidebar-expand-toggle {
        display: none;
    }
}

.season-content {
    flex-grow: 1;
    padding: 2rem;
    /* clip, not hidden, so sticky children (the castaway section nav) still
       stick to the page rather than to this column. */
    overflow-x: hidden;
    overflow-x: clip;
    max-width: calc(100% - 60px);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Compact Profile Styles */
.profile-header-compact {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 1.5rem 2.5rem;
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    z-index: 20;
}

.profile-image-wrapper-compact {
    width: 150px;
    height: 200px;
    border: 0px solid var(--accent-orange);
    overflow: hidden;
    flex-shrink: 0;
}

.profile-image-compact {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.2);
    transform-origin: top center;
    filter: drop-shadow(0 10px 15px rgba(240, 124, 58, 0.3));
}

.profile-title-compact h2 {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    color: var(--accent-orange);
    margin: 0;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.profile-timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-left: auto;
    margin-right: 2.5rem;
    flex-grow: 1;
    max-width: 1500px;
    padding: 2.5rem 1rem;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 2.5rem;
    height: 2px;
    background-color: var(--border-color);
    z-index: 0;
    transform: translateY(-50%);
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    cursor: pointer;
    flex-shrink: 1;
}

.timeline-item:hover {
    z-index: 9999;
}

.career-item {
    margin: 0 2.5rem;
}

.timeline-status {
    position: absolute;
    bottom: 20px;
    left: 0;
    font-size: 1.2rem;
    color: var(--text-primary);
    white-space: nowrap;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
    transform: rotate(-45deg);
    transform-origin: bottom left;
}

.timeline-status.career-season {
    white-space: normal;
    width: 140px;
    line-height: 1.1;
    bottom: 25px;
}

.timeline-place {
    position: absolute;
    top: 25px;
    font-size: 1rem;
    color: var(--accent-orange);
    font-weight: bold;
    text-align: center;
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-point {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    border: 2px solid var(--secondary-dark);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.timeline-point.boot {
    width: 18px;
    height: 18px;
    background-color: #e74c3c;
    border-color: #c0392b;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.8);
}

.timeline-ep {
    position: absolute;
    top: 25px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.timeline-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(25px);
    background-color: var(--secondary-dark);
    color: var(--text-primary);
    padding: 1rem 1rem 2.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    z-index: 9999;
    transition: opacity 0.3s, transform 0.3s;
    font-size: 0.85rem;
    min-width: 180px;
    text-align: left;
}

.timeline-item:hover .timeline-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Adjust tooltips on the edges to prevent viewport overflow */
.timeline-item:nth-child(2) .timeline-tooltip {
    left: 0;
    transform: translateX(0) translateY(25px);
}
.timeline-item:nth-child(2):hover .timeline-tooltip {
    transform: translateX(0) translateY(0);
}
.timeline-item:last-child .timeline-tooltip {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(25px);
}
.timeline-item:last-child:hover .timeline-tooltip {
    transform: translateX(0) translateY(0);
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-container:hover {
    z-index: 9999;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--secondary-dark);
    color: var(--text-primary);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: opacity 0.3s, transform 0.3s;
    width: 250px;
    pointer-events: none;
    font-size: 1rem;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.profile-grid-4col {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    width: 100%;
}

@media (max-width: 1200px) {
    .profile-grid-4col {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .season-overview-layout,
    .season-overview-layout-reverse {
        grid-template-columns: 1fr;
    }
    .leaderboard-layout {
        flex-direction: column;
    }
    .leaderboard-layout::before {
        display: none;
    }
    .leaderboard-sidebar {
        flex: none;
        width: 100%;
        position: relative;
        top: 0;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 2rem;
        background-color: var(--secondary-dark);
    }
    .leaderboard-content {
        max-width: 100%;
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    main {
        padding: 1rem;
    }
    .profile-grid-4col {
        grid-template-columns: 1fr;
    }
    .leaderboard-layout {
        margin: -1rem;
        max-width: calc(100% + 2rem);
    }
    .leaderboard-sidebar {
        padding: 1.5rem 1rem;
    }
    .leaderboard-content {
        padding: 1rem;
    }
    .profile-header-compact {
        padding: 1.5rem 1rem;
    }
    .profile-timeline {
        margin-left: 0;
        margin-right: 0;
        padding-left: 1.5rem;
        padding-right: 2.5rem;
        margin-top: 3.5rem !important;
    }
    .career-item {
        margin: 0 1vw;
    }
    .timeline-status.career-season {
        width: 75px;
        font-size: 0.75rem;
        bottom: 15px;
        transform: rotate(-60deg);
        line-height: 1.1;
    }
    .timeline-place {
        font-size: 0.8rem;
        top: 20px;
        width: 70px;
        white-space: normal;
        line-height: 1.1;
    }
    .season-layout {
        flex-direction: column;
    }
    .season-layout::before {
        display: none;
    }
    /* Phones: the sidebar becomes a tab bar pinned to the bottom of the
       screen, so it stays in reach while scrolling. Below the full-screen
       overlays (z-index 9999), above the page. */
    .sidebar-slim {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
        border-right: none;
        border-top: 1px solid var(--border-color);
        background-color: var(--secondary-dark);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45);
        padding: 0.4rem 0 calc(0.4rem + env(safe-area-inset-bottom, 0px));
        overflow: visible;
        z-index: 900;
    }
    /* A bar with no tabs (e.g. a challenge page that failed to load) would
       just be an empty strip, so drop it. */
    .sidebar-slim:not(:has(.sidebar-tab)) {
        display: none;
    }
    /* Keep the page's last content and the footer clear of the bar. */
    body:has(.sidebar-slim .sidebar-tab) {
        padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }
    .sidebar-nav {
        flex-direction: row;
        justify-content: flex-start;
        /* It's a <nav>, so it picks up the site header's global
           nav { height: 70px }; size it to the icons instead. */
        height: auto;
        padding: 0 1rem;
        box-sizing: border-box;
        overflow-x: auto;
        gap: 0.5rem;
        /* Swipeable without a visible scrollbar eating the bar's height; the
           half-cut icon at the edge shows there's more. */
        scrollbar-width: none;
    }
    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }
    /* Centre the tabs when they fit, but still scroll from the first tab
       when they don't (justify-content: center would clip the start). */
    .sidebar-nav > .sidebar-tab:first-child {
        margin-left: auto;
    }
    .sidebar-nav > .sidebar-tab:last-child {
        margin-right: auto;
    }
    .sidebar-nav .sidebar-tab {
        flex-shrink: 0;
    }
    .sidebar-nav .sidebar-tab.active {
        border-left: none;
        border-top: 3px solid var(--accent-orange);
        border-radius: 0 0 8px 8px;
    }
    .season-content {
        max-width: 100%;
        padding: 1rem;
    }
    .profile-timeline.compact-timeline .timeline-item:not(.has-status):not(.is-boot) {
        display: none;
    }

    .season-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start !important;
        padding-bottom: 0.5rem;
    }
    .season-tab {
        padding: 0.5rem 1rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .tab-text-desktop {
        display: none;
    }
    .tab-text-mobile {
        display: inline;
    }
}

.profile-col-card {
    background: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    color: #fff;
    box-sizing: border-box;
    max-width: 100%;
    overflow: visible;
    min-height: 0;
    position: relative;
    z-index: 1;
}

.profile-col-card:hover {
    z-index: 30;
}

/* Premiere countdown shown on a season page in place of the (still-empty) stats grid */
.season-countdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    margin-top: 1rem;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.14), rgba(240, 124, 58, 0.02));
    border: 1px solid rgba(240, 124, 58, 0.35);
    border-radius: 16px;
}

.season-countdown-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border-radius: 9999px;
}

.season-countdown-timer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.season-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
}

.season-countdown-value {
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-orange);
}

.season-countdown-label {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.season-countdown-sep {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.5;
}

.season-countdown-date {
    color: var(--text-secondary);
    font-size: 1rem;
}

.season-countdown-date i {
    color: var(--accent-orange);
    margin-right: 0.4rem;
}

@media (max-width: 600px) {
    .season-countdown {
        padding: 2rem 1rem;
    }
    .season-countdown-value {
        font-size: 2.5rem;
    }
    .season-countdown-unit {
        min-width: 60px;
    }
    .season-countdown-sep {
        font-size: 2.2rem;
    }
}

.profile-col-card h3 {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stats-table {
    color: var(--text-primary);
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.stats-table th, .stats-table td {
    color: var(--text-primary);
    padding: 0.5rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stats-table th {
    color: var(--text-primary);
    font-weight: bold;
    border-bottom: 2px solid var(--border-color);
}

.stats-container {
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 1rem 0 2rem 0;
    overflow-x: auto;
    width: 100%;
    box-sizing: border-box;
}

.stats-table th.sticky-col,
.stats-table td.sticky-col {
    position: sticky;
    left: 0;
    background-color: var(--secondary-dark);
    z-index: 10;
    border-right: 2px solid var(--border-color);
}

.stats-table th.sticky-col {
    z-index: 11;
}

.stats-table td.indent {
    color: var(--text-primary);
    padding-left: 1.5rem;
    font-size: 0.85rem;
}

.stats-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.stats-table tbody tr:hover td.sticky-col {
    background-color: #21262d;
}

.donut-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.donut-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.donut-inner {
    width: 90px;
    height: 90px;
    background-color: var(--secondary-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: var(--font-heading);
    color: #fff;
}

.donut-label {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    color: #fff;
}

.bars-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
}

.stat-label {
    width: 80px;
    font-size: 0.9rem;
    color: #fff;
    text-align: right;
}

.bar-bg {
    flex: 1;
    height: 10px;
    background-color: var(--primary-dark);
    border-radius: 5px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 1s ease-out;
}

.stat-value {
    width: 45px;
    font-size: 0.85rem;
    color: #fff;
    text-align: right;
}


/* Fat Footer Styles */
footer {
    /* background-color: var(--secondary-dark); */
    border-top: 1px solid var(--border-color);
    font-family: var(--font-body);
    padding: 4rem 2rem 2rem 2rem;
    margin-top: 0rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.1fr 1fr 1.1fr;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto 3rem auto;
    text-align: left;
}

@media (max-width: 1100px) {
    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-content .footer-col:first-child {
        grid-column: 1 / -1;
    }
}

.footer-heading {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.2rem;
    letter-spacing: 1px;
}

.footer-link {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 0.8rem;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--accent-orange);
}

.social-links a {
    display: inline-block;
    color: var(--text-secondary);
    font-size: 1.5rem;
    margin-right: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    color: var(--accent-orange);
    transform: translateY(-3px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.footer-bottom p {
    margin: 0;
}

.error {
    color: var(--accent-orange);
    background-color: var(--secondary-dark);
    border: 1px solid var(--accent-orange);
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    margin: 2rem;
}

/* Advantage Timeline Styles */
.advantage-block {
    margin-bottom: 1.2rem;
    text-align: left;
    width: 100%;
}
.advantage-block:last-child {
    margin-bottom: 0;
}
.advantage-type {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.1;
}
.adv-timeline {
    border-left: 2px solid var(--border-color);
    margin-left: 1.2rem;
    padding: 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.adv-timeline-item {
    position: relative;
    padding-left: 1.2rem;
}
.adv-point {
    position: absolute;
    left: -9px;
    top: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--text-secondary);
    border: 2px solid var(--secondary-dark);
}
.adv-point.success {
    background-color: #2ecc71;
    border-color: #27ae60;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}
.adv-point.fail {
    background-color: #e74c3c;
    border-color: #c0392b;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}
.adv-text {
    font-size: 0.85rem;
    color: #fff;
    line-height: 1.3;
}

/* Jury Pill Styles */
.jury-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
}
.jury-pill.friend {
    background-color: #2ecc71;
    border-color: #27ae60;
    color: #161b22;
    font-weight: bold;
}
.jury-pill.nemesis {
    background-color: #e74c3c;
    border-color: #c0392b;
    color: #fff;
    font-weight: bold;
}
.exit-quote {
  font-style: italic;
  color: var(--text-secondary, #ccc);
  border-left: 4px solid var(--accent-orange, #ff9800);
  padding: 10px 15px;
  margin: 0 0 15px 0;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

/* What the castaway did as their torch was snuffed — sits under the exit
   quote on the castaway profile. */
.cw-ack {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 15px 0;
}

.cw-ack-label {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-right: 0.15rem;
}

.cw-ack-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    background-color: rgba(240, 124, 58, 0.14);
    border: 1px solid rgba(240, 124, 58, 0.45);
    line-height: 1.2;
}

.cw-ack-chip i {
    font-size: 0.7rem;
    color: var(--accent-orange);
}

.cw-ack-none {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-secondary);
}

/* Live Indicator Styles */
.live-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: red;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
  margin-left: 8px;
  margin-bottom: 2px;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

/* Achievement Styles */
.achievements-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.5rem;
    justify-content: center;
    width: 100%;
}

.achievement-badge {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.15) 0%, rgba(22, 27, 34, 0.9) 100%);
    border: 1px solid var(--accent-orange);
    border-left: 4px solid var(--accent-orange);
    border-radius: 4px;
    padding: 0.5rem 0.8rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(240, 124, 58, 0.1);
    gap: 0.6rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: default;
}

.achievement-badge:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6), 0 0 15px rgba(240, 124, 58, 0.4), inset 0 0 15px rgba(240, 124, 58, 0.2);
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.25) 0%, rgba(22, 27, 34, 0.9) 100%);
}

.achievement-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: rgba(240, 124, 58, 0.2);
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--accent-yellow);
    text-shadow: 0 0 8px var(--accent-yellow);
    border: 1px solid rgba(241, 196, 15, 0.5);
}

.achievement-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    letter-spacing: 1px;
    color: var(--text-primary);
    text-transform: uppercase;
    line-height: 1;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* Search and Filter Inputs */
#castaway-search, select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Filter Toggle Button */
.filter-toggle-btn {
    display: none;
    background-color: var(--secondary-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 0 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.filter-toggle-btn:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* Load More Button */
.load-more-btn {
    margin: 2.5rem auto 1rem;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    background-color: var(--secondary-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.load-more-btn:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    box-shadow: 0 4px 12px rgba(240, 124, 58, 0.2);
}

/* Thin minimal scrollbars globally */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-secondary);
}

@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #castaway-filters {
        display: none !important;
    }
    #castaway-filters.show {
        display: flex !important;
    }
    
    /* Mobile Footer Adjustments */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-content .footer-col:first-child {
        grid-column: auto;
    }
    .footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text-primary);
    transition: .4s;
}
input:checked + .slider {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
}
input:checked + .slider:before {
    transform: translateX(20px);
    background-color: var(--primary-dark);
}
.slider.round {
    border-radius: 24px;
}
.slider.round:before {
    border-radius: 50%;
}

/* Map Leaflet Overrides (Dark Mode Theme) */
.leaflet-tile {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background-color: var(--secondary-dark) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}
.leaflet-popup-content {
    margin: 15px;
}
.leaflet-tooltip {
    background-color: var(--secondary-dark) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    font-family: var(--font-body);
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.leaflet-tooltip-top:before { border-top-color: var(--border-color) !important; }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--border-color) !important; }
.leaflet-tooltip-left:before { border-left-color: var(--border-color) !important; }
.leaflet-tooltip-right:before { border-right-color: var(--border-color) !important; }
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(240, 124, 58, 0.6) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: rgba(240, 124, 58, 0.9) !important;
    color: var(--primary-dark) !important;
}

.filter-category-challenge {
    padding: 0.5rem 1rem; 
    border-radius: 20px; 
    background-color: var(--secondary-dark); 
    color: var(--text-primary); 
    border: 1px solid var(--border-color); 
    outline: none; 
    font-family: var(--font-body); 
    font-weight: bold;
    cursor: pointer;
}

.stats-table-images {
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    object-fit: cover; 
    object-position: top; 
    border: 1px solid var(--accent-orange); 
    flex-shrink: 0;
}

/* Class-scoped rather than id-scoped: the full-screen viewer clones the table
   and strips its id to avoid a duplicate in the document, so anything hung off
   #season-… stopped applying to the clone — the castaway images went back to
   32px with the orange border, and the font size and cell padding reverted too.
   Classes survive cloneNode, so the full-screen copy now matches the page. */
.stats-table--player {
    font-size: 0.8rem;
}
.stats-table--confessional {
    font-size: 0.9rem;
}
.stats-table--player th,
.stats-table--player td {
    padding: 0.2rem 0.3rem;
}
.stats-table--confessional th,
.stats-table--confessional td {
    padding: 0.2rem 0.55rem;
}
.stats-table--player .stats-table-images {
    width: 36px;
    height: 36px;
    border: none;
}
.stats-table--confessional .stats-table-images {
    width: 30px;
    height: 30px;
    border: none;
}
.stats-table--confessional .stats-table-name,
.stats-table--player .stats-table-name {
    gap: 0.5rem;
}

.stats-table-name {
    display: flex; 
    align-items: center; 
    gap: 0.8rem; 
    color: var(--text-primary); 
    text-decoration: none; 
    white-space: normal;
}

.stats-table-name:hover {
    color: var(--accent-orange);
}

.castaway-name-desktop {
    display: inline;
}
.castaway-name-mobile {
    display: none;
}

#scores-table th.sticky-col[data-sort="full_name"],
#challenges-table th.sticky-col[data-sort="full_name"],
#voting-table th.sticky-col[data-sort="full_name"],
#jury-table th.sticky-col[data-sort="full_name"],
#confessionals-table th.sticky-col[data-sort="full_name"],
.stats-table--conf-time th.sticky-col,
#advantages-table th.sticky-col[data-sort="full_name"] {
    min-width: 200px;
}

@media (max-width: 768px) {
    #scores-table th.sticky-col[data-sort="full_name"],
    #challenges-table th.sticky-col[data-sort="full_name"],
    #voting-table th.sticky-col[data-sort="full_name"],
    #jury-table th.sticky-col[data-sort="full_name"],
    #confessionals-table th.sticky-col[data-sort="full_name"],
.stats-table--conf-time th.sticky-col,
    #advantages-table th.sticky-col[data-sort="full_name"] {
        min-width: 80px;
    }
    .stats-table-name .castaway-name-desktop {
        display: none;
    }
    .stats-table-name .castaway-name-mobile {
        display: inline;
        line-height: 1.2;
        text-align: left;
    }
}

/* Article The Edit Styles */
.edit-explainer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.edit-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

@media (max-width: 1300px) {
    .edit-kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .edit-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .edit-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.kpi-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

/* Three-across variant, for a KPI row that explains a chart rather than
   heading the article */
.kpi-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 3rem;
}

@media (max-width: 992px) {
    .kpi-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .kpi-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .kpi-grid-4 {
        grid-template-columns: 1fr;
    }
}

.edit-kpi-box {
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.edit-kpi-box h4 {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value {
    font-size: 2.5rem;
    font-family: var(--font-heading);
    color: var(--accent-orange);
    line-height: 1;
}

.grade-tier {
    display: flex;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    min-height: 80px;
}

.grade-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    font-size: 3.5rem;
    font-family: var(--font-heading);
    font-weight: bold;
    flex-shrink: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.grade-A { background-color: #7FFF7F; color: var(--primary-dark); }
.grade-B { background-color: #BFFF7F; color: var(--primary-dark); }
.grade-C { background-color: #FFFF7F; color: var(--primary-dark); }
.grade-D { background-color: #FFBF7F; color: var(--primary-dark); }
.grade-E { background-color: #FF7F7F; color: var(--primary-dark); }

.grade-seasons {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 1rem;
    flex-grow: 1;
    align-items: center;
}

.season-skew-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    min-width: 140px;
    background-color: var(--primary-dark);
}

.skew-male {
    border-color: #4cabe4;
    background: linear-gradient(to bottom, rgba(76, 171, 228, 0.1), transparent);
}

.skew-female {
    border-color: #ff3380;
    background: linear-gradient(to bottom, rgba(255, 51, 128, 0.1), transparent);
}

.season-skew-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 0.3rem;
    text-decoration: none;
    transition: color 0.3s ease;
}

a.season-skew-name:hover {
    color: var(--accent-orange);
}

.season-skew-val {
    font-size: 1.4rem;
    font-family: var(--font-heading);
    line-height: 1;
}

.skew-male .season-skew-val { color: #4cabe4; }
.skew-female .season-skew-val { color: #ff3380; }

/* Articles Blog Styles */
.articles-container {
    /* background: var(--secondary-dark); */
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.article-card {
    display: flex;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    min-height: 250px;
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(240, 124, 58, 0.2);
    border-color: var(--accent-orange);
}

.article-image-wrapper {
    width: 350px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    border-right: 1px solid var(--border-color);
}

.article-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-image {
    transform: scale(1.05);
}

.article-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
}

.article-meta {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    line-height: 1.1;
}

.article-desc {
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.article-tags {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: auto;
}

/* Individual Article Page — Hero Header */
.article-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2rem auto;
}

.article-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin-bottom: 1rem;
}

.article-hero-title {
    font-family: var(--font-heading);
    font-size: 3.2rem;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    letter-spacing: 0.5px;
}

.article-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

.article-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.article-hero-meta .dot {
    color: var(--border-color);
}

.article-hero-meta .tag {
    background-color: rgba(201, 209, 217, 0.1);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.2rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.article-hero-divider {
    width: 100vw;
    height: 1px;
    margin-left: calc(-50vw + 50%);
    margin-bottom: 2.5rem;
    background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}

@media (max-width: 600px) {
    .article-hero-title {
        font-size: 2.2rem;
    }
    .article-hero-subtitle {
        font-size: 1rem;
    }
}

/* Era Filter Buttons */
.era-filter-container {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.era-filter-btn {
    background-color: var(--secondary-dark);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.35rem 1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.era-filter-btn:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.era-filter-btn.active {
    background-color: var(--accent-orange);
    border-color: var(--accent-orange);
    color: var(--primary-dark);
    font-weight: bold;
}

/* Your Top 10 Builder Styles */
.top10-builder-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 1300px) {
    .top10-builder-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .top10-builder-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .top10-builder-grid {
        grid-template-columns: 1fr;
    }
}

.top10-builder-card {
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.2rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    transition: border-color 0.3s ease;
}

.top10-builder-card.filled {
    border-color: var(--accent-orange);
}

.top10-builder-rank {
    position: absolute;
    top: 0.4rem;
    left: 0.7rem;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--accent-orange);
    opacity: 0.8;
    line-height: 1;
}

.top10-builder-deselect {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background-color: var(--primary-dark);
    color: var(--text-secondary);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
}

.top10-builder-deselect:hover {
    background-color: #e74c3c;
    color: #fff;
}

.top10-builder-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0.3rem 0 0.6rem 0;
    overflow: hidden;
    border-radius: 10px;
    flex-shrink: 0;
    background-color: var(--primary-dark);
}

.top10-builder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 0.4s ease;
}

.top10-builder-card:hover .top10-builder-image {
    transform: scale(1.08);
}

.top10-builder-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 0.7rem;
    min-height: 1.6rem;
    line-height: 1.1;
}

a.top10-builder-name:hover {
    color: var(--accent-orange);
}

.top10-search-wrap {
    position: relative;
    width: 100%;
}

.top10-search-input {
    width: 100%;
    padding: 0.45rem 0.8rem;
    border-radius: 20px;
    background-color: var(--primary-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    outline: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    box-sizing: border-box;
}

.top10-search-input:focus {
    border-color: var(--accent-orange);
}

.top10-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 50;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    text-align: left;
}

.top10-search-results.show {
    display: block;
}

.top10-search-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.top10-search-result-item:hover {
    background-color: var(--primary-dark);
}

.top10-search-result-item img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    flex-shrink: 0;
}

/* Mobile: an unfilled Top 10 slot collapses to just its label + search box.
   The 4:5 image container only appears once a castaway has been picked
   (renderBuilderGrid adds .filled), so empty slots don't eat the screen. */
@media (max-width: 768px) {
    .top10-builder-grid {
        align-items: start;
    }
    .top10-builder-card:not(.filled) {
        padding: 0.85rem 1rem 0.85rem 2.4rem;
        text-align: left;
    }
    .top10-builder-card:not(.filled) .top10-builder-image-wrapper {
        display: none;
    }
    .top10-builder-card:not(.filled) .top10-builder-rank {
        top: 50%;
        left: 0.8rem;
        transform: translateY(-50%);
        font-size: 1.5rem;
    }
    .top10-builder-card:not(.filled) .top10-builder-name {
        align-self: flex-start;
        min-height: 0;
        margin-bottom: 0.5rem;
        color: var(--text-secondary);
    }
}

.top10-vote-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.top10-vote-btn {
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top10-vote-btn:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.top10-vote-btn.voted-up {
    background-color: rgba(46, 204, 113, 0.15);
    border-color: #2ecc71;
    color: #2ecc71;
}

.top10-vote-btn.voted-down {
    background-color: rgba(231, 76, 60, 0.15);
    border-color: #e74c3c;
    color: #e74c3c;
}

.top10-vote-score {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent-orange);
    min-width: 50px;
    text-align: center;
}

.top10-message {
    margin-top: 1rem;
    font-size: 0.95rem;
}

.top10-message.success {
    color: #2ecc71;
}

.top10-message.error {
    color: #e74c3c;
}

.top10-submitter-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 50vh;
    overflow-y: auto;
}

.top10-submitter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.top10-submitter-item:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.top10-submitter-item.active {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    background-color: rgba(240, 124, 58, 0.1);
}

.top10-submitter-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.top10-submitter-info span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top10-submitter-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.top10-submitter-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.top10-submitter-score {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--accent-orange);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.top10-submitter-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.2rem;
    opacity: 0.5;
    line-height: 1;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.top10-submitter-delete:hover {
    color: #e74c3c;
    opacity: 1;
}

.top10-submitters-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    margin-bottom: 0.8rem;
    padding: 0;
    user-select: none;
}

.top10-submitters-summary::-webkit-details-marker,
.top10-submitters-summary::marker {
    display: none;
}

.top10-submitters-chevron {
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

details[open] .top10-submitters-chevron {
    transform: rotate(180deg);
}

.top10-builder-stat {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    letter-spacing: 0.02em;
}

/* Top 10 Intro Modal */
.top10-intro-card {
    max-width: 480px;
    position: relative;
    text-align: center;
}

.top10-intro-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

.top10-intro-close:hover {
    color: var(--accent-orange);
}

.top10-intro-icon {
    font-size: 2.4rem;
    color: var(--accent-orange);
    margin-bottom: 0.75rem;
    text-shadow: 0 0 20px rgba(246, 125, 55, 0.5);
}

.top10-intro-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    letter-spacing: 0.5px;
}

.top10-intro-body {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
    text-align: left;
    margin: 0 0 1rem 0;
}

.top10-intro-cta {
    width: 100%;
    margin: 0.5rem 0 0 0;
    box-sizing: border-box;
}

@media (max-width: 520px) {
    .top10-intro-card { padding: 1.5rem 1.25rem; }
    .top10-intro-title { font-size: 1.6rem; }
    .top10-intro-body { font-size: 0.9rem; }
}

/* Top 10 Share Section */
.top10-share-section {
    margin-top: 1.2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.top10-share-prompt {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0 0 0.8rem 0;
}

.top10-share-prompt i {
    color: var(--accent-orange);
}

.top10-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.top10-share-actions .share-btn {
    text-decoration: none;
    margin-top: 0;
}

/* Top 10 Community Consensus List */
.top10-community-list {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    max-width: 100%;
    box-sizing: border-box;
}

.top10-community-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-primary);
    margin: 0 0 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.top10-community-title i {
    color: var(--accent-orange);
    font-size: 1.2rem;
}

.top10-community-subtitle {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0 0 1.5rem 0;
}

.top10-community-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
}

/* Mobile-first: rank, image, name, percentage. The consensus bar and the
   "Your Pick" tag only appear once there's enough room (see min-width below). */
.top10-community-item {
    display: grid;
    grid-template-columns: 20px 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    max-width: 100%;
    transition: border-color 0.2s ease;
}

.top10-community-item.mine {
    border-color: var(--accent-orange);
    background-color: rgba(246, 125, 55, 0.1);
    box-shadow: 0 0 12px rgba(246, 125, 55, 0.15);
}

.top10-community-rank {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-secondary);
    text-align: center;
}

.top10-community-item.mine .top10-community-rank {
    color: var(--accent-orange);
}

.top10-community-img {
    display: block;
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    border: 1px solid var(--border-color);
}

.top10-community-item.mine .top10-community-img {
    border-color: var(--accent-orange);
}

.top10-community-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
}

.top10-community-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top10-community-name:hover {
    color: var(--accent-orange);
}

.top10-community-mine-tag {
    display: none;
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-orange);
    border: 1px solid var(--accent-orange);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.top10-community-bar-wrap {
    display: none;
    height: 8px;
    border-radius: 4px;
    background-color: var(--primary-dark);
    overflow: hidden;
}

.top10-community-bar {
    height: 100%;
    background-color: var(--accent-orange);
    border-radius: 4px;
}

.top10-community-pct {
    text-align: right;
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-primary);
}

/* Once there's enough width, show the "Your Pick" tag and the consensus bar */
@media (min-width: 480px) {
    .top10-community-item {
        grid-template-columns: 24px 36px minmax(0, 1fr) auto;
        gap: 0.8rem;
        padding: 0.5rem 0.8rem;
    }
    .top10-community-rank { font-size: 1.2rem; }
    .top10-community-img { width: 36px; height: 36px; max-width: 36px; max-height: 36px; }
    .top10-community-name { font-size: 0.95rem; }
    .top10-community-mine-tag { display: inline-block; }
    .top10-community-pct { font-size: 1.1rem; }
}

@media (min-width: 640px) {
    .top10-community-item {
        grid-template-columns: 24px 36px minmax(0, 1fr) 140px auto;
    }
    .top10-community-bar-wrap { display: block; }
}

@media (max-width: 768px) {
    .era-filter-btn {
        padding: 0.2rem 0.6rem;
        font-size: 0.75rem;
    }
}

/* Today's Spotlight (Home Page) */
.spotlight-card {
    display: flex;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    max-width: 1000px;
    margin: 0 auto 3rem auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.spotlight-image-wrapper {
    width: 280px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--primary-dark);
}

.spotlight-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.spotlight-winner-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(13, 17, 23, 0.85);
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.spotlight-body {
    flex: 1;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.spotlight-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin-bottom: 0.5rem;
}

.spotlight-name {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    line-height: 1.1;
    color: var(--text-primary);
    margin: 0 0 0.4rem 0;
}

.spotlight-meta {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
}

.spotlight-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.spotlight-stat {
    text-align: center;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 0.5rem;
}

.spotlight-stat-value {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    color: var(--accent-orange);
    line-height: 1.1;
}

.spotlight-stat-label {
    font-family: var(--font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.spotlight-chart-section {
    margin-bottom: 1.75rem;
}

.spotlight-chart-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.spotlight-chart-wrapper {
    position: relative;
    height: 140px;
}

.spotlight-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--accent-orange);
    color: #0d1117;
    font-family: var(--font-body);
    font-weight: 700;
    text-decoration: none;
    padding: 0.7rem 1.5rem;
    border-radius: 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.spotlight-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(240, 124, 58, 0.35);
}

@media (max-width: 768px) {
    .spotlight-card {
        flex-direction: column;
    }
    .spotlight-image-wrapper {
        width: 100%;
        height: 240px;
    }
    .spotlight-body {
        padding: 1.5rem;
    }
    .spotlight-name {
        font-size: 2.1rem;
    }
    .spotlight-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .spotlight-chart-wrapper {
        height: 160px;
    }
}

/* Random Castaway (Castaways Page) */
.random-castaway-section {
    margin-bottom: 2.5rem;
}

.spotlight-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.spotlight-reroll-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 700;
    border: 1px solid var(--border-color);
    padding: 0.7rem 1.5rem;
    border-radius: 24px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.spotlight-reroll-btn:hover {
    transform: translateY(-2px);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

/* A-Z Castaway Directory */
.az-jumpnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    position: sticky;
    top: 70px;
    z-index: 20;
    background: transparent;
    padding: 0.6rem;
    margin-bottom: 2rem;
}

.az-jump-link {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.az-jump-link:hover {
    background-color: var(--accent-orange);
    color: var(--primary-dark);
}

.az-jump-link.is-disabled {
    color: var(--border-color);
    cursor: default;
    pointer-events: none;
}

.az-directory {
    column-count: 4;
    column-gap: 2rem;
}

.az-section {
    margin-bottom: 1rem;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}

.az-letter-heading {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--accent-orange);
    margin: 0 0 0.6rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--border-color);
    scroll-margin-top: 130px;
}

.az-row-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.az-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.az-row:hover {
    background-color: var(--secondary-dark);
    transform: translateX(4px);
}

.az-row-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--secondary-dark);
}

.az-row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.az-row-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 0.1rem;
}

.az-row-name {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.az-row-seasons {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .az-directory {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .az-directory {
        column-count: 1;
    }
    .az-jumpnav {
        top: 62px;
        gap: 0.2rem;
        padding: 0.5rem;
    }
    .az-jump-link {
        width: 26px;
        height: 26px;
        font-size: 1.05rem;
    }
    .az-row-name {
        font-size: 1rem;
    }
}

/* Top 10 Leaderboard Styles */
.nav-10-btn {
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: bold;
    font-family: var(--font-body);
    font-size: 1.1rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
}
.nav-10-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}
.top-10-row {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding: 0 0.5rem 1rem 0.5rem;
}

/* Contribute callout — info box + CTA (Top 10 overview) */
.contribute-callout {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.12) 0%, var(--secondary-dark) 60%);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-orange);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
}

.contribute-callout-icon {
    flex: 0 0 auto;
    font-size: 1.75rem;
    color: var(--accent-orange);
    line-height: 1;
}

.contribute-callout-text {
    flex: 1 1 auto;
    min-width: 0;
}

.contribute-callout-text h4 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-primary);
    margin: 0 0 0.15rem 0;
    line-height: 1.1;
    letter-spacing: 0.5px;
}

.contribute-callout-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.contribute-callout-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    /* Needed for the width: 100% in the mobile rule below — this stylesheet has
       no global border-box reset, so without it the horizontal padding and
       borders are added on top of the card's full width and the button overhangs. */
    box-sizing: border-box;
    max-width: 100%;
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    background-color: var(--primary-dark);
    border: 1px solid var(--accent-orange);
    color: var(--accent-orange);
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.contribute-callout-btn:hover {
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(240, 124, 58, 0.25);
}

@media (max-width: 700px) {
    .contribute-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
        padding: 1.1rem 1.15rem;
    }
    .contribute-callout-btn {
        width: 100%;
        justify-content: center;
    }
}

.top-10-card {
    min-width: 160px;
    flex: 1;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    top: 20px;
    animation: staggerFadeIn 0.5s ease-out forwards;
    margin-top: 20px;
}

.top-10-card:nth-child(1) { animation-delay: 0.05s; }
.top-10-card:nth-child(2) { animation-delay: 0.10s; }
.top-10-card:nth-child(3) { animation-delay: 0.15s; }
.top-10-card:nth-child(4) { animation-delay: 0.20s; }
.top-10-card:nth-child(5) { animation-delay: 0.25s; }
.top-10-card:nth-child(6) { animation-delay: 0.30s; }
.top-10-card:nth-child(7) { animation-delay: 0.35s; }
.top-10-card:nth-child(8) { animation-delay: 0.40s; }
.top-10-card:nth-child(9) { animation-delay: 0.45s; }
.top-10-card:nth-child(10) { animation-delay: 0.50s; }

@keyframes staggerFadeIn {
    to {
        opacity: 1;
        top: 0;
    }
}

.top-10-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(240, 124, 58, 0.2);
    border-color: var(--accent-orange);
}

.top-10-rank {
    position: absolute;
    top: 0.2rem;
    left: 0.5rem;
    font-size: 1.5rem;
    font-family: var(--font-heading);
    color: var(--accent-orange);
    line-height: 1;
    opacity: 0.8;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    z-index: 10;
    padding-left: 0.4rem;
    padding-top: 0.4rem;
}

.top-10-image-wrapper {
    width: 120px;
    height: 120px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* border-radius: 50%; */
    border: 0px solid var(--border-color);
    /* background-color: var(--primary-dark); */
}

.top-10-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.15);
    transform-origin: top center;
}

.top-10-name {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}

.top-10-score {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--accent-orange);
    font-weight: bold;
    line-height: 1;
    margin-top: 0.2rem;
}

.top-10-flame {
        font-size: 2rem;
        margin-right: 0.5rem; 
        transform: translateY(-4px);
    }

@media (max-width: 768px) {
    .top-10-card {
        min-width: 80px;
        padding: 0.8rem 0.4rem;
    }
    .top-10-image-wrapper {
        padding: 0.9rem;
        width: 80px;
        height: 80px;
    }
    .top-10-name {
        font-size: 1rem;
    }
    .top-10-score {
        font-size: 1.6rem;
    }
    .top-10-flame {
        font-size: 1.2rem;
        margin-right: 0.2rem; 
        transform: translateY(-2px);
    }
    .top-10-card .tag {
        font-size: 0.55rem;
        padding: 0.15rem 0.35rem;
        letter-spacing: 0;
    }
    .top-10-card .pill-tags {
        gap: 0.25rem;
        margin-top: 0.25rem !important;
    }
}

/* Records List Container */
.records-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.records-toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.records-toggle-label {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: bold;
}

.segmented-toggle {
    display: inline-flex;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.2rem;
    gap: 0.2rem;
}

.segmented-toggle-btn {
    padding: 0.4rem 1.1rem;
    border-radius: 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.segmented-toggle-btn:hover {
    color: var(--text-primary);
}

.segmented-toggle-btn.active {
    background-color: var(--accent-orange);
    color: var(--primary-dark);
}

.records-section-header {
    max-width: 700px;
    margin-bottom: 0.5rem;
}

.records-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent-orange);
    margin: 0 0 0.4rem;
    text-align: left;
}

.records-section-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.records-category-heading {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    margin: 1.5rem 0 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

/* Records Page Styles */
.record-gender-heading {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 0;
    font-family: var(--font-heading);
    font-size: 2.2rem;
    letter-spacing: 1px;
}

.record-card {
    display: flex;
    flex-direction: column;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.record-card:hover {
    box-shadow: 0 8px 24px rgba(240, 124, 58, 0.1);
    border-color: var(--border-color);
}

.record-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    background-color: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid var(--border-color);
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.record-title-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
}

.record-icon {
    position: absolute;
    top: 50%;
    left: -1rem;
    transform: translateY(-50%);
    font-size: 5rem;
    color: var(--text-secondary);
    opacity: 0.08;
    pointer-events: none;
}

.record-card-title {
    color: var(--text-primary);
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    position: relative;
    z-index: 1;
}

.record-card-value {
    font-size: 2.2rem;
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--accent-orange);
    line-height: 1;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.record-card-holders {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.2rem;
    background-color: var(--secondary-dark);
}

.record-holder {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.record-holder:hover {
    background-color: rgba(255, 255, 255, 0.03);
    transform: translateX(3px);
}

.record-holder-image-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--primary-dark);
    flex-shrink: 0;
}

.record-holder-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.2);
    transform-origin: top center;
}

.record-holder-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.record-holder-name {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.1;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.record-holder-season {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .article-card {
        flex-direction: column;
    }
    .article-image-wrapper {
        width: 100%;
        height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .article-content {
        padding: 1.5rem;
    }
    .article-title {
        font-size: 2rem;
    }
}

/* Confessional Timers */
#save-csv-btn, #reset-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    outline: none;
    font-family: var(--font-body);
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

#save-csv-btn {
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    border: 1px solid var(--accent-orange);
}

#save-csv-btn:hover {
    background-color: transparent;
    color: var(--accent-orange);
    box-shadow: 0 4px 12px rgba(240, 124, 58, 0.2);
}

#reset-btn {
    background-color: var(--secondary-dark);
    color: #e74c3c;
    border: 1px solid var(--border-color);
    margin-left: 10px;
}

#reset-btn:hover {
    background-color: rgba(231, 76, 60, 0.1);
    border-color: #e74c3c;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.2);
}

.timer-grid-4col {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto 3rem auto;
}

@media (max-width: 1200px) {
    .timer-grid-4col {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
    }
}

@media (max-width: 900px) {
    .timer-grid-4col {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
}

.timer-card {
    background: var(--secondary-dark);
    border: 2px solid var(--border-color);
    border-top: 5px solid var(--tribe-colour, var(--border-color));
    border-radius: 12px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.timer-card.active-play {
    border-color: #2ecc71;
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}

.timer-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.8rem;
    margin-top: 0.4rem;
    background-color: var(--primary-dark);
}

.timer-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.05);
    transition: transform 0.4s ease;
}

.timer-card:hover .timer-image {
    transform: scale(1.12);
}

.timer-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}

.timer-display {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent-orange);
    margin: 0.25rem 0 0.25rem 0;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
}

.timer-controls {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    width: 100%;
}

.timer-btn {
    background-color: var(--primary-dark);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.timer-btn:hover {
    transform: scale(1.1);
}

.timer-btn.plus:hover {
    background-color: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

.timer-btn.minus:hover {
    background-color: rgba(231, 76, 60, 0.2);
    border-color: #e74c3c;
    color: #e74c3c;
}

.timer-btn.play:hover, .timer-btn.play.active {
    background-color: rgba(46, 204, 113, 0.2);
    border-color: #2ecc71;
    color: #2ecc71;
}

/* Mobile: compact one-castaway-per-row list for the confessional timing app.
   Must stay after the base .timer-* rules so it wins the cascade. */
@media (max-width: 600px) {
    .timer-grid-4col {
        grid-template-columns: 1fr;
        gap: 0.35rem;
        margin-bottom: 2rem;
    }
    .timer-card {
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.5rem;
        border: 1px solid var(--border-color);
        border-top: 1px solid var(--border-color);
        border-left: 5px solid var(--tribe-colour, var(--border-color));
        border-radius: 8px;
        text-align: left;
        box-shadow: none;
    }
    .timer-image-wrapper {
        width: 38px;
        height: 38px;
        aspect-ratio: 1 / 1;
        border-radius: 50%;
        overflow: hidden;
        margin: 0;
    }
    .timer-image-wrapper picture {
        display: contents;
    }
    .timer-image,
    .timer-card:hover .timer-image {
        object-position: top center;
        transform: none;
    }
    .timer-name {
        font-size: 1.4rem;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .timer-display {
        font-size: 1.4rem;
        margin: 0;
        text-align: right;
        white-space: nowrap;
    }
    .timer-controls {
        width: auto;
        gap: 0.3rem;
    }
    .timer-btn {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        font-size: 0.7rem;
        border-width: 1px;
    }
    .timer-btn:hover {
        transform: none;
    }
}

/* Polls Page Styles */
.filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.filter-dropdown {
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    background-color: var(--secondary-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    outline: none;
    font-family: var(--font-body);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-dropdown:hover, .filter-dropdown:focus {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.poll-container-wrap {
    max-width: 1000px;
    margin: 0 auto;
}

.poll-challenge-card {
    margin-bottom: 2.5rem;
    text-align: center;
    padding: 2rem;
    background-color: rgba(0, 0, 0, 0);
    border-color: rgba(0, 0, 0, 0);
}

.poll-challenge-card:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0);
}

.poll-challenge-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1.2;
}

.poll-question-text {
    color: #fff;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
}

.poll-challenge-name {
    color: var(--accent-orange);
    /* text-transform: lowercase; */
}

.poll-challenge-content {
    display: flex;
    gap: 2rem;
    align-items: center;
    text-align: left;
    justify-content: center;
    flex-wrap: wrap;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

.poll-challenge-content.show {
    max-height: 1000px;
    opacity: 1;
    margin-top: 1.5rem;
}

.poll-challenge-img {
    width: 100%;
    max-width: 500px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.poll-challenge-desc {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1.1rem;
    margin: 0 auto;
    flex: 1;
    min-width: 300px;
}

.poll-vs-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    flex-wrap: wrap;
}

.poll-castaway-name {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #fff;
    transition: color 0.3s ease;
}

.poll-castaway-name:hover {
    color: var(--accent-orange);
}

.poll-castaway-seasons {
    margin-bottom: 2rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.poll-season-tag {
    text-decoration: none;
    background-color: var(--primary-dark);
    color: #fff;
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    transition: background-color 0.2s, color 0.2s;
}

.poll-season-tag:hover {
    background-color: var(--accent-orange);
    color: #1a1a1a;
}

.poll-vs-text {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-family: var(--font-heading);
    color: var(--text-secondary);
    font-weight: bold;
    padding: 0 1rem;
}

.poll-card {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.poll-img {
    width: 240px;
    height: 240px;
    object-fit: cover;
    object-position: top;
    /* border-radius: 50%; */
    margin-bottom: 0rem;
}

/* .poll-img.a { border: 4px solid var(--accent-orange); } */
/* .poll-img.b { border: 4px solid var(--accent-purple); } */

.poll-btn {
    margin-top: auto;
    padding: 0.8rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
    color: #fff;
    width: 100%;
}

.poll-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.poll-btn.a { background-color: var(--accent-orange); color: var(--primary-dark); }
.poll-btn.b { background-color: var(--accent-purple); color: #fff; }

/* Voted state — shown on mobile after voting */
.poll-btn.a.voted,
.poll-btn.b.voted {
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    font-family: var(--font-heading);
    font-size: 2rem;
    cursor: default;
    transform: none;
}
.poll-btn.a.voted { color: var(--accent-orange); }
.poll-btn.b.voted { color: var(--accent-purple); }
.poll-btn.voted:hover { transform: none; filter: none; }

/* Mobile next button (inline, shown after voting on mobile) */
#mobile-next-container { display: none; }
.mobile-next-inline-btn {
    display: block;
    width: 100%;
    padding: 0.85rem;
    background-color: var(--text-secondary);
    color: var(--primary-dark);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.mobile-next-inline-btn:hover { filter: brightness(1.2); }

/* Mobile adjustments for polls */
@media (max-width: 768px) {
    #poll-filters {
        display: none !important;
    }
    #poll-filters.show {
        display: flex !important;
    }

    .poll-vs-container {
        flex-wrap: nowrap;
        gap: 0.5rem;
        align-items: stretch;
    }

    .poll-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 0;
        max-width: none;
        flex: 1;
        padding: 0.75rem 0.5rem;
        box-sizing: border-box;
    }

    .poll-img {
        width: 80px;
        height: 80px;
        margin-bottom: 0.3rem;
    }

    .poll-card > a { display: block; }

    .poll-castaway-name {
        font-size: 1rem;
        margin-bottom: 0.2rem;
    }

    .poll-castaway-seasons {
        justify-content: center;
        flex-wrap: wrap;
        margin-bottom: 0.6rem;
        align-self: center;
    }

    .poll-btn {
        margin-top: auto;
        padding: 0.65rem 0.25rem;
        font-size: 0.85rem;
        width: 100%;
    }

    .poll-btn.a.voted,
    .poll-btn.b.voted { font-size: 1.8rem; }

    .poll-vs-text {
        font-size: 1.4rem;
        flex-shrink: 0;
        padding: 0;
    }
}

/* Vote Result Modal */
.vote-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
    box-sizing: border-box;
}

.vote-modal-overlay.is-open {
    display: flex;
}

.vote-modal-card {
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    text-align: center;
    animation: modal-pop 0.2s ease;
}

@keyframes modal-pop {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.vote-modal-challenge-label {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin: 0 0 1.5rem 0;
    letter-spacing: 0.5px;
}

.vote-modal-vs {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding-top: 0.25rem;
}

.vote-modal-castaway {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.vote-modal-voted-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: #2ecc71;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 1.2rem;
}

.vote-modal-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    border: 3px solid var(--border-color);
}

.vote-modal-castaway.winner-a .vote-modal-img {
    border-color: var(--accent-orange);
    box-shadow: 0 0 16px rgba(246, 125, 55, 0.5);
}

.vote-modal-castaway.winner-b .vote-modal-img {
    border-color: var(--accent-purple);
    box-shadow: 0 0 16px rgba(163, 113, 247, 0.5);
}

.vote-modal-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    color: var(--text-primary);
    line-height: 1.1;
}

.vote-modal-pct {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    line-height: 1;
}

.vote-modal-pct.pct-a { color: var(--accent-orange); }
.vote-modal-pct.pct-b { color: var(--accent-purple); }

.vote-modal-divider {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-secondary);
    padding-top: 2.5rem;
    flex-shrink: 0;
}

.vote-modal-bar-wrap {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.6rem;
    background: var(--border-color);
}

.vote-modal-bar {
    height: 100%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vote-modal-bar.bar-a { background: var(--accent-orange); }
.vote-modal-bar.bar-b { background: var(--accent-purple); }

.vote-modal-next {
    display: block;
    max-width: 180px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    background-color: var(--text-secondary);
    color: var(--primary-dark);
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.vote-modal-next:hover {
    filter: brightness(1.2);
}

@media (max-width: 520px) {
    .vote-modal-overlay { padding: 0.75rem; }
    .vote-modal-card { padding: 1rem 0.875rem; }
    .vote-modal-challenge-label { font-size: 1rem; margin-bottom: 0.75rem; }
    .vote-modal-vs { gap: 0.4rem; margin-bottom: 0.75rem; padding-top: 0; }
    .vote-modal-voted-label { font-size: 0.65rem; }
    .vote-modal-img { width: 64px; height: 64px; }
    .vote-modal-pct { font-size: 1.5rem; }
    .vote-modal-name { font-size: 0.95rem; }
    .vote-modal-divider { font-size: 1rem; padding-top: 1.4rem; }
    .vote-modal-bar-wrap { margin-bottom: 0.75rem; }
    .vote-modal-next { width: 100%; max-width: none; font-size: 1rem; padding: 0.65rem 1rem; }
}

/* Winner Predictions & Inner Season Section Styles */
.section-title-inner {
    font-size: 2.2rem;
    /* .section-title adds a 20px left indent that misaligns against the
       measured content column — reset it so headings line up with the body */
    margin: 20px 0 20px 0;
    text-align: left;
    color: var(--accent-orange);
}

.timeline-inner-container {
    margin-left: 0;
    margin-right: 0;
    margin-top: 1rem;
    max-width: 100%;
    padding-top: 80px;
    padding-bottom: 80px;
}

.section-subtitle {
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: -0.5rem 0 1.5rem 0;
}

.predictions-container {
    padding: 1.5rem;
    margin: 1rem 0 2rem 0;
    max-width: 1000px;
    /* background: transparent; */
    box-shadow: none;
    border: 1px solid var(--border-color);
}

.prediction-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.1rem;
}
.prediction-img-link {
    flex-shrink: 0;
}
.prediction-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    background: var(--secondary-dark);
}
.prediction-name {
    width: 80px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.prediction-bar-container {
    flex-grow: 1;
    position: relative;
    height: 14px;
    background: rgba(0,0,0,0.3);
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.05);
    min-width: 40px;
}
.prediction-bar-fill {
    position: absolute;
    height: 100%;
    background: var(--accent-orange);
    opacity: 0.8;
    border-radius: 7px;
}
.prediction-bar-median {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 3px;
    background: var(--accent-yellow);
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.8);
    transform: translateX(-50%);
}
.prediction-stats {
    width: 75px;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.prediction-pct-main {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 1.3rem;
    line-height: 1;
}
.prediction-pct-range {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.2;
    margin-top: 0.2rem;
}

/* Dumbbell Chart */
.show-only-live .prediction-row:not(.is-live) {
    display: none !important;
}
.show-only-live .dumbbell-row:not(.is-live) {
    display: none !important;
}
.dumbbell-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.1rem;
}
.dumbbell-img-link {
    flex-shrink: 0;
}
.dumbbell-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--secondary-dark);
}
.dumbbell-name {
    width: 80px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.dumbbell-bar-container {
    flex-grow: 1;
    position: relative;
    height: 16px;
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    transform: translateY(-50%);
    min-width: 40px;
    margin: 0 10px;
}
.dumbbell-line {
    position: absolute;
    height: 6px;
    border-radius: 2px;
    top: 50%;
    transform: translateY(50%);
    opacity: 0.8;
}
.dumbbell-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, 0%);
    box-sizing: border-box;
}
/* Larger circle carrying the expected value inside it. Offset so its centre
   lines up with the small observed dot's. */
.dumbbell-dot.exp-dot {
    width: 25px;
    height: 25px;
    transform: translate(-50%, calc(-50% + 7px));
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-dark);
    border: 2px solid var(--text-secondary);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1;
    z-index: 2;
}
.dumbbell-dot.obs-dot {
    z-index: 1;
}
.dumbbell-val {
    position: absolute;
    bottom: calc(50% + 2px);
    transform: translateX(-50%);
    font-size: 0.8rem;
    line-height: 1;
    font-weight: bold;
    text-shadow: 
        1px 1px 0 var(--secondary-dark),
        -1px -1px 0 var(--secondary-dark),
        1px -1px 0 var(--secondary-dark),
        -1px 1px 0 var(--secondary-dark);
    z-index: 3;
}
.dumbbell-val.exp-val {
    color: var(--text-secondary);
}
.dumbbell-stats {
    width: 58px;
    text-align: right;
    flex-shrink: 0;
    font-weight: bold;
    font-size: 1rem;
}

.axis-tick {
    position: absolute;
    bottom: 5px;
    transform: translateX(-50%);
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1;
}
.axis-tick::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 1px;
    height: 5px;
    background-color: var(--text-secondary);
}

.challenge-card, .vote-card {
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.challenge-card:hover, .vote-card:hover {
    border-color: var(--accent-orange);
}

.challenge-card.collapsed .challenge-content, .vote-card.collapsed .vote-content {
    display: none;
}

.challenge-card.collapsed .chevron-icon, .vote-card.collapsed .chevron-icon {
    transform: rotate(0deg);
}

.challenge-card:not(.collapsed) .chevron-icon, .vote-card:not(.collapsed) .chevron-icon {
    transform: rotate(180deg);
}

.challenge-header, .vote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
    user-select: none;
}

.challenge-header:hover, .vote-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.challenge-header-main, .vote-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.challenge-title, .vote-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
}

.challenge-subtext, .vote-subtext {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
}

.challenge-badges, .vote-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.challenge-badge, .vote-badge {
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--border-color);
    background-color: var(--primary-dark);
    color: var(--text-secondary);
}

.chevron-icon {
    color: var(--text-secondary);
    transition: transform 0.3s ease;
    margin-left: 0.5rem;
    font-size: 1rem;
}

.challenge-content, .vote-content {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: rgba(22, 27, 34, 0.3);
}

.challenge-info-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.challenge-info-label {
    font-weight: bold;
    color: var(--accent-orange);
    width: 100px;
    flex-shrink: 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.challenge-info-data {
    color: var(--text-primary);
    flex-grow: 1;
    font-size: 0.95rem;
}

/* Challenge history winners: a small round photo and name per winner,
   grouped under a tribe pill for tribal challenges. */
.sn-chw-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.9rem;
}

.sn-chw-group + .sn-chw-group {
    margin-top: 0.6rem;
}

.sn-chw-tribe {
    font-size: 0.75rem;
    padding: 0.15rem 0.6rem;
}

.sn-chw {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
}

a.sn-chw:hover {
    color: var(--accent-orange);
}

.sn-chw-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background: var(--primary-dark);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    /* Stay a row: title left, chevron right. Challenge badges drop to a
       second line, right-aligned, only when they don't fit beside it. */
    .challenge-header, .vote-header {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 0.75rem;
        padding: 0.6rem 0.9rem;
    }
    .challenge-header-main, .vote-header-main {
        flex: 1 1 200px;
        min-width: 0;
    }
    .challenge-badges, .vote-badges {
        margin-left: auto;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .challenge-info-row {
        flex-direction: column;
        gap: 0.3rem;
    }
    .challenge-info-label {
        width: auto;
    }
}

/* Voted With Component Styles */
.voted-with-container {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    max-width: 100%;
    box-sizing: border-box;
}

.voted-with-container.show {
    opacity: 1;
    transform: translateY(0);
}

.voted-with-image-wrapper {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.voted-with-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: drop-shadow(0 10px 15px rgba(240, 124, 58, 0.3));
    border-radius: 8px;
}

.voted-with-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--accent-orange);
    margin-top: 1rem;
    text-align: center;
    line-height: 1.1;
}

.voted-with-columns {
    flex-grow: 1;
    display: flex;
    gap: 1rem;
    /* background: var(--secondary-dark); */
    background:transparent;
    border: 0px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.voted-with-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 160px;
}

.voted-with-col-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--accent-orange);
    text-align: center;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
    width: 100%;
    margin: 0;
}

.voted-with-castaway {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--primary-dark);
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
}

.voted-with-castaway:hover {
    border-color: var(--accent-orange);
    transform: translateX(5px);
}

.voted-with-castaway img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--accent-orange);
}

.voted-with-castaway span {
    font-size: 0.85rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .voted-with-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .voted-with-image-wrapper {
        width: 150px;
    }
    .voted-with-columns {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        overflow-x: hidden;
    }
    .voted-with-col {
        min-width: 100%;
    }
}

.score-positive {
    color: #4CAF50;
    font-weight: bold;
}

.score-negative {
    color: #F44336;
    font-weight: bold;
}

.score-neutral {
    color: inherit;
}

/* Loading Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-dark);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid var(--border-color);
    border-top-color: var(--accent-orange);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: var(--accent-orange);
    font-family: var(--font-heading);
    font-size: 1.8rem;
    letter-spacing: 2px;
    animation: pulse-text 1.5s infinite;
}

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

/* Vote buttons under threat level */
.vote-container {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.vote-btn {
    background: var(--primary-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    min-width: 56px;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.vote-btn i { font-size: 1rem; }
.vote-btn .vote-count { font-weight: 700; color: var(--text-primary); margin-left: 6px; }
.vote-btn.active { border-color: var(--accent-orange); color: var(--accent-orange); transform: scale(1.05); }
.vote-btn.up.active { box-shadow: 0 6px 14px rgba(240,124,58,0.18); }
.vote-btn.down.active { box-shadow: 0 6px 14px rgba(120,120,240,0.08); }

@media (max-width: 768px) {
    .vote-btn { padding: 6px 8px; min-width: 48px; font-size: 0.85rem; }
    .vote-container { gap: 6px; }
}

/* Share Button */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}

.share-btn:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.share-btn.copied {
    border-color: #2ecc71;
    color: #2ecc71;
}

/* Castaway Personality Test (game) */
.pt-chart-card {
    box-sizing: border-box;
    max-width: 900px;
    margin: 2rem auto 0 auto;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 2rem;
}

.pt-chart-header {
    margin-bottom: 1rem;
}

.pt-chart-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--accent-orange);
    transition: opacity 0.2s ease;
}

.pt-chart-sample {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.pt-chart-wrapper {
    position: relative;
    height: 140px;
}

@media (max-width: 600px) {
    .pt-chart-card {
        padding: 1.25rem 1.25rem;
    }
    .pt-chart-title {
        font-size: 1.05rem;
    }
}

.pt-guide {
    box-sizing: border-box;
    max-width: 900px;
    margin: 2rem auto 0 auto;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 2rem;
}

.pt-guide-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--accent-orange);
    margin-bottom: 1rem;
}

.pt-guide-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.pt-guide-list li {
    position: relative;
    padding-left: 1.1rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.pt-guide-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-orange);
}

.pt-guide-list li strong {
    color: var(--text-primary);
}

.pt-guide-letter {
    color: var(--text-primary);
    font-weight: 600;
}

.pt-guide-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-color);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-orange);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pt-guide-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .pt-guide {
        padding: 1.25rem 1.25rem;
    }
}

.pt-streak-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 2rem auto;
}

.pt-streak-stat {
    flex: 1 1 140px;
    max-width: 170px;
    text-align: center;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 0.5rem;
}

.pt-streak-value {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    color: var(--accent-orange);
    line-height: 1;
}

.pt-streak-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

/* Card: image left (spotlight-card style), controls right */
.pt-game-card {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.pt-castaway-image-wrap {
    width: 300px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background-color: var(--primary-dark);
}

.pt-castaway-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.pt-body {
    flex: 1;
    min-width: 0;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pt-castaway-name {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}

.pt-castaway-descriptors {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--accent-orange);
    margin: 0.35rem 0 0 0;
    min-height: 1.2em;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.pt-castaway-descriptors.is-visible {
    opacity: 1;
}

.pt-castaway-meta {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0.4rem 0 0 0;
}

.pt-castaway-name-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pt-castaway-name-link:hover {
    color: var(--accent-orange);
}

.pt-axes {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    margin-top: 1.75rem;
}

.mbti-axis {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.mbti-axis.is-locked {
    opacity: 0.35;
}

.mbti-axis-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.mbti-axis-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Minimalist segmented control */
.mbti-segmented {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.mbti-segment-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: var(--accent-orange);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, background-color 0.2s ease;
}

.mbti-axis.flicked-right .mbti-segment-indicator {
    transform: translateX(100%);
}

.mbti-axis.flicked-left .mbti-segment-indicator,
.mbti-axis.flicked-right .mbti-segment-indicator {
    opacity: 1;
}

.mbti-axis.is-correct .mbti-segment-indicator {
    background-color: #2ecc71;
}

.mbti-axis.is-incorrect .mbti-segment-indicator {
    background-color: #e74c3c;
}

.mbti-segment {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.7rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.mbti-segment + .mbti-segment {
    border-left: 1px solid var(--border-color);
}

.mbti-segment-letter {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1;
}

.mbti-axis.is-active .mbti-segment:hover:not(:disabled) {
    color: var(--text-primary);
}

.mbti-segment:disabled {
    cursor: default;
}

.mbti-segment.is-picked {
    color: var(--primary-dark);
}

.mbti-axis.is-incorrect .mbti-segment.is-correct-answer {
    color: #2ecc71;
}

.mbti-axis-icon {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    font-size: 1.15rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.mbti-axis-icon i {
    display: none;
}

.mbti-axis.is-correct .mbti-axis-icon {
    opacity: 1;
    transform: scale(1);
    color: #2ecc71;
}

.mbti-axis.is-correct .mbti-axis-icon .fa-check {
    display: inline;
}

.mbti-axis.is-incorrect .mbti-axis-icon {
    opacity: 1;
    transform: scale(1);
    color: #e74c3c;
}

.mbti-axis.is-incorrect .mbti-axis-icon .fa-xmark {
    display: inline;
}

.pt-result-banner {
    display: none;
    text-align: center;
    margin-top: 1.5rem;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    animation: ptBannerFadeIn 0.3s ease;
}

.pt-result-banner.is-visible {
    display: block;
}

.pt-result-banner.is-success {
    background-color: rgba(46, 204, 113, 0.1);
    border: 1px solid #2ecc71;
    color: #2ecc71;
}

.pt-result-banner.is-fail {
    background-color: rgba(231, 76, 60, 0.1);
    border: 1px solid #e74c3c;
    color: #e74c3c;
}

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

@media (max-width: 768px) {
    .pt-game-card {
        flex-direction: column;
    }
    .pt-castaway-image-wrap {
        width: 100%;
        height: 220px;
    }
    .pt-body {
        padding: 1.5rem;
    }
}

@media (max-width: 600px) {
    .pt-streak-bar {
        gap: 0.75rem;
    }
    .mbti-segment {
        font-size: 0.8rem;
        padding: 0.6rem 0.4rem;
    }
}

/* Achievement icons in castaway profile header */
.header-achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}
.header-achievements i {
    font-size: 1.1rem;
    color: var(--accent-yellow);
    text-shadow: 0 0 8px var(--accent-yellow);
}

/* Shared card-grid leaderboard style — used by First Boots, RESI Awards, etc. */
.stat-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(240, 124, 58, 0.2);
    border-color: var(--accent-orange);
}

.stat-card-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--primary-dark);
}

.stat-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.stat-card-season-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    background-color: rgba(0, 0, 0, 0.65);
    color: var(--accent-orange);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--accent-orange);
}

.stat-card-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.stat-card-resi-count {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--accent-yellow);
    flex-shrink: 0;
}

.stat-card-resi-count i {
    font-size: 1.2rem;
}

/* Overall score, sits on its own line under the castaway's name */
.stat-card-score {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent-orange);
}

.stat-card-score i {
    font-size: 1.05rem;
}

.stat-card-body {
    padding: 1rem 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.stat-card-season-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.15;
}

.stat-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stat-card-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-card-meta i {
    color: var(--accent-orange);
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.stat-card-note {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border-color);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
    font-style: italic;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.stat-card-note i {
    color: var(--accent-orange);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .stat-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .stat-card-image-wrapper {
        aspect-ratio: 1.6 / 1;
    }
    .stat-card-resi-count {
        font-size: 1.3rem;
    }
    .stat-card-resi-count i {
        font-size: 1rem;
    }
}

/* Season Spotlight card (seasons.html — Latest Season) */
.season-spotlight-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s ease;
}

.season-spotlight-card:hover {
    background-color: var(--secondary-dark);
}

.season-spotlight-image-wrapper {
    flex-shrink: 0;
    width: 140px;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--secondary-dark);
}

.season-spotlight-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.season-spotlight-number {
    flex-shrink: 0;
    width: 3rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--accent-orange);
    opacity: 0.55;
}

.season-spotlight-main {
    flex: 1;
    min-width: 0;
}

.season-spotlight-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.season-spotlight-desc {
    margin: 0.2rem 0 0.6rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 700px;
}

.season-spotlight-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
}

.season-spotlight-title {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--accent-orange);
    font-size: 1.6rem;
    line-height: 1.1;
}

.season-spotlight-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
}

.season-spotlight-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.season-spotlight-stat i {
    font-size: 0.8rem;
    width: 14px;
    text-align: center;
}

.season-spotlight-side {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

@media (max-width: 700px) {
    .season-spotlight-card {
        flex-wrap: wrap;
    }
    .season-spotlight-image-wrapper {
        order: -1;
        width: 100%;
        height: 160px;
        margin-bottom: 0.5rem;
    }
    .season-spotlight-side {
        width: 100%;
        margin-left: calc(3rem + 1rem);
    }
}

@media (max-width: 600px) {
    .season-spotlight-number {
        font-size: 1.8rem;
        width: 2.2rem;
    }
    .season-spotlight-title {
        font-size: 1.3rem;
    }
    .season-spotlight-side {
        margin-left: calc(2.2rem + 1rem);
    }
}

/* ==========================================================================
   Leaderboards hub (leaderboards.html) — "Explore Every Leaderboard"
   ========================================================================== */

.lb-hub-intro {
    max-width: 720px;
    margin: 0 0 2.5rem;
}

.lb-hub-intro p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
    margin: 0;
}

/* --- Overview banner: points to the Top 10 / Category Leaders page --- */

.lb-overview-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: 3rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.lb-overview-banner:hover {
    transform: translateY(-3px);
    border-color: var(--accent-orange);
}

.lb-overview-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 124, 58, 0.14);
    color: var(--accent-orange);
    font-size: 1.4rem;
}

.lb-overview-text {
    flex: 1;
    min-width: 0;
}

.lb-overview-text h3 {
    margin: 0 0 0.2rem;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-primary);
}

.lb-overview-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.lb-overview-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-orange);
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .lb-overview-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .lb-overview-cta {
        align-self: flex-start;
    }
}

.lb-category {
    margin-bottom: 4rem;
    /* clears the 70px sticky header when linked to by anchor (e.g. footer's Boots & Winners) */
    scroll-margin-top: 90px;
}

.lb-category-header {
    max-width: 700px;
    margin-bottom: 1.5rem;
}

.lb-category-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--accent-orange);
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    margin-bottom: 0.7rem;
}

.lb-category-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    text-align: left;
}

.lb-category-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

/* --- Flagship band: Scores + Achievements --- */

.lb-flagship {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1.5rem;
}

.lb-flagship-primary {
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.16), rgba(240, 124, 58, 0.03));
    border: 1px solid var(--accent-orange);
    border-radius: 14px;
    padding: 2.5rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lb-flagship-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(240, 124, 58, 0.22);
}

.lb-flagship-icon {
    font-size: 2rem;
    color: var(--accent-orange);
}

.lb-flagship-primary h3 {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.05;
}

.lb-flagship-primary p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.lb-flagship-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-orange);
    font-weight: bold;
    font-family: var(--font-body);
    margin-top: 0.5rem;
}

.lb-flagship-secondary {
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 2rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.6rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.lb-flagship-secondary:hover {
    transform: translateY(-4px);
    border-color: var(--accent-purple);
}

.lb-flagship-secondary > i {
    font-size: 1.6rem;
    color: var(--accent-purple);
}

.lb-flagship-secondary h3 {
    font-family: var(--font-heading);
    font-size: 1.7rem;
    margin: 0;
}

.lb-flagship-secondary p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.55;
}

.lb-flagship-secondary .lb-link-cta {
    color: var(--accent-purple);
    font-weight: bold;
    font-size: 0.85rem;
}

@media (max-width: 800px) {
    .lb-flagship {
        grid-template-columns: 1fr;
    }
}

/* --- Row-link list: game mechanics --- */

.lb-row-list {
    display: flex;
    flex-direction: column;
}

.lb-row-link {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 0.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.lb-row-link:last-child {
    border-bottom: none;
}

.lb-row-link:hover {
    background-color: var(--secondary-dark);
    padding-left: 0.75rem;
}

.lb-row-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 124, 58, 0.12);
    color: var(--accent-orange);
    font-size: 1.2rem;
}

.lb-row-text {
    flex: 1;
    min-width: 0;
}

.lb-row-text h4 {
    margin: 0 0 0.2rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--text-primary);
    font-weight: normal;
    letter-spacing: 0.3px;
}

.lb-row-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.lb-row-arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.2s ease, color 0.2s ease;
}

.lb-row-link:hover .lb-row-arrow {
    color: var(--accent-orange);
    transform: translateX(4px);
}

/* --- Timeline: story of a season --- */

.lb-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 1rem;
}

.lb-timeline::before {
    content: '';
    position: absolute;
    top: 33px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: var(--border-color);
    z-index: 0;
}

.lb-timeline-node {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 100px;
    text-align: center;
}

.lb-timeline-dot {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--secondary-dark);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--text-secondary);
    transition: all 0.25s ease;
}

.lb-timeline-node:hover .lb-timeline-dot {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    transform: scale(1.08);
    background: rgba(240, 124, 58, 0.1);
}

.lb-timeline-node h4 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--text-primary);
    font-weight: normal;
}

.lb-timeline-node p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 700px) {
    .lb-timeline {
        flex-wrap: wrap;
        row-gap: 2rem;
        justify-content: center;
    }
    .lb-timeline::before {
        display: none;
    }
    .lb-timeline-node {
        flex: 0 0 40%;
    }
}

/* --- Stat tile row: record books --- */

.lb-stat-tile-row {
    display: grid;
    /* auto-fit rather than a fixed pair, so the row holds three tiles on a wide
       display and reflows instead of leaving a hole */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.lb-stat-tile {
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 2rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.lb-stat-tile:hover {
    transform: translateY(-4px);
    border-color: var(--accent-yellow);
}

.lb-stat-tile-icon {
    flex-shrink: 0;
    font-size: 2.2rem;
    color: var(--accent-yellow);
    line-height: 1;
}

.lb-stat-tile h3 {
    margin: 0 0 0.4rem;
    font-family: var(--font-heading);
    font-size: 1.7rem;
}

.lb-stat-tile p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .lb-stat-tile-row {
        grid-template-columns: 1fr;
    }
}

/* --- Split banner: ranked by reception --- */

.lb-split-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.lb-split-half {
    padding: 2.25rem 2rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: background-color 0.2s ease;
}

.lb-split-half:hover {
    background-color: var(--secondary-dark);
}

.lb-split-half:first-child {
    border-right: 1px solid var(--border-color);
}

.lb-split-half > i {
    font-size: 1.6rem;
    color: var(--accent-purple);
}

.lb-split-half h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.6rem;
}

.lb-split-half p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .lb-split-banner {
        grid-template-columns: 1fr;
    }
    .lb-split-half:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

/* ==========================================================================
   Fun Stuff hub (fun-stuff.html) — same idea as the leaderboards hub above,
   in the site's secondary accent colour so it reads as its own section.
   ========================================================================== */

.fs-category {
    margin-bottom: 4rem;
}

.fs-category-header {
    max-width: 700px;
    margin-bottom: 1.5rem;
}

.fs-category-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--accent-purple);
    color: var(--primary-dark);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    margin-bottom: 0.7rem;
}

.fs-category-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    text-align: left;
}

.fs-category-desc {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
}

/* --- Banner: single-item feature (Map, Birthdays) --- */

.fs-banner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: 3rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.fs-banner:hover {
    transform: translateY(-3px);
    border-color: var(--accent-purple);
}

.fs-banner-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(163, 113, 247, 0.14);
    color: var(--accent-purple);
    font-size: 1.4rem;
}

.fs-banner-text {
    flex: 1;
    min-width: 0;
}

.fs-banner-text h3 {
    margin: 0 0 0.2rem;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    color: var(--text-primary);
}

.fs-banner-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.fs-banner-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-purple);
    font-weight: bold;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Larger treatment for the flagship banner (the map) */
.fs-banner-lg {
    background: linear-gradient(135deg, rgba(163, 113, 247, 0.16), rgba(163, 113, 247, 0.03));
    border-color: var(--accent-purple);
    padding: 2.25rem 2.5rem;
}

.fs-banner-lg .fs-banner-icon {
    width: 64px;
    height: 64px;
    font-size: 1.8rem;
}

.fs-banner-lg .fs-banner-text h3 {
    font-size: 2rem;
}

.fs-banner-lg .fs-banner-text p {
    font-size: 1rem;
    max-width: 560px;
}

@media (max-width: 600px) {
    .fs-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .fs-banner-cta {
        align-self: flex-start;
    }
}

/* --- Split banner: two-up feature (Personality Test / Birthday Twins) --- */

.fs-split-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.fs-split-half {
    padding: 2.25rem 2rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: background-color 0.2s ease;
}

.fs-split-half:hover {
    background-color: var(--secondary-dark);
}

.fs-split-half:first-child {
    border-right: 1px solid var(--border-color);
}

.fs-split-half > i {
    font-size: 1.6rem;
    color: var(--accent-purple);
}

.fs-split-half h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.6rem;
}

.fs-split-half p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

@media (max-width: 700px) {
    .fs-split-banner {
        grid-template-columns: 1fr;
    }
    .fs-split-half:first-child {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
}

/* --- Row-link list: Polls / Your Top 10 --- */

.fs-row-list {
    display: flex;
    flex-direction: column;
}

.fs-row-link {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 0.25rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.fs-row-link:last-child {
    border-bottom: none;
}

.fs-row-link:hover {
    background-color: var(--secondary-dark);
    padding-left: 0.75rem;
}

.fs-row-icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(163, 113, 247, 0.14);
    color: var(--accent-purple);
    font-size: 1.2rem;
}

.fs-row-text {
    flex: 1;
    min-width: 0;
}

.fs-row-text h4 {
    margin: 0 0 0.2rem;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--text-primary);
    font-weight: normal;
    letter-spacing: 0.3px;
}

.fs-row-text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.fs-row-arrow {
    flex-shrink: 0;
    color: var(--text-secondary);
    transition: transform 0.2s ease, color 0.2s ease;
}

.fs-row-link:hover .fs-row-arrow {
    color: var(--accent-purple);
    transform: translateX(4px);
}

/* Link-out icon on a mini category-leader header (index.html / leaderboard/overview.html) */
.mini-lb-header-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.2s ease;
}

.mini-lb-header-link:hover {
    color: var(--accent-orange);
}

/* ==========================================================================
   Homepage "Explore the Database" bento grid (index.html)
   4 columns wide; Leaderboards and Analysis are called out as double-width
   feature tiles, everything else sits at standard size around them.
   ========================================================================== */

.home-explore-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.home-explore-tile {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.home-explore-tile:hover {
    transform: translateY(-4px);
    border-color: var(--accent-orange);
    box-shadow: 0 12px 32px rgba(240, 124, 58, 0.18);
}

.home-explore-tile > * {
    position: relative;
    z-index: 1;
}

.home-explore-icon {
    font-size: 2.75rem;
    color: var(--accent-orange);
    line-height: 1;
    --fa-primary-color: var(--accent-orange);
    --fa-secondary-color: var(--accent-orange);
}

.home-explore-tile h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.9rem;
    color: var(--text-primary);
    font-weight: normal;
}

.home-explore-tile p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 420px;
}

.home-explore-bg-icon {
    position: absolute;
    right: -0.5rem;
    bottom: -1rem;
    font-size: 7rem;
    color: var(--accent-orange);
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}

.home-explore-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--accent-orange);
    font-weight: bold;
    font-size: 0.95rem;
}

/* Double-width feature tiles: Leaderboards + Analysis */
.home-explore-tile--lg {
    grid-column: span 2;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.14), rgba(240, 124, 58, 0.02));
    border-color: rgba(240, 124, 58, 0.35);
}

.home-explore-tile--lg .home-explore-icon {
    font-size: 3.5rem;
}

.home-explore-tile--lg h3 {
    font-size: 2.4rem;
}

.home-explore-tile--lg p {
    font-size: 1.05rem;
    max-width: 520px;
}

@media (max-width: 900px) {
    .home-explore-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .home-explore-grid {
        grid-template-columns: 1fr;
    }
    .home-explore-tile--lg {
        grid-column: span 1;
    }
    .home-explore-bg-icon {
        display: none;
    }
}

/* ==========================================================================
   Castaway profile — measured-column layout
   Replaces the old full-bleed .profile-grid-4col wall of cards. Content is
   held to a readable column, grouped into a handful of jump-linked sections,
   and separated by typography and space rather than by boxes.
   ========================================================================== */

.cw-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 4rem 0;
    box-sizing: border-box;
}

/* --- Hero ---------------------------------------------------------------- */

.cw-hero {
    display: flex;
    align-items: stretch;
    min-height: 300px;
    margin: 1.5rem 0 1.25rem 0;
    padding: 0;
    position: static;
    z-index: auto;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.cw-hero-portrait {
    position: relative;
    width: 200px;
    flex-shrink: 0;
    overflow: hidden;
    background-color: var(--primary-dark);
    border-right: 1px solid var(--border-color);
}

.cw-hero-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    /* Was 1.15. Eased back to match the FIGURE_ZOOM castaway.js applies on the
       measured path, so both routes frame the portrait the same way. */
    transform: scale(1);
    transform-origin: top center;
}

/* castaway.js measured the cut-out's alpha bounds and is positioning the image
   itself, so the cover/scale fallback above must get out of the way */
.cw-hero-portrait img.cw-trimmed {
    position: absolute;
    max-width: none;
    object-fit: fill;
    transform: none;
}

/* --- Full-size portrait viewer ------------------------------------------- */

/* Covers the portrait so a click anywhere on it opens the viewer. The icon
   only resolves on hover/focus so it doesn't sit over the face. */
.cw-portrait-expand {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.6rem;
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    z-index: 3;
}

.cw-portrait-expand:hover,
.cw-portrait-expand:focus-visible {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.35);
    outline: none;
}

.cw-portrait-expand i {
    font-size: 0.95rem;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 0.4rem 0.5rem;
}

/* Same hidden-by-default / .is-open contract as .vote-modal-overlay */
.cw-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 2rem;
    box-sizing: border-box;
}

.cw-lightbox.is-open {
    display: flex;
}

.cw-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    animation: modal-pop 0.2s ease;
}

.cw-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cw-lightbox-close:hover,
.cw-lightbox-close:focus-visible {
    background: var(--accent-orange);
    color: var(--primary-dark);
    outline: none;
}

.cw-hero-main {
    min-width: 0;
    flex: 1;
    padding: 1.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Career / season switcher at the top of the castaway hero. */
.cw-hero-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    /* A <nav>, so undo the site header's global nav rule: its height,
       space-between spread, max-width and auto centring. */
    height: auto;
    justify-content: flex-start;
    align-items: center;
    max-width: none;
    margin: 0 0 1rem 0;
}

/* Phones: one swipeable row rather than wrapping when there are many
   seasons. The hidden scrollbar keeps the row tidy; the cut-off pill at the
   edge shows there's more. */
@media (max-width: 768px) {
    .cw-hero-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .cw-hero-tabs::-webkit-scrollbar {
        display: none;
    }
    .cw-hero-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

.cw-hero-tab {
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: 0.5px;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.cw-hero-tab:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.cw-hero-tab.active {
    color: var(--accent-orange);
    border-color: var(--accent-orange);
    background-color: rgba(240, 124, 58, 0.15);
}

.cw-hero-main h1 {
    font-family: var(--font-heading);
    font-size: 4.4rem;
    line-height: 0.95;
    color: var(--accent-orange);
    margin: 0 0 0.6rem 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.cw-hero-meta {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.cw-hero-quote {
    font-size: 1rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}

.cw-hero-result {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-top: 0.4rem;
}

.cw-hero-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.cw-hero-row .profile-tags {
    margin: 0;
}

/* Achievement icons under the name jump to the full list further down */
.cw-hero-row .header-achievements {
    margin: 0;
}

/* --- Key stats strip ----------------------------------------------------- */

.cw-keystats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.cw-keystat {
    background-color: var(--primary-dark);
    padding: 1rem 1.2rem;
    text-align: center;
}

.cw-keystat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: var(--text-secondary);
}

.cw-keystat-value {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--text-primary);
    margin-top: 0.2rem;
}

.cw-keystat-value.accent {
    color: var(--accent-orange);
}

.cw-keystat-sub {
    font-size: 0.8rem;
    color: var(--text-secondary);
}


/* --- Timeline band ------------------------------------------------------- */

.cw-timeline-band {
    padding-top: 5.5rem;
    margin-bottom: 2.5rem;
}

.cw-timeline-band .profile-timeline {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    max-width: 100%;
    padding-block: 2rem;
}

/* --- Section jump nav ---------------------------------------------------- */

.cw-sectionnav {
    position: sticky;
    top: 70px;
    z-index: 40;
    display: flex;
    gap: 0.25rem;
    padding: 0 0.3rem 3px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    margin-bottom: 2.5rem;
}

.cw-sectionnav::-webkit-scrollbar {
    height: 4px;
}

.cw-sectionnav::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 0.6rem;
}

.cw-sectionnav::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 999px;
}

.cw-sectionnav:hover::-webkit-scrollbar-thumb {
    background-color: var(--text-secondary);
}

.cw-sectionnav a {
    flex-shrink: 0;
    padding: 0.85rem 1.1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.cw-sectionnav a:hover {
    color: var(--text-primary);
}


/* --- Sections and panels ------------------------------------------------- */

.cw-section {
    scroll-margin-top: 110px;
    padding-bottom: 3.5rem;
}

.cw-section + .cw-section {
    border-top: 1px solid var(--border-color);
    padding-top: 2.5rem;
}

.cw-section-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--text-primary);
    margin: 0 0 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.cw-section-title i {
    color: var(--accent-orange);
    font-size: 1.6rem;
}

.cw-section-intro {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
    max-width: 65ch;
}

.cw-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 3rem;
    align-items: start;
}

.cw-panel {
    min-width: 0;
}

/* Columns whose panels should end level with each other */
.cw-cols-stretch {
    align-items: stretch;
}

.cw-cols-stretch .cw-panel {
    display: flex;
    flex-direction: column;
}

/* the threat chart absorbs the slack so both panels finish at the same height */
.cw-threat-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cw-cols-stretch .cw-panel > .cw-threat-body {
    flex: 1;
}

/* Challenge proficiencies — rows spread to fill the panel so the chart ends
   level with the challenge record table beside it */
.cw-prof-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    padding: 4rem 1rem 4rem 0;
    box-sizing: border-box;
}

.cw-cols-stretch .cw-panel > .cw-prof-body {
    flex: 1;
}

.cw-prof-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cw-panel + .cw-panel-wide,
.cw-cols + .cw-panel,
.cw-cols + .cw-cols {
    margin-top: 2.5rem;
}

.cw-panel-title {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Tables sit flush in the flat layout — the panel heading already frames them */
.cw-panel .stats-table {
    margin-top: 0;
}

.cw-panel .stats-container {
    margin: 0;
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.cw-panel .achievements-container {
    margin-top: 1.5rem;
}

.cw-edit-verdict {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--accent-orange);
    text-align: left;
    margin-bottom: 1.5rem;
}

.cw-note {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 1.2rem 0 0 0;
}

.cw-empty {
    color: var(--text-secondary);
    font-style: italic;
    padding: 1.5rem 0;
    margin: 0;
}

/* Headline score — the single number most people come for */
.cw-headline-score {
    text-align: center;
    margin-bottom: 2rem;
}

.cw-headline-score .cw-keystat-label {
    margin-bottom: 0.4rem;
}

.cw-headline-score-value {
    font-family: var(--font-heading);
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-orange);
}

.cw-headline-score-value i {
    font-size: 3rem;
    margin-right: 0.7rem;
    transform: translateY(-2px);
}

/* Score relative to the best score in this version — context for a bare number */
.cw-score-meter {
    height: 6px;
    border-radius: 3px;
    background-color: var(--border-color);
    margin: 0.9rem auto 0.4rem auto;
    max-width: 260px;
    overflow: hidden;
}

.cw-score-meter-fill {
    height: 100%;
    border-radius: 3px;
}

.cw-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 900px) {
    .cw-cols {
        grid-template-columns: 1fr;
    }
    .cw-hero {
        min-height: 240px;
    }
    .cw-hero-main h1 {
        font-size: 3rem;
    }
    .cw-hero-main {
        padding: 1.5rem;
    }
    .cw-hero-portrait {
        width: 160px;
    }
    .cw-timeline-band {
        padding-top: 3.5rem;
    }
}

@media (max-width: 600px) {
    .cw-hero {
        flex-direction: column;
        min-height: 0;
    }
    .cw-hero-portrait {
        width: 100%;
        height: 300px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .cw-hero-portrait img {
        object-position: top center;
        transform: none;
    }
    .cw-hero-main h1 {
        font-size: 2.6rem;
    }
    .cw-keystat-value {
        font-size: 1.9rem;
    }
    .cw-section-title {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   Season profile — measured column, matching the castaway profile treatment.
   The slim icon sidebar is untouched; only the content column changes.
   ========================================================================== */

/* Hold the content to a readable column instead of the full display.
   Mirrors .cw-page on the castaway profile. */
.sn-page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 0 4rem 0;
    box-sizing: border-box;
}

/* Sections stack on one page and are separated by a hairline, exactly like
   .cw-section. scroll-margin-top clears the sticky site header when a sidebar
   icon jumps to a section. */
.sn-section {
    scroll-margin-top: 110px;
    padding-bottom: 3.5rem;
}

.sn-section + .sn-section,
.sn-overview + .sn-section {
    border-top: 1px solid var(--border-color);
    padding-top: 2.5rem;
}

/* A section whose data this season doesn't have — hidden along with its
   sidebar icon, so it doesn't leave a stray divider behind. */
.sn-section.is-empty {
    display: none;
}

.sn-overview {
    scroll-margin-top: 110px;
}

.sn-section-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--text-primary);
    margin: 0 0 0.4rem 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.sn-section-title i {
    color: var(--accent-orange);
    font-size: 1.6rem;
}

.sn-section-intro {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
    max-width: 65ch;
}

/* Season page voting matrix (castaway x castaway heat map) */
#voted-with-matrix-block {
    margin-top: 3rem;
}

/* First in the section, above the per-player breakdown. */
#voting-alliances-block {
    margin-bottom: 3rem;
}

/* Alliance cards can hold four or more photos, so let the photos wrap
   above the text rather than squeezing it. */
#voting-alliances .sl-body {
    flex-wrap: wrap;
}

.vw-matrix th,
.vw-matrix td {
    padding: 0;
    border-bottom: none;
}

.vw-matrix .vw-matrix-corner {
    border-bottom: 2px solid var(--border-color);
}

.vw-matrix-col {
    height: 110px;
    width: 34px;
    min-width: 34px;
    vertical-align: bottom;
    padding-bottom: 0.5rem !important;
    cursor: pointer;
}

.vw-matrix-col span {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 0.8rem;
}

.vw-matrix-row {
    padding: 0 0.75rem !important;
    white-space: nowrap;
    font-size: 0.85rem;
    cursor: pointer;
}

.vw-matrix-col:hover,
.vw-matrix-row:hover {
    color: var(--accent-orange);
}

.vw-matrix-cell,
.vw-matrix-self {
    width: 34px;
    height: 34px;
    min-width: 34px;
    text-align: center !important;
    font-size: 0.8rem;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.vw-matrix-self {
    background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, 0.05) 4px 8px);
}

/* Live Players Only switch beside the Who has Voted With Whom dropdown. */
.vw-live-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1rem;
    vertical-align: middle;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Matrix view buttons: left end of the toolbar, opposite Full screen. */
.vw-matrix-views {
    margin-right: auto;
    margin-bottom: 0;
}

/* Totals sit outside the heat map: unshaded, bold, and split off by a rule.
   Only the Total column gets the extra width — the footer cells sit under the
   34px matrix columns and must not widen them. */
.vw-matrix .vw-matrix-total {
    height: 34px;
    text-align: center !important;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--accent-orange);
    background: rgba(255, 255, 255, 0.03);
}

.vw-matrix tbody .vw-matrix-total {
    min-width: 44px;
    padding: 0 0.4rem;
    border-left: 2px solid var(--border-color);
}

.vw-matrix tfoot th,
.vw-matrix tfoot td {
    border-top: 2px solid var(--border-color);
}

.vw-matrix-total-col {
    cursor: default;
    min-width: 44px;
    border-left: 2px solid var(--border-color);
}

.vw-matrix-total-col:hover,
.vw-matrix-total-label:hover {
    color: var(--text-primary);
}

.vw-matrix-total-label {
    cursor: default;
}

.vw-matrix .vw-matrix-grand {
    border-left: 2px solid var(--border-color);
    color: var(--text-primary);
}

.vw-matrix-cell:hover {
    outline: 2px solid var(--accent-orange);
    outline-offset: -2px;
}

/* Residual CPH chart: two castaway pickers side by side. */
.res-cph-pickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.res-cph-vs {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Winner Predictions cards reuse the Season Leaders grid and cards. */
.sl-grid.sn-pred-cards {
    margin-bottom: 2rem;
}

/* Season Leaders: one card per category. */
.sl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

.sl-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}

.sl-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: bold;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.sl-label i {
    color: var(--accent-orange);
    font-size: 0.85rem;
}

.sl-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.sl-avatars {
    display: flex;
    flex-shrink: 0;
}

/* Tied leaders overlap slightly so three still fit beside the text. */
.sl-avatar {
    display: block;
    border: 2px solid var(--secondary-dark);
    box-sizing: content-box;
}

.sl-avatar + .sl-avatar {
    margin-left: -14px;
}

.sl-text {
    min-width: 0;
}

.sl-value {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--accent-orange);
}

.sl-names {
    margin-top: 0.25rem;
    font-weight: bold;
    font-size: 0.95rem;
}

.sl-names a {
    color: var(--text-primary);
    text-decoration: none;
}

.sl-names a:hover {
    color: var(--accent-orange);
}

.sl-note {
    margin-top: auto;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* A category with no data yet (win probability before the final 10). */
.sl-card--pending {
    border-style: dashed;
}

.sl-pending {
    display: flex;
    align-items: center;
    flex-grow: 1;
    min-height: 60px;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    line-height: 1.1;
    color: var(--text-secondary);
}

/* Collapsed full stats table at the foot of the season page. */
.sn-details-summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    background: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.sn-details-summary::-webkit-details-marker {
    display: none;
}

.sn-details-summary:hover {
    border-color: var(--accent-orange);
}

.sn-details-summary > i:first-child {
    color: var(--accent-orange);
    font-size: 1.1rem;
}

.sn-details-chevron {
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.sn-details[open] .sn-details-chevron {
    transform: rotate(180deg);
}

.sn-details-body {
    padding-top: 1.25rem;
}

.sn-details-body .sn-section-intro {
    margin-bottom: 1rem;
}

/* Season page challenge results grid (castaway x challenge) */
.chr-table .stats-table-images {
    width: 30px;
    height: 30px;
    border: none;
}

.chr-table .stats-table-name {
    gap: 0.5rem;
    white-space: nowrap;
}

.chr-table th,
.chr-table td {
    padding: 0.2rem 0.55rem;
}

.chr-table .chr-ep,
.chr-table .chr-col {
    text-align: center;
    padding: 0.3rem 0.2rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

.chr-table .chr-ep {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}

.chr-table .chr-col {
    min-width: 28px;
    cursor: help;
}

.chr-table .chr-cell {
    padding: 0;
    width: 28px;
    min-width: 28px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Challenge style colours, shared with the category pills on the Challenge
   Details cards: Race orange, Endurance yellow, Rounds blue, Other grey. */
.chr-type-race { --chr-colour: var(--accent-orange); }
.chr-type-endurance { --chr-colour: var(--accent-yellow); }
.chr-type-rounds { --chr-colour: #33b3ff; }
.chr-type-other { --chr-colour: var(--text-secondary); }

/* Individual wins are the solid colour, tribe/team wins a faded tint. */
.chr-win-ind {
    background: var(--chr-colour, var(--accent-orange));
}

.chr-win-team {
    background: color-mix(in srgb, var(--chr-colour, var(--accent-orange)) 38%, transparent);
}

/* A bar under each column's R / I / (I/R) letter shows the style even where
   nobody's win is drawn. */
.chr-table .chr-col[class*="chr-type-"] {
    box-shadow: inset 0 -3px 0 var(--chr-colour);
}

.chr-out {
    background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255, 255, 255, 0.06) 4px 8px);
}

.chr-table .chr-total {
    text-align: center;
    font-weight: bold;
    min-width: 44px;
    background: rgba(255, 255, 255, 0.03);
}

.chr-table td.chr-total {
    color: var(--accent-orange);
}

.chr-table .chr-total-first {
    border-left: 2px solid var(--border-color);
}

.chr-legend {
    margin-bottom: 1rem;
}

.chr-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    vertical-align: middle;
}

.sn-subsection-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-primary);
    margin: 0 0 0.4rem 0;
}

/* --- Full-screen table viewer -------------------------------------------- */

.sn-table-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 0.6rem 0;
}

.sn-fullscreen-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sn-fullscreen-btn:hover,
.sn-fullscreen-btn:focus-visible {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    outline: none;
}

.sn-table-fs {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    z-index: 9999;
    flex-direction: column;
}

.sn-table-fs.is-open {
    display: flex;
}

.sn-table-fs-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.sn-table-fs-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.sn-table-fs-zoom {
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-right: auto;
}

.sn-table-fs-close {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.sn-table-fs-close:hover,
.sn-table-fs-close:focus-visible {
    background: var(--accent-orange);
    color: var(--primary-dark);
    outline: none;
}

/* The stage is the measuring box: the clone is scaled to fit inside it. */
.sn-table-fs-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
    min-height: 0;
}

/* Chart mode: the real chart card is moved in here, so it fills the stage and
   Chart.js redraws at full size. !important because the cards carry inline
   margin/max-width from their templates, which a class rule can't outrank. */
.sn-table-fs-stage.is-chart {
    align-items: stretch;
    justify-content: stretch;
}

.sn-chart-fs-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 100%;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Canvas charts flex their wrapper to fit, so they never scroll. A card
       built from HTML rows (the Castaway Edit Index) has no flexible child, so
       it scrolls instead of being clipped. */
    overflow-y: auto;
}

/* The canvas wrapper is the only part that should absorb the spare height. */
.sn-chart-fs-wrapper {
    flex: 1 1 auto;
    min-height: 0;
}

/* The card's own button is pointless once it's already full screen. */
.sn-chart-fs-card .sn-chart-fs-btn {
    display: none;
}

/* Small expand affordance in the corner of every chart card. */
.sn-chart-fs-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    background: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
    z-index: 4;
}

.sn-chart-fs-btn:hover,
.sn-chart-fs-btn:focus-visible {
    opacity: 1;
    color: var(--accent-orange);
    border-color: var(--accent-orange);
    outline: none;
}

.sn-table-fs-table {
    width: max-content;
    /* Scaling about the centre so the flex centring above stays true — a
       transform doesn't affect layout, so the unscaled box is what gets
       centred and the scaled result lands centred too. */
    transform-origin: center center;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* --- "Where the season stands" — live summary for an airing season ------- */

.sn-summary {
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.09) 0%, var(--secondary-dark) 55%);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-orange);
    border-radius: 10px;
    padding: 1.35rem 1.6rem;
    margin: 0 0 1.5rem 0;
}

.sn-summary-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin: 0 0 0.9rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sn-summary-title i {
    font-size: 1.1rem;
    color: var(--accent-orange);
}

.sn-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.sn-summary-item {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-primary);
}

.sn-summary-item > i {
    flex: 0 0 1.1rem;
    font-size: 0.85rem;
    text-align: center;
    position: relative;
    top: 0.1rem;
    color: var(--accent-orange);
}

.sn-summary-name {
    color: var(--text-primary);
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid rgba(240, 124, 58, 0.45);
}

.sn-summary-name:hover {
    color: var(--accent-orange);
    border-bottom-color: var(--accent-orange);
}

/* Placeholder for a section whose data isn't available yet — used while a
   season is still airing and the model hasn't run. Deliberately quiet: it
   explains the gap without competing with the sections that do have data. */
.sn-coming-soon {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    background: var(--secondary-dark);
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
}

.sn-coming-soon > i {
    flex: 0 0 auto;
    font-size: 1.6rem;
    color: var(--accent-orange);
    line-height: 1.2;
}

.sn-coming-soon strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin-bottom: 0.3rem;
}

.sn-coming-soon span {
    display: block;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 65ch;
}

/* KPI card grid that spans the full section width rather than sitting in one
   half of a two-column split. --4 is a fixed four-across so eight cards land
   as two tidy rows; it collapses to two, then one, on narrower screens. */
.sn-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1.5rem;
    align-content: start;
    margin-bottom: 2rem;
}

.sn-kpi-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The Edit's CPH cards match the Season Leaders cards (.sl-card). */
.sn-kpi-grid--4 .profile-col-card {
    background: var(--secondary-dark);
    border-radius: 10px;
}

@media (max-width: 900px) {
    .sn-kpi-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* The Edit's four CPH cards stay 2x2 on phones rather than stacking four
   tall cards; tighter padding (over the cards' inline 1.5rem) makes room. */
@media (max-width: 520px) {
    .sn-kpi-grid--4 {
        gap: 0.75rem;
    }
    .sn-kpi-grid--4 .profile-col-card {
        padding: 1rem 0.5rem !important;
    }
}

/* --- Overview hero — same plate as .cw-hero on the castaway profile ------- */

.sn-hero {
    position: relative;
    top: auto;
    z-index: auto;
    overflow: hidden;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.75rem 2.25rem 2rem 2.25rem;
    margin: 1.5rem 0 1.25rem 0;
    /* Text on the left, season cast photo on the right. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    gap: 2rem;
    align-items: start;
}

/* the oversized season number, held behind the text.
   Anchored left rather than right so the cast photo doesn't cover it. */
.sn-hero-number {
    position: absolute;
    top: -1.5rem;
    left: 1.25rem;
    font-family: var(--font-heading);
    font-size: 11rem;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
}

/* --- Season cast photo ---------------------------------------------------- */

.sn-hero-cast {
    position: relative;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-dark);
}

.sn-hero-cast-img {
    display: block;
    width: 100%;
    height: auto;
    /* Source photos are 3:2 — reserve the box so the hero doesn't reflow
       once the image decodes. */
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center;
}

/* Shown only when no cast photo exists for the season, so the hero keeps its
   shape instead of collapsing to a ragged single column. */
.sn-hero-cast-empty {
    display: none;
    aspect-ratio: 3 / 2;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 700;
}

.sn-hero-cast-empty i {
    font-size: 2rem;
    opacity: 0.35;
}

.sn-hero-cast.is-missing .sn-hero-cast-empty {
    display: flex;
}

.sn-hero-body {
    position: relative;
    z-index: 1;
}

.sn-hero-kicker {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.sn-hero-title {
    font-family: var(--font-heading);
    font-size: 3.6rem;
    line-height: 0.95;
    color: var(--accent-orange);
    margin: 0 0 0.5rem 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.sn-hero-location {
    font-size: 1.2rem;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
}

.sn-hero-location i {
    color: var(--accent-purple);
    margin-right: 0.5rem;
}

.sn-hero-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.sn-hero-dates i {
    margin-right: 0.4rem;
}

.sn-hero-dates strong {
    color: var(--text-primary);
    font-weight: 700;
}

.sn-hero-desc {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 75ch;
    margin: 0;
}

/* --- Info section KPI cards (Winner, Average Age, ...) ------------------- */

.sn-info-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Phones: two cards a row instead of one. The cards' padding and type are
   set inline, so these step them down with !important to fit ~165px. */
@media (max-width: 600px) {
    .sn-info-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .sn-info-kpis .profile-col-card {
        padding: 1rem 0.6rem !important;
    }
    .sn-info-kpis .profile-col-card > div > div:nth-child(1) {
        font-size: 0.72rem !important;
        letter-spacing: 0.5px !important;
    }
    .sn-info-kpis .profile-col-card > div > div:nth-child(2) {
        font-size: 1.7rem !important;
        overflow-wrap: anywhere;
    }
    .sn-info-kpis .profile-col-card > div > div:nth-child(3) {
        font-size: 0.75rem !important;
    }
    .sn-info-kpis .profile-col-card > i {
        font-size: 4.5rem !important;
    }
}

/* --- Facts strip — the joined hairline treatment from .cw-keystats -------- */

.sn-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background-color: var(--border-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.sn-fact {
    background-color: var(--primary-dark);
    padding: 1rem 1.2rem;
    text-align: center;
}

.sn-fact-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    color: var(--text-secondary);
}

.sn-fact-value {
    font-family: var(--font-heading);
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--text-primary);
    margin-top: 0.2rem;
}

@media (max-width: 900px) {
    /* Stack the cast photo under the text before the two columns get too narrow
       to read. The photo leads so it isn't stranded below the description. */
    .sn-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .sn-hero-cast {
        grid-row: 1;
        max-width: 420px;
    }
}

@media (max-width: 768px) {
    .sn-hero {
        padding: 1.5rem;
    }
    .sn-hero-title {
        font-size: 2.6rem;
    }
    .sn-hero-number {
        font-size: 7rem;
        top: -0.75rem;
        left: 0.75rem;
    }
    .sn-fact-value {
        font-size: 1.9rem;
    }
}

/* Chart cards on the season page sit on black, matching the stat plates */
.chart-card {
    background-color: var(--primary-dark);
}

/* The season page's charts (The Edit, Winner Predictions & Jury Alignment,
   Advantage Movement) use the standard card surface, like the voting matrix
   and the other tables, so they sit with the page rather than as black
   blocks. The KPI cards stay dark. A class on the card rather than a section
   selector, because full screen moves the card out of its section into the
   viewer. */
.chart-card.chart-card--light {
    background-color: var(--secondary-dark);
}


/* ==========================================================================
   Challenges — the browse list (challenges.html) and the single challenge
   profile (challenge.html). Reuses the .cw-* profile layout and the
   .spotlight-* card, adding only what is specific to a challenge.
   ========================================================================== */

main.challenges-page {
    max-width: 1240px;
}

/* --- Challenge art ------------------------------------------------------- */
/* Only a handful of iconic challenges have a photo in images/challenges, so the
   fallback tile has to look deliberate rather than broken: a dark panel with
   the icon for the winning condition of that challenge. */

.ch-art {
    position: relative;
    background-color: var(--primary-dark);
    overflow: hidden;
}

/* The image sits on top of the fallback tile; if the file does not exist the
   img element removes itself on error and the tile below is revealed. */
.ch-art img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ch-art-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 28% 22%, rgba(240, 124, 58, 0.18) 0%, transparent 62%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 10px, transparent 10px 20px),
        var(--primary-dark);
}

.ch-art-fallback i {
    font-size: 3.6rem;
    color: var(--accent-orange);
    opacity: 0.6;
}

/* --- Spotlight variant (landscape art instead of a portrait column) ------ */

.spotlight-card--challenge .spotlight-image-wrapper {
    width: 420px;
}

.spotlight-card--challenge .spotlight-desc {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 1.25rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    .spotlight-card--challenge .spotlight-image-wrapper {
        width: 100%;
        height: 200px;
    }
}

/* --- Chips (winning conditions and challenge labels) --------------------- */

.ch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ch-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background-color: rgba(201, 209, 217, 0.08);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.ch-chip i {
    font-size: 0.78rem;
}

.ch-chip--race {
    color: var(--accent-orange);
    border-color: rgba(240, 124, 58, 0.5);
    background-color: rgba(240, 124, 58, 0.1);
}

.ch-chip--endurance {
    color: var(--accent-purple);
    border-color: rgba(163, 113, 247, 0.5);
    background-color: rgba(163, 113, 247, 0.1);
}

.ch-chip--rounds {
    color: var(--accent-yellow);
    border-color: rgba(241, 196, 15, 0.5);
    background-color: rgba(241, 196, 15, 0.1);
}

/* --- List table ---------------------------------------------------------- */
/* Column widths live here rather than inline on the <th> so the mobile rules
   further down can override them. The id is shared with the Challenge
   Performance leaderboard, so every rule is scoped to this page. */

.challenges-page #challenges-table th.sticky-col[data-sort="challenge_name"] {
    min-width: 240px;
}

.challenges-page #challenges-table th[data-sort="conditions"] {
    min-width: 150px;
}

.ch-table-name {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 700;
}

.ch-table-name:hover {
    color: var(--accent-orange);
}

.ch-table-desc {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ch-version-badge {
    display: inline-block;
    min-width: 2.2rem;
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-secondary);
    background-color: rgba(201, 209, 217, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0 0.35rem;
}

.ch-count-zero {
    color: var(--border-color);
}

/* --- Profile hero -------------------------------------------------------- */

.ch-hero .ch-art {
    width: 400px;
    flex-shrink: 0;
}

.ch-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-orange);
    text-decoration: none;
    margin-bottom: 0.8rem;
}

.ch-hero-kicker:hover {
    color: var(--text-primary);
}

/* --- Attribute meters ---------------------------------------------------- */

.ch-attr-row {
    display: grid;
    grid-template-columns: 8.5rem 1fr 5.5rem;
    align-items: center;
    gap: 0.9rem;
    padding: 0.45rem 0;
}

.ch-attr-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}

.ch-attr-name i {
    color: var(--accent-orange);
    width: 1.1rem;
    text-align: center;
}

.ch-attr-meter {
    height: 8px;
    border-radius: 4px;
    background-color: rgba(201, 209, 217, 0.08);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.ch-attr-fill {
    height: 100%;
    border-radius: 4px;
    background-color: var(--accent-orange);
}

.ch-attr-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

.ch-attr-row.is-off .ch-attr-name,
.ch-attr-row.is-off .ch-attr-name i {
    color: var(--text-secondary);
    opacity: 0.55;
}

/* --- Winners by season --------------------------------------------------- */

.ch-seasons {
    display: flex;
    flex-direction: column;
}

.ch-season {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: 0.9rem 0;
    border-top: 1px solid var(--border-color);
}

.ch-season:first-child {
    border-top: none;
}

.ch-season-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ch-season-num {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent-orange);
    text-decoration: none;
}

.ch-season-num:hover {
    color: var(--text-primary);
}

.ch-season-name {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.ch-winners {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ch-winner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: 6px;
    padding: 0.3rem 0.7rem 0.3rem 0.4rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ch-winner:hover {
    background-color: var(--secondary-dark);
    color: var(--accent-orange);
}

.ch-winner-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    background-color: var(--secondary-dark);
    flex-shrink: 0;
}

.ch-winner-tribe {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.ch-winner-mult {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-orange);
}

/* --- Other versions ------------------------------------------------------ */

.ch-versions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.ch-version-card {
    display: block;
    background-color: var(--secondary-dark);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ch-version-card:hover {
    border-color: var(--accent-orange);
    transform: translateY(-2px);
}

.ch-version-card-version {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--accent-orange);
}

.ch-version-card-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

/* The filter row collapses behind the filter button on narrow screens, matching
   the castaways and polls pages (both of which key this off the element id). */
@media (max-width: 768px) {
    #challenge-filters {
        display: none !important;
    }
    #challenge-filters.show {
        display: flex !important;
    }

    /* Give the count columns room: the challenge column gets a lot narrower and
       the description clamps to a short lead-in instead of forcing 42ch. */
    .challenges-page #challenges-table th.sticky-col[data-sort="challenge_name"] {
        min-width: 120px;
    }
    .challenges-page #challenges-table th[data-sort="conditions"] {
        min-width: 90px;
    }
    .challenges-page .ch-table-desc {
        max-width: 18ch;
        font-size: 0.72rem;
    }
    .challenges-page #challenges-table th,
    .challenges-page #challenges-table td {
        padding: 0.5rem 0.3rem;
    }
    /* One version shows at a time, so the version column is the same value on
       every row — drop it on small screens and let the numbers have the space. */
    .challenges-page #challenges-table tr > *:first-child {
        display: none;
    }
}

@media (max-width: 900px) {
    .ch-hero .ch-art {
        width: 280px;
    }
    .ch-season {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .ch-attr-row {
        grid-template-columns: 7.5rem 1fr 4.4rem;
        gap: 0.6rem;
    }
}

/* .cw-hero only stacks at 600px, so the art goes full width at the same point */
@media (max-width: 600px) {
    .ch-hero .ch-art {
        width: 100%;
        height: 200px;
        border-bottom: 1px solid var(--border-color);
    }
}


/* ==========================================================================
   Record cards — a headline number, a portrait and a written bio for the
   holder of a single record. Used by the Oldest Players leaderboard.
   ========================================================================== */

.rec-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.rec-card {
    display: flex;
    background: linear-gradient(135deg, rgba(240, 124, 58, 0.06) 0%, var(--secondary-dark) 55%);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-orange);
    border-radius: 12px;
    overflow: hidden;
}

.rec-card-portrait {
    position: relative;
    width: 190px;
    flex-shrink: 0;
    background-color: var(--primary-dark);
}

.rec-card-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Sits over the portrait so the headline number reads even on a busy photo */
.rec-card-age {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.6rem 0.75rem 0.6rem 0.75rem;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 30%, transparent);
}

.rec-card-age-value {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    line-height: 0.9;
    color: var(--accent-orange);
}

.rec-card-age-unit {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-secondary);
}

.rec-card-body {
    flex: 1;
    padding: 1.5rem 1.75rem;
    min-width: 0;
}

.rec-card-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin-bottom: 0.5rem;
}

.rec-card-name {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    line-height: 1;
    margin: 0 0 0.3rem 0;
}

.rec-card-name a {
    color: var(--text-primary);
    text-decoration: none;
}

.rec-card-name a:hover {
    color: var(--accent-orange);
}

.rec-card-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.9rem 0;
}

.rec-card-meta .rec-dot {
    color: var(--border-color);
    margin: 0 0.4rem;
}

.rec-card-bio {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-primary);
    margin: 0 0 1.1rem 0;
    max-width: 68ch;
}

.rec-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.1rem;
}

.rec-card-stat {
    background-color: var(--primary-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.45rem 0.8rem;
}

.rec-card-stat-value {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-primary);
}

.rec-card-stat-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
}

.rec-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent-orange);
    text-decoration: none;
}

.rec-card-cta:hover {
    color: var(--text-primary);
}

.rec-card-footnote {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0.9rem 0 0 0;
}

/* --- Table filter row (sits directly above the table it controls) -------- */

.lb-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem 0;
}

.lb-filter-row input[type="text"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
    border-radius: 25px;
    background-color: var(--secondary-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    outline: none;
    font-family: var(--font-body);
}

.lb-filter-row select {
    padding: 0.55rem 1rem;
    border-radius: 20px;
    background-color: var(--secondary-dark);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    outline: none;
    font-family: var(--font-body);
    cursor: pointer;
}

.lb-filter-row input[type="text"]:focus,
.lb-filter-row select:focus {
    border-color: var(--accent-orange);
}

@media (max-width: 600px) {
    .lb-filter-row select {
        flex: 1 1 140px;
    }
}

/* --- Oldest players table ------------------------------------------------ */

.oldest-deceased {
    color: var(--text-secondary);
}

.oldest-living-age {
    color: var(--text-primary);
}

#oldest-table th.sticky-col[data-sort="full_name"] {
    min-width: 200px;
}

@media (max-width: 768px) {
    .rec-card {
        flex-direction: column;
    }
    /* The portraits are 2:3 cutouts. Stacked, the panel is much wider than it is
       tall, so cover-cropping them leaves nothing but the top of the head.
       Instead the panel becomes a column: the whole figure is fitted with
       contain, and the age drops below it rather than sitting over its legs. */
    .rec-card-portrait {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--border-color);
    }
    .rec-card-portrait img {
        height: 260px;
        object-fit: contain;
        object-position: center center;
        padding-top: 1rem;
        box-sizing: border-box;
    }
    .rec-card-age {
        position: static;
        background: none;
        padding: 0 0.75rem 0.9rem 0.75rem;
    }
    .rec-card-body {
        padding: 1.25rem;
    }
    .rec-card-name {
        font-size: 1.9rem;
    }
    #oldest-table th.sticky-col[data-sort="full_name"] {
        min-width: 110px;
    }
    #oldest-table th,
    #oldest-table td {
        padding: 0.5rem 0.3rem;
    }
}