/**
 * ARK Leaderboards page
 *
 * The board rows themselves are styled in profile.css, which the profile page
 * shares. This file is the page around them: the hero, the section framing and
 * the table furniture.
 *
 * Visual language is borrowed from the two pages either side of it — the
 * bracketed section title and monospaced accents from the Rust page, the hero
 * treatment and card surfaces from the index and ARK pages — so the site reads
 * as one thing rather than three.
 */

/* --- Page background ------------------------------------------------------ */

/* The same fixed ARK backdrop the servers page uses, so the artwork continues
   behind the boards instead of the page turning to flat black below the hero.
   Kept lighter here than on the ARK page — the cards are frosted glass and
   need something visible to frost. */
body.leaderboards-page {
    position: relative;
}

body.leaderboards-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('/images/ark_bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -2;
}

/* Light at the top so the hero artwork reads, deepening toward the boards so
   the frosted rows have something dark to sit against. */
body.leaderboards-page::after {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, rgba(10, 10, 10, 0.72) 55%, rgba(10, 10, 10, 0.82) 100%);
    z-index: -1;
}

/* --- Hero ----------------------------------------------------------------- */

.leaderboard-hero {
    min-height: 42vh;   /* shorter than a landing hero: the boards are the point */
}

/* Only an orange wash and a gentle darkening toward the boards below — the
   artwork itself comes from the body backdrop, which is already dimmed. */
.leaderboard-hero .page-hero-overlay {
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 107, 53, 0.18) 0%, transparent 55%),
        linear-gradient(180deg, transparent 0%, transparent 55%, rgba(10, 10, 10, 0.35) 100%);
}

/* Bracketed title, matching the Rust page's section headers. Defined here
   rather than reused from rust.css, which this page does not load. */
.leaderboard-hero .section-title-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.leaderboard-hero .section-bracket {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 300;
    color: var(--primary);
    opacity: 0.55;
    line-height: 1;
}

.leaderboard-hero .page-title {
    margin-bottom: 0;
}

/* The title is gradient-filled text, so a text-shadow on it would be clipped
   along with the fill. A drop-shadow on the wrapper works instead, and keeps
   it legible now the image behind is brighter. */
.leaderboard-hero .section-title-line {
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.9));
}

.leaderboard-hero .page-subtitle {
    margin-top: 1rem;
    margin-bottom: 0;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* --- Section -------------------------------------------------------------- */

/* The hero image is fixed behind the whole page (body.ark-page::before in
   main.css), so leaving this section transparent lets it continue behind the
   boards rather than stopping at a hard line under the hero. */
.leaderboard-section {
    position: relative;
    background: transparent;
}

/* The hologram grid that was here has gone: with the ARK artwork now showing
   through the section, a second overlaid pattern was one texture too many. */

.leaderboard-section .container {
    position: relative;
    z-index: 1;
}

/* --- Frosted glass rows --------------------------------------------------- */

/* profile.css gives .board-row a near-opaque dark fill. Here the page has a
   background worth seeing, so the rows become frosted glass: translucent, with
   the backdrop blurred behind them so text stays readable over busy artwork.
   Scoped to this page so the profile page keeps its solid cards. */
.leaderboard-section .board-row {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
            backdrop-filter: blur(14px) saturate(1.2);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.35),
        /* A faint top highlight is what reads as "glass" rather than "grey". */
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.leaderboard-section .board-row:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 107, 53, 0.45);
}

/* The medals keep their colour, but tinted onto glass rather than onto black. */
.leaderboard-section .board-row.rank-1 {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.45);
}

.leaderboard-section .board-row.rank-2 {
    background: rgba(220, 220, 220, 0.09);
    border-color: rgba(192, 192, 192, 0.4);
}

.leaderboard-section .board-row.rank-3 {
    background: rgba(205, 127, 50, 0.1);
    border-color: rgba(205, 127, 50, 0.42);
}

/* Names sit on glass now, so they need a little more contrast. */
.leaderboard-section .board-name {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

.leaderboard-section .board-tribe {
    color: rgba(255, 255, 255, 0.6);
}

/* The tabs match the rows, so the whole page is one material. */
.leaderboard-section .board-tab {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.leaderboard-section .board-tab:hover {
    background: rgba(255, 255, 255, 0.09);
}

.leaderboard-section .board-tab.active {
    background: rgba(255, 107, 53, 0.22);
    border-color: var(--primary);
    color: #fff;
}

/* --- Column headings ------------------------------------------------------ */

/* Mirrors the grid in .board-row so the headings sit over their columns. */
.board-head {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    align-items: center;
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto 0.75rem;
    padding: 0 1.25rem;

    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Orange rather than dim white: these sit directly on the artwork with no
       card behind them, and a faint grey was invisible against it. */
    color: var(--primary);
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

.board-head span:first-child {
    text-align: center;
}

.board-head-value {
    text-align: right;
}

/* --- Footnote ------------------------------------------------------------- */

.board-note {
    max-width: 900px;
    margin: 1.5rem auto 0;
    text-align: center;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    /* Also sits on bare artwork, so it gets the same orange as .board-head. */
    color: var(--primary);
    font-weight: 700;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* --- Empty and loading states --------------------------------------------- */

/* The shared .ark-empty is a bare line of text. Give it the same card surface
   as a row so a loading or empty board still looks like the board. */
.board-list .ark-empty {
    padding: 2.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
    text-align: center;
    margin: 0;
}

/* --- Footer --------------------------------------------------------------- */

/* The shared footer is solid --bg-darker, which would cut the ARK backdrop off
   with a hard line. Frosted like the boards instead, so the artwork carries to
   the bottom of the page. */
.leaderboards-page .site-footer {
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 600px) {
    .board-head {
        grid-template-columns: 2.25rem 1fr auto;
        padding: 0 1rem;
    }

    .leaderboard-hero .section-bracket {
        display: none;   /* the title needs the full width on a phone */
    }
}