/**
 * site.css — IndieHackGames public site styles
 * Palette from game.pen: orange #f47c05, hero blue #e3f5ff, green #52b75b, yellow CTA
 */

:root {
    --ihg-orange: #f47c05;
    --ihg-orange-dark: #d96a00;
    --ihg-yellow: #ffd600;
    --ihg-yellow-hover: #f5c800;
    --ihg-hero-top: #e3f5ff;
    --ihg-hero-bottom: #ffffff;
    --ihg-green: #52b75b;
    --ihg-black: #1a1a1a;
    --ihg-muted: #717171;
    --ihg-border: #e0e0e0;
    --ihg-gold-bg: #fff8e1;
    --ihg-silver-bg: #f5f5f5;
    --ihg-bronze-bg: #fff3e0;
    --font-display: 'Alan Sans', 'Nata Sans', Inter, system-ui, sans-serif;
    --font-body: 'Open Sans', Inter, system-ui, sans-serif;
}

body {
    font-family: var(--font-body);
    color: var(--ihg-black);
    background: #fff;
}

h1, h2, h3, .ihg-display {
    font-family: var(--font-display);
    font-weight: 700;
}

/* --- Layout --- */
.ihg-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* Wider container for card grids and the detailed leaderboard table. */
.ihg-page--wide {
    max-width: 1000px;
}

/* Breaks a section out of the 800px page container to use the wide grid
   width while staying centered (used by the monthly grid on Home). */
.ihg-breakout {
    width: min(1000px, calc(100vw - 2rem));
    margin-left: 50%;
    transform: translateX(-50%);
}

/* Hero gradient band: fades from the game color to white within the top 250px;
   the explicit #fff keeps the rest of the page seamless below the gradient. */
.ihg-hero-bg {
    background: #fff linear-gradient(180deg, var(--ihg-hero-top) 0%, var(--ihg-hero-bottom) 100%) no-repeat;
    background-size: 100% 250px;
}

/* --- Nav --- */
.ihg-nav .container {
    max-width: 1000px;
}

.ihg-logo {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--ihg-black);
}

.ihg-logo .dot-games {
    color: var(--ihg-orange);
}

/* Destination links + active state inside the collapsed navbar. */
.ihg-nav .nav-link {
    font-weight: 400;
    font-size: 0.875rem;
}

.ihg-nav .nav-link.active {
    color: var(--ihg-orange);
    font-weight: 600;
}

.ihg-nav .navbar-toggler {
    border-color: var(--ihg-border);
}

@media (max-width: 767.98px) {
    /* Inside the open collapse, the Sponsor/Login buttons stack full width. */
    .ihg-nav .navbar-collapse .ihg-btn {
        width: 100%;
        margin-top: 0.25rem;
    }
}

.ihg-btn-sponsor {
    background: var(--ihg-orange);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
}

.ihg-btn-sponsor:hover {
    background: var(--ihg-orange-dark);
    color: #fff;
}

.ihg-btn-outline {
    background: #fff;
    color: var(--ihg-black);
    border: 2px solid var(--ihg-black);
    border-radius: 999px;
    padding: 0.4rem 1.1rem;
    font-weight: 600;
    text-decoration: none;
}

.ihg-btn-outline:hover {
    background: #f8f8f8;
    color: var(--ihg-black);
}

.ihg-btn-yellow {
    background: var(--ihg-yellow);
    color: var(--ihg-black);
    border: none;
    border-radius: 999px;
    padding: 0.65rem 2rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.ihg-btn-yellow:hover {
    background: var(--ihg-yellow-hover);
    color: var(--ihg-black);
}

.ihg-btn-play {
    background: var(--ihg-black);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}

.ihg-btn-play:hover:not(.disabled) {
    background: #333;
    color: #fff;
}

.ihg-btn-play.disabled,
.ihg-btn-play:disabled {
    opacity: 0.55;
    pointer-events: none;
}

.ihg-btn-orange {
    background: var(--ihg-orange);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.65rem 2rem;
    font-weight: 700;
    text-decoration: none;
}

.ihg-btn-orange:hover {
    background: var(--ihg-orange-dark);
    color: #fff;
}

.ihg-btn-dark {
    background: var(--ihg-black);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.65rem 2rem;
    font-weight: 700;
    text-decoration: none;
}

.ihg-btn-dark:hover {
    background: #333;
    color: #fff;
}

/* --- Section headings --- */
.ihg-section-title {
    text-align: center;
    font-size: 1.35rem;
    margin: 2rem 0 1.5rem;
}

.ihg-section-title.orange {
    color: var(--ihg-orange);
    font-weight: 600;
}

/* --- Sponsor card --- */
.ihg-sponsor-card {
    border: 1px solid var(--ihg-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background: #FFF8DA;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.ihg-sponsor-card img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.ihg-sponsor-card .name {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.ihg-sponsor-card .desc {
    font-size: 0.875rem;
    color: var(--ihg-muted);
    margin-bottom: 0.25rem;
}

.ihg-sponsor-card .url {
    font-size: 0.875rem;
    color: var(--ihg-muted);
}

/* --- Prizes table --- */
.ihg-prizes-wrap {
    margin: 1.5rem 0;
}

/* Air between the score-banner heading and the prize table. */
.ihg-prizes-wrap .ihg-score-banner {
    margin-bottom: 1.25rem;
}

.ihg-prizes-table {
    width: 100%;
    border: 1px solid var(--ihg-border);
    border-radius: 8px;
    overflow: hidden;
}

.ihg-prizes-table th,
.ihg-prizes-table td {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--ihg-border);
    font-size: 0.9rem;
}

.ihg-prizes-table tr:last-child td {
    border-bottom: none;
}

.ihg-prizes-table th {
    font-weight: 600;
    width: 35%;
    background: #fafafa;
}

/* --- Game battle tiles --- */
.ihg-game-tile {
    border: 1px solid var(--ihg-black);
    border-radius: 12px;
    overflow: hidden;
    color: var(--ihg-black);
    transition: transform 0.15s;
}

.ihg-game-tile:hover {
    transform: translateY(-2px);
    color: var(--ihg-black);
}

/* The artwork/title/description block is one link to the game landing page;
   the sponsor strip below is an INDEPENDENT link so clicks never cross.
   flex:1 pushes the sponsor strip to the bottom of the flex-column card so
   every tile in a row shares one footer baseline. */
.ihg-game-tile-main {
    display: block;
    flex: 1;
    color: var(--ihg-black);
}

.ihg-game-tile-main:hover {
    color: var(--ihg-black);
}

.ihg-game-tile-main:focus-visible {
    outline: 2px solid var(--ihg-orange);
    outline-offset: -2px;
}

/* Lifecycle note shown under the card body (ended/cancelled monthly contest). */
.ihg-game-tile-status {
    padding: 0 0.75rem 0.75rem;
    font-size: 0.78rem;
    color: var(--ihg-muted);
    font-weight: 600;
}

/* Sponsor strip: solid configurable background (validated #RRGGBB custom
   property from admin; the fixed neutral fallback below when unset), sponsor
   logo on the left, name + short description on the right. */
.ihg-game-tile-sponsor {
    --ihg-sponsor-bg: #f5f5f5;
    --ihg-sponsor-fg: var(--ihg-black);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Fixed height keeps the sponsored and "Sponsor this game" strips
       visually identical across a row of cards (60px logo + padding). */
    min-height: 84px;
    margin-top: auto;
    padding: 0.75rem 1rem;
    background: var(--ihg-sponsor-bg);
    color: var(--ihg-sponsor-fg);
    border-top: 1px solid var(--ihg-border);
    text-decoration: none;
}

a.ihg-game-tile-sponsor:hover {
    color: var(--ihg-sponsor-fg);
    filter: brightness(0.97);
}

a.ihg-game-tile-sponsor:focus-visible {
    outline: 2px solid var(--ihg-orange);
    outline-offset: -2px;
}

.ihg-game-tile-sponsor-logo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
}

.ihg-game-tile-sponsor-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ihg-game-tile-sponsor .name {
    font-weight: 600;
    font-size: 0.85rem;
    overflow-wrap: break-word;
}

.ihg-game-tile-sponsor .desc {
    font-size: 0.75rem;
    opacity: 0.85;
    overflow-wrap: break-word;
}

/* Unsponsored games: centered "Sponsor this game" interest link. */
.ihg-game-tile-sponsor--empty {
    justify-content: center;
    color: var(--ihg-orange);
    font-weight: 700;
}

a.ihg-game-tile-sponsor--empty:hover {
    color: var(--ihg-orange-dark);
}

.ihg-game-tile-icon {
    /* 85px game logo, as requested in the design image */
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.ihg-game-tile-icon img {
    width: 85px;
    height: 85px;
    object-fit: contain;
}

.ihg-game-tile-name {
    font-size: 1.2rem;
    font-weight: 600;
}

.ihg-game-tile-desc {
    font-size: 0.8rem;
    color: var(--ihg-muted);
    margin-bottom: 0;
}

.ihg-countdown {
    text-align: center;
    color: var(--ihg-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

.ihg-countdown strong {
    color: var(--ihg-orange);
}

/* --- Leaderboard rows --- */
.ihg-leaderboard {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ihg-lb-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ihg-border);
    border-radius: 10px;
    margin-bottom: 0.5rem;
    background: #fff;
}

.ihg-lb-row.rank-1 { background: var(--ihg-gold-bg); }
.ihg-lb-row.rank-2 { background: var(--ihg-silver-bg); }
.ihg-lb-row.rank-3 { background: var(--ihg-bronze-bg); border-color: #ffcc80; }

/* Signed-in player's own row — a 2px orange border with a light grey
   background keeps it distinct. Podium rows are excluded: the rank's own
   background/border always prevails for a top-3 signed-in player. */
.ihg-lb-row.is-me:not(.rank-1):not(.rank-2):not(.rank-3),
.ihg-lb-card.is-me:not(.rank-1):not(.rank-2):not(.rank-3) {
    border: 2px solid var(--ihg-orange);
    box-shadow: none;
    background: #f4f4f4;
}

/* Identity row: [rank medal/#N] + [avatar/name/bio], always leading. */
.ihg-lb-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    min-width: 0;
}

.ihg-lb-rank {
    flex-shrink: 0;
    width: 2.25rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ihg-muted);
}

/* Shared player identity: avatar/initials + display name/@handle + bio. */
.ihg-player {
    display: flex;
    flex: 1;
    min-width: 0;
}

.ihg-player-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ihg-player-link:hover {
    color: inherit;
}

.ihg-player-link:hover .ihg-lb-handle {
    text-decoration: underline;
}

.ihg-player-link:focus-visible {
    outline: 2px solid var(--ihg-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

.ihg-lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #6c5ce7;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    overflow: hidden;
}

.ihg-lb-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ihg-lb-body {
    flex: 1;
    min-width: 0;
}

.ihg-lb-handle {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    overflow-wrap: break-word;
}

/* Secondary @handle shown next to a display name. */
.ihg-lb-x {
    color: var(--ihg-muted);
    font-weight: 400;
    font-size: 0.85em;
}

.ihg-lb-desc {
    display: block;
    font-size: 0.8rem;
    color: var(--ihg-muted);
    margin: 0;
    overflow-wrap: break-word;
}

/* Label/value facts: labels visible on mobile (left/right), visually hidden
   on desktop where the compact inline layout is enough. */
.ihg-lb-facts {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0;
}

.ihg-lb-fact {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.ihg-lb-fact > dt {
    color: var(--ihg-muted);
    font-weight: 600;
    font-size: 0.8rem;
}

.ihg-lb-fact > dd {
    margin: 0;
}

.ihg-lb-score {
    background: #f0f0f0;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .ihg-lb-row {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    .ihg-lb-facts {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
    }

    /* Desktop hides the labels visually but keeps them in the accessibility
       tree — the value alone (a number) still has context. */
    .ihg-lb-fact > dt {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.ihg-medal {
    font-size: 1.1rem;
    min-width: 1.5rem;
    text-align: center;
}

/* Contest date sits directly under the "Today's Game battle" title. */
.ihg-battle-date {
    margin-top: -1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ihg-orange);
}

/* --- Winners (Yesterday's Winners block) ---------------------------------- */

.ihg-winners {
    margin-bottom: 1.5rem;
}

/* "Prizes offered by" caption sits above the bordered sponsor box. */
.ihg-winners-sponsor-label {
    text-align: center;
    color: var(--ihg-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

/* Sponsor identity under the winners banner: bordered box with logo + bold
   name + description, centered with clear separation from the banner. */
.ihg-winners-sponsor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 auto 1.25rem;
    max-width: 560px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ihg-border);
    border-radius: 10px;
    text-align: left;
}

.ihg-winners-sponsor-logo {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--ihg-border);
}

.ihg-winners-sponsor-line {
    color: var(--ihg-muted);
    font-size: 0.9rem;
}

.ihg-winners-sponsor-line strong {
    color: var(--ihg-black);
}

.ihg-winners-sponsor-desc {
    color: var(--ihg-muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.ihg-winners-list {
    max-width: 650px;
    margin: 0 auto;
}

.ihg-winner-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--ihg-border);
}

.ihg-winner-main {
    flex: 1;
    min-width: 0;
}

.ihg-winner-prize {
    display: block;
    margin-top: 0.25rem;
    color: var(--ihg-orange);
    font-weight: 700;
    font-size: 0.9rem;
}

/* "1st place prize:" / "All players:" labels stay dark; the prize name keeps
   the orange. */
.ihg-winner-label {
    color: var(--ihg-black);
}

.ihg-winner-value {
    color: var(--ihg-muted);
    font-weight: 400;
}

.ihg-winners-note {
    text-align: center;
    color: var(--ihg-muted);
    padding: 1rem 0;
}

.ihg-winners-all {
    text-align: center;
    color: var(--ihg-orange);
    font-weight: 600;
    margin-top: 0.75rem;
}

/* --- Detailed leaderboard (desktop table + mobile cards) ------------------- */

/* Sticky headings need an opaque background and NO overflow ancestor. */
.ihg-lb-table {
    width: 100%;
    border-collapse: separate;
    /* Vertical spacing turns each row into a separated "card" like the
       Top Players list items. */
    border-spacing: 0 0.6rem;
    margin-bottom: 0.5rem;
}

.ihg-lb-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    border-bottom: 2px solid var(--ihg-black);
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
}

/* Cells paint a continuous card outline: top/bottom on every cell, rounded
   ends on the first/last cell of the row. */
.ihg-lb-table td {
    padding: 0.7rem 0.75rem;
    border-top: 1px solid var(--ihg-border);
    border-bottom: 1px solid var(--ihg-border);
    vertical-align: middle;
    background: #fff;
}

.ihg-lb-table tbody td:first-child {
    border-left: 1px solid var(--ihg-border);
    border-radius: 10px 0 0 10px;
}

.ihg-lb-table tbody td:last-child {
    border-right: 1px solid var(--ihg-border);
    border-radius: 0 10px 10px 0;
}

/* Podium row backgrounds — same colors as the .ihg-lb-row cards. */
.ihg-lb-table tbody tr.rank-1 td { background: var(--ihg-gold-bg); }
.ihg-lb-table tbody tr.rank-2 td { background: var(--ihg-silver-bg); }
.ihg-lb-table tbody tr.rank-3 td { background: var(--ihg-bronze-bg); border-color: #ffcc80; }

/* Player is the widest column; scores are compact and right-aligned. */
.ihg-lb-col-rank {
    width: 3.5rem;
    font-weight: 700;
    color: var(--ihg-muted);
    white-space: nowrap;
}

.ihg-lb-col-player {
    width: 42%;
    min-width: 14rem;
}

.ihg-lb-col-score {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Score/game column headings share the right alignment of their cells. */
.ihg-lb-table thead th.ihg-lb-col-score {
    text-align: right;
}

.ihg-lb-total {
    font-weight: 700;
}

/* Small icon next to the game name in daily column headings. */
.ihg-lb-game-th img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: -4px;
    margin-right: 0.3rem;
}

.ihg-lb-achieved {
    font-size: 0.75rem;
    color: var(--ihg-muted);
    font-weight: 400;
}

/* Bootstrap Reboot gives every element border-style:solid at width 0 — so
   only widen the sides that form the row outline (blanket border-width would
   box each cell). Podium rows are excluded so their rank colors prevail. */
.ihg-lb-table tbody tr.is-me:not(.rank-1):not(.rank-2):not(.rank-3) td {
    background: #f4f4f4;
    border-color: var(--ihg-orange);
    border-top-width: 2px;
    border-bottom-width: 2px;
}

.ihg-lb-table tbody tr.is-me:not(.rank-1):not(.rank-2):not(.rank-3) td:first-child {
    border-left-width: 2px;
}

.ihg-lb-table tbody tr.is-me:not(.rank-1):not(.rank-2):not(.rank-3) td:last-child {
    border-right-width: 2px;
}

/* Mobile representation: stacked cards with real label/value pairs so
   nothing depends on horizontal table scrolling or pseudo-elements. */
.ihg-lb-cards {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Constrain the sponsor card on the leaderboard page so it reads as a
   centered summary block rather than a full-width strip. */
.ihg-lb-sponsored {
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

.ihg-lb-card {
    border: 1px solid var(--ihg-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
    background: #fff;
}

/* Mobile leaderboard cards share the desktop podium colors/borders. */
.ihg-lb-card.rank-1 { background: var(--ihg-gold-bg); }
.ihg-lb-card.rank-2 { background: var(--ihg-silver-bg); }
.ihg-lb-card.rank-3 { background: var(--ihg-bronze-bg); border-color: #ffcc80; }

.ihg-lb-fields {
    margin: 0.5rem 0 0;
}

.ihg-lb-fields > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.2rem 0;
}

.ihg-lb-fields dt {
    color: var(--ihg-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.ihg-lb-fields dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Leaderboard filters --------------------------------------------------- */

/* Segmented Daily/Monthly control (like the Paid/Free/Top Grossing pattern):
   one bordered group, the active segment filled. */
.ihg-lb-tabs-wrap {
    display: flex;
    justify-content: center;
    margin: 1.75rem 0 0.5rem;
}

.ihg-lb-tabs {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--ihg-black);
    border-radius: 12px;
    overflow: hidden;
}

.ihg-lb-tab {
    display: block;
    padding: 0.45rem 3.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ihg-black);
    text-decoration: none;
    background: #fff;
}

.ihg-lb-tabs li + li .ihg-lb-tab {
    border-left: 1px solid var(--ihg-black);
}

.ihg-lb-tab:hover {
    background: #f4f4f4;
    color: var(--ihg-black);
}

.ihg-lb-tab.active,
.ihg-lb-tab.active:hover {
    background: var(--ihg-black);
    color: #fff;
}

/* --- "Today | Archives" bar ---------------------------------------------- */

/* "Today | Archives" bar: bordered pills — the selected period is filled,
   the other is outlined. Archives open their picker directly on click. */
.ihg-archivebar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0 auto 1rem;
}

.ihg-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ihg-seg-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--ihg-black);
    border-radius: 10px;
    background: #fff;
    color: var(--ihg-black);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}

.ihg-seg-pill:hover:not(.is-active) {
    background: #f4f4f4;
    color: var(--ihg-black);
}

.ihg-seg-pill.is-active {
    background: var(--ihg-orange);
    border-color: var(--ihg-orange);
    color: #fff;
}

.ihg-seg-pill.is-active .ihg-seg-date {
    font-weight: 400;
    opacity: 0.9;
}

/* Invisible but focusable native date input covering nothing — label clicks
   forward to it and JS opens the picker directly. */
.ihg-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Collapsible archives: summary is the pill; the picker panel opens directly
   below as a popover (native <details>, no extra click). */
.ihg-archives {
    position: relative;
}

.ihg-archives > summary {
    list-style: none;
}

.ihg-archives > summary::-webkit-details-marker {
    display: none;
}

.ihg-archives-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 30;
    width: 300px;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border: 1px solid var(--ihg-border);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Monthly archives: year navigator + month grid (see reference design). */
.ihg-mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    font-weight: 700;
}

.ihg-mp-year-btn {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--ihg-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ihg-black);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.ihg-mp-year-btn:hover:not(:disabled) {
    background: #f4f4f4;
}

.ihg-mp-year-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.ihg-mp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}

.ihg-mp-month {
    padding: 0.5rem 0.25rem;
    border: 1px solid var(--ihg-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ihg-black);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: center;
}

.ihg-mp-month:hover:not(:disabled) {
    background: #f4f4f4;
    border-color: var(--ihg-black);
}

/* Months after the current one can't be picked — archives only go back. */
.ihg-mp-month:disabled {
    opacity: 0.35;
    cursor: default;
}

.ihg-mp-month.is-selected {
    background: var(--ihg-orange);
    border-color: var(--ihg-orange);
    color: #fff;
    font-weight: 700;
}

/* Game selector pinned to the right of the archive bar. */
.ihg-seg-game {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.ihg-seg-game label {
    font-weight: 600;
    font-size: 0.9rem;
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Game dropdown matches the pill styling of the archive controls. */
.ihg-seg-select {
    border: 1px solid var(--ihg-black);
    border-radius: 10px;
    padding: 0.45rem 2.4rem 0.45rem 0.9rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ihg-black);
    background-color: #fff;
    width: auto;
    min-width: 11rem;
}

/* --- Sponsorship info page -------------------------------------------------- */

.ihg-sponsor-info {
    display: grid;
    gap: 1rem;
    margin: 1.5rem auto;
    max-width: 720px;
}

.ihg-sponsor-option {
    border: 1px solid var(--ihg-border);
    border-radius: 12px;
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .ihg-sponsor-info {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Game landing --- */
.ihg-game-hero {
    text-align: center;
    padding: 2rem 0 1rem;
}

.ihg-game-title {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.ihg-score-banner {
    position: relative;
    text-align: center;
    margin: 1.5rem auto 0;
    max-width: 509px;
}

/* Banner titles stay on one line inside the score banner. */
.ihg-score-banner-title {
    white-space: nowrap;
    font-size: clamp(0.9rem, 4.2vw, 1.4rem);
}

.ihg-score-list {
    max-width: 320px;
    margin: 0 auto 1.5rem;
}

.ihg-score-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--ihg-border);
    font-size: 1rem;
}

.ihg-score-row.highlight {
    color: var(--ihg-orange);
    font-weight: 700;
}

.ihg-howto {
    font-size: 0.875rem;
    color: var(--ihg-muted);
    text-decoration: none;
}

.ihg-howto:hover {
    color: var(--ihg-black);
}

.ihg-stat-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    text-align: center;
}

.ihg-stat-tiles .label {
    font-size: 0.8rem;
    color: var(--ihg-muted);
    margin-bottom: 0.35rem;
}

.ihg-stat-tiles .value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ihg-orange);
}

.ihg-stat-tiles .date {
    font-size: 0.75rem;
    color: var(--ihg-muted);
    margin-top: 0.25rem;
}

.ihg-sponsor-cta {
    text-align: center;
    color: var(--ihg-orange);
    font-weight: 600;
    margin: 2rem 0 0.75rem;
}

@media (max-width: 576px) {
    .ihg-stat-tiles {
        grid-template-columns: 1fr;
    }
}