/**
 * /hall-of-fame
 *
 * A trophy cabinet rather than a table: dark panels on the site gradient, gold reserved for
 * rank and record chrome, and one accent green that the chart also uses.
 *
 * Every ink/surface pair below was checked for contrast. The two chart greens are a single
 * hue at two steps (--hof-bar / --hof-bar-record) measured against --hof-surface - they are
 * an ordinal pair, not two categories, so do not swap either for a different hue.
 */

.hof {
    --hof-ink:        var(--grey100);      /* #F8F8F7 */
    --hof-ink-2:      var(--grey300);      /* #CBCAC2 */
    --hof-ink-3:      var(--grey400);      /* #B1B0A9 - 4.8:1 on --hof-panel */
    --hof-hero:       #2F2B25;
    --hof-panel:      #443F37;
    --hof-panel-2:    #38342D;
    --hof-surface:    #262322;             /* the chart plot area */
    --hof-line:       rgba(248, 248, 247, 0.10);
    --hof-gold:       var(--yellow500);
    --hof-silver:     var(--grey300);
    --hof-bronze:     #C08552;
    --hof-bar:        #698825;
    --hof-bar-record: #CCDF86;
    /* "That is you" - deliberately neither gold nor the chart green, both of which already
       mean something here (rank, record). 4.9:1 on --hof-panel, 5.9:1 on --hof-panel-2. */
    --hof-you:        #8FB8DE;

    max-width: 1000px;
    margin: 0 auto;
    /* body already carries a 48px top margin for the fixed title bar (main.css). */
    padding: 32px 16px 120px;
    font-family: "Montserrat", sans-serif;
    color: var(--hof-ink);
}

/* Zeroes the browser's default heading and paragraph margins so the layout sets its own.
   Note this outscores a single class: `.hof p` is (0,1,1), so any `.hof_*` rule that sets a
   margin on a <p> loses to it regardless of order, and has to say `.hof .hof_*` to win. Several
   currently do not and are silently doing nothing - see the note on .hof_hero_blurb. */
.hof h1, .hof h2, .hof h3, .hof p {
    margin: 0;
}

.hof .sr_only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ hero --- */

/* main.css styles the bare <header> element as page furniture - 96px tall, display:flex, and a
   32px top margin. This is a <header> for what it means, not for that, and a class selector
   only wins the properties it declares, so the first four lines take the rest back. Left as it
   was, the mark, the heading and the blurb laid out in a row inside a fixed-height box. */
.hof_hero {
    display: block;
    width: auto;
    height: auto;
    margin-top: 0;

    background: var(--hof-hero);
    border-radius: 16px;
    border-top: 4px solid var(--hof-gold);
    padding: 32px 28px;
    text-align: center;
}

.hof_hero_mark {
    font-size: 34px;
    line-height: 1;
    color: var(--hof-gold);
    margin-bottom: 12px;
}

/* Sized against the viewport rather than at fixed steps. Uppercase Montserrat with tracking
   is wide: at the old 30px, "HALL OF FAME" wanted ~271px and a 320px phone - the min-width
   this site supports - leaves 264px, so it broke across two lines. The clamp keeps it on one
   line from 320px up without capping it below 40px on a desktop. */
.hof_hero h1 {
    font-size: clamp(24px, 6.5vw, 40px);
    line-height: 1.15;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--hof-ink);
}

/* `.hof .` rather than a bare class: the margin reset above is (0,1,1) and would otherwise win,
   which is what stopped this centring. Without the extra class the `auto` side margins collapse
   to 0 and the 520px box sits against the left of the hero - the text inside still looks centred
   because the hero centres it, so it reads as "slightly off" rather than obviously broken. */
.hof .hof_hero_blurb {
    max-width: 520px;
    margin: 10px auto 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--hof-ink-2);
}

/* --------------------------------------------------------------- seasons --- */

.hof_seasons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 20px;
}

.hof_season_tab {
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--hof-ink-2);
    background: var(--hof-panel);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 8px 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.hof_season_tab:hover {
    background: var(--hof-panel-2);
    color: var(--hof-ink);
}

.hof_season_tab.is_selected {
    background: var(--hof-gold);
    color: #3B2F00;
}

.hof_status {
    text-align: center;
    margin-top: 14px;
    font-size: 14px;
    color: var(--hof-ink-2);
}
/* Nothing to say on a page that drew, so it must not leave its margin behind. */
.hof_status:empty { display: none; }

/* ----------------------------------------------------------- your record --- */

/* Empty until the username lands (and stays empty when nobody is signed in), so the section
   must collapse rather than hold a gap. */
.hof_you:empty { display: none; }

.hof_you_card {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--hof-panel);
    border-left: 4px solid var(--hof-you);
    border-radius: 14px;
    padding: 16px 20px;
    margin-top: 20px;
}

/* Players who are actually in it get the darker hero surface, same as the record banner, and
   stack: the heading sits above a row per week rather than beside a single summary. */
.hof_you_card.is_in {
    background: var(--hof-hero);
    display: block;
}

.hof_you_head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hof_you_mark {
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    color: var(--hof-you);
}

.hof_you_body { flex: 1 1 260px; min-width: 0; }

/* --------------------------------------------------- your weeks, a row each --- */

.hof_you_weeks {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.hof_you_week {
    display: flex;
    align-items: center;
    gap: 8px;
}
.hof_you_week + .hof_you_week { margin-top: 6px; }

.hof_you_week_link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: rgba(248, 248, 247, 0.06);
    border-radius: 10px;
    padding: 9px 14px;
    color: var(--hof-ink);
    transition: background 0.15s;
}
.hof_you_week_link:hover {
    background: rgba(143, 184, 222, 0.16);
    color: var(--hof-ink);
}

.hof_you_week_gw {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.hof_you_week_season {
    font-size: 12px;
    color: var(--hof-ink-3);
    white-space: nowrap;
}

.hof_you_week_tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hof-ink-3);
    white-space: nowrap;
    /* Truncates rather than pushing the score off the row on a narrow screen. */
    overflow: hidden;
    text-overflow: ellipsis;
}

.hof_you_week_pts {
    margin-left: auto;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hof_you_body h2 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--hof-you);
}

.hof_you_line {
    margin-top: 6px;
    font-size: 15px;
    line-height: 22px;
    color: var(--hof-ink);
}
.hof_you_line b {
    font-size: 22px;
    font-weight: 700;
    margin-right: 2px;
}

.hof_you_note {
    margin-top: 3px;
    font-size: 12px;
    line-height: 17px;
    color: var(--hof-ink-2);
}

.hof_you_cta {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--hof-you);
    border: 1px solid var(--hof-you);
    border-radius: 999px;
    padding: 7px 16px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.hof_you_cta:hover {
    background: var(--hof-you);
    color: #1B2632;
}

/* ---------------------------------------------------------------- podium --- */

.hof_podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 28px;
    align-items: end;
}

.hof_place {
    background: var(--hof-panel);
    border-radius: 14px;
    border-top: 4px solid var(--hof-bronze);
    padding: 20px 16px;
    text-align: center;
}

/* 1st in the middle, raised - the reading order in the DOM stays 1, 2, 3. */
.hof_place1 { order: 2; border-top-color: var(--hof-gold); padding: 28px 16px; }
.hof_place2 { order: 1; border-top-color: var(--hof-silver); }
.hof_place3 { order: 3; }

/* A shared place means there is no single card to raise into the middle, and there may be
   more than three of them (a shared GW1 makes every winner joint 1st). Drop back to plain
   ranking order and let the row wrap. */
.hof_podium.is_level {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: stretch;
}
.hof_podium.is_level .hof_place { order: 0; padding: 20px 16px; }

.hof_place_medal {
    font-size: 26px;
    line-height: 1;
    color: var(--hof-bronze);
}
.hof_place1 .hof_place_medal { font-size: 34px; color: var(--hof-gold); }
.hof_place2 .hof_place_medal { color: var(--hof-silver); }

.hof_place_rank {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--hof-ink-3);
    margin-top: 6px;
}

.hof_place h3 {
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
    word-break: break-word;
}
.hof_place1 h3 { font-size: 22px; line-height: 28px; }

.hof_place_name { color: var(--hof-ink); }
.hof_place_name:hover { color: var(--hof-bar-record); }

.hof_place_wins {
    margin-top: 8px;
    font-size: 14px;
    color: var(--hof-ink-2);
}
.hof_place_wins b {
    font-size: 26px;
    font-weight: 700;
    color: var(--hof-ink);
    margin-right: 4px;
}

.hof_place_note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--hof-ink-3);
}

/* The signed-in player, wherever they turn up. A ring rather than a fill: the medal colours
   on these cards are the information, and must not be recoloured to say "you". */
.hof_place.is_you { box-shadow: 0 0 0 2px var(--hof-you); }
.hof_place.is_you .hof_place_name { color: var(--hof-you); }

/* ------------------------------------------------------------------ kpis --- */

.hof_kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.hof_kpi {
    background: var(--hof-panel);
    border-radius: 14px;
    padding: 18px 20px;
}

.hof_kpi h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--hof-ink-3);
}

.hof_kpi_value {
    margin-top: 6px;
    font-size: 34px;
    line-height: 40px;
    font-weight: 700;
    color: var(--hof-ink);
}

.hof_kpi_note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 17px;
    color: var(--hof-ink-2);
}

/* The one hero figure on the page, run full width as a banner so the tiles below it sit in
   a single even row. Proportional digits on purpose - tabular is for columns of numbers,
   and looks loose at this size. */
.hof_kpi.is_hero {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 20px;
    background: var(--hof-hero);
    border-left: 4px solid var(--hof-gold);
}
.hof_kpi.is_hero h3 { flex: 0 0 100%; }
.hof_kpi.is_hero .hof_kpi_value {
    font-size: 60px;
    line-height: 66px;
    color: var(--hof-gold);
}
.hof_kpi.is_hero .hof_kpi_note {
    font-size: 14px;
    line-height: 20px;
    margin-top: 0;
}

/* A record nobody has set yet. Keeps the panel every other tile sits on - unfilled, it was
   left floating on the page gradient and barely readable - and takes a dashed edge instead so
   a big "0" still reads as an open challenge rather than as a measurement. Outline rather
   than border so the dashes cost no layout and the tile stays level with its neighbours. */
.hof_kpi.is_open {
    outline: 1px dashed rgba(248, 248, 247, 0.30);
    outline-offset: -1px;
}
.hof_kpi.is_open .hof_kpi_value { color: var(--hof-ink-3); }

/* ---------------------------------------------------------------- panels --- */

.hof_panel {
    background: var(--hof-panel);
    border-radius: 14px;
    margin-top: 12px;
    overflow: hidden;
}

.hof_panel_head {
    padding: 18px 20px 0;
}

.hof_panel_head h2 {
    font-size: 18px;
    line-height: 24px;
    color: var(--hof-ink);
}

.hof_panel_sub {
    margin-top: 4px;
    font-size: 13px;
    line-height: 19px;
    color: var(--hof-ink-2);
}

.hof_empty {
    padding: 24px 20px;
    font-size: 14px;
    color: var(--hof-ink-2);
}

/* ----------------------------------------------------------------- chart --- */

/* One series, so no legend - the panel heading names what is plotted. */
.hof_chart {
    position: relative;
    margin: 18px 20px 20px;
    padding: 22px 0 0 44px;    /* top: room for the record label; left: gridline values */
    background: var(--hof-surface);
    border-radius: 10px;
}

.hof_chart_grid,
.hof_chart_cols {
    height: 220px;
}

.hof_chart_grid {
    position: absolute;
    top: 22px;
    left: 44px;
    right: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.hof_chart_gridline {
    position: relative;
    border-top: 1px solid var(--hof-line);
}

.hof_chart_gridvalue {
    position: absolute;
    right: calc(100% + 8px);
    top: -8px;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--hof-ink-3);
    white-space: nowrap;
}

.hof_chart_cols {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 2px;                  /* the surface gap that separates neighbouring columns */
    padding-right: 12px;
}

.hof_chart_col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.hof_chart_col:focus-visible {
    outline: 2px solid var(--hof-bar-record);
    outline-offset: 2px;
    border-radius: 4px;
}

.hof_chart_bar {
    position: relative;
    width: 100%;
    max-width: 24px;
    background: var(--hof-bar);
    border-radius: 4px 4px 0 0;   /* rounded data-end, square on the baseline */
    transition: filter 0.15s;
}

/* Brightened, not recoloured: hover must not make an ordinary column look like the record. */
.hof_chart_col:hover .hof_chart_bar,
.hof_chart_col:focus-visible .hof_chart_bar { filter: brightness(1.3); }

.hof_chart_col.is_record .hof_chart_bar { background: var(--hof-bar-record); }

.hof_chart_value {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--hof-ink);         /* text ink, never the bar colour */
    white-space: nowrap;
}

.hof_chart_axis {
    display: flex;
    gap: 2px;
    padding: 6px 12px 12px 0;
}

.hof_chart_tick {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--hof-ink-3);
    overflow: hidden;
}

.hof_tooltip {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #16140F;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 16px;
    /* Wraps rather than running off the panel: the detail line is a list of usernames and
       can be long, and a nowrap tooltip wider than the plot cannot be clamped into it. */
    max-width: 220px;
    pointer-events: none;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.hof_tooltip[hidden] { display: none; }
.hof_tooltip strong { color: var(--hof-ink); }
.hof_tooltip span   { color: var(--hof-bar-record); font-weight: 700; }
.hof_tooltip em     { color: var(--hof-ink-3); font-style: normal; }

/* -------------------------------------------------------- roll of honour --- */

.hof_roll {
    padding: 16px 20px 20px;
}

.hof_week {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--hof-panel-2);
    border-radius: 10px;
    padding: 10px 14px;
}
.hof_week + .hof_week { margin-top: 8px; }

.hof_week.is_record {
    box-shadow: inset 3px 0 0 var(--hof-gold);
}

/* The other end of the season. Deliberately grey: it is a curiosity, not an achievement,
   and gold here would read as a second kind of record. */
.hof_week.is_lowest {
    box-shadow: inset 3px 0 0 var(--hof-ink-3);
}

/* The week a shared link pointed at. A full ring rather than the inset bar the record and
   lowest weeks use, so it reads on top of either of them without replacing them. */
.hof_week.is_linked {
    outline: 2px solid var(--hof-you);
    outline-offset: 2px;
}

.hof_week_gw {
    flex: 0 0 40px;
    text-align: center;
    color: var(--hof-ink-2);
}

/* Label above number: "GW" reads as the heading of the column of numbers running down the
   list, rather than a caption repeated under each one. */
.hof_week_gw_label {
    display: block;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 1px;
    color: var(--hof-ink-3);
}

.hof_week_gw_num {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
    color: var(--hof-ink);
}

.hof_week_winners { flex: 1 1 auto; min-width: 0; }

.hof_week_shared {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hof-ink-3);
    margin-bottom: 4px;
}

/* Flag and share control share the right-hand edge of a week card. */
.hof_week_side {
    flex: 0 0 auto;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.hof_week_flag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hof-gold);
}
.hof_week_flag.is_low { color: var(--hof-ink-3); }

.hof_winner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.hof_winner + .hof_winner { margin-top: 8px; }

.hof_winner.is_you .hof_winner_name,
.hof_winner.is_you .hof_winner_pts { color: var(--hof-you); }

.hof_winner_name {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 17px;
    color: var(--hof-ink);
}
.hof_winner_name:hover { color: var(--hof-bar-record); }

/* Pills and total travel together: when the name is long enough to break the row, the whole
   block drops under it rather than stranding the total on a line of its own. */
.hof_winner_meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hof_tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hof_tag {
    font-size: 11px;
    line-height: 18px;
    color: var(--hof-ink-2);
    background: rgba(248, 248, 247, 0.08);
    border-radius: 999px;
    padding: 1px 9px;
    white-space: nowrap;
}
.hof_tag b { color: var(--hof-ink); }

.hof_tag_joker {
    color: var(--hof-gold);
    background: rgba(249, 208, 6, 0.12);
}
.hof_tag_joker i { margin-right: 5px; }

.hof_winner_pts {
    margin-left: auto;
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hof-ink);
}

/* ----------------------------------------------------------------- share --- */

/* Quiet until wanted: the page is a trophy cabinet, not a toolbar. Sized to the 44px tap
   target on touch even though the icon is smaller. */
.hof_share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    font-family: inherit;
    font-size: 13px;
    color: var(--hof-ink-3);
    background: rgba(248, 248, 247, 0.06);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.hof_share:hover {
    background: rgba(248, 248, 247, 0.14);
    color: var(--hof-ink);
}

/* Copy to clipboard is silent, so the button says so itself for a moment. */
.hof_share.is_copied {
    color: var(--hof-bar-record);
    background: rgba(204, 223, 134, 0.14);
}
.hof_share.is_copied i { display: none; }
.hof_share.is_copied::after {
    content: 'Copied';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

@media (prefers-reduced-motion: reduce) {
    .hof_share { transition: none; }
}

/* ------------------------------------------------- all-time winners board --- */

.hof_board {
    font-size: 14px;
}

.hof_board_head,
.hof_board_row {
    display: grid;
    /* Rank column carries an "=" prefix on shared places, so it is wider than the digits. */
    grid-template-columns: 38px 1fr 56px 84px 76px 70px;
    gap: 8px;
    align-items: center;
    padding: 9px 12px;
}

.hof_board_head {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hof-ink-3);
    padding-bottom: 4px;
}

.hof_board_row {
    background: var(--hof-panel-2);
    border-radius: 8px;
}
.hof_board_row + .hof_board_row { margin-top: 4px; }
.hof_board_row.is_top { box-shadow: inset 3px 0 0 var(--hof-gold); }

/* Wins the inset marker off a top-three row: on your own row, "this is you" is the more
   useful of the two, and the rank column already says which three are the top three. */
.hof_board_row.is_you { box-shadow: inset 3px 0 0 var(--hof-you); }
.hof_board_row.is_you .hof_board_name { color: var(--hof-you); }

.hof_board_rank {
    font-weight: 700;
    color: var(--hof-ink-3);
    font-variant-numeric: tabular-nums;
}

.hof_board_name {
    font-family: "Roboto Condensed", sans-serif;
    color: var(--hof-ink);
}
.hof_board_name:hover { color: var(--hof-bar-record); }

.hof_board_num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--hof-ink-2);
}

/* ----------------------------------------------------------------- small --- */

@media screen and (max-width: 700px) {
    /* Every fifth gameweek only - the rest cannot be read at this width anyway. */
    .hof_chart_tick.is_minor { visibility: hidden; }
}

@media screen and (max-width: 640px) {
    .hof { padding: 20px 10px 120px; }

    .hof_hero { padding: 24px 18px; }

    /* The mark and the call to action flank the text at width; stacked, the mark is just a
       line of its own, so it goes and the button takes the full width under the copy. */
    .hof_you_card { gap: 12px; padding: 16px; }
    .hof_you_mark { display: none; }
    .hof_you_cta { flex: 1 1 100%; text-align: center; }

    /* Score keeps its own line rather than squeezing the gameweek and season on a narrow row. */
    .hof_you_week_link { flex-wrap: wrap; row-gap: 2px; }
    .hof_you_week_pts { font-size: 17px; }

    /* Stacked, and back into 1-2-3 order: a three-across podium at this width leaves each
       card too narrow for the names it has to hold. */
    .hof_podium { grid-template-columns: 1fr; align-items: stretch; }
    .hof_place1 { order: 1; padding: 20px 16px; }
    .hof_place2 { order: 2; }

    .hof_kpi.is_hero .hof_kpi_value { font-size: 48px; line-height: 52px; }

    .hof_chart { margin: 14px 12px 16px; padding-left: 38px; }
    .hof_chart_grid { left: 38px; }
    .hof_chart_grid, .hof_chart_cols { height: 170px; }

    .hof_roll { padding: 12px 12px 16px; }
    .hof_week { gap: 10px; padding: 10px; }
    .hof_winner_pts { font-size: 18px; }

    /* Seasons is the only column that is not part of the ranking, so it is the only one
       that can be dropped without leaving a shared place unexplained. */
    .hof_board_head, .hof_board_row {
        grid-template-columns: 30px 1fr 42px 62px 62px;
        gap: 6px;
        padding: 9px 8px;
    }
    .hof_board_head span:last-child, .hof_board_row span:last-child { display: none; }
}

/*————————————————————————————*/
/* The server-rendered roll                                                   */
/*————————————————————————————*/
/* What an anonymous visitor and a crawler see, and what the script replaces once its
   members-only fetch lands. Deliberately plain: it is the same facts as the interactive roll
   without the stats around them, and it has to read as a finished list rather than as a
   placeholder waiting for something better. */
.hof_srv {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hof_srv_row {
    display: grid;
    grid-template-columns: 8.5em minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--hof-line);
    font-size: 15px;
}

.hof_srv_row:last-child { border-bottom: 0; }

/* This panel is dark. The tokens at the top of this file are the ones measured against it -
   grey900 ink here is the near-invisible mistake this replaced. */
.hof_srv_wk {
    font-weight: 700;
    color: var(--hof-ink-2);
    text-decoration: none;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.hof_srv_wk:hover { color: var(--hof-gold); }

/* Ties are listed in full and comma-separated, so this wraps rather than truncating - a week
   nobody could split is one of the more interesting rows on the page. */
.hof_srv_who {
    color: var(--hof-ink);
    min-width: 0;
}

.hof_srv_pts {
    font-weight: 700;
    color: var(--hof-ink-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media screen and (max-width: 520px) {
    .hof_srv_row { grid-template-columns: 7em minmax(0, 1fr) auto; font-size: 14px; }
}