:root {
    --bg-deep: #080f0d;
    --bg-card: #0f1a17;
    --bg-card-soft: #132320;
    --border: #1e3530;
    --text: #e8f5f0;
    --text-dim: #7a9e94;
    --accent: #26e5ab;
    --accent-2: #e8b84a;
    --accent-3: #e87060;
    --danger: #e85c5c;
    --danger-bg: #1a0e0e;
    --success-bg: #0d1f1a;
    --success-border: #1a4035;
}

* {
    box-sizing: border-box;
}

/* Generic display-none toggle. Most existing hide/show toggles in this file
   are scoped to a specific compound selector (e.g. .build-detail-row.hidden)
   instead of relying on this -- kept as a plain fallback so any element can
   be hidden via JS/Jinja without needing its own dedicated rule. !important
   because plenty of elements this gets applied to (e.g. .claim-dropdown,
   .claim-instructions) set their own `display` at the same specificity --
   without it, source order (not "is .hidden present") would decide winner. */
.hidden {
    display: none !important;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-deep);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-x: hidden;
}

.backdrop {
    display: none;
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.5rem;
    background: rgba(16, 28, 24, 0.88);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.topbar .back-link {
    margin-bottom: 0;
}

.topbar .back-link:not(.back-link-brand) {
    font-size: 1.15rem;
    line-height: 1;
    transform: translateY(0.25rem);
}

.topbar-push-right {
    margin-left: auto;
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
}

.topbar-menu-toggle {
    display: none;
    border: none;
    background: none;
    color: var(--text);
    padding: 0.3rem;
    margin-left: auto;
    line-height: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.topbar-menu-toggle:hover {
    color: var(--accent);
}

.topbar-menu-icon-close {
    display: none;
}

.topbar-menu-toggle[aria-expanded="true"] .topbar-menu-icon-bars {
    display: none;
}

.topbar-menu-toggle[aria-expanded="true"] .topbar-menu-icon-close {
    display: block;
}

.topbar-discord-label {
    display: none;
}

/* Below this width the topbar's links start colliding/overflowing (brand +
   3-4 nav items + gaps needs ~600px); collapse them into a hamburger-driven
   dropdown instead of letting them wrap or clip. Keep in sync with the
   matching check in device_preview.js/topbar_menu.js if this changes. */
@media (max-width: 700px) {
    .topbar-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topbar-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.4rem 0;
        background: rgba(12, 22, 19, 0.98);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
    }

    .topbar-links.open {
        display: flex;
    }

    .topbar-links .back-link,
    .topbar-links .topbar-discord,
    .topbar-links .topbar-profile-toggle {
        width: 100%;
        padding: 0.85rem 1.5rem;
        text-align: left;
        transform: none;
    }

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

    .topbar-links .topbar-discord-label {
        display: inline;
        margin-left: 0.6rem;
        font-size: 1rem;
    }

    .topbar-links .topbar-push-right {
        margin-left: 0;
    }

    .topbar-links .topbar-profile-dropdown {
        transform: none;
        width: 100%;
    }

    .topbar-links .topbar-profile-menu {
        position: static;
        min-width: 0;
        border: none;
        border-top: 1px solid var(--border);
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
    }
}

.topbar-discord {
    display: flex;
    align-items: center;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s ease;
    transform: translateY(0.25rem);
}

.topbar-discord:hover {
    color: var(--accent);
}

.topbar-profile-dropdown {
    position: relative;
    transform: translateY(0.25rem);
}

.topbar-profile-toggle {
    border: none;
    background: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}

.topbar-profile-toggle:hover {
    color: var(--accent-2);
}

.topbar-profile-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    z-index: 20;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--bg-card-soft), var(--bg-card));
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.topbar-profile-menu-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.topbar-profile-menu-row:last-child {
    border-bottom: none;
}

.topbar-profile-menu-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.topbar-profile-menu-item {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.9rem;
    color: var(--text);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.topbar-profile-menu-row:hover .topbar-profile-menu-item {
    color: var(--accent-2);
}

.topbar-profile-relinquish-btn {
    border: none;
    background: none;
    padding: 0.2rem 0.9rem 0.2rem 0.3rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--danger);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.topbar-profile-relinquish-btn:hover {
    opacity: 1;
}

.topbar-profile-menu-empty {
    margin: 0;
    padding: 0.75rem 0.9rem;
    max-width: 220px;
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
}

.page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 6rem 1.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.page-wide {
    max-width: 75vw;
}

.page-landing {
    max-width: calc(60vw + 3rem);
    align-items: flex-start;
}

.page-landing .hero {
    text-align: left;
    margin-bottom: 1rem;
}

.page-landing .uid-pill-form {
    margin-left: 0;
}

.landing-grid {
    display: grid;
    grid-template-columns: 480px calc(60vw - 480px - 2.5rem);
    gap: 2.5rem;
    align-items: stretch;
}

.landing-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.landing-aside {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.stats-card {
    flex: 1;
    height: 100%;
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    justify-content: flex-end;
    position: relative;
    overflow: visible;
}
.stats-card.card {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

.stat-art {
    position: absolute;
    inset: -1.5rem;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 10%, black 62%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 10%, black 62%, transparent 97%);
    mask-composite: intersect;
}
.stat-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(8, 15, 13, 0) 0%,
        rgba(8, 15, 13, 0) 45%,
        rgba(8, 15, 13, 0.55) 68%,
        rgba(8, 15, 13, 0.9) 85%,
        rgba(8, 15, 13, 0.97) 100%
    );
}
.stat-art.stat-art-active {
    opacity: 1;
}
.stat-art.stat-fade-out {
    opacity: 0;
}

.stat-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: opacity 0.35s ease, transform 0.35s ease;
    position: relative;
    z-index: 1;
}

.stat-slide.stat-fade-out {
    opacity: 0;
    transform: translateY(-6px);
}

.stat-tag {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
}

.stat-value {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    line-height: 1.1;
    color: var(--accent);
}
.stat-value-muted {
    color: var(--text-dim);
    font-size: 1.4rem;
}

.stat-meta {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.2;
}

.stat-lb {
    font-size: 0.72rem;
    color: var(--text-dim);
    line-height: 1.2;
    text-decoration: none;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.stat-lb.stat-lb-linked:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.stat-dots {
    display: flex;
    gap: 0.4rem;
    position: relative;
    z-index: 1;
}

.stat-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.stat-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}

.card.card-wide {
    width: 74vw;
    max-width: 74vw;
    overflow-x: auto;
    border-radius: 8px;
}

.card.card-leaderboard {
    background: var(--bg-card);
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    /* Overrides .card-wide's own overflow-x:auto -- this page's tables each
       scroll independently now (see .build-table-scroll on the submitted-row
       and main rankings tables, and .ceiling-row-table-frame), instead of the
       whole card scrolling as one unit and dragging the header/team/weapon
       controls sideways along with the table content. */
    overflow-x: visible;
}

/* 1600px + the .card padding (1.75rem each side) + its 1px border each side --
   .card-leaderboard never zeroes out the shared .card's own horizontal padding,
   so a plain 1600px cap left .rankings-table-scroll/.submitted-row-wrap/
   .ceiling-row-table-frame with only ~1542px to work with: less than
   rankings_min_width's 1550px floor, forcing a small permanent horizontal
   scrollbar on those tables no matter how wide the browser window is. */
.page-leaderboard {
    max-width: calc(1600px + 3.5rem + 2px);
    padding-left: 0;
    padding-right: 0;
}

.page-profile {
    max-width: 1650px;
}

.hero {
    text-align: center;
    margin-bottom: 2.25rem;
}

.hero-tight {
    margin-bottom: 1.5rem;
}

.hero-leaderboards-list {
    margin-bottom: 1.25rem;
}

.hero-tag {
    display: inline-block;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-2);
    background: rgba(232, 184, 74, 0.12);
    border: 1px solid rgba(232, 184, 74, 0.28);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1rem;
}

.hero h1 {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.15;
    margin: 0 0 0.6rem;
    color: #ffffff;
}

.beta-tag {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.56rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    vertical-align: super;
    margin-left: 0.25em;
    opacity: 0.55;
}

.leaderboard-card-title {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 2.1rem;
    line-height: 1.15;
    margin: 0 0 1.25rem;
    padding-bottom: 0.15em;
    text-align: center;
    color: var(--text);
}

.hero-subtitle {
    color: var(--text-dim);
    font-size: 1.1rem;
    font-style: italic;
    margin: 0 0 0.5rem;
    opacity: 0.9;
}

.hero-sub {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.back-link {
    display: inline-block;
    color: var(--text-dim);
    font-size: 1rem;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.15s ease;
}

.back-link:hover {
    color: var(--accent-2);
}

.back-link-brand {
    color: #26e5ab;
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

.back-link-brand:hover {
    color: #26e5ab;
    opacity: 0.85;
}

.card {
    width: 100%;
    margin-bottom: 1.5rem;
    background: linear-gradient(160deg, var(--bg-card-soft), var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.field {
    margin-bottom: 1.25rem;
}

.field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.5rem;
}

.card-leaderboard .field {
    margin-bottom: 0.75rem;
}

.card-leaderboard .field label {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.team-field {
    display: flex;
    justify-content: center;
}

.team-field-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-field-inner label {
    align-self: center;
    margin-bottom: 0.4rem;
}

input[type="text"] {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #080f0d;
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    border-radius: 12px;
    padding: 0.8rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

label[for="submit-uid"],
label[for="profile-search-input"],
label[for="leaderboards-search-input"] {
    text-align: center;
}

#submit-uid,
#profile-search-input,
#leaderboards-search-input {
    display: block;
    width: 100%;
    max-width: 35ch;
    margin: 0 auto;
    border-radius: 0;
    padding: 0.4rem 1rem;
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(38, 229, 171, 0.2);
}

input[type="text"]::placeholder {
    color: #3d5e56;
}

.button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.weapon-field {
    text-align: center;
}

.weapon-field .button-grid {
    justify-content: center;
}

.pill-btn {
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-card-soft);
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 999px;
    padding: 0.55rem 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.pill-btn:hover {
    transform: translateY(-1px);
}

.pill-btn.active {
    background: var(--bg-deep);
    color: var(--text);
    font-weight: 700;
}

.pill-btn.icon-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 1.15rem 0.35rem 0.35rem;
    border-radius: 999px;
}

.pill-weapon-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.pill-weapon-label {
    font-size: 0.85rem;
}

.hint {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0.2rem 0 0;
}

.leaderboard-description {
    color: var(--text-dim);
    font-size: 0.95rem;
    text-align: center;
    align-self: center;
    max-width: 38rem;
    margin: 0 0 0.75rem;
}

.leaderboard-description.hidden {
    display: none;
}

.leaderboard-description a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(38, 229, 171, 0.4);
    transition: border-color 0.15s ease;
}

.leaderboard-description a:hover {
    border-color: var(--accent);
}

.four-p-filter-notice {
    position: relative;
    align-self: center;
    margin: -0.4rem 0 0.75rem;
    text-align: center;
}

.four-p-filter-toggle {
    background: none;
    border: none;
    color: #e0a72d;
    font-size: 0.8rem;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
    user-select: text;
}

.four-p-filter-toggle:hover {
    color: #f0bb4a;
}

.four-p-filter-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 0.2rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card-soft);
    color: var(--text-dim);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

.four-p-filter-toggle:hover .four-p-filter-info-icon {
    color: var(--text);
    border-color: var(--accent-2);
}

.four-p-filter-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 32rem;
    max-width: 80vw;
    padding: 0.7rem 0.9rem;
    background: var(--bg-card-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: left;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.four-p-filter-dropdown.hidden {
    display: none;
}

.four-p-filter-heading {
    margin: 0 0 0.4rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
}

.four-p-filter-explainer {
    margin: 0 0 0.6rem;
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.4;
}

.four-p-filter-warning-highlight {
    color: #e0a72d;
}

.four-p-filter-allowed-label {
    margin: 0 0 0.5rem;
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 600;
}

.four-p-filter-sets {
    flex-wrap: wrap;
}

.four-p-norm-pairs {
    flex-wrap: wrap;
}

.four-p-norm-pair {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.four-p-norm-arrow {
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1;
}

.four-p-norm-notice {
    position: relative;
    align-self: center;
    margin: -0.4rem 0 0.75rem;
    text-align: center;
}

.four-p-norm-toggle {
    background: none;
    border: none;
    color: #e0a72d;
    font-size: 0.8rem;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
    padding: 0;
    user-select: text;
}

.four-p-norm-toggle:hover {
    color: #f0bb4a;
}

.four-p-norm-toggle:hover .four-p-filter-info-icon {
    color: var(--text);
    border-color: var(--accent-2);
}

#profile-results-table.hidden {
    display: none;
}

#profile-search-hint.hidden {
    display: none;
}

#profile-pagination.hidden {
    display: none;
}

.profile-preview-card.hidden {
    display: none;
}

.profile-preview-card {
    margin-bottom: 1rem;
}

.profile-preview-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: 14px;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    animation: rise 0.25s ease;
    transition: border-color 0.15s ease;
}

.profile-preview-inner:hover {
    border-color: var(--accent);
}

.profile-preview-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.profile-preview-name {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--text);
}

.profile-preview-signature {
    font-size: 0.85rem;
    color: var(--text-dim);
    font-style: italic;
}

.profile-preview-meta {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 0.2rem;
}

.profile-preview-namecard {
    position: relative;
    width: 460px;
    max-width: 100%;
    height: 75px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.leaderboard-section {
    width: 100%;
    margin-bottom: 1.5rem;
}

.list-section {
    width: 100%;
    margin-bottom: 1.5rem;
}

.build-table-scroll {
    width: 100%;
    overflow-x: auto;
    display: flex;
    /* Same "safe center" fix as .build-detail below -- plain `center` would
       clip unreachable overflow past the left edge when the table is wider
       than the viewport. */
    justify-content: flex-start;
    justify-content: safe center;
}

.list-section .leaderboard-table.list-table {
    border-left: none;
    border-right: none;
    border-top: none;
}

.list-section .leaderboard-table.list-table thead th {
    background: #0f1a17;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.list-section .leaderboard-table.list-table tbody td {
    background: #0a120f;
}

.list-section .leaderboard-table.list-table tbody tr:nth-child(even) td {
    background: #0a120f;
}

.list-section .leaderboard-table.list-table tbody tr:hover td {
    background: #0d1a16;
}

.list-section .leaderboard-table.list-table thead th:first-child {
    border-left: 1px solid var(--border);
}

.list-section .leaderboard-table.list-table thead th:last-child {
    border-right: 1px solid var(--border);
}

/* Same header/body/hover triad as the individual leaderboard's rankings-table
   (--bg-deep/--bg-card/--bg-card-soft) instead of this page's own darker
   list-section palette above -- used by the profile page and profiles list
   page specifically, not every .list-section table (e.g. the all-leaderboards
   list keeps its own palette). */
.list-section .leaderboard-table.list-table.rankings-palette thead th {
    background: var(--bg-deep);
}

.list-section .leaderboard-table.list-table.rankings-palette tbody td,
.list-section .leaderboard-table.list-table.rankings-palette tbody tr:nth-child(even) td {
    background: var(--bg-card);
}

.list-section .leaderboard-table.list-table.rankings-palette tbody tr:hover td {
    background: var(--bg-card-soft);
}

.list-section .leaderboard-table.list-table.rankings-palette tbody tr.build-detail-row td {
    background: var(--bg-deep);
    padding: 1.5rem;
    position: relative;
}

.leaderboard-section .field label {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
}

.leaderboard-section .leaderboard-list {
    gap: 0;
    overflow: hidden;
}

.leaderboard-section .leaderboard-row {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    transition: background 0.15s ease;
}

.leaderboard-section .leaderboard-row:last-child {
    border-bottom: none;
}

.leaderboard-section .leaderboard-row:hover {
    background: var(--bg-card-soft);
    transform: none;
    border-color: transparent;
}

.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.leaderboard-row {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 92px;
    padding: 0.85rem 1.1rem;
    border-radius: 14px;
    background: #0f1a17;
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.leaderboard-row:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.leaderboard-art {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.65;
    filter: brightness(1.35);
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.leaderboard-rank {
    position: relative;
    z-index: 1;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent-2);
    min-width: 2rem;
}

.leaderboard-icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.leaderboard-info {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.leaderboard-agent {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
}

.leaderboard-agent.wip-title {
    color: var(--danger);
}

.leaderboard-title-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.mindscape-pill {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    background: #1d5c3a;
    border: 1px solid rgba(38, 229, 171, 0.4);
    border-radius: 999px;
    padding: 0.18rem 0.4rem;
    flex-shrink: 0;
}

.leaderboard-team {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.leaderboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.6rem;
}

.leaderboard-table thead th {
    text-align: left;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0 1rem 0.5rem;
}

.sort-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.build-table-scroll th.stat-center,
.build-table-scroll td.stat-center {
    width: 170px;
}

.sort-btn:hover {
    color: var(--accent-2);
}

.sort-btn .sort-arrow {
    display: inline-block;
    width: 0.8em;
    margin-left: 0.3rem;
    font-size: 1em;
    text-align: center;
    color: inherit;
}

/* Inactive sort buttons leave .sort-arrow's textContent as "" (see
   updateRankingsSortButtons() and its siblings in profiles_search.js /
   leaderboards_list.js / submit.js) rather than removing the element, so its
   reserved width/margin above stuck around even with nothing to show -- that
   invisible reserved space shifted the visible label off-center within a
   text-align:center header cell. :empty only matches once textContent is
   genuinely "", so the active state (arrow has ▲/▼ text) is unaffected. */
.sort-btn .sort-arrow:empty {
    width: 0;
    margin-left: 0;
}

.sort-btn.active {
    color: var(--accent-2);
}

.rankings-table {
    table-layout: fixed;
}

/* Override .leaderboard-table's "stack of separate rounded tiles" look (border-spacing
   gaps + per-row rounded corners) with a real bordered grid: one continuous outline,
   header band, and row dividers. Compound .leaderboard-table.rankings-table / .list-table
   selectors throughout so these reliably beat the shared .leaderboard-table rules
   regardless of source order. Shared by the per-leaderboard rankings table and the
   all-leaderboards listing table -- anything specific to rankings-only columns (widths,
   text-align, stat columns) stays scoped to .rankings-table below instead. */
.leaderboard-table.rankings-table,
.leaderboard-table.list-table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}

.leaderboard-table.rankings-table thead th,
.leaderboard-table.list-table thead th {
    background: #080f0d;
    border-bottom: 1px solid var(--border);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.leaderboard-table.rankings-table tbody td,
.leaderboard-table.list-table tbody td {
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.leaderboard-table.rankings-table tbody td:first-child,
.leaderboard-table.rankings-table tbody td:last-child,
.leaderboard-table.list-table tbody td:first-child,
.leaderboard-table.list-table tbody td:last-child {
    border-radius: 0;
}

.leaderboard-table.rankings-table tbody tr:last-child td,
.leaderboard-table.list-table tbody tr:last-child td {
    border-bottom: none;
}

.leaderboard-table.rankings-table tbody tr:nth-child(even) td,
.leaderboard-table.list-table tbody tr:nth-child(even) td {
    background: #0f1a17;
}

.leaderboard-table.rankings-table tbody tr:hover td,
.leaderboard-table.list-table tbody tr:hover td {
    background: #132320;
    border-color: var(--border);
}

/* Compound selector (two classes) so this always beats .leaderboard-table's own
   thead th / tbody td padding regardless of source order -- header and body cells
   must get identical horizontal padding or their content visibly misaligns. */
.leaderboard-table.rankings-table thead th,
.leaderboard-table.rankings-table tbody td,
.leaderboard-table.list-table thead th,
.leaderboard-table.list-table tbody td {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

.leaderboard-table.rankings-table thead th,
.leaderboard-table.rankings-table tbody td {
    white-space: nowrap;
}


/* The number of stat-th columns varies per leaderboard (config.relevant_lb_stats), so
   only the fixed leading/trailing columns get explicit widths; table-layout: fixed
   divides the remaining space evenly among however many stat-th columns there are. */
.rankings-table th.stat-th {
    white-space: nowrap;
    white-space: pre-line;
}

/* Higher specificity than the .leaderboard-table.rankings-table padding rule above,
   so stat columns can claim a bit more content width than the fixed columns. */
.leaderboard-table.rankings-table th.stat-th {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.rankings-table th.stat-center,
.rankings-table td.stat-center {
    text-align: center;
}

.last-updated-cell {
    width: 150px;
    white-space: nowrap;
    text-align: left;
}

.build-count-cell {
    width: 90px;
    white-space: nowrap;
    text-align: left;
}

/* table-layout:fixed so column widths stay put across pagination -- otherwise auto
   layout re-fits each column to whatever nickname/signature lengths happen to be on
   the current page, making columns visibly shift width when changing pages. Only the
   # and Nickname columns need explicit widths; Signature (the most length-variable
   column) absorbs the rest, and build-count-cell/last-updated-cell above already
   have their own fixed widths. */
#profile-results-table {
    table-layout: fixed;
}

#profile-results-table th:nth-child(1),
#profile-results-table td:nth-child(1) {
    width: 48px;
}

#profile-results-table th:nth-child(2),
#profile-results-table td:nth-child(2) {
    width: 30%;
}

.rankings-table th:nth-child(1), .rankings-table td:nth-child(1) { width: 5%; }   /* Rank */
.rankings-table th:nth-child(2), .rankings-table td:nth-child(2) { width: 8%; }  /* Owner */
.rankings-table th:nth-child(3), .rankings-table td:nth-child(3) { width: 12%; }  /* Sets */
.rankings-table th:nth-child(4), .rankings-table td:nth-child(4) { width: 10%; }  /* Main Stats */
/* 12%, not a min-width or max(%, px) -- table-layout:fixed only reads each
   first-row cell's own `width` to size columns, so neither a separate
   min-width nor mixing in a px floor works here: when the declared widths'
   sum exceeds the table's own (already floored by its inline min-width)
   total, fixed layout proportionally shrinks the over-budget columns back
   down to fit -- the same mechanism behind the earlier th.stat-center:170px
   bug. A plain percentage avoids that entirely since it's inherently
   self-consistent. On leaderboards with few relevant_lb_stats columns
   (fewer stat-th columns => smaller table's own min-width, see the inline
   style on .rankings-table), 9% could shrink below "Ceiling Score ▼"'s
   actual content width, pushing the sort arrow past the table's own
   overflow:hidden edge and clipping it off entirely. 12% of even the
   smallest real table (6 stat columns) comfortably covers it. */
.rankings-table th:nth-last-child(1), .rankings-table td:nth-last-child(1) { width: 12%; } /* Damage */
.rankings-table th.stat-col-ap { width: 6%; }

.rank-crown {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.rank-crown-icon {
    width: 16px;
    height: 16px;
    fill: var(--accent-2);
}

.rank-crown-age {
    font-size: 0.65em;
    line-height: 1;
    color: var(--accent-2);
    white-space: nowrap;
}

/* The "true crown" -- rank 1 under a leaderboard's own default subcategory,
   not just whatever subcategory a viewer happens to have selected -- gets a
   brighter gold + glow, same #ffd700 bling already used for T7 discs
   (.build-disc.dv-t7 etc.) elsewhere on this page, instead of the flat
   --accent-2 gold every other subcategory's rank-1 crown uses. */
.rank-crown--true .rank-crown-icon {
    fill: #ffd700;
    filter: drop-shadow(0 0 3px #ffd700b3);
}

.rank-crown--true .rank-crown-age {
    color: #ffd700;
    font-weight: 600;
}

/* The single canonical "true crown of the leaderboard" -- default weapon
   *and* default subcategory, as opposed to just being the "true crown" of
   whichever weapon variant is currently showing -- gets everything
   .rank-crown--true already has, plus a small sparkle badge on the crown
   itself so it reads as a further tier, not a different thing. */
.rank-crown--leaderboard-true .rank-crown-icon {
    filter: drop-shadow(0 0 4px #ffd700e0);
}

.rank-crown-sparkle {
    position: absolute;
    top: -5px;
    right: -6px;
    width: 9px;
    height: 9px;
    fill: #ffd700;
    filter: drop-shadow(0 0 1.5px #ffd700);
}

#category-filters {
    text-align: center;
}

#category-filters.hidden {
    display: none;
}

.category-filter-group .button-grid {
    justify-content: center;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
}

.pagination-btn,
.pagination-current-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--text-dim);
}

.pagination-current-wrap {
    width: 1.5rem;
}

.pagination-btn {
    cursor: pointer;
    transition: color 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
    color: var(--accent-2);
}

.pagination-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.pagination-icon {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    line-height: 1;
}

.pagination-label {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.62rem;
    font-weight: 400;
}

.pagination-current {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pagination-current:hover {
    color: var(--accent-2);
}

.pagination-current-input {
    width: 100%;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    color: var(--text);
    background: var(--bg-card-soft);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0;
    line-height: 1.2;
}

.pagination-current-input.hidden {
    display: none;
}

.pill-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

.rankings-table th:nth-last-child(1),
.rankings-table td:nth-last-child(1) {
    text-align: center;
}

.rankings-table th:nth-child(1),
.rankings-table td:nth-child(1),
.rankings-table th:nth-child(3),
.rankings-table td:nth-child(3),
.rankings-table th:nth-child(4),
.rankings-table td:nth-child(4) {
    text-align: center;
}

.rankings-table .icon-row,
.rankings-table .stat-list {
    justify-content: center;
    align-items: center;
}

.rankings-table .icon-row {
    flex-wrap: nowrap;
}

.rankings-table tbody tr.rankings-row {
    cursor: pointer;
}

.four-p-warning-badge {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.85rem;
    color: #e0a72d;
    cursor: help;
}

.four-p-warning-banner {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    width: fit-content;
    margin: -0.9rem auto 0.75rem 0;
    text-align: left;
    color: #a3894f;
    font-size: 0.75rem;
    opacity: 0.85;
}

.four-p-warning-banner-icon {
    flex: none;
    font-size: 0.8rem;
    line-height: 1.4;
}

.four-p-warning-banner-text {
    line-height: 1.4;
}

.list-table tbody tr.profile-row {
    cursor: pointer;
}

.list-table tbody tr.rankings-row {
    cursor: pointer;
}

.build-detail-row.hidden {
    display: none;
}

.leaderboard-table.rankings-table tbody tr.build-detail-row td {
    padding: 1.5rem;
    background: #080f0d;
    /* No overflow-x:auto here (unlike previously) -- same reasoning as
       profile.html's equivalent .list-section ... build-detail-row td rule,
       which never had it: now that the table itself is guaranteed wide
       enough for a build-detail-row's 6 discs (see rankings_min_width in
       leaderboard.html), this row no longer needs its own independent
       scrollbar. It used to get one anyway whenever the table's
       stat_columns-driven width was narrower than the disc row needed,
       which was a second scrollbar distinct from (and confusing next to)
       .rankings-table-scroll/.submitted-row-wrap/.ceiling-row-table-frame's
       own. */
    position: relative;
}

.build-detail-submitted {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 0.7rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.build-detail-namecard {
    margin: 0 auto 1rem;
}

.namecard-link {
    cursor: pointer;
    transition: border-color 0.15s ease, opacity 0.15s ease;
}

.build-detail-namecard.namecard-link:hover {
    border-color: rgba(38, 229, 171, 0.4);
}

.build-detail-namecard-fallback.namecard-link:hover {
    opacity: 0.8;
}

.namecard-popup-uid {
    position: absolute;
    right: 10px;
    top: 6px;
    z-index: 2;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 10px rgba(0, 0, 0, 1), 0 1px 8px rgba(0, 0, 0, 1);
}

.build-detail-namecard-fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.build-detail-namecard-fallback-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
}

.build-detail-namecard-fallback-uid,
.build-detail-namecard-fallback-signature {
    font-size: 0.85rem;
    color: var(--text-dim);
}

.build-detail-namecard-fallback-signature {
    font-style: italic;
}

.build-detail {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.1rem;
    /* Plain `center` pushes overflow equally past both edges when the row is too
       wide to fit, and the left-side overflow isn't reachable by scrolling
       (scrollLeft can't go negative), cutting off the first card. `safe center`
       (fallback: flex-start for browsers that don't support the `safe` keyword)
       centers the row when it fits, but falls back to start-alignment instead of
       cutting content off when it doesn't. */
    justify-content: flex-start;
    justify-content: safe center;
    white-space: normal;
}

.build-disc {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 230px;
    min-width: 230px;
    padding: 0.6rem;
    background: var(--bg-card-soft);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* Card border recolored to match its DV% tier, same palette as the disc icon
   border and DV badge (see .build-disc-set-icon.dv-t1..t8 below). A second,
   darker-shade 2px outline sits flush against that border's outer edge (using
   outline instead of a second border so it doesn't affect the card's box
   layout/sizing). */
.build-disc.dv-t1 { border-color: #9ca3af; outline: 2px solid #4e5258; outline-offset: 0; }
.build-disc.dv-t2 { border-color: #c2540a; outline: 2px solid #612a05; outline-offset: 0; }
.build-disc.dv-t3 { border-color: #f97316; outline: 2px solid #7d3a0b; outline-offset: 0; }
.build-disc.dv-t4 { border-color: #39ff14; outline: 2px solid #1d800a; outline-offset: 0; }
.build-disc.dv-t5 { border-color: #00e5ff; outline: 2px solid #007380; outline-offset: 0; }
.build-disc.dv-t6 { border-color: #edd22a; outline: 2px solid #776915; outline-offset: 0; }
.build-disc.dv-t7 { border-color: #ffd700; outline: 2px solid #806c00; outline-offset: 0; }
.build-disc.dv-t8 { border-color: #ff2d2d; outline: 2px solid #801717; outline-offset: 0; }

/* The disc icon is the card's focal point -- big and centered-left -- with the
   substat list right-anchored on top of it so the two visually overlap, matching
   the in-game drive disc card. */
.build-disc-top {
    position: relative;
    flex-shrink: 0;
    height: 124px;
    min-height: 124px;
}

/* Reserves the space before the substat list's overlap zone as the icon's own
   "column" and centers the icon within it, instead of just offsetting the icon
   a fixed amount from the card's left edge. */
.build-disc-icon-col {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(100% - 60px - 0.7rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.build-disc-set-icon {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card);
    border: 2px solid var(--accent-2);
}

/* Disc icon border recolored to match its DV% tier (see the dv-t1..t8 badge
   colors below) instead of the flat gold default. */
.build-disc-set-icon.dv-t1 { border-color: #9ca3af; }
.build-disc-set-icon.dv-t2 { border-color: #c2540a; }
.build-disc-set-icon.dv-t3 { border-color: #f97316; }
.build-disc-set-icon.dv-t4 { border-color: #39ff14; }
.build-disc-set-icon.dv-t5 { border-color: #00e5ff; }
.build-disc-set-icon.dv-t6 { border-color: #edd22a; }
.build-disc-set-icon.dv-t7 { border-color: #ffd700; }
.build-disc-set-icon.dv-t8 { border-color: #ff2d2d; }

.build-disc-substats {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    width: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Only the top and bottom rows' icons shift left, following the disc's circular
   silhouette (which curves inward away from the vertical center) so the icons
   read as wrapping around the disc. The values/pips stay put on their existing
   right-aligned edge, matching the middle rows. */
.build-disc-substats li:first-child .build-disc-substat-icon,
.build-disc-substats li:last-child .build-disc-substat-icon,
.build-disc-substats li:first-child .build-disc-substat-name,
.build-disc-substats li:last-child .build-disc-substat-name {
    transform: translateX(-10px);
}

/* Icon (fixed width), then value+pips filling the rest and right-aligned within
   it, so every row's value/pips share one right edge -- but the container
   itself (.build-disc-substats width, above) is sized just wide enough for the
   widest realistic content (a maxed-out 6-pip row), so on that row the icon and
   value sit right next to each other with near-zero slack; narrower rows still
   line up to the same right edge, just with more visible space to the icon. */
.build-disc-substats li {
    display: grid;
    grid-template-columns: 16px 1fr;
    align-items: start;
    gap: 0.25rem;
    white-space: nowrap;
    font-size: 0.82rem;
    color: var(--text);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.85);
}

/* Brightness tiers from a config's substat_rating: "great" substats (its first
   tuple) are full brightness, "good" (second tuple) are dimmed, and anything
   not listed ("bad") is dimmed further. A config with no rating info at all
   renders every substat as "great" (see app.py's _substat_tier). The per-build
   substat totals row below the disc cards shares the "bad" dimming, but keeps
   "good" at full brightness (only recoloring "great"'s border gold) -- it's
   scoped separately since that row isn't per-disc. */
.build-disc-substats li.tier-good {
    opacity: 0.7;
}

.build-disc-substats li.tier-bad,
.build-substat-total.tier-bad {
    opacity: 0.25;
}

.build-substat-total.tier-great {
    border-color: var(--accent-2);
}

/* Pips on a dimmed ("good"/"bad") row switch from the gold accent to white --
   gold at reduced opacity reads as a muddy brown, white stays legibly "dimmed"
   instead. */
.build-disc-substats li.tier-good .pip,
.build-disc-substats li.tier-bad .pip {
    background: var(--text);
}

.build-disc-substat-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-dim);
    text-align: left;
}

.build-disc-substat-icon {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.85));
}

.build-disc-substat-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.build-disc-substat-value {
    font-weight: 700;
    text-align: right;
}

/* Roll-count pips -- one pip per upgrade the substat has actually received, so a
   build's substat quality reads at a glance. Only rolled-up pips are shown
   (right-aligned), not the theoretical max a substat could reach. */
.build-disc-substat-pips {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

.pip {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* The disc's main stat (icon + value) as a small badge pinned to the card's
   top-left corner, instead of a text heading in a footer bar. It's absolutely
   positioned and free to overlap the disc icon underneath (z-index above it) --
   deliberately not accounted for in the rest of the card's layout. */
.build-disc-main-stat-badge {
    position: absolute;
    left: -0.45rem;
    top: -0.45rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: rgba(8, 15, 13, 0.92);
    border-radius: 6px;
}

.build-disc-main-stat-badge img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.build-disc-main-stat-name {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--accent-2);
}

.build-disc-main-stat-value {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}

/* DV% (Disc Value) badge -- same look as the main stat badge above, mirrored to
   the card's bottom-left corner instead of the top-left. */
.build-disc-value-badge {
    position: absolute;
    left: -0.45rem;
    bottom: -0.45rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    background: rgba(8, 15, 13, 0.92);
    border-radius: 6px;
}

.build-disc-value-label,
.build-disc-value-value {
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text);
}

/* DV% color bands, low to high (see app.py's _dv_tier): t1 = below 50%, ...,
   t8 = 99%+. Grey -> dark orange -> orange -> neon green -> neon blue ->
   bright yellow, with the top two bands both landing in the bright-yellow/gold
   range since "100" is really "99%+". Coloring the badge's text (not its dark
   background) so it reads clearly at a glance without a full badge-color
   redesign. */
.build-disc-value-badge.dv-t1 .build-disc-value-value,
.build-disc-value-badge.dv-t1 .build-disc-value-label {
    color: #9ca3af;
}

.build-disc-value-badge.dv-t2 .build-disc-value-value,
.build-disc-value-badge.dv-t2 .build-disc-value-label {
    color: #c2540a;
}

.build-disc-value-badge.dv-t3 .build-disc-value-value,
.build-disc-value-badge.dv-t3 .build-disc-value-label {
    color: #f97316;
}

.build-disc-value-badge.dv-t4 .build-disc-value-value,
.build-disc-value-badge.dv-t4 .build-disc-value-label {
    color: #39ff14;
}

.build-disc-value-badge.dv-t5 .build-disc-value-value,
.build-disc-value-badge.dv-t5 .build-disc-value-label {
    color: #00e5ff;
}

.build-disc-value-badge.dv-t6 .build-disc-value-value,
.build-disc-value-badge.dv-t6 .build-disc-value-label {
    color: #edd22a;
}

.build-disc-value-badge.dv-t7 .build-disc-value-value,
.build-disc-value-badge.dv-t7 .build-disc-value-label {
    color: #ffd700;
}

.build-disc-value-badge.dv-t8 .build-disc-value-value,
.build-disc-value-badge.dv-t8 .build-disc-value-label {
    color: #ff2d2d;
}

.build-detail-empty {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-dim);
    margin: 0;
}

/* Whole-build substat roll totals, summed across all 6 discs -- lets a build's
   overall substat investment be read at a glance without adding up each disc
   card individually. */
.build-substat-summary {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-dim);
}

.build-substat-summary-item {
    position: relative;
    flex-shrink: 0;
}

.build-substat-summary-item strong {
    color: var(--accent-2);
    font-weight: 700;
}

/* Ceiling-only caveat (see weapon_picker.js's renderBuildDetailRow -- gated on
   entry.is_ceiling so it never shows on a real submission's build detail),
   same muted amber as the 4P off-meta warning banner text since both are
   "don't take this number at face value" cautions. */
.ceiling-disclaimer {
    max-width: 46rem;
    margin: 0.6rem auto 0;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #a3894f;
    /* Overrides .leaderboard-table.rankings-table tbody td's white-space:
       nowrap, which this paragraph would otherwise inherit -- without this,
       the whole disclaimer renders as one unbroken line and overflows the
       table instead of wrapping (same reason .build-detail sets this too). */
    white-space: normal;
}

.build-detail-context {
    text-align: center;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.build-detail-context-label {
    font-weight: 600;
}

.build-detail-context-default-wrap {
    position: relative;
    display: inline-block;
}

.build-detail-other-leaderboards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    margin-top: 1.4rem;
    padding-top: 0.9rem;
}

.other-leaderboards-toggle {
    background: none;
    border: none;
    color: var(--accent-2);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
}

.other-leaderboards-toggle:hover {
    color: var(--text);
}

.other-leaderboards-caret {
    display: inline-block;
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

.other-leaderboards-toggle[aria-expanded="true"] .other-leaderboards-caret {
    transform: rotate(180deg);
}

.other-leaderboards-list {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.build-detail-other-leaderboard-link {
    color: var(--accent);
    text-decoration: none;
    margin: 0 0.3rem;
}

.build-detail-other-leaderboard-link:hover {
    text-decoration: underline;
}

.build-detail-other-leaderboard-sep {
    color: var(--text-dim);
}

.substat-priority-toggle {
    background: none;
    border: none;
    color: var(--accent-2);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
}

.substat-priority-toggle:hover {
    color: var(--text);
}

.substat-priority-caret {
    display: inline-block;
    font-size: 0.8rem;
    transition: transform 0.15s ease;
}

.substat-priority-toggle[aria-expanded="true"] .substat-priority-caret {
    transform: rotate(180deg);
}

.substat-priority-list {
    margin-top: 0.6rem;
    max-width: 100%;
    /* A wide leaderboard (Base + many rated substat columns) can easily
       exceed this dropdown's own width -- scroll horizontally instead of
       letting the browser's table layout squeeze/wrap cell text, which reads
       as the table collapsing back into a tall, cramped stack (see
       .substat-priority-table's white-space: nowrap below, which is what
       actually forces this scroll instead of that squeeze). */
    overflow-x: auto;
}

.substat-priority-table {
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.78rem;
    white-space: nowrap;
}

.substat-priority-table td,
.substat-priority-table th {
    padding: 0.4rem 1.1rem;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    text-align: center;
}

.substat-priority-table td:not(.substat-priority-row-label) {
    min-width: 4.5rem;
}

.substat-priority-table tr td:first-child,
.substat-priority-table tr th:first-child {
    border-left: none;
}

.substat-priority-table tbody tr:last-child td,
.substat-priority-table tbody tr:last-child th {
    border-bottom: none;
}

.substat-priority-row-label {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-dim);
    text-align: right;
}

.substat-priority-table td.tier-base {
    background: var(--bg-card-soft);
    font-weight: 600;
    border-right: 2px solid var(--border);
}

.substat-priority-cell-name {
    font-weight: 600;
    color: var(--text);
}

/* .substat-priority-cell-name's flex layout lives on this inner <span>, not
   the <td> itself -- a <td> with display:flex stops being a table-cell for
   layout purposes (browsers apply CSS table "fixup" and pull it out of the
   row entirely), which broke this row into a vertical stack of full-width
   boxes instead of columns while the other (non-flex) rows stayed correct. */
.substat-priority-name-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.substat-priority-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.substat-priority-cell-damage {
    color: var(--text-dim);
}

.substat-priority-cell-gain {
    font-weight: 700;
    color: var(--accent);
}

.substat-priority-cell-ceiling {
    color: var(--text);
}

.substat-priority-table td.tier-base.substat-priority-cell-ceiling {
    font-weight: normal;
}

.substat-priority-cell-rank {
    color: var(--text);
}

.substat-priority-table td.tier-base.substat-priority-cell-rank {
    font-weight: normal;
}

.substat-priority-rank-changed {
    font-weight: 700;
}

.substat-priority-rank-delta {
    color: var(--accent);
    font-weight: 400;
}

.dv-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 0.2rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card-soft);
    color: var(--text-dim);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.dv-info-btn:hover {
    color: var(--text);
    border-color: var(--accent-2);
}

.dv-info-popup {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    padding: 0.6rem 0.7rem;
    background: #080f0d;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.72rem;
    line-height: 1.2;
    color: var(--text-dim);
    text-align: left;
    white-space: normal;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dv-info-popup.hidden {
    display: none;
}

.namecard-popup {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.namecard-popup.hidden {
    display: none;
}

.namecard-popup-bg {
    display: block;
    width: 460px;
    height: 75px;
    object-fit: cover;
    object-position: center;
}

.namecard-popup-text {
    position: absolute;
    inset: 0;
    padding: 0 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 2px;
}

.namecard-popup-pfp {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000;
    background: var(--bg-card);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 -10px 12px -6px rgba(255, 255, 255, 0.25);
}

.namecard-popup-pfp.hidden {
    display: none;
}

.namecard-popup-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: visible;
}

.namecard-popup-nickname {
    display: block;
    overflow: visible;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    color: #fff;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.2;
    margin-left: 5px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 1), 0 0 12px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 1);
}

.profile-preview-namecard .namecard-popup-nickname {
    margin-left: 6px;
}

.namecard-popup-signature {
    display: block;
    overflow: visible;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.2;
    margin-left: 6px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 1), 0 0 12px rgba(0, 0, 0, 1), 0 2px 10px rgba(0, 0, 0, 1);
}

/* Full-bleed breakout (escapes .page-profile's centered max-width) shared by
   the namecard image and the ownership toolbar below it, so the toolbar's
   right-edge inset lines up with .profile-namecard-uid's -- both are
   percentages of this same 100vw box. Kept separate from
   .profile-namecard-wide (which still clips the image itself via
   overflow:hidden) so the toolbar isn't clipped when it sits just below the
   image's bottom edge.
*/
.profile-namecard-shell {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    margin-bottom: 1rem;
}

.profile-namecard-wide {
    position: relative;
    height: 156px;
    border-radius: 0;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

.profile-namecard-wide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, transparent 17%, transparent 83%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.profile-namecard-bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.profile-namecard-text {
    position: absolute;
    inset: 0;
    padding: 0 5%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1.5%;
}

.profile-namecard-pfp {
    flex-shrink: 0;
    height: 70%;
    width: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #000;
    background: var(--bg-card);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 -10px 12px -6px rgba(255, 255, 255, 0.25);
    position: relative;
    z-index: 2;
}

.profile-namecard-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-namecard-nickname {
    display: block;
    white-space: nowrap;
    text-align: left;
    color: #fff;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.25vw, 1.7rem);
    line-height: 1.2;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.75);
}

.profile-namecard-signature {
    display: block;
    white-space: nowrap;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.6vw, 1.2rem);
    line-height: 1.2;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.75);
}

.profile-namecard-uid {
    position: absolute;
    right: 5%;
    bottom: 8%;
    z-index: 2;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.6vw, 1.2rem);
    line-height: 1.2;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 1px 4px rgba(0, 0, 0, 0.75);
}

.build-substat-totals {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.build-substat-total {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    background: var(--bg-card-soft);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.78rem;
}

.build-substat-total-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.build-substat-total-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-dim);
}

.build-substat-total-value {
    font-weight: 700;
    color: var(--text);
    position: relative;
    top: -1px;
}

.build-substat-total-rolls {
    color: var(--text-dim);
    font-size: 0.72rem;
    position: relative;
    top: -1px;
}

.leaderboard-table tbody td {
    background: #0f1a17;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 0.85rem 1rem;
    vertical-align: middle;
    transition: border-color 0.15s ease;
}

.leaderboard-table tbody td:first-child {
    border-left: 1px solid var(--border);
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}

.leaderboard-table tbody td:last-child {
    border-right: 1px solid var(--border);
    border-top-right-radius: 14px;
    border-bottom-right-radius: 14px;
}

.leaderboard-table tbody tr:hover td {
    border-color: var(--accent);
}

.leaderboard-cell {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    color: var(--text);
}

.icon-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.team-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 104px;
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-card-soft);
}

.team-portrait-wrap {
    position: relative;
    padding-top: 0.6rem;
}

.team-agent-icon {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.team-icon-wrap {
    position: relative;
    display: flex;
}

.team-badge {
    position: absolute;
    z-index: 2;
    right: -4px;
    bottom: -4px;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    background: #1d5c3a;
    border: 1px solid rgba(38, 229, 171, 0.4);
    border-radius: 999px;
    padding: 0.15rem 0.35rem;
}

.team-badge-left {
    right: auto;
    left: -4px;
}

.rankings-table .team-badge {
    background: transparent;
    border: none;
    padding: 0;
    color: #fff;
    text-shadow: 0 0 2px #000, 0 0 2px #000, 0 1px 2px #000;
}

.team-icon-row {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.3rem 0.3rem 0.7rem;
    background: rgba(0, 0, 0, 0.2);
}

.team-weapon-icon,
.team-set-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-card);
}

.team-set-icon {
    border: 1px solid var(--border);
}

.team-member-blank {
    border-style: dashed;
}

.team-agent-icon-blank,
.team-icon-blank {
    opacity: 0.5;
    border: 1px dashed var(--border);
    background: var(--bg-card);
}

.teammate-icon,
.weapon-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.teammate-icon-blank {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    opacity: 0.5;
    border: 1px dashed var(--border);
    background: var(--bg-card);
}

.set-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.main-stat-icon {
    width: 21px;
    height: 21px;
    object-fit: contain;
}

.stat-value-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.agent-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-cell-icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    object-fit: contain;
}

.stat-header-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
}

.stat-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
    color: var(--text);
    white-space: nowrap;
}

.count-cell {
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    color: var(--text);
}

.leaderboards-list-table .count-cell {
    font-weight: 700;
    color: var(--accent-2);
}

.row-number-th,
.row-number-cell {
    width: 2.5rem;
    text-align: left;
    color: var(--text);
}

.rank-metric-value {
    color: var(--accent-2);
}

.cta-link {
    display: block;
    text-align: center;
    margin-top: 1.5rem;
    color: var(--accent-2);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

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

.uid-pill-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 800px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.uid-pill-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(38, 229, 171, 0.15);
}

.uid-pill-form input,
.uid-pill-form #submit-uid {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.65rem 3rem 0.65rem 1.1rem;
    min-width: 0;
    text-align: left;
    margin: 0;
}

.uid-pill-form input:focus,
.uid-pill-form #submit-uid:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.uid-pill-form input::placeholder {
    color: var(--text-dim);
    opacity: 0.7;
}

.uid-pill-form button[type="submit"] {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #080f0d;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
    box-shadow: none;
    padding: 0;
}

.uid-pill-form .btn-arrow {
    display: block;
    line-height: 1;
    transform: translate(0.08em, -0.08em);
}

.uid-pill-form button[type="submit"]:hover {
    opacity: 0.85;
    transform: translateY(-50%);
    box-shadow: none;
}

.uid-pill-form button[type="submit"]:disabled {
    opacity: 0.4;
    cursor: progress;
    transform: translateY(-50%);
}

button[type="submit"] {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #080f0d;
    background: linear-gradient(120deg, var(--accent-2), var(--accent));
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 10px 30px -10px rgba(38, 229, 171, 0.35);
}

button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 34px -10px rgba(38, 229, 171, 0.5);
}

button[type="submit"]:active {
    transform: translateY(0);
}

.uid-pill-form button[type="submit"]:active {
    transform: translateY(-50%);
}

button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: progress;
    transform: none;
}

.result {
    margin-top: 1.5rem;
}

.result.hidden {
    display: none;
}

.pill-row {
    position: relative;
    margin-bottom: 1rem;
    width: 65%;
}

.pill-row .uid-pill-form {
    margin-bottom: 0;
}

.pill-row .result {
    position: absolute;
    left: calc(100% + 0.85rem);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    min-width: 140px;
    max-width: 240px;
    white-space: normal;
}

.pill-row .spinner {
    margin: 0;
    width: 22px;
    height: 22px;
}

.pill-row .result-card {
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    font-size: 0.82rem;
}

.pill-row .result.result--toast {
    position: fixed;
    top: 5rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: 360px;
    width: max-content;
    z-index: 1000;
    margin: 0;
}

.spinner {
    width: 28px;
    height: 28px;
    margin: 0.75rem auto;
    border-radius: 50%;
    border: 3px solid var(--border);
    border-top-color: var(--accent-2);
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.result-card {
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    text-align: center;
    animation: rise 0.25s ease;
}

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

.result-card.success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
}

.result-card.error {
    background: var(--danger-bg);
    border: 1px solid rgba(255, 92, 122, 0.4);
    color: #ffd0da;
    font-size: 0.9rem;
    line-height: 1.5;
}

.result-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
}

.card-leaderboard #submit-result:not(.hidden) {
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Scrolls independently (own overflow-x:auto) instead of relying on a shared
   ancestor scroll container -- same treatment as .rankings-table-scroll below.
   Deliberately NOT the shared .build-table-scroll class here: that class's
   `th.stat-center, td.stat-center { width: 170px }` rule is sized for
   profile.html's simpler build table, and forcing it onto this table's
   dynamically-many stat-th columns overflows table-layout:fixed's width
   budget, crushing every other column down to near-nothing to compensate. */
.submitted-row-wrap {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: flex-start;
    justify-content: safe center;
}

/* When the pagination row is hidden (no active search), there's nothing else
   to supply the gap before the main table below -- so this table takes over
   that spacing itself. When the pagination row IS visible, this stays out of
   the way so the table-to-pagination gap matches the main table's own (a
   plain .pagination margin-top, see below) instead of collapsing into the
   bigger table-to-table gap. */
.submitted-row-wrap:has(+ #submitted-pagination.hidden) {
    margin-bottom: 2rem;
}

#submitted-pagination {
    margin-bottom: 2rem;
}

/* Wraps the main rankings table -- same independent-scroll treatment as
   .submitted-row-wrap above and .ceiling-row-table-frame below, and same
   reason it's a dedicated class rather than the shared .build-table-scroll
   (see the comment on .submitted-row-wrap). */
.rankings-table-scroll {
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: flex-start;
    justify-content: safe center;
}

.submitted-row-table {
    margin: 0;
}

.submitted-row-table tbody tr.rankings-row-blank {
    opacity: 0.4;
}

.submitted-row-table tbody tr.rankings-row-blank td {
    /* box-sizing is border-box site-wide, so this has to include the cell's own
       0.75rem top+bottom padding (24px) on top of the tallest thing the header
       row can contain (the 20px stat-header-icon) to match the header's own
       rendered height -- not just the icon's height on its own. */
    height: 44px;
}

/* The "theoretical ceiling" reference row -- no border/background of its own
   (rank 0 isn't a real competitive rank, so it doesn't get crown-gold styling
   like a rank-1 entry would), just a quiet clickable label above a table
   matching the search/rankings tables' own width exactly (no wrapping
   padding/border to shrink it). The table itself starts hidden (see
   ceiling_row.js) until the viewer clicks through the disclaimer, or already
   has in a past visit (remembered via localStorage). No overflow-x of its own
   for the same reason as .submitted-row-wrap above -- relies on the
   surrounding .card-wide section to scroll as one unit. */
.ceiling-row-wrap {
    margin-bottom: 2rem;
}

.ceiling-row-toggle {
    display: block;
    margin: 0 0 0.5rem 0.2rem;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.15s ease;
}

.ceiling-row-toggle:hover {
    color: var(--accent);
}

.ceiling-row-table-frame {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    justify-content: safe center;
}

/* Only while obscured: a crisp border lives on the frame instead of the
   table itself, since filter:blur() on the table (see .ceiling-row-table.obscured
   below) would smear the table's own border into a soft edge. overflow:hidden
   here also clips the blur's slight bleed past the table's own edges to this
   frame's border, instead of spilling outside it. */
.ceiling-row-table-frame:has(.ceiling-row-table.obscured) {
    border: 1px solid var(--border);
}

/* Once revealed (table no longer .obscured), this scrolls independently --
   same overflow-x:auto + flex/safe-center treatment as .submitted-row-wrap /
   .rankings-table-scroll -- instead of relying on a shared ancestor scroll
   container. No border of its own here either: the table's own border (see
   .leaderboard-table.rankings-table) takes back over once revealed (below),
   so the right edge only appears once actually scrolled to the table's true
   end, matching the other two tables' behavior, instead of a border baked
   onto this frame's own (visible-viewport-width) box that showed regardless
   of scroll position. */
.ceiling-row-table-frame:has(.ceiling-row-table:not(.obscured)) {
    overflow-x: auto;
    overflow-y: hidden;
}

.leaderboard-table.ceiling-row-table {
    margin: 0;
}

/* Only while obscured: the frame above already draws this table's outline
   (see .ceiling-row-table-frame) -- without zeroing this out too, the
   table's own .leaderboard-table.rankings-table border would sit flush
   against the frame's, doubling the edge to ~2px. Once revealed, the
   table's natural border shows again instead (unlike the frame's border,
   this one sizes to the table's true full width, so the right edge only
   appears once actually scrolled there). */
.leaderboard-table.ceiling-row-table.obscured {
    border: none;
}

/* Blurred-but-present rather than display:none -- the row stays part of the
   page (so a viewer can see there's something there) but its actual numbers
   are illegible and non-interactive until revealed. Blur alone isn't enough
   to obscure small, high-contrast icons (disc set icons especially) -- their
   silhouette and color stay guessable even through a fairly heavy blur -- so
   this also desaturates and dims the content, and the overlay on top (below)
   is darker/more opaque to compensate. */
.ceiling-row-table.obscured {
    filter: blur(12px) saturate(0.15) brightness(0.55);
    pointer-events: none;
    user-select: none;
}

.ceiling-row-overlay {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(8, 15, 13, 0.65);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    padding: 1rem;
}

.ceiling-row-table.obscured + .ceiling-row-overlay {
    display: flex;
}

.ceiling-row-overlay:hover {
    color: var(--accent);
}

.result-meta {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.submit-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-align: left;
}

.submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text);
}

.whats-new-section {
    width: 60vw;
    margin-top: 3rem;
}

.whats-new-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.whats-new-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.whats-new-entry {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.whats-new-version {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.03em;
}

.whats-new-notes {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.whats-new-notes p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.whats-new-notes ul {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.whats-new-notes li {
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.faq-section {
    width: 60vw;
    margin-top: 3rem;
}

.faq-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.faq-question {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.faq-answer {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.6;
}

.footer-disclaimer {
    margin: 0;
    max-width: 560px;
    line-height: 1.6;
}

.site-footer {
    align-self: stretch;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: rgba(16, 28, 24, 0.88);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-dim);
}

.footer-inner {
    width: 100%;
    max-width: calc(60vw + 3rem);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex-shrink: 0;
}

.footer-link {
    color: var(--text-dim);
    text-decoration: none;
}

.footer-link:hover {
    color: var(--text);
    text-decoration: underline;
}

@media (max-width: 1300px) {
    .page-wide {
        max-width: 100%;
    }

    .page-landing {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }

    .landing-grid {
        grid-template-columns: 1fr;
    }

    .landing-aside {
        align-self: auto;
    }

    .stats-card {
        height: auto;
        min-height: 440px;
    }

    .whats-new-section,
    .faq-section {
        width: 100%;
    }

    .footer-inner {
        max-width: 100%;
    }

    .pill-row {
        width: 100%;
    }
}

.ownership-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0 5%;
    margin-top: 0.6rem;
    margin-bottom: 1.5rem;
}

.refresh-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.refresh-profile-icon {
    display: inline-block;
}

.refresh-profile-icon.spinning {
    animation: refresh-profile-spin 0.8s linear infinite;
}

@keyframes refresh-profile-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Positioned anchor for the dropdown, sized to the toggle button itself
   (not the full-width .ownership-toolbar row) so .claim-dropdown's right:0
   lines up under the button instead of the far edge of the toolbar's
   flex row. */
.ownership-anchor {
    position: relative;
}

.ownership-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-card-soft);
    color: var(--text);
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

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

.ownership-toggle-caret {
    font-size: 0.65rem;
    opacity: 0.7;
    transition: transform 0.15s ease;
}

.ownership-toggle-btn[aria-expanded="true"] .ownership-toggle-caret {
    transform: rotate(180deg);
}

.claim-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    width: min(360px, 90vw);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: linear-gradient(160deg, var(--bg-card-soft), var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.25rem;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.claim-badge {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-2);
}

.claim-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.claim-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.btn-secondary {
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-card-soft);
    color: var(--text);
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

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

.btn-danger {
    border: 1px solid var(--danger);
    border-radius: 0;
    background: var(--danger-bg);
    color: var(--danger);
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-danger:hover {
    background: var(--danger);
    color: var(--bg-card);
}

/* Same shape as .btn-danger, in --accent instead -- for a modal's "confirm"
   action that isn't destructive (e.g. acknowledging a disclaimer), so it
   doesn't read as a delete-style warning color. */
.btn-primary {
    border: 1px solid var(--accent);
    border-radius: 0;
    background: rgba(38, 229, 171, 0.1);
    color: var(--accent);
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary:hover {
    background: var(--accent);
    color: var(--bg-card);
}

.confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 1rem;
}

.confirm-modal-overlay.hidden {
    display: none;
}

.confirm-modal {
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: linear-gradient(160deg, var(--bg-card-soft), var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 1.5rem;
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.confirm-modal-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text);
}

.confirm-modal-body {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text);
    opacity: 0.8;
    line-height: 1.4;
}

.confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.claim-instructions {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.claim-codeword {
    font-family: 'Consolas', 'SF Mono', monospace;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-card-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    user-select: all;
}

.claim-result {
    /* .result's own margin-top is meant for standalone result boxes -- here
       it stacks on top of .claim-dropdown's flex gap, doubling the space
       before this box. */
    margin-top: 0;
}

.claim-result .result-card {
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0;
}

.build-lock-cell {
    text-align: center;
    width: 4rem;
    white-space: nowrap;
}

.build-lock-btn {
    border: none;
    background: none;
    padding: 0.2rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.build-lock-btn:hover {
    opacity: 1;
}

.build-lock-btn.active {
    opacity: 1;
}

.build-lock-badge {
    font-size: 1.1rem;
    opacity: 0.8;
}

.build-delete-btn {
    border: none;
    background: none;
    padding: 0.2rem;
    margin-left: 0.15rem;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    /* The × glyph sits higher in its line box than the lock emoji next to it
       (font metrics differ between a text glyph and an emoji) -- nudge it
       down to align with the lock icon's body. */
    vertical-align: -0.1em;
    color: var(--danger);
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.build-delete-btn:hover {
    opacity: 1;
}

/* Positioned anchor for .lb-dropdown-menu, same pattern as .ownership-anchor. */
.lb-dropdown {
    position: relative;
    display: inline-block;
}

.lb-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    color: var(--text);
    padding: 0;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease;
}

.lb-dropdown-toggle:hover {
    color: var(--accent);
}

.lb-dropdown-lock-indicator {
    font-size: 0.8rem;
    opacity: 0.8;
}

.lb-dropdown-caret {
    font-size: 0.75rem;
    opacity: 0.7;
    /* The glyph itself sits centered in the font's full line-height box,
       which (thanks to ascenders) optically reads as too high next to
       lowercase text -- nudge it down to line up with the x-height instead. */
    transform: translateY(0.1em);
    transition: transform 0.15s ease;
}

.lb-dropdown-toggle[aria-expanded="true"] .lb-dropdown-caret {
    transform: translateY(0.1em) rotate(180deg);
}

/* `position: fixed` (not absolute) and reparented straight to <body> by
   claim.js on setup -- .build-table-scroll has overflow-x:auto, which per
   spec forces overflow-y to auto too, clipping an absolutely-positioned
   descendant whenever the table doesn't have room below it. Fixed
   positioning relative to the viewport (top/left set from the toggle
   button's getBoundingClientRect() in JS) escapes that clip entirely --
   same trick this codebase already uses for .namecard-popup. */
.lb-dropdown-menu {
    position: fixed;
    z-index: 20;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, var(--bg-card-soft), var(--bg-card));
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.lb-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.lb-dropdown-item:last-child {
    border-bottom: none;
}

.device-preview-toggle {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 4500;
    display: flex;
    background: var(--bg-card-soft);
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.device-preview-btn {
    border: none;
    background: none;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.device-preview-btn:not(:last-child) {
    border-right: 1px solid var(--border);
}

.device-preview-btn:hover {
    color: var(--text);
}

.device-preview-btn.active {
    background: var(--accent);
    color: var(--bg-deep);
}

.device-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(4, 8, 7, 0.92);
    padding: 1.5rem;
}

.device-preview-overlay.hidden {
    display: none;
}

.device-preview-frame {
    width: 430px;
    height: 932px;
    max-width: 100%;
    max-height: 100%;
    border: 10px solid #111;
    border-radius: 2.25rem;
    background: var(--bg-deep);
    box-shadow: 0 20px 60px -12px rgba(0, 0, 0, 0.7);
}

.lb-dropdown-item-title-group {
    min-width: 0;
    color: var(--text);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.lb-dropdown-item-title-group:hover {
    text-decoration: underline;
}

.lb-title-lock-btn {
    flex: none;
    border: none;
    background: none;
    padding: 0;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.lb-title-lock-btn:hover {
    opacity: 1;
}

.lb-title-lock-btn.active {
    opacity: 1;
}

.lb-title-lock-badge {
    flex: none;
    font-size: 0.9rem;
    opacity: 0.7;
}