/* AccRacingHub visual system — ported 1:1 from AccTelemetry's MaterialM
   theme (src/Acc.App.UI/Themes/{Light,Dark}Theme.xaml, Theme/MaterialMPalette.cs)
   so the site and the desktop app read as the same product. */

@font-face {
    font-family: "Inter Variable";
    src: url("/fonts/InterVariable.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Dark-only, by request — no toggle, no light palette. Values are
   AccTelemetry's own dark MaterialM palette (Themes/DarkTheme.xaml). */
:root {
    /* Background/surface/border updated to the Figma reference's actual
       values (Dev Mode MCP) — near-black page background with translucent
       "glass" cards, not the original opaque MaterialM navy panels. */
    --color-background: #090A0C;
    --color-surface: rgba(255, 255, 255, 0.06);
    --color-surface-raised: #232E42;
    --color-border: rgba(102, 102, 102, 0.2);
    --color-text-primary: #E6E8EB;
    --color-text-secondary: #7B8893;
    --color-accent: #00A1FF;
    --color-accent-emphasis: #57C2FF;
    --color-accent-soft: rgba(0, 161, 255, 0.125);
    --color-positive: #4CAF6D;
    --color-negative: #D9534F;
    /* Accent from the Figma leaderboard reference, updated when the
       reference itself moved from #FB8B0A to #FD5E37 (the game-tabs
       component's selected-pill color) — applied site-wide since every
       other use of this token (active track, table row highlights) is the
       same accent, not a separately-designed color. */
    --color-warning: #FD5E37;
    --color-warning-text: #F5F9FC;
    --color-card-shadow: transparent;

    /* Shared "floating pill tray" surface used by the leaderboard's
       game-tabs and car-filter controls — exact values from the Figma
       Tabs/Dropdown components (Dev Mode MCP), not approximated. */
    --color-pill-bg: rgba(255, 255, 255, 0.06);
    --color-pill-bg-hover: rgba(255, 255, 255, 0.12);
    --color-pill-border: rgba(102, 102, 102, 0.2);
    --shadow-pill: 0 4px 78.3px rgba(1, 76, 142, 0.07);

    --radius-card: 12px;
    --radius-pill: 22px;
    --radius-control: 10px;
    --sidebar-width: 260px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    position: relative;
    margin: 0;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: "Inter Variable", "Inter", "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

/* Ambient background glow — three large soft accent-colored blurs behind
   the page (Ellipse 8/9/10 in the Figma reference), reproduced as
   radial-gradients rather than the reference's own flattened raster export
   (which carries no reusable color/blur data and would need a hotlinked,
   7-day-expiring asset URL). Sits behind .app-shell, scrolls away with the
   page (not fixed) since it only decorates the top of the content. */
body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Taller than the glow's own natural falloff needs (the 3rd ellipse's
       fade completes well before this), plus the mask below — belt and
       braces against the hard edge this box used to end on (900px cut the
       lower ellipse off mid-fade, visible as a sharp seam on tall pages). */
    height: 1400px;
    /* Softens the box's own bottom edge to transparent so nothing ever
       ends on a hard line, regardless of any single gradient's math. */
    mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 78%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    /* Widths in vw (not px) so the glow stretches with viewport width,
       matching the reference's own ellipses (sized relative to its
       1920px frame) instead of staying a fixed pixel blob. Opacities are
       ~49% of the original (two successive 30% dimming passes, per
       request: 0.7 * 0.7). */
    background:
        radial-gradient(112vw 600px at 19% 0%, color-mix(in srgb, var(--color-warning) 17.15%, transparent), transparent 70%),
        radial-gradient(140vw 680px at 82% 0%, color-mix(in srgb, var(--color-warning) 17.15%, transparent), transparent 70%),
        /* The lower ellipse is its own dusty rose tint (#E3BCB0), not the
           accent color the top two use — confirmed against the reference. */
        radial-gradient(140vw 680px at 74% 40%, rgba(227, 188, 176, 0.098), transparent 70%);
}

h1, h2, h3, h4 {
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--color-text-primary);
}

h1 { font-size: 22px; }
h2 { font-size: 16px; margin-top: 28px; }

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: var(--color-accent-emphasis);
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

/* ---------- layout shell ---------- */

.app-shell {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex: 0 0 var(--sidebar-width);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.app-logo {
    display: flex;
    align-items: center;
    margin: 28px 20px 24px 24px;
}

.app-logo img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.app-logo span {
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.app-nav {
    flex: 1;
    padding: 0 16px;
}

.app-nav-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    margin-bottom: 12px;
    border-radius: 32px;
    font-size: 16px;
    font-weight: 300;
    color: var(--color-text-primary);
    transition: transform 150ms ease, background 150ms ease;
}

.app-nav-item svg {
    width: 16px;
    height: 16px;
    margin-right: 12px;
    flex: none;
}

.app-nav-item:hover {
    transform: translateX(4px);
    text-decoration: none;
}

.app-nav-item.active {
    /* Exact reference value (Dev Mode MCP): rgba(253,94,55,0.1) — the same
       accent as the leaderboard's own active-track/active-tab treatment,
       not the site's blue accent. Text stays the same primary color as
       every other nav item; only the pill background marks it active. */
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

/* Exact reference values (Dev Mode MCP): no panel/card around this
   section at all — plain on the sidebar background, username stacked
   above a full-width outline pill button, not the old side-by-side
   label+small-button row inside a raised card. */
.app-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
}

.app-sidebar-footer-label {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-text-primary);
    text-align: center;
}

/* The "Выйти" button is wrapped in a <form> (needs a real POST, not just
   a link) — without this the form itself (not full-width) would be the
   flex child instead of the button, breaking the full-width pill. */
.app-sidebar-footer form {
    width: 100%;
}

.app-sidebar-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
}

.app-sidebar-footer-btn:hover {
    background: var(--color-pill-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}

/* The guest "Steam" CTA keeps the site's own primary-button brand
   treatment (filled accent) — it's a deliberate call-to-action, not a
   plain utility action like "Выйти", so it doesn't get the outline style. */
.app-sidebar-footer-btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #FFFFFF;
}

.app-sidebar-footer-btn-primary:hover {
    background: var(--color-accent-emphasis);
    border-color: var(--color-accent-emphasis);
    color: #FFFFFF;
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: 32px 40px;
}

.app-main-inner {
    max-width: 1040px;
}

.app-main-inner--full {
    max-width: none;
}

/* ---------- guest shell (Figma: "Без регистрации - ..." frames) ----------
   Anonymous visitors get a horizontal top nav instead of the authenticated
   sidebar — see _LayoutGuest.cshtml / _ViewStart.cshtml. Reuses .app-shell/
   .app-main/.app-main-inner as-is (they already work with a single flex
   child), so only the header itself needs new styles. */

.guest-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 32px;
}

.guest-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

.guest-logo img {
    width: 24px;
    height: 24px;
}

.guest-logo span {
    font-size: 24px;
    font-weight: 300;
    color: var(--color-text-primary);
}

.guest-nav {
    flex: none;
}

/* Same visual recipe as .app-sidebar-footer-btn (outline pill), just not
   forced to full width — this one sits inline in a header row. */
.guest-header-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 16px 24px;
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: transparent;
    color: var(--color-text-primary);
    font-size: 16px;
    font-weight: 300;
    white-space: nowrap;
}

.guest-header-cta:hover {
    background: var(--color-pill-bg-hover);
    color: var(--color-text-primary);
    text-decoration: none;
}

/* ---------- home hero (guest-only) ---------- */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 61px;
    min-height: calc(100vh - 300px);
    padding: 40px 20px;
    text-align: center;
}

.hero-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 906px;
}

.hero-title {
    font-size: 64px;
    font-weight: 200;
    color: var(--color-text-primary);
    margin: 0;
}

.hero-title .accent {
    color: var(--color-warning);
}

.hero-subtitle {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    color: var(--color-text-primary);
    margin: 0;
}

/* Same filled/glow pill recipe as .game-tab.active, standalone — this is a
   CTA link, not a tab, so it gets its own class instead of reusing .game-tab. */
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    border-radius: 999px;
    background: var(--color-warning);
    color: var(--color-warning-text);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 35.65px var(--color-warning);
}

.hero-cta:hover {
    background: var(--color-warning);
    color: var(--color-warning-text);
    filter: brightness(1.05);
    text-decoration: none;
}

/* ---------- cards ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px;
    box-shadow: 0 4px 20px var(--color-card-shadow);
    overflow-x: auto;
}

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-control);
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.btn-primary {
    background: var(--color-accent);
    color: #FFFFFF;
}

.btn-primary:hover {
    background: var(--color-accent-emphasis);
    color: #FFFFFF;
}

.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn-outline:hover {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
}

.btn-danger-outline {
    background: transparent;
    color: var(--color-negative);
    border: 1px solid var(--color-border);
}

.btn-danger-outline:hover {
    background: var(--color-negative);
    color: #FFFFFF;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* ---------- tab pills (MaterialMTabsListStyle equivalent) ---------- */

.tab-track {
    display: inline-flex;
    background: var(--color-background);
    border-radius: 20px;
    padding: 4px;
    gap: 2px;
}

.tab-pill {
    padding: 8px 18px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border: none;
    background: transparent;
    font-family: inherit;
}

.tab-pill.active {
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px var(--color-card-shadow);
}

/* ---------- tables ---------- */

table.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table.data-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--color-border);
}

table.data-table td {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

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

table.data-table tbody tr:hover {
    background: var(--color-surface-raised);
}

.avatar-sm {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    object-fit: cover;
}

/* ---------- forms ---------- */

label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    display: block;
    margin-bottom: 6px;
}

.form-control,
input[type="text"],
input[type="date"],
textarea,
select {
    width: 100%;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text-primary);
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-accent);
}

.field {
    margin-bottom: 16px;
}

.field-error {
    color: var(--color-negative);
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* ---------- misc ---------- */

.pill-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: var(--radius-control);
    color: var(--color-text-primary);
}

.list-row:hover {
    background: var(--color-surface-raised);
}

.list-row + .list-row {
    margin-top: 4px;
}

.empty-state {
    color: var(--color-text-secondary);
    padding: 24px 0;
}

/* ---------- championships page header + toolbar ---------- */

.championships-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.page-title {
    font-size: 36px;
    font-weight: 200;
    color: var(--color-text-primary);
    margin: 0;
}

.btn-create {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--color-warning);
    color: var(--color-warning-text);
    box-shadow: 0 4px 35.65px var(--color-warning);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.btn-create:hover {
    color: var(--color-warning-text);
    text-decoration: none;
    opacity: 0.9;
}

.championships-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}

/* Per-game accent — reused for the game tabs' "selected" pill (already
   themed via --color-warning) is NOT this; this is specifically the
   championship badge/thumb tint, one color per game (GameCatalog.ColorFor),
   distinct per game rather than all sharing the site's single accent. */
.game-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-warning-text);
    white-space: nowrap;
}

/* Outline, not filled — confirmed via Dev Mode MCP (border-[#fb8b0a],
   no bg, box-shadow radius 71.3px rather than the tab pill's 35.65px). */
.game-badge-ACE { border-color: #D9534F; }
.game-badge-ACC { border-color: #FB8B0A; }
.game-badge-ACR { border-color: #4CAF6D; }
.game-badge-AMS2 { border-color: #00A1FF; }

/* ---------- championship cards ---------- */

.championship-group + .championship-group {
    margin-top: 32px;
}

.championship-group-title {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.championship-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Active group goes 2-up starting at the reference's own wider breakpoint
   (its "from 1480px" frame vs. the narrower "1280–1479px" one) — stays a
   single-width stack below that. */
@media (min-width: 1479px) {
    .championship-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Upcoming/past groups use a 2-column grid of smaller cards instead of the
   active group's full-width stack — same card markup either way, the
   thumbnail's flexible aspect-square simply renders smaller in a
   narrower grid cell. */
.championship-list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

/* Same logic one tier further up: 3-up past 1920px, for both the active
   group and the upcoming/past grids. */
@media (min-width: 1920px) {
    .championship-list,
    .championship-list--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.championship-card {
    display: flex;
    align-items: center;
    gap: 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding-right: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-pill);
    text-decoration: none;
    color: inherit;
    transition: transform 150ms ease, border-color 150ms ease;
}

.championship-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-warning);
    text-decoration: none;
    color: inherit;
}

/* Signature element: since events have no real photo, every card gets a
   tinted gradient tile carrying the site's own brand mark (the diagonal
   three-stripe logo) blown up large and bled off one corner — an owned,
   distinctive visual anchor instead of a stock/placeholder photo. Tinted
   by the event's own game (see GameCatalog) so the color still carries
   real information at a glance, same idea as before but keyed by game
   now that games are the page's primary axis instead of open/category. */
.championship-thumb {
    aspect-ratio: 1 / 1;
    flex: 1 1 0;
    border-radius: 11px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--thumb-color, var(--color-border)) 22%, #0E1116), #0E1116);
}

.championship-thumb img {
    position: absolute;
    width: 260%;
    height: 260%;
    top: -70%;
    right: -90%;
    opacity: 0.5;
    transform: rotate(-12deg);
}

/* A real uploaded cover photo — plain cover-fit, none of the bled/rotated
   placeholder-logo treatment above. */
.championship-thumb--photo {
    background: var(--color-surface-raised);
}

.championship-thumb--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    object-fit: cover;
    opacity: 1;
    transform: none;
}

.championship-card.game-ACE .championship-thumb { --thumb-color: #D9534F; }
.championship-card.game-ACC .championship-thumb { --thumb-color: #FB8B0A; }
.championship-card.game-ACR .championship-thumb { --thumb-color: #4CAF6D; }
.championship-card.game-AMS2 .championship-thumb { --thumb-color: #00A1FF; }

.championship-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1;
    min-width: 0;
    padding: 32px 0;
}

.championship-title {
    font-size: 24px;
    font-weight: 200;
    color: var(--color-text-primary);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.championship-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    width: 100%;
}

.championship-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.championship-participants {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .championship-list--grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .championship-card {
        flex-wrap: wrap;
    }
}

/* ---------- event details / participation flow ---------- */

.event-back-link {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.event-back-link a {
    display: flex;
    color: var(--color-text-primary);
}

.event-back-link a:hover {
    color: var(--color-accent-emphasis);
}

/* Reuses .championship-card's layout wholesale (photo + info column) — it's
   not a link here, so hover's affordance is switched off. */
.event-hero {
    cursor: default;
}

.event-hero:hover {
    transform: none;
    border-color: var(--color-border);
}

/* .championship-thumb defaults to a flexible square that shrinks with the
   card row (right for a compact list row); the details hero wants a fixed,
   larger photo instead — same gradient/photo rendering, different sizing. */
.event-hero-thumb {
    flex: none;
    width: 334px;
    height: 334px;
    align-self: stretch;
}

.event-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.event-hero-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.event-hero-meta svg {
    flex: none;
    color: var(--color-warning);
}

.event-attempt-active {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.event-countdown {
    font-size: 32px;
    font-weight: 200;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .event-hero-thumb {
        width: 100%;
        height: 220px;
    }
}

/* ---------- modal (join-event confirmation) ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.64);
    padding: 20px;
}

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

.modal-panel {
    width: 100%;
    max-width: 574px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--color-pill-border);
    border-radius: var(--radius-card);
}

.modal-title {
    margin: 0;
    font-size: 24px;
    font-weight: 400;
    color: var(--color-text-primary);
}

.modal-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary);
}

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

/* ---------- profile layout ---------- */

.profile-shell {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.profile-tabs {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-tab {
    padding: 10px 14px;
    border-radius: var(--radius-control);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-tab:hover {
    background: var(--color-surface-raised);
    color: var(--color-text-primary);
    text-decoration: none;
}

.profile-tab.active {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.profile-content {
    flex: 1;
    min-width: 0;
}

/* ---------- leaderboard layout ---------- */

.leaderboard-shell {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.track-list {
    flex: 0 0 245px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-card);
    padding: 12px 0;
}

.track-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px 0 12px;
    border-left: 4px solid transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.track-list-item:hover {
    background: var(--color-surface-raised);
    text-decoration: none;
}

.track-list-item.active {
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
    border-left-color: var(--color-warning);
}

.track-flag {
    width: 18px;
    height: 12px;
    flex: none;
    border-radius: 2px;
    object-fit: cover;
}

.leaderboard-content {
    flex: 1;
    min-width: 0;
}

/* Top-level row: game tabs (left) + car filter (right) — same row,
   positioned above the whole track/table section so it stays visible even
   when the selected game has no tracks yet. Full content width, so the
   car filter's right edge lines up with the table/podium's own right edge
   below (both span the same "leaderboard-shell" width). */
.leaderboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

/* Track selection moves from the sidebar list into a dropdown here below
   the reference's own narrower breakpoint (its "1280–1479px" frame has no
   room for the sidebar list) — hidden by default (desktop keeps the
   sidebar), shown only in that range. Game tabs also go full-width so they
   sit alone on their own row, pushing Трасса/Машина onto the next one. */
.track-dropdown {
    display: none;
}

@media (max-width: 1479px) {
    .track-list {
        display: none;
    }

    .track-dropdown {
        display: block;
    }

    .leaderboard-toolbar .game-tabs {
        flex: 1 0 100%;
    }
}

/* Both pill groups below (game tabs, car filter trigger) share the same
   floating-pill-tray treatment from the reference: a translucent,
   bordered, softly-shadowed tray holding individually-padded segments —
   exact values from the Figma Tabs/Dropdown components. */
.game-tabs,
.car-filter-trigger {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 11px;
    border-radius: 999px;
    background: var(--color-pill-bg);
    border: 1px solid var(--color-pill-border);
    box-shadow: var(--shadow-pill);
}

.car-filter {
    position: relative;
}

.car-filter-trigger {
    font-family: inherit;
    cursor: pointer;
    color: inherit;
}

.car-filter-trigger:hover,
.car-filter.open .car-filter-trigger {
    background: var(--color-pill-bg-hover);
}

/* The open list — a real custom dropdown, not a native <select> popup
   (which can't be themed and was rendering as an unstyled white-on-white
   OS popup). Exact bg/border/radius/shadow from the Figma "List" node. */
.car-filter-list {
    position: absolute;
    top: calc(100% + 7px);
    left: -1px;
    width: 174px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--color-pill-bg);
    /* Glass effect behind the translucent list background. */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--color-pill-border);
    border-radius: 24px;
    box-shadow: var(--shadow-pill);
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
}

.car-filter-list[hidden] {
    display: none;
}

.car-filter-item {
    /* Padding + line-height alone still read as uneven (font descenders in
       characters like "g"/"y" sit closer to the bottom padding edge than
       ascenders do to the top, regardless of line-height value) — flexbox
       centering the line box within a fixed-height row sidesteps that
       font-metric asymmetry entirely instead of fighting it with padding. */
    display: flex;
    align-items: center;
    height: 34px;
    /* Without this, the list's max-height (below) squeezes every item via
       flex-shrink instead of scrolling once content overflows — confirmed
       via getBoundingClientRect (items were rendering at ~25px, not the
       34px set above). */
    flex-shrink: 0;
    padding: 0 16px;
    gap: 8px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-filter-item:hover {
    background: var(--color-pill-bg-hover);
    text-decoration: none;
}

.car-filter-item.active {
    background: var(--color-pill-bg);
}

.game-tab {
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.game-tab:hover {
    background: var(--color-pill-bg);
    text-decoration: none;
}

.game-tab.active {
    background: var(--color-warning);
    color: var(--color-warning-text);
    box-shadow: 0 4px 35.65px var(--color-warning);
}

.game-tab.active:hover {
    background: var(--color-warning);
}

.car-filter-label {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.car-filter-value {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
}

/* ---------- leaderboard table: zebra striping instead of row borders ---------- */

.leaderboard-table-card {
    padding: 24px;
}

table.leaderboard-table {
    width: 100%;
    /* separate (not collapse) so each striped row's background can carry
       its own border-radius below — collapse would force shared borders
       between adjacent cells and break the rounded-row-card look. */
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

table.leaderboard-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 16px 8px;
}

table.leaderboard-table th.col-position {
    text-align: center;
}

table.leaderboard-table td {
    padding: 10px 8px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* The pilot cell is the one column set apart — larger, regular weight,
   the rest of the row stays 14px/medium. */
table.leaderboard-table td.cell-pilot {
    font-size: 16px;
    font-weight: 400;
}

/* Exact tint from the Figma reference — a cool blue-grey wash, not the
   theme's own (much more saturated) --color-surface-raised. Applied per
   TD (not TR) with radius only on the first/last cell of the row, since
   background/radius on <tr> doesn't reliably clip across browsers. */
table.leaderboard-table tbody tr:nth-child(odd) td {
    background: rgba(123, 160, 175, 0.05);
}

table.leaderboard-table tbody tr:nth-child(odd) td:first-child {
    border-radius: 16px 0 0 16px;
}

table.leaderboard-table tbody tr:nth-child(odd) td:last-child {
    border-radius: 0 16px 16px 0;
}

/* ---------- podium (top 3) ---------- */

.podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.podium-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px;
    /* Podium-specific — half the shared --color-surface alpha (0.06 →
       0.03), per request. Not touching the shared token itself, which
       every other card on the site still uses at 0.06. */
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 24px 28px;
    box-shadow: 0 4px 20px var(--color-card-shadow);
}

/* Per-rank tint — exact colors from the Figma reference: gold for 1st,
   pale silver for 2nd, bronze/orange for 3rd — used for both the border
   gradient above and the ambient corner glow below. */
.podium-card.rank-1 { --podium-color: #FFCA1D; }
.podium-card.rank-2 { --podium-color: #F0E7C7; }
.podium-card.rank-3 { --podium-color: #FF5A1D; }

.podium-card::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Anchored top-LEFT — confirmed via Dev Mode MCP (the reference's own
       blur shape sits mostly past the card's left/top edges), not
       top-right as first approximated. */
    background: radial-gradient(circle at 0% 0%, var(--podium-color, transparent), transparent 60%);
    opacity: 0.21;
    pointer-events: none;
}

.podium-card > * {
    position: relative;
}

.podium-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--color-text-primary);
    font-weight: 400;
}

.podium-driver-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.podium-driver {
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podium-time {
    font-size: 32px;
    font-weight: 200;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}

.podium-footer {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ---------- rank delta (day-over-day movement) ---------- */

.rank-delta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* Table rows stack the arrow above the number — the podium's own delta
   badge stays horizontal (its default). Confirmed via Dev Mode MCP: the
   two contexts use different layouts, not just different sizing. */
.rank-delta.vertical {
    flex-direction: column;
    gap: 6px;
}

.rank-delta svg {
    flex: none;
}

.rank-delta.up {
    color: var(--color-positive);
}

.rank-delta.down {
    color: var(--color-negative);
}

.rank-delta.flat {
    color: var(--color-text-secondary);
}

@media (max-width: 900px) {
    .podium {
        grid-template-columns: 1fr;
    }

    .leaderboard-shell {
        flex-direction: column;
    }

    /* .track-list itself is already display:none below 1479px (see the
       track-dropdown breakpoint above) — nothing to lay out here. */

    .app-shell {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 10px 16px;
        gap: 16px;
    }

    .app-logo {
        margin: 0;
        flex: none;
    }

    .app-nav {
        flex: 1;
        display: flex;
        padding: 0;
        overflow-x: auto;
    }

    .app-nav-item {
        margin-bottom: 0;
        margin-right: 4px;
        padding: 8px 12px;
        white-space: nowrap;
    }

    .app-sidebar-footer {
        padding: 0;
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 0;
    }

    .app-sidebar-footer-label {
        display: none; /* keep the mobile bar compact — just the action button */
    }

    .app-sidebar-footer-btn {
        width: auto;
        padding: 8px 16px;
    }

    .app-main {
        padding: 20px;
    }

    .guest-header {
        flex-wrap: wrap;
        padding: 16px 20px;
    }

    .guest-nav {
        order: 3;
        flex: 1 0 100%;
        overflow-x: auto;
    }

    .hero-title {
        font-size: 40px;
    }

    .profile-shell {
        flex-direction: column;
    }

    .profile-tabs {
        flex-direction: row;
        flex: none;
        overflow-x: auto;
    }
}