/* GENERATED by scripts/build-css.mjs — do not edit.
   Edit the files under css/ and re-run the script. */

/* ── css/reset.css ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
ol,
ul {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
}

ol,
ul {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    padding: 0;
}

blockquote,
q {
    quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
    content: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}

img {
    display: block;
}

input,
button {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd {
    margin: 0;
    font-weight: normal;
}

iframe {
    border: none;
}

/* ── css/typography.css ── */
h1,
.type-h1,
.type-headline-lg {
    font-family: "Lexend Deca", sans-serif;
    font-size: 51.4285714286px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: -2px;
    -webkit-font-smoothing: subpixel-antialiased;
}
h1::before,
.type-h1::before,
.type-headline-lg::before {
    content: "";
    margin-bottom: -0.1805555556em;
    display: table;
}
h1::after,
.type-h1::after,
.type-headline-lg::after {
    content: "";
    margin-top: -0.1305555556em;
    display: table;
}

h2,
.type-h2,
.type-headline-md {
    font-family: "Lexend Deca", sans-serif;
    /* font-size: 34.2857142857px; */
    font-size: 45px;
    line-height: 40px;
    font-weight: 700;
    letter-spacing: -1px;
    -webkit-font-smoothing: subpixel-antialiased;
}
h2::before,
.type-h2::before,
.type-headline-md::before {
    content: "";
    margin-bottom: -0.2583333333em;
    display: table;
}
h2::after,
.type-h2::after,
.type-headline-md::after {
    content: "";
    margin-top: -0.2083333333em;
    display: table;
}

h3,
.type-h3,
.type-headline-sm {
    font-family: "Lexend Deca", sans-serif;
    font-size: 22.8571428571px;
    line-height: 28px;
    font-weight: 700;
    -webkit-font-smoothing: subpixel-antialiased;
}
h3::before,
.type-h3::before,
.type-headline-sm::before {
    content: "";
    margin-bottom: -0.2875em;
    display: table;
}
h3::after,
.type-h3::after,
.type-headline-sm::after {
    content: "";
    margin-top: -0.2375em;
    display: table;
}

h4,
.type-h4,
.type-title-lg {
    font-family: "Lexend Deca", sans-serif;
    font-size: 22.8571428571px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-font-smoothing: subpixel-antialiased;
}
h4::before,
.type-h4::before,
.type-title-lg::before {
    content: "";
    margin-bottom: -0.2875em;
    display: table;
}
h4::after,
.type-h4::after,
.type-title-lg::after {
    content: "";
    margin-top: -0.2375em;
    display: table;
}

h5,
.type-h5,
.type-title-md {
    font-family: "Lexend Deca", sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-font-smoothing: subpixel-antialiased;
}
h5::before,
.type-h5::before,
.type-title-md::before {
    content: "";
    margin-bottom: -0.325em;
    display: table;
}
h5::after,
.type-h5::after,
.type-title-md::after {
    content: "";
    margin-top: -0.275em;
    display: table;
}

h6,
dt,
.type-h6,
.type-title-sm {
    font-family: "Lexend Deca", sans-serif;
    font-size: 17.1428571429px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-font-smoothing: subpixel-antialiased;
}
h6::before,
dt::before,
.type-h6::before,
.type-title-sm::before {
    content: "";
    margin-bottom: -0.375em;
    display: table;
}
h6::after,
dt::after,
.type-h6::after,
.type-title-sm::after {
    content: "";
    margin-top: -0.325em;
    display: table;
}

label,
input[type="text"],
input[type="number"],
.type-label-lg {
    font-family: "Lexend Deca", sans-serif;
    font-size: 17.1428571429px;
    line-height: 20px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}

.nav .type-label-lg {
    font-size: 20px;
}

.type-label-lg::before {
    content: "";
    margin-bottom: -0.2583333333em;
    display: table;
}
.type-label-lg::after {
    content: "";
    margin-top: -0.2083333333em;
    display: table;
}

.type-label-md {
    font-family: "Lexend Deca", sans-serif;
    font-size: 14.2857142857px;
    line-height: 18px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}
.type-label-md::before {
    content: "";
    margin-bottom: -0.305em;
    display: table;
}
.type-label-md::after {
    content: "";
    margin-top: -0.255em;
    display: table;
}

.type-label-sm {
    font-family: "Lexend Deca", sans-serif;
    font-size: 11.4285714286px;
    line-height: 12px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}
.type-label-sm::before {
    content: "";
    margin-bottom: -0.2em;
    display: table;
}
.type-label-sm::after {
    content: "";
    margin-top: -0.15em;
    display: table;
}

p,
.type-body {
    font-family: "Lexend Deca", sans-serif;
    font-size: 17.1428571429px;
    line-height: 28px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}
p::before,
.type-body::before {
    content: "";
    margin-bottom: -0.4916666667em;
    display: table;
}
p::after,
.type-body::after {
    content: "";
    margin-top: -0.4416666667em;
    display: table;
}
.type-body-2 {
    font-family: "Lexend Deca", sans-serif;
    font-size: 17.1428571429px;
    line-height: 28px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
    margin: 0 0 1rem 0

}

/* ── css/main.css ── */
/*
:root {
    color-scheme: dark;
    --color-background: #1c1b1f;
    --color-on-background: white;
    --color-background-hover: #27262c;
    --color-on-background-hover: white;
    --color-primary: #5d5e5e;
    --color-primary-disabled: #1f213c;
    --color-on-primary: white;
    --color-error: #de0000;
    --color-on-error: white;
}
:root {
    color-scheme: dark;
    --color-background: #1c1b1f;
    --color-on-background: white;
    --color-background-hover: #27262c;
    --color-on-background-hover: white;
    --color-primary: #0a2472;
    /* old color is #932888
    --color-primary-disabled: #051650;
    /* old color is #3a1f3c
    --color-on-primary: white;
    --color-error: #de0000;
    --color-on-error: white;
}

.dark.root {
    --color-background: white;
    --color-on-background: black;
    --color-background-hover: #eee;
    --color-on-background-hover: black;
    --color-primary: #1900ff;
    /* old color is #ff00ff
    --color-primary-disabled: #5131c7;
    /* old color #c031c7
    --color-on-primary: white;
    --color-error: #de0000;
    --color-on-error: white;
} */

:root {
    color-scheme: dark;
    --color-background: #1c1b1f;
    --color-on-background: white;
    --color-background-hover: #27262c;
    --color-on-background-hover: white;
    --color-primary: #660aef;
    /* old color is #932888 */
    --color-primary-disabled: #4807aa;
    /* old color is #3a1f3c */
    --color-on-primary: white;
    --color-error: #de0000;
    --color-on-error: white;
}

.dark.root {
    --color-background: white;
    --color-on-background: black;
    --color-background-hover: #eee;
    --color-on-background-hover: black;
    --color-primary: #3e00f9;
    /* old color is #ff00ff */
    --color-primary-disabled: #2c00b2;
    /* old color #c031c7 */
    --color-on-primary: white;
    --color-error: #de0000;
    --color-on-error: white;
}



html,
body,
.root {
    height: 100%;
}

.root {
    display: flex;
    flex-direction: column;
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-on-background);
}

.surface {
    background-color: var(--color-background);
    color: var(--color-on-background);
}

main.page-list {
    display: grid;
    grid-template-columns: minmax(16rem, 1.15fr) minmax(16rem, 1.9fr) minmax(16em, 0.95fr);
    column-gap: 2rem;
}

header.surface {
    padding: 0;
    display: flex;
    padding-inline: 2rem;
    height: 4.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%);
    color: var(--color-on-primary);
}
@media screen and (min-width: 1366px) {
    header {
        display: grid;
        padding-inline: 0;
    }
}
header .logo {
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}
header .logo img {
    height: 3.5rem;
}
header .nav {
    flex: 1;
}

main {
    height: 0;
    flex: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    column-gap: 2rem;
}
main > div {
    overflow-y: auto;
}

.spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: span 3;
}

input[type="checkbox"] {
    height: 1.25rem;
    width: 1.25rem;
    cursor: pointer;
    margin: 0;
}

.worldrecord {
    margin-bottom: 1rem;
}

.best-record .type-body,
.best-run .type-body {
    margin-bottom: 1rem;
}

/* Shitty - is not used */

.shitty .surface {
    padding: 1.5rem;
    border: 2px solid var(--color-on-background);;
}

.shitty header.surface {
    padding: 0 calc(25vw - 10rem);
    margin-bottom: 1.5rem;
    background-color: var(--color-background);
    color: var(--color-on-background);
}

.shitty.root {
    padding: 1.5rem;
    background-image: url("/assets/april-background.jpg");
    background-size: cover;
}

.shitty main {
    column-gap: 1.5rem;
}

.toggle-shitty:not(:hover) img {
    display: none;
}

header.new {
    padding: 0;
    display: flex;
    padding-inline: 2rem;
    height: 3.5rem;
    background-color: var(--color-on-background);
    color: var(--color-background);
}

/* ── css/pages/list.css ── */
main.page-list--pending {
    grid-template-columns: minmax(16rem, 3fr) minmax(16rem, 3fr) minmax(16em, 2fr);
}

main.page-list--pending .list-container,
main.page-list--pending .level-container {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
main.page-list--pending .list-container::-webkit-scrollbar,
main.page-list--pending .level-container::-webkit-scrollbar {
    display: none;
}

main.page-list--pending .list-container {
    padding-left: 3rem;
}

.page-list .list-container,
.page-list .level-container,
.page-list .meta-container {
    padding-block: 2rem;
}
.page-list .list-container {
    padding-inline: 1rem;
}

.page-list .meta-container {
    padding-right: 2rem;
}

.page-list .list {
    table-layout: auto;
}
.page-list .list .rank {
    text-align: end;
    padding-right: 1rem;
}

.page-list .list .level {
    width: 100%;
}
.page-list .list .level button {
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
.page-list .list .level-thumbnail {
    width: 5.33rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.35rem;
    flex-shrink: 0;
    display: block;
    background-color: #333;
}
.page-list .list .level.error button {
    color: var(--color-error);
    cursor: not-allowed;
    text-decoration: line-through;
}
.page-list .list .level button:hover {
    background-color: var(--color-background-hover);
    color: var(--color-on-background-hover);
    cursor: pointer;
}
.page-list .list .level.active button {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 62%, white) 100%);
    color: var(--color-on-primary);
}
.page-list .level-container .level {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-right: 2rem;
    max-width: 48rem;
}
.page-list .level-container .level .level-authors {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: max-content;
    gap: 1rem;
}
.page-list .level-container .level .video {
    aspect-ratio: 16/9;
}
.page-list .level-container .level .stats {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    gap: 2rem;
}
.page-list .level-container .level .stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.page-list .level-container .level .records {
    table-layout: fixed;
}
.page-list .level-container .level .records tr td:not(:last-child) {
    padding-right: 1rem;
}
.page-list .level-container .level .records .percent,
.page-list .level-container .level .records .user,
.page-list .level-container .level .records .hz {
    padding-block: 1rem;
}
.page-list .level-container .level .records .user {
    width: 100%;
}
.page-list .level-container .level .records .percent,
.page-list .level-container .level .records .hz {
    text-align: end;
}
.page-list .meta-container .og a:hover,
.page-list .level-container .level .records a:hover {
    text-decoration: underline;
}
.page-list .meta {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.page-list .meta .errors {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-list .meta .errors .error {
    padding: 1rem;
    background-color: var(--color-error);
    color: var(--color-on-error);
    border-radius: 0.5rem;
}
.page-list .meta .editors {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.page-list .meta .editors li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-list .meta .editors li img {
    height: 1.25rem;
}
.page-list .meta .editors li a:hover {
    text-decoration: underline;
}

/* ==========================================
   NEW PC LAYOUT - 2 Column (45% / 55%)
   ========================================== */

.page-list-new {
    display: grid;
    grid-template-columns: 40% 60%;
    height: 100%;
    overflow: hidden;
}

.page-list-new > div {
    overflow-y: auto;
}

.page-list-new .list-container-new {
    padding: 1.5rem 0 1.5rem 1rem;
    border-right: 1px solid rgba(128, 128, 128, 0.15);
}


.page-list-new .level-container-new {
    padding: 2rem 4rem 2rem 1rem;
}


/* Search row with search + filters button */
.search-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
}


.search-new {
    flex: 1;
    padding: 0.6rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-on-background);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.search-new:focus {
    outline: 2px solid var(--color-primary);
    background-color: rgba(255, 255, 255, 0.1);
}

.root.dark .search-new {
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.filters-btn {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.1);
    color: var(--color-on-background);
    cursor: pointer;
    transition: background-color 100ms ease;
}


.filters-btn:hover {
    background: rgba(128, 128, 128, 0.25);
}

/* Level sub-info (author | verifier) */
.level-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.level-subinfo {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.78rem;
    opacity: 0.5;
    font-weight: 500;
}


/* Reuse list styles within new layout */
.page-list-new .list {
    table-layout: auto;
    width: 100%;
}
.page-list-new .list .rank {
    text-align: end;
    padding-right: 1rem;
}
.page-list-new .list .level {
    width: 100%;
}
.page-list-new .list .level button {
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: calc(100% - 20px);;
}
.page-list-new .list .level-thumbnail {
    width: 5.33rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.35rem;
    flex-shrink: 0;
    display: block;
    background-color: #333;
}
.page-list-new .list .level.error button {
    color: var(--color-error);
    cursor: not-allowed;
    text-decoration: line-through;
}
.page-list-new .list .level button:hover {
    background-color: var(--color-background-hover);
    color: var(--color-on-background-hover);
}
.page-list-new .list .level.active button {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 62%, white) 100%);
    color: var(--color-on-primary);
}
.page-list-new .list .level.active .level-subinfo {
    opacity: 0.7;
}

.page-list-new .level-container-new .level {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    max-width: none;
}

.page-list-new .level-container-new .level .level-authors {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: max-content;
    gap: 1rem;
}
.page-list-new .level-container-new .level .video {
    aspect-ratio: 16/9;
}
.page-list-new .level-container-new .level .stats {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    gap: 2rem;
}
.page-list-new .level-container-new .level .stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Leaderboard overrides */
.page-list-new.page-leaderboard {
    grid-template-columns: 1fr 1.5fr;
    max-width: none;
    margin: 0;
    column-gap: 0;
    grid-template-rows: 1fr;
}
.page-list-new.page-leaderboard .list-container-new {
    padding: 1.5rem 0 1.5rem 1rem;
    border-right: 1px solid rgba(128, 128, 128, 0.15);
    overflow-y: auto;
    scrollbar-width: thin;
}
.page-list-new.page-leaderboard .level-container-new {
    padding: 2rem;
    overflow-y: auto;
    scrollbar-width: thin;
}
.page-leaderboard .search-row--leaderboard {
    margin-left: 20px;
    margin-right: 20px;
}
.page-leaderboard .search-row--leaderboard .search-new {
    max-width: 100%;
}
.page-leaderboard .list .level button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 20px);
}
.page-list-new.page-leaderboard .level-container-new .level {
    max-width: none;
    width: 100%;
}

/* Shitty (legacy) */

.shitty .page-list .list .level button {
    background-color: transparent;
    padding: 1rem 0;
}

.shitty .page-list .list .level button:hover {
    background-color: #eee;
    color: black !important;
}

.shitty .page-list .list .level.active button {
    background-color: transparent;
    color: orange;
}

.unlisted-name {
    margin: 0 0 1.3rem 0;
}

.unlisted-creator {
    margin-right: 1.8rem;
    border-bottom: 1px solid black;
    padding-bottom: 1.8rem;
}

.unlisted-td {
    padding: 1.8rem 0 0 0;
    width: 50%;
    margin: 0 1.8rem;
}

.unlisted-table {
    width: 100%;
    margin-top: -1.8rem;
}

.unlisted-table tr:last-child .unlisted-creator {
    border-bottom: 0;
}
.tag {
    font-family: "Lexend Deca", sans-serif;
    display:block;
    border-radius: 14px;
    color: white;
    background-color: #5d5d5d;
    padding: 7px;
    margin: 2px
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legend-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.legend-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.legend-text {
    font-family: "Lexend Deca", sans-serif;
    font-size: 17.1428571429px;
    line-height: 20px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}

.legend-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Home page */
.home-page {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Shared list page hero */
.page-list-new.page-with-hero { grid-template-rows: auto 1fr; }
.page-hero {
    grid-column: 1 / -1;
    overflow-y: unset !important;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 1rem 1.25rem 1rem 1.75rem;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    background: linear-gradient(105deg, rgba(102,10,239,0.07) 0%, transparent 55%);
    position: relative;
}
.page-hero::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 30%, transparent) 100%);
}
.page-hero-content { flex: 1; min-width: 0; }
.page-hero-badge {
    display: inline-block;
    font-family: "Lexend Deca", sans-serif; font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    background: rgba(102,10,239,0.1); padding: 0.15rem 0.6rem; border-radius: 2rem; margin-bottom: 0.5rem;
}
.root.dark .page-hero-badge { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.page-hero h1 {
    font-family: "Lexend Deca", sans-serif; font-size: 1.15rem; font-weight: 700;
    letter-spacing: normal;
    color: var(--color-on-background); line-height: 1.2; margin: 0 0 0.45rem;
}
.page-hero h1::before, .page-hero h1::after { display: none; }
.page-hero p {
    font-family: "Lexend Deca", sans-serif; font-size: 0.78rem; letter-spacing: normal;
    color: var(--color-on-background); opacity: 0.5; line-height: 1.55; margin: 0; max-width: 700px;
}
.page-hero p::before, .page-hero p::after { display: none !important; }
.page-hero-stat {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0.6rem 1.2rem; border-radius: 0.65rem;
    background: rgba(128,128,128,0.06); border: 1px solid rgba(128,128,128,0.12);
    margin-right: 45px;
}
.page-hero-stat-value {
    font-family: "Lexend Deca", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
}
.root.dark .page-hero-stat-value { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.page-hero-stat-label {
    font-family: "Lexend Deca", sans-serif; font-size: 0.58rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.4; margin-top: 0.25rem;
}

/* Upcoming Levels Hero */
.page-upcoming { grid-template-rows: auto 1fr; }
.upcoming-hero {
    grid-column: 1 / -1;
    overflow-y: unset !important;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 1rem 1.25rem 1rem 1.75rem;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    background: linear-gradient(105deg, rgba(102,10,239,0.07) 0%, transparent 55%);
    position: relative;
}
.upcoming-hero::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 30%, transparent) 100%);
}
.upcoming-hero-content { flex: 1; min-width: 0; }
.upcoming-hero-badge {
    display: inline-block;
    font-family: "Lexend Deca", sans-serif; font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    background: rgba(102,10,239,0.1); padding: 0.15rem 0.6rem; border-radius: 2rem; margin-bottom: 0.5rem;
}
.root.dark .upcoming-hero-badge { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.upcoming-hero h1 {
    font-family: "Lexend Deca", sans-serif; font-size: 1.15rem; font-weight: 700;
    letter-spacing: normal;
    color: var(--color-on-background); line-height: 1.2; margin: 0 0 0.45rem;
}
.upcoming-hero h1::before, .upcoming-hero h1::after { display: none; }
.upcoming-hero p {
    font-family: "Lexend Deca", sans-serif; font-size: 0.78rem; letter-spacing: normal;
    color: var(--color-on-background); opacity: 0.5; line-height: 1.55; margin: 0; max-width: 700px;
}
.upcoming-hero p::before, .upcoming-hero p::after { display: none !important; }
.upcoming-hero-stat {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0.6rem 1.2rem; border-radius: 0.65rem;
    background: rgba(128,128,128,0.06); border: 1px solid rgba(128,128,128,0.12);
    margin-right: 45px;
}
.upcoming-hero-stat-value {
    font-family: "Lexend Deca", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
}
.root.dark .upcoming-hero-stat-value { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.upcoming-hero-stat-label {
    font-family: "Lexend Deca", sans-serif; font-size: 0.58rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.4; margin-top: 0.25rem;
}

/* ── Return to top ──────────────────────────────────────────────────────────
   Sits inside the scrolling left column as its last child. `position: sticky`
   with `height: 0` parks it just above the bottom of the scrollport without
   taking any space in the flow, so it floats over the list rather than pushing
   the final rows up. The wrapper ignores pointer events so it can span the full
   width without swallowing clicks on the levels behind it. */
.scroll-top-wrap {
    position: sticky;
    bottom: 1.5rem;
    height: 0;
    display: flex;
    justify-content: center;
    /* align-items defaults to `stretch`, which — because the wrapper is 0px tall —
       squashed the button to a sliver. flex-end lets it keep its natural height and
       float upward from the sticky line, sitting above the last rows. */
    align-items: flex-end;
    pointer-events: none;
    z-index: 5;
}
/* Same pill as the mobile .mob-scroll-top-btn. */
.scroll-top-btn {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 2rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    transition: opacity 120ms;
}
.scroll-top-btn:hover { opacity: 0.88; }

/* ── css/pages/home.css ── */
/* Override old list.css placeholder centering */
.home-page {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    font-family: "Lexend Deca", sans-serif;
}
.home-page, .home-page * { box-sizing: border-box; }
.home-page h1, .home-page h2, .home-page h3, .home-page h4, .home-page p { margin: 0; padding: 0; }
.home-page h1::before, .home-page h1::after,
.home-page h2::before, .home-page h2::after,
.home-page h3::before, .home-page h3::after,
.home-page h4::before, .home-page h4::after { display: none; }

/* ── HERO ── */
.home-hero {
    height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    background: radial-gradient(ellipse 70% 50% at 50% -5%, rgba(102,10,239,0.14) 0%, transparent 65%);
    border-bottom: 1px solid rgba(128,128,128,0.1);
    position: relative;
}
.home-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    max-width: 640px;
}
.home-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--color-on-background);
}
.home-hero-desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-on-background);
    opacity: 0.5;
    max-width: 500px;
}
.home-hero-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.25rem;
}
.home-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.4rem;
    border-radius: 0.5rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 120ms ease, transform 120ms ease;
    border: none;
    line-height: 1;
}
.home-btn--primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #a855f7) 100%);
    color: white;
}
.home-btn--primary:hover { opacity: 0.85; transform: translateY(-1px); }

.home-hero-social {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
}
.home-social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.4rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-on-background);
    background: rgba(128,128,128,0.07);
    border: 1px solid rgba(128,128,128,0.15);
    opacity: 0.6;
    transition: opacity 100ms ease;
}
.home-social-btn:hover { opacity: 1; }
.home-social-btn img { width: 1rem; height: 1rem; }

/* ── CONTENT ── */
.home-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ── CARD ── */
.home-card {
    background: var(--color-background-hover);
    border: 1px solid rgba(128,128,128,0.15);
    border-radius: 0.75rem;
    padding: 1.75rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.home-card:hover {
    border-color: rgba(128,128,128,0.55);
    box-shadow: 0 0 0 2px rgba(128,128,128,0.18), 0 6px 24px rgba(0,0,0,0.1);
    transform: scale(1.006);
}
.home-card__title {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    margin-bottom: 1.25rem;
}
.root.dark .home-card__title { color: color-mix(in srgb, var(--color-primary) 65%, black); }

/* ── 2-COL GRID ── */
.home-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch;
}
.home-grid-2col > .home-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── RECENT CHANGES ── */
.home-card--scroll {
    min-height: 0;
    overflow: hidden;
}
.home-changes {
    height: 354px;
    overflow-y: auto;
    scrollbar-width: thin;
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    background: rgba(128,128,128,0.03);
}
.home-changes-date {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-on-background);
    opacity: 0.35;
    margin: 1.25rem 0 0.85rem;
}
.home-changes-date:first-child { margin-top: 0; }
.home-changes-date::before,
.home-changes-date::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(128,128,128,0.18);
}
.home-change {
    font-size: 0.8rem;
    line-height: 1.65;
    padding: 0.15rem 0;
    color: var(--color-on-background);
}
.home-change .dim { opacity: 0.45; }
.home-change strong { font-weight: 600; }

/* ── EDITORS DESC ── */
.home-editors-desc {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.5;
    line-height: 1.6;
    margin-bottom: 1rem !important;
}

/* ── LEVEL CARD SHARED (LotM + CTV) ── */
.home-level-period {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    background: rgba(102,10,239,0.1);
    padding: 0.15rem 0.55rem;
    border-radius: 2rem;
    margin-bottom: 0.85rem;
}
.root.dark .home-level-period { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.home-level-name {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--color-on-background);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 5px;
}
.home-level-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.home-level-thumb {
    flex-shrink: 0;
    width: 120px;
    aspect-ratio: 16/9;
    border-radius: 0.4rem;
    background: rgba(128,128,128,0.08);
    border: 1px solid rgba(128,128,128,0.12);
    overflow: hidden;
}
.home-level-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-level-meta { display: flex; flex-direction: column; min-width: 0; }
.home-level-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
}
.home-level-rank {
    font-weight: 700;
    color: var(--color-on-background);
    opacity: 0.35;
}
.home-level-author {
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.5;
}
.home-level-sep {
    color: var(--color-on-background);
    opacity: 0.2;
}
.home-level-id {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    background: rgba(102,10,239,0.12);
    padding: 0.12rem 0.45rem;
    border-radius: 0.3rem;
    border: 1px solid rgba(102,10,239,0.2);
}
.root.dark .home-level-id { color: color-mix(in srgb, var(--color-primary) 65%, black); }

/* ── RECORD ROWS ── */
.home-record-box {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    border: 1px solid rgba(128,128,128,0.1);
    border-radius: 0.5rem;
    padding: 0.35rem;
    background: rgba(128,128,128,0.03);
}
.home-record-section {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.home-record-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    text-decoration: none;
    transition: background 100ms ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.home-record-row:hover {
    background: rgba(128,128,128,0.06);
    border-color: rgba(128,128,128,0.1);
}
.home-record-pct {
    font-size: 1rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    min-width: 5rem;
    font-variant-numeric: tabular-nums;
}
.root.dark .home-record-pct { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.home-record-player {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-on-background);
    flex: 1;
}
.home-record-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-on-background);
    opacity: 0.25;
    white-space: nowrap;
}

/* ── CTV / DISCORD BUTTONS ── */
.home-ctv-card { display: flex !important; flex-direction: column; }
.home-lotm-card { display: flex !important; flex-direction: column; }
.home-ctv-btn,
.home-discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 1.5rem;
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 100ms ease;
}
.root.dark .home-ctv-btn,
.root.dark .home-discord-btn { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.home-ctv-btn:hover,
.home-discord-btn:hover { opacity: 1; }
.home-ctv-btn::after { content: ' →'; }
.home-discord-btn img { width: 0.9rem; height: 0.9rem; margin-right: 3px; }

/* ── EVENTS PAGE ── */
.events-content { max-width: 1400px; }
.events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 2rem;
    align-items: start;
}
.events-lotd-card { grid-column: 1 / 3; }
.events-lotd-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 0.75rem;
}
.events-info-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--color-primary) 80%, white);
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.events-stat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.events-stat-key {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.4;
    margin-bottom: 0.2rem;
}
.events-stat-val {
    font-size: 0.875rem;
}
.events-tags { margin-top: 0.85rem; }

.home-lotd-date {
    margin-top: 25px;
    font-size: 0.78rem;
    opacity: 0.45;
    font-family: "Lexend Deca", sans-serif;
    text-align: center;
}

/* ── PARTNERS ── */
.home-partners-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.home-partner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(128,128,128,0.12);
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease;
    background: rgba(128,128,128,0.03);
}
.home-partner:hover {
    border-color: rgba(128,128,128,0.25);
    background: rgba(128,128,128,0.06);
}
.home-partner-logo {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 0.4rem;
    background: rgba(128,128,128,0.08);
    border: 1px solid rgba(128,128,128,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-partner-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.4rem; }
.home-partner-logo-placeholder {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.35rem;
    background: rgba(128,128,128,0.2);
}
.home-partner-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-on-background);
    line-height: 1.3;
}
.home-partner-desc {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.42;
    line-height: 1.55;
}

/* ── FOOTER ── */
.home-page .site-footer { margin-top: 50px; }

/* ── css/pages/list-hero.css ── */
/* Shared list page hero */
.page-list-new.page-with-hero { grid-template-rows: auto 1fr; }
.page-hero {
    grid-column: 1 / -1;
    overflow-y: unset !important;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 1rem 1.25rem 1rem 1.75rem;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    background: linear-gradient(105deg, rgba(102,10,239,0.07) 0%, transparent 55%);
    position: relative;
}
.page-hero::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 30%, transparent) 100%);
}
.page-hero-content { flex: 1; min-width: 0; }
.page-hero-badge {
    display: inline-block;
    font-family: "Lexend Deca", sans-serif; font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    background: rgba(102,10,239,0.1); padding: 0.15rem 0.6rem; border-radius: 2rem; margin-bottom: 0.5rem;
}
.root.dark .page-hero-badge { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.page-hero h1 {
    font-family: "Lexend Deca", sans-serif; font-size: 1.15rem; font-weight: 700;
    letter-spacing: normal;
    color: var(--color-on-background); line-height: 1.2; margin: 0 0 0.45rem;
}
.page-hero h1::before, .page-hero h1::after { display: none; }
.page-hero p {
    font-family: "Lexend Deca", sans-serif; font-size: 0.78rem; letter-spacing: normal;
    color: var(--color-on-background); opacity: 0.5; line-height: 1.55; margin: 0; max-width: 700px;
}
.page-hero p::before, .page-hero p::after { display: none !important; }
.page-hero-stat {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0.6rem 1.2rem; border-radius: 0.65rem;
    background: rgba(128,128,128,0.06); border: 1px solid rgba(128,128,128,0.12);
    margin-right: 45px;
}
.page-hero-stat-value {
    font-family: "Lexend Deca", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
}
.root.dark .page-hero-stat-value { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.page-hero-stat-label {
    font-family: "Lexend Deca", sans-serif; font-size: 0.58rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.4; margin-top: 0.25rem;
}

/* Upcoming Levels Hero */
.page-upcoming { grid-template-rows: auto 1fr; }
.upcoming-hero {
    grid-column: 1 / -1;
    overflow-y: unset !important;
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
    padding: 1rem 1.25rem 1rem 1.75rem;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    background: linear-gradient(105deg, rgba(102,10,239,0.07) 0%, transparent 55%);
    position: relative;
}
.upcoming-hero::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 30%, transparent) 100%);
}
.upcoming-hero-content { flex: 1; min-width: 0; }
.upcoming-hero-badge {
    display: inline-block;
    font-family: "Lexend Deca", sans-serif; font-size: 0.6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    background: rgba(102,10,239,0.1); padding: 0.15rem 0.6rem; border-radius: 2rem; margin-bottom: 0.5rem;
}
.root.dark .upcoming-hero-badge { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.upcoming-hero h1 {
    font-family: "Lexend Deca", sans-serif; font-size: 1.15rem; font-weight: 700;
    letter-spacing: normal;
    color: var(--color-on-background); line-height: 1.2; margin: 0 0 0.45rem;
}
.upcoming-hero h1::before, .upcoming-hero h1::after { display: none; }
.upcoming-hero p {
    font-family: "Lexend Deca", sans-serif; font-size: 0.78rem; letter-spacing: normal;
    color: var(--color-on-background); opacity: 0.5; line-height: 1.55; margin: 0; max-width: 700px;
}
.upcoming-hero p::before, .upcoming-hero p::after { display: none !important; }
.upcoming-hero-stat {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 0.6rem 1.2rem; border-radius: 0.65rem;
    background: rgba(128,128,128,0.06); border: 1px solid rgba(128,128,128,0.12);
    margin-right: 45px;
}
.upcoming-hero-stat-value {
    font-family: "Lexend Deca", sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
}
.root.dark .upcoming-hero-stat-value { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.upcoming-hero-stat-label {
    font-family: "Lexend Deca", sans-serif; font-size: 0.58rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.4; margin-top: 0.25rem;
}

/* ── css/pages/list-pending.css ── */
/* ── PENDING PAGE ── */
.page-pending {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.page-pending, .page-pending * { font-family: "Lexend Deca", sans-serif; box-sizing: border-box; }
.page-pending h1, .page-pending h2, .page-pending h3, .page-pending h4, .page-pending p { margin: 0; padding: 0; }
.page-pending h1::before, .page-pending h1::after,
.page-pending h2::before, .page-pending h2::after,
.page-pending h3::before, .page-pending h3::after,
.page-pending h4::before, .page-pending h4::after { display: none; }

/* Hero */
.pending-hero {
    text-align: center;
    padding: 3rem 2rem 2.5rem;
    background: linear-gradient(180deg, rgba(102,10,239,0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(128,128,128,0.15);
}
.root.dark .pending-hero {
    background: linear-gradient(180deg, rgba(62,0,249,0.08) 0%, transparent 100%);
}
.page-pending .pending-hero h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #c084fc;
    margin-bottom: 0.75rem !important;
}
.pending-hero p {
    max-width: 500px;
    margin: 0 auto;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.5;
    line-height: 1.7;
}

/* Content */
.pending-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}
.pending-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
    align-items: start;
}

/* Right column stack */
.pending-right-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card */
.pending-card {
    background: var(--color-background-hover);
    border: 1px solid rgba(128,128,128,0.15);
    border-radius: 0.75rem;
    padding: 1.75rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.pending-card:hover {
    border-color: rgba(128,128,128,0.55);
    box-shadow: 0 0 0 2px rgba(128,128,128,0.18), 0 6px 24px rgba(0,0,0,0.1);
    transform: scale(1.006);
}
.pending-card__title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    margin-bottom: 1rem;
}
.root.dark .pending-card__title {
    color: color-mix(in srgb, var(--color-primary) 65%, black);
}

/* Pending rows */
.pending-rows { display: flex; flex-direction: column; gap: 0.15rem; }
.pending-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.4rem;
    transition: background-color 100ms ease;
}
.pending-row:hover { background: rgba(128,128,128,0.06); }
.pending-row img { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.pending-row a, .pending-row span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-on-background);
    text-decoration: none;
    line-height: 1.4;
}
.pending-row a:hover { text-decoration: underline; }
.pending-row .pending-row__rank {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.4;
    margin-left: auto;
    white-space: nowrap;
}
.pending-empty {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.45;
    padding: 0.75rem 0.6rem;
}

/* Footer spacing */
.page-pending .site-footer { margin-top: 3rem; }

/* ── css/pages/information.css ── */
/* ── INFO PAGE ── */
.info-page {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.info-page, .info-page * { font-family: "Lexend Deca", sans-serif; box-sizing: border-box; }
.info-page h1,
.info-page h2,
.info-page h3,
.info-page h4,
.info-page p { margin: 0; padding: 0; }
.info-page h1::before, .info-page h1::after,
.info-page h2::before, .info-page h2::after,
.info-page h3::before, .info-page h3::after,
.info-page h4::before, .info-page h4::after { display: none; }

/* ── HERO ── */
.info-hero {
    display: block;
    text-align: center;
    padding: 4rem 2rem 3rem;
    background: linear-gradient(180deg, rgba(102,10,239,0.15) 0%, transparent 100%);
    border-bottom: 1px solid rgba(128,128,128,0.15);
}
.root.dark .info-hero {
    background: linear-gradient(180deg, rgba(62,0,249,0.08) 0%, transparent 100%);
}
.info-page .info-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #c084fc;
    margin-bottom: 30px !important;
}
.info-hero p {
    max-width: 600px;
    margin: 1rem auto 0;
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.5;
    line-height: 1.7;
}

/* ── CONTENT ── */
.info-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

/* ── CARDS GRID ── */
.info-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
}
.info-card {
    background: var(--color-background-hover);
    border: 1px solid rgba(128,128,128,0.15);
    border-radius: 0.75rem;
    padding: 1.75rem;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.info-card:hover {
    border-color: rgba(128,128,128,0.55);
    box-shadow: 0 0 0 2px rgba(128,128,128,0.18), 0 6px 24px rgba(0,0,0,0.1);
    transform: scale(1.006);
}
.info-card__title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    margin-bottom: 1rem;
}
.root.dark .info-card__title {
    color: color-mix(in srgb, var(--color-primary) 65%, black);
}

/* ── EDITORS ── */
.info-editors {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.info-editor {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.35rem;
    transition: background-color 100ms ease;
}
.info-editor:hover { background: rgba(128,128,128,0.08); }
.info-editor img {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 0.7;
}
.info-editor a, .info-editor span.info-editor__name {
    color: var(--color-on-background);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.6;
}
.info-editor a:hover { text-decoration: underline; }
.info-role {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    background: rgba(128,128,128,0.15);
    color: var(--color-on-background);
    opacity: 0.5;
    margin-left: auto;
    white-space: nowrap;
}
.info-role-owner  { background: rgba(255,180,50,0.15); color: #ffcc55; opacity:1; }
.info-role-admin  { background: rgba(100,180,255,0.15); color: #77bbff; opacity:1; }
.info-role-seniormod { background: rgba(100,220,180,0.15); color: #66ddaa; opacity:1; }
.info-role-dev    { background: rgba(200,100,255,0.15); color: #cc88ff; opacity:1; }
.root.dark .info-role-owner  { background: rgba(200,140,0,0.15); color: #b38800; }
.root.dark .info-role-admin  { background: rgba(30,100,200,0.15); color: #2266bb; }
.root.dark .info-role-seniormod { background: rgba(30,160,100,0.15); color: #1a8855; }
.root.dark .info-role-dev    { background: rgba(130,40,200,0.15); color: #7722bb; }

/* ── COLORING LEGEND ── */
.info-legend { display: flex; flex-direction: column; gap: 0.55rem; }
.info-legend-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-on-background);
}
.info-legend-dot {
    width: 0.7rem; height: 0.7rem;
    border-radius: 50%; flex-shrink: 0;
}
.info-legend-label {
    color: var(--color-on-background);
    opacity: 0.4;
    font-size: 0.75rem;
    margin-left: auto;
    white-space: nowrap;
}
.info-coloring-desc {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.5;
    margin-bottom: 16px !important;
    line-height: 1.6;
}

/* ── PENDING LEGEND ── */
.info-pending {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.info-pending-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 400;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    color: var(--color-on-background);
}
.info-pending-row img { width: 1.3rem; height: 1.3rem; }

/* ── GUIDELINES ── */
.info-guidelines {
    background: var(--color-background-hover);
    border: 1px solid rgba(128,128,128,0.15);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.info-guidelines:hover {
    border-color: rgba(128,128,128,0.55);
    box-shadow: 0 0 0 2px rgba(128,128,128,0.18), 0 6px 24px rgba(0,0,0,0.1);
    transform: scale(1.006);
}
.info-guidelines-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    background: var(--color-background-hover);
}
.info-page .info-guidelines-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-on-background);
}
.info-page .info-guidelines-header p {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.5;
    margin-top: 0.35rem;
}
.info-page .info-guidelines-search {
    padding: 0.5rem 0.85rem;
    background: rgba(128,128,128,0.08);
    border: 1px solid rgba(128,128,128,0.3);
    border-radius: 0.4rem;
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    width: 220px;
    line-height: 1.4;
}
.info-guidelines-search:focus {
    outline: 2px solid var(--color-primary);
    background: rgba(128,128,128,0.12);
}
.info-guidelines-search::placeholder { color: var(--color-on-background); opacity: 0.35; }
.info-guidelines-body {
    display: grid !important;
    grid-template-columns: 240px 1fr;
    min-height: 600px;
    width: 100%;
}

/* TOC */
.info-toc {
    border-right: 1px solid rgba(128,128,128,0.15);
    padding: 1rem 0;
    overflow-y: auto;
    max-height: 600px;
    scrollbar-width: thin;
}
.info-toc-group {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-on-background);
    opacity: 0.4;
    padding: 1.1rem 1.25rem 0.4rem;
}
.info-toc-group:first-child { padding-top: 0.25rem; }
.info-toc-link {
    display: block;
    padding: 0.5rem 1.25rem 0.5rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-on-background);
    opacity: 0.45;
    text-decoration: none;
    transition: all 100ms ease;
    cursor: pointer;
    border-left: 2px solid transparent;
}
.info-toc-link:hover {
    opacity: 0.8;
    background: rgba(128,128,128,0.05);
}
.info-toc-link.active {
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    opacity: 1;
    background: rgba(102,10,239,0.08);
    border-left-color: var(--color-primary);
}
.root.dark .info-toc-link.active {
    color: color-mix(in srgb, var(--color-primary) 65%, black);
}

/* Content pane */
.info-guidelines-content {
    padding: 2rem 2.5rem;
    overflow-y: auto;
    max-height: 600px;
    scrollbar-width: thin;
}
.info-guidelines-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: 0.25;
    gap: 0.75rem;
    text-align: center;
    color: var(--color-on-background);
}
.info-guidelines-placeholder span { font-size: 2.5rem; }
.info-guidelines-placeholder p { font-size: 0.9rem; }

/* ── GUIDELINES CONTENT ── */
.info-gl-group-header {
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(128,128,128,0.15);
}
.info-gl-group-header:first-child { margin-top: 0; }
.info-page .info-gl-group-header h2 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    line-height: 1.3;
}
.root.dark .info-gl-group-header h2 {
    color: color-mix(in srgb, var(--color-primary) 65%, black);
}
.info-gl-intro {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(128,128,128,0.04);
    border-left: 3px solid rgba(128,128,128,0.2);
    border-radius: 0 0.35rem 0.35rem 0;
}
.info-gl-intro p {
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-on-background);
    opacity: 0.6;
}
.info-gl-intro p + p { margin-top: 0.6rem; }
.info-gl-section {
    margin-bottom: 2.5rem;
}
.info-page .info-gl-section h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-on-background);
    line-height: 1.4;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(128,128,128,0.08);
}
.info-page .info-gl-section h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-on-background);
    opacity: 0.85;
    line-height: 1.4;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}
.info-gl-section p {
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-on-background);
    opacity: 0.75;
}
.info-gl-section p + p { margin-top: 0.75rem; }
.info-gl-section ul,
.info-gl-section ol {
    margin: 0.6rem 0 0.6rem 1.4rem;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--color-on-background);
    opacity: 0.75;
}
.info-gl-section ol { list-style-type: decimal; }
.info-gl-section ul { list-style-type: disc; }
.info-gl-section li {
    margin-bottom: 0.35rem;
    padding-left: 0.3rem;
}
.info-gl-section li ul,
.info-gl-section li ol {
    margin-top: 0.3rem;
    opacity: 1;
}
.info-gl-section li ol { list-style-type: lower-alpha; }
.info-gl-section li li ol { list-style-type: lower-roman; }
.info-gl-section li ul { list-style-type: circle; }
.info-gl-section li li ul { list-style-type: square; }
.info-gl-section strong {
    font-weight: 600;
    opacity: 1;
    color: var(--color-on-background);
}
.info-gl-section a {
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 100ms ease;
}
.info-gl-section a:hover { text-decoration-color: currentColor; }
.root.dark .info-gl-section a {
    color: color-mix(in srgb, var(--color-primary) 65%, black);
}
/* Contact cards */
.gl-contacts-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
.gl-contact-card {
    background: rgba(128,128,128,0.06);
    border: 1px solid rgba(128,128,128,0.12);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: border-color 150ms ease;
}
.gl-contact-card:hover { border-color: rgba(128,128,128,0.25); }
.gl-contact-role {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--color-primary) 60%, white);
    margin-bottom: 0.3rem;
}
.root.dark .gl-contact-role {
    color: color-mix(in srgb, var(--color-primary) 60%, black);
}
.gl-contact-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-on-background);
    margin-bottom: 0.15rem;
}
.gl-contact-detail {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.45;
    margin-bottom: 0.3rem;
}
.gl-contact-links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.gl-contact-links span,
.gl-contact-links a {
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.55;
}
.gl-contact-links a {
    text-decoration: none;
    transition: opacity 100ms ease;
}
.gl-contact-links a:hover {
    opacity: 0.9;
    text-decoration: underline;
}

.info-gl-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    opacity: 0.25;
    gap: 0.5rem;
    text-align: center;
    color: var(--color-on-background);
}
.info-gl-no-results span { font-size: 2rem; }
.info-gl-no-results p { font-size: 0.85rem; }

/* Footer spacing */
.info-page .site-footer { margin-top: 4rem; }

/* ── css/pages/level-page.css ── */
/* /level/<slug> — the standalone page for a single level.
   Reached cold from search results and shared links, so unlike the list panel
   it has to introduce the level on its own: a hero built from the level's own
   thumbnail, its three placements, then the video and the facts. */

/* Same scroll container the other pages use: the shell is a fixed-height flex
   column, so the page itself has to be the thing that scrolls. */
.level-page {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    font-family: 'Lexend Deca', sans-serif;

    /* Neutral greys so one set of values works in both themes. */
    --lvl-line: rgba(128, 128, 128, 0.22);
    --lvl-line-strong: rgba(128, 128, 128, 0.38);
    --lvl-fill: rgba(128, 128, 128, 0.09);
    --lvl-fill-2: rgba(128, 128, 128, 0.13);
    --lvl-accent: color-mix(in srgb, var(--color-primary) 45%, white);
}
.level-page, .level-page * { box-sizing: border-box; }
.root.dark .level-page {
    --lvl-accent: color-mix(in srgb, var(--color-primary) 75%, black);
}
/* The typography sheet hangs ::before/::after spacers off every heading and
   paragraph to trim leading. This page sets its own line heights, so they only
   add stray gaps here. */
.level-page h1::before, .level-page h1::after,
.level-page h2::before, .level-page h2::after,
.level-page h3::before, .level-page h3::after,
.level-page p::before, .level-page p::after,
.level-page dt::before, .level-page dt::after { display: none; }
.level-page a { color: inherit; text-decoration: none; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.lvl-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--lvl-line);
}
/* The level's thumbnail, blurred far past recognition — it is there for colour,
   not detail, which is why a 320px YouTube still is enough. */
.lvl-hero__bg {
    position: absolute;
    inset: -4rem;
    background-size: cover;
    background-position: center;
    filter: blur(2.75rem) saturate(1.35);
    opacity: 0.5;
    transform: scale(1.1);
}
.root.dark .lvl-hero__bg { opacity: 0.35; }
.lvl-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--color-background) 50%, transparent) 0%, var(--color-background) 94%),
        linear-gradient(100deg, color-mix(in srgb, var(--color-primary) 40%, transparent) 0%, transparent 62%);
}
.lvl-hero__inner {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    min-height: 19rem;
    max-width: 82rem;
    padding: 3.5rem 3rem 1.75rem;
}
.lvl-hero__body { flex: 1; min-width: 0; }

.lvl-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.72rem;
    opacity: 0.55;
    margin-bottom: 1.4rem;
}
.lvl-crumbs a:hover { text-decoration: underline; }
.lvl-crumbs b { font-weight: 600; }

.lvl-title {
    margin: 0;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.lvl-byline {
    margin: 0.85rem 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    opacity: 0.65;
}
.lvl-byline b { font-weight: 600; }

.lvl-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.35rem; }
.lvl-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.8rem;
    border-radius: 2rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid currentColor;
}
.lvl-status i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; }
/* Same progression the list colours level names by, so a level reads the same
   in both places. */
.lvl-status--done   { color: #9d9d9d; }
.lvl-status--red    { color: #ff5555; }
.lvl-status--orange { color: #ff6622; }
.lvl-status--amber  { color: #ffaa44; }
.lvl-status--yellow { color: #ffee55; }
.lvl-status--green  { color: #55ee55; }
.lvl-status--cyan   { color: #33dddd; }
.lvl-status--blue   { color: #5599ff; }
.root.dark .lvl-status--done   { color: #6f6f6f; }
.root.dark .lvl-status--red    { color: #cc4444; }
.root.dark .lvl-status--orange { color: #cc511b; }
.root.dark .lvl-status--amber  { color: #b87a24; }
.root.dark .lvl-status--yellow { color: #9a9022; }
.root.dark .lvl-status--green  { color: #2f9c2f; }
.root.dark .lvl-status--cyan   { color: #1d8f8f; }
.root.dark .lvl-status--blue   { color: #3a6cb8; }

.lvl-tag {
    padding: 0.32rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.72rem;
    font-weight: 500;
    background: var(--lvl-fill-2);
    border: 1px solid var(--lvl-line);
}

.lvl-ranks { display: flex; gap: 0.6rem; flex-shrink: 0; }
.lvl-rank {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.85rem 1.15rem;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--color-background) 65%, transparent);
    border: 1px solid var(--lvl-line);
    backdrop-filter: blur(8px);
    transition: border-color 120ms ease, transform 120ms ease;
}
.lvl-rank:hover { border-color: var(--lvl-line-strong); transform: translateY(-1px); }
.lvl-rank--lead {
    background: linear-gradient(150deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 55%, white) 130%);
    border-color: transparent;
    color: var(--color-on-primary);
}
.lvl-rank--lead:hover { border-color: transparent; }
.lvl-rank__n { font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.lvl-rank__l {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
    white-space: nowrap;
}
.lvl-rank--lead .lvl-rank__l { opacity: 0.85; }

/* ── Body ─────────────────────────────────────────────────────────────────── */
.lvl-body {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(17rem, 0.8fr);
    gap: 2.5rem;
    max-width: 82rem;
    padding: 2.25rem 3rem 3rem;
}
.lvl-main { min-width: 0; }

.lvl-tabs { display: flex; gap: 0.3rem; margin-bottom: 0.85rem; }
.lvl-tab {
    padding: 0.45rem 1rem;
    border-radius: 0.45rem;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    background: transparent;
    color: var(--color-on-background);
    opacity: 0.5;
    border: 1px solid var(--lvl-line);
    cursor: pointer;
    transition: opacity 120ms ease, background-color 120ms ease;
}
.lvl-tab:hover { opacity: 0.8; }
.lvl-tab.is-on {
    opacity: 1;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border-color: transparent;
}

.lvl-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 62vh;
    border-radius: 0.75rem;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--lvl-line);
}
.root.dark .lvl-video { background: var(--lvl-fill); }
.lvl-video--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0.35;
}

.lvl-section { margin-top: 2.25rem; }
.lvl-h2, .lvl-h3 {
    margin: 0 0 1rem;
    font-family: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.45;
    line-height: 1.2;
}
.lvl-h2 { font-size: 0.7rem; display: flex; align-items: center; gap: 0.5rem; }
.lvl-h3 { font-size: 0.65rem; }
.lvl-count {
    font-size: 0.62rem;
    padding: 0.12rem 0.42rem;
    border-radius: 1rem;
    background: var(--lvl-fill-2);
    letter-spacing: 0;
}
.lvl-creators { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lvl-creator {
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.78rem;
    background: var(--lvl-fill);
    border: 1px solid var(--lvl-line);
}

.lvl-about {
    grid-column: 1;
    margin: 0.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lvl-line);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.7;
    opacity: 0.5;
}
.lvl-about a { text-decoration: underline; }

/* ── Right rail ───────────────────────────────────────────────────────────── */
.lvl-side {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: sticky;
    top: 0;
    align-self: start;
}
.lvl-card {
    padding: 1.15rem 1.25rem;
    border-radius: 0.75rem;
    background: var(--lvl-fill);
    border: 1px solid var(--lvl-line);
}

.lvl-meter + .lvl-meter { margin-top: 0.95rem; }
.lvl-meter__top { display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 0.4rem; }
.lvl-meter__top span { opacity: 0.55; }
.lvl-meter__top b { font-weight: 600; }
.lvl-bar { height: 0.35rem; border-radius: 1rem; background: var(--lvl-fill-2); overflow: hidden; }
.lvl-bar i {
    display: block;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(90deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 45%, white));
}
.lvl-bar--alt i { background: linear-gradient(90deg, #e0762c, #ffc46b); }

.lvl-wr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.lvl-wr__card {
    padding: 0.8rem 0.9rem;
    border-radius: 0.6rem;
    background: var(--lvl-fill);
    border: 1px solid var(--lvl-line);
    min-width: 0;
}
.lvl-wr__k { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.45; }
.lvl-wr__v {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0.35rem;
    letter-spacing: -0.02em;
    color: var(--lvl-accent);
    overflow-wrap: anywhere;
}
a.lvl-wr__v:hover { text-decoration: underline; }
.lvl-wr__v--none { color: inherit; opacity: 0.28; font-size: 1.05rem; }
.lvl-wr__u { font-size: 0.72rem; opacity: 0.5; margin-top: 0.15rem; overflow-wrap: anywhere; }

.lvl-dl {
    margin: 0;
    display: grid;
    /* minmax(0, auto) rather than auto: a long label ("Frame Windows Counter")
       wraps instead of forcing the value off the card. */
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 0.55rem 1rem;
    font-size: 0.8rem;
}
.lvl-dl dt {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: inherit;
    text-transform: none;
    opacity: 0.45;
}
.lvl-dl dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.lvl-dl__link { color: var(--lvl-accent); text-decoration: underline; text-underline-offset: 0.15em; }
.lvl-dl__link:hover { text-decoration-thickness: 2px; }

.lvl-links { display: flex; flex-direction: column; gap: 0.45rem; }
.lvl-link {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-on-primary);
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.lvl-link:hover { opacity: 0.88; }
.lvl-link--ghost {
    background: transparent;
    color: var(--color-on-background);
    border-color: var(--lvl-line-strong);
    font-weight: 500;
}
.lvl-link--ghost:hover { background: var(--lvl-fill-2); opacity: 1; }
.lvl-link--copied {
    color: #3fbf7f;
    border-color: #3fbf7f;
    background: rgba(63, 191, 127, 0.1);
}

/* ── Missing level ────────────────────────────────────────────────────────── */
.lvl-missing {
    max-width: 34rem;
    padding: 5rem 3rem 4rem;
}
.lvl-missing h1 { margin: 0 0 1rem; font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; }
.lvl-missing p { margin: 0 0 1.75rem; font-size: 0.9rem; font-weight: 500; line-height: 1.7; opacity: 0.6; }
.lvl-missing .lvl-link { display: inline-block; width: auto; }

/* ── Narrow ───────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .lvl-hero__inner { padding-inline: 2rem; }
    .lvl-body { padding-inline: 2rem; gap: 2rem; }
    .lvl-missing { padding-inline: 2rem; }
}

@media (max-width: 900px) {
    .lvl-hero__inner {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        /* Clear the fixed sidebar toggle, which sits at the top-left. */
        padding: 3.5rem 1.25rem 1.5rem;
    }
    .lvl-ranks { flex-wrap: wrap; }
    .lvl-rank { flex: 1 1 6rem; }
    .lvl-body {
        grid-template-columns: minmax(0, 1fr);
        padding: 1.5rem 1.25rem 2.5rem;
        gap: 1.75rem;
    }
    .lvl-about { margin-top: 0; }
    /* Nothing to stick to once the rail is a stacked block. */
    .lvl-side { position: static; }
    .lvl-video { max-height: none; }
    .lvl-missing { padding: 4rem 1.25rem 3rem; }
}

@media (max-width: 420px) {
    .lvl-wr { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .lvl-rank, .lvl-tab, .lvl-link { transition: none; }
    .lvl-rank:hover { transform: none; }
}

/* ── css/pages/leaderboard.css ── */
.page-leaderboard-container {
    display: block;
}
.page-leaderboard {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(24rem, 2fr) 3fr;
    grid-template-rows: max-content 1fr;
    column-gap: 2rem;
    max-width: 80rem;
    margin: 0 auto;
}
.page-leaderboard > div {
    overflow-y: auto;
}
.page-leaderboard .error-container {
    grid-row: 1;
    grid-column: 1 / span 2;
}
.page-leaderboard .error-container .error {
    padding: 1rem;
    background-color: var(--color-error);
    color: var(--color-on-error);
}
.page-leaderboard .board-container,
.page-leaderboard .player-container {
    grid-row: 2;
    padding-block: 2rem;
}
.page-leaderboard .board-container {
    padding-inline: 1rem;
}
.page-leaderboard .board {
    table-layout: auto;
    display: block;
    width: 100%;
}
.page-leaderboard .board .rank {
    padding-block: 1rem;
    text-align: end;
}
.page-leaderboard .board .total {
    padding: 1rem;
    text-align: end;
}
.page-leaderboard .board .user {
    width: 100%;
}
.page-leaderboard .board .user button {
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: none;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
}
.page-leaderboard .board .user button:hover {
    background-color: var(--color-background-hover);
    color: var(--color-on-background-hover);
    cursor: pointer;
}
.page-leaderboard .board .user.active button {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}
.page-leaderboard .player {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-right: 2rem;
}
.page-leaderboard .player .table {
    table-layout: fixed;
}
.page-leaderboard .player .table tr td:not(:last-child) {
    padding-right: 2rem;
}
.page-leaderboard .player .table p,
.page-leaderboard .player .table a {
    padding-block: 1rem;
}
.page-leaderboard .player .table .rank p,
.page-leaderboard .player .table .score p {
    text-align: end;
}
.page-leaderboard .player .table .level {
    width: 100%;
}
.page-leaderboard .player .table a:hover {
    text-decoration: underline;
}

/* Shitty */

.shitty .page-leaderboard .board .user button {
    background-color: transparent;
    padding: 1rem 0;
}


.shitty .page-leaderboard .board .user button:hover {
    background-color: #eee;
    color: black !important;
}

.shitty .page-leaderboard .board .user.active button {
    background-color: transparent;
    color: orange;
}

/* ── css/pages/mobile.css ── */
.mob, .mob * { font-family: "Lexend Deca", sans-serif; } .mob { display: flex; flex-direction: column; height: 100%; background-color: var(--color-background); color: var(--color-on-background); }

/* ── Top bar ── */
.mob-topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1rem; height: 3rem; flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%);
    color: var(--color-on-primary);
    position: sticky; top: 0; z-index: 250;
}
.mob-topbar-logo { display: flex; align-items: baseline; gap: 0.35rem; text-decoration: none; color: inherit; }
.mob-topbar-logo-mark { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.mob-topbar-logo-ver { font-size: 0.58rem; opacity: 0.75; font-weight: 500; }
.mob-topbar-nav { display: flex; align-items: center; gap: 0.15rem; }
.mob-topbar-btn {
    width: 2.25rem; height: 2.25rem; border-radius: 0.45rem;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: inherit; font-size: 0.85rem; opacity: 0.85;
    transition: background 100ms, opacity 100ms; text-decoration: none;
}
.mob-topbar-btn:hover { background: rgba(255,255,255,0.15); opacity: 1; }
.mob-topbar-btn.active { background: rgba(255,255,255,0.22); opacity: 1; }
.mob-topbar-discord-icon { width: 1rem; height: 1rem; filter: brightness(0) invert(1); }


/* ── Popups ── */
.mob-popup-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.4);
}
.mob-popup {
    position: absolute; top: 3rem; left: 0; right: 0;
    background: var(--color-background); color: var(--color-on-background);
    border-top: 2px solid var(--color-primary);
    padding: 1.25rem 1rem 3.5rem; z-index: 201;
    max-height: 75vh; overflow-y: auto;
}

/* Pages popup */
.mob-pages-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.mob-pages-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin-bottom: 0.75rem; }
.mob-page-link {
    display: block; width: 100%; text-align: left; background: none; border: none;
    cursor: pointer; font-family: "Lexend Deca", sans-serif; font-size: 16px;
    font-weight: 500; color: inherit; padding: 0.6rem 0;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    transition: color 100ms;
}
.mob-page-link:last-child { border-bottom: none; }
.mob-page-link.active { color: var(--color-primary); font-weight: 700; }
.mob-page-link:hover { color: var(--color-primary); }

/* Filters popup */
.mob-filters-popup { display: flex; flex-direction: column; gap: 0.5rem; }
.mob-filters-scroll {
    display: flex; flex-direction: column; gap: 0.5rem;
    max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* Scroll indicator: fade + bouncing chevron, hidden once the list bottom is reached.
   The bounded scroll area above keeps the Apply/Reset buttons always visible. */
.mob-filters-scroll-hint {
    position: relative; height: 1.5rem; margin-top: -1.7rem;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none; flex-shrink: 0;
    background: linear-gradient(to bottom, transparent, var(--color-background) 75%);
    transition: opacity 0.2s ease;
}
.mob-filters-scroll-hint.is-hidden { opacity: 0; }
.mob-filters-scroll-chevron {
    font-size: 1.2rem; line-height: 1; font-weight: 700; opacity: 0.55;
    color: var(--color-primary);
    animation: mobFiltersBounce 1.4s ease-in-out infinite;
}
@keyframes mobFiltersBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
.mob-filters-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.mob-filter-num-group { display: flex; flex-direction: column; gap: 0.35rem; }
.mob-filter-num-group label { font-size: 12px; font-weight: 500; opacity: 0.7; }
.mob-filter-num-group input {
    padding: 0.5rem; border-radius: 4px;
    border: 1px solid rgba(128,128,128,0.3);
    background: rgba(128,128,128,0.08); color: inherit;
    font-family: "Lexend Deca", sans-serif; font-size: 14px;
}
.mob-filter-separator { height: 1px; background: rgba(128,128,128,0.25); margin: 0.35rem 0; }
.mob-filter-tag {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.4rem;
    cursor: pointer; border-radius: 0.3rem; font-size: 15px; font-weight: 500;
    transition: background-color 100ms;
}
.mob-filter-tag:hover { background: rgba(128,128,128,0.12); }
.mob-filter-tag .mob-check { width: 1.1rem; height: 1.1rem; border: 2px solid rgba(128,128,128,0.5); border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 100ms; }
.mob-filter-tag.active .mob-check { background: var(--color-primary); border-color: var(--color-primary); }
.mob-filter-tag.active .mob-check::after { content: "✓"; color: white; font-size: 11px; line-height: 1; }
.mob-filter-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.mob-filter-actions button {
    padding: 0.75rem; border: none; border-radius: 0.4rem; cursor: pointer;
    font-family: "Lexend Deca", sans-serif; font-size: 15px; font-weight: 500;
}
.mob-filter-apply { background: var(--color-primary); color: var(--color-on-primary); }
.mob-filter-reset { background: rgba(128,128,128,0.2); color: inherit; }

/* Settings popup */
.mob-settings-list { display: flex; flex-direction: column; gap: 0.5rem; }
.mob-setting-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 0; border-bottom: 1px solid rgba(128,128,128,0.15);
}
.mob-setting-row:last-child { border-bottom: none; }
.mob-setting-label { font-size: 16px; font-weight: 500; }
.mob-toggle {
    display: flex; border-radius: 0.35rem; overflow: hidden;
    border: 1px solid rgba(128,128,128,0.3);
}
.mob-toggle button {
    padding: 0.4rem 0.85rem; border: none; cursor: pointer;
    font-family: "Lexend Deca", sans-serif; font-size: 14px; font-weight: 500;
    background: transparent; color: inherit; transition: all 100ms;
}
.mob-toggle button.active { background: var(--color-primary); color: var(--color-on-primary); }
.mob-contact-btn {
    width: 100%; padding: 0.85rem; border: none; border-radius: 0.4rem; cursor: pointer;
    background: #5865F2; color: white;
    font-family: "Lexend Deca", sans-serif; font-size: 15px; font-weight: 500;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    margin-top: 0.5rem; text-decoration: none;
}
.mob-contact-btn img { height: 1.2rem; filter: brightness(0) invert(1); }

/* ── Page content ── */
.mob-content { flex: 1; overflow-y: auto; display: flex; flex-direction: column; min-height: 0; }
/* Never let a short page get squashed by the footer's gap. */
.mob-content > * { flex-shrink: 0; }
.mob-content-home { overflow: hidden; }
.mob-content-home .mob-home-page { height: 100%; overflow-y: auto; }
.mob-home-page > * { flex-shrink: 0; }

/* List page */
.mob-list { display: flex; flex-direction: column; }
.mob-search {
    margin: 0.75rem; padding: 0.65rem 0.85rem;
    background: rgba(128,128,128,0.08); color: var(--color-on-background);
    border: 1px solid rgba(128,128,128,0.25); border-radius: 0.4rem;
    font-family: "Lexend Deca", sans-serif; font-size: 15px;
    box-sizing: border-box; width: calc(100% - 1.5rem);
}
.mob-search:focus { outline: 2px solid var(--color-primary); }
.mob-search-row { display: flex; align-items: center; gap: 0.4rem; margin: 0.75rem; position: sticky; top: 0; z-index: 10; background: var(--color-background); padding: 0.4rem 0; margin-top: 0; margin-bottom: 0; padding-left: 0.75rem; padding-right: 0.75rem; }
.mob-search-row .mob-search { margin: 0; flex: 1; width: auto; }
.mob-search-filter-btn {
    flex-shrink: 0; width: 2.6rem; height: 2.6rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(128,128,128,0.08); border: 1px solid rgba(128,128,128,0.25);
    border-radius: 0.4rem; cursor: pointer; color: var(--color-on-background);
    font-size: 0.95rem; transition: background 100ms;
}
.mob-search-filter-btn:hover { background: rgba(128,128,128,0.15); }
.mob-search-filter-btn.active { background: rgba(102,10,239,0.12); border-color: var(--color-primary); color: var(--color-primary); }

.mob-level-row { border-bottom: 1px solid rgba(128,128,128,0.15); }
.mob-level-btn {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%; background: none; border: none; cursor: pointer;
    padding: 0.6rem 0.75rem; color: inherit; text-align: left;
    transition: background-color 100ms;
}
.mob-level-btn:hover { background: rgba(128,128,128,0.08); }
.mob-level-btn.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 62%, white) 100%);
    color: var(--color-on-primary);
}
.mob-rank { font-size: 13px; font-weight: 500; opacity: 0.6; min-width: 2.5rem; text-align: right; flex-shrink: 0; }
.mob-thumb { width: 5.33rem; height: 3rem; object-fit: cover; border-radius: 0.3rem; flex-shrink: 0; background: #333; }
.mob-level-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mob-level-name { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-level-sub { font-size: 12px; opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Dropdown detail */
.mob-level-detail {
    padding: 1rem 0.75rem 1.25rem;
    background: rgba(128,128,128,0.05);
    border-top: 1px solid rgba(128,128,128,0.1);
}
.mob-author-block { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.5rem; }
.mob-author-row { display: flex; gap: 0.5rem; align-items: baseline; }
.mob-author-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.55; flex-shrink: 0; }
.mob-author-value { font-size: 13px; font-weight: 500; }
.mob-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.75rem; }
.mob-tag { font-size: 12px; background: #5d5d5d; color: white; border-radius: 10px; padding: 3px 8px; }
.mob-video { width: 100%; aspect-ratio: 16/9; margin: 0.75rem 0; border-radius: 0.4rem; }
.mob-stats { display: flex; gap: 1rem; justify-content: space-around; text-align: center; margin-top: 0.75rem; }
.mob-stat dt { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: 0.6; }
.mob-stat dd { font-size: 15px; font-weight: 500; margin-top: 0.2rem; }
.mob-wr { font-size: 14px; font-weight: 500; margin-bottom: 0.4rem; }
.mob-wr a { text-decoration: underline; }
.mob-status { font-size: 14px; font-weight: 500; opacity: 0.75; margin-bottom: 0.5rem; }
.mob-showcase-tabs { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.mob-showcase-tab {
    padding: 0.4rem 1rem; border: none; border-radius: 0.35rem; cursor: pointer;
    font-family: "Lexend Deca", sans-serif; font-size: 14px; font-weight: 500;
    background: rgba(128,128,128,0.15); color: inherit; transition: all 100ms;
}
.mob-showcase-tab.active { background: var(--color-primary); color: var(--color-on-primary); }

/* Leaderboard */
.mob-lb-sub { font-size: 13px; opacity: 0.65; }

/* Page Hero (shared) */
.mob-page-hero { padding: 1.25rem 1.25rem 1rem 1.5rem; border-bottom: 1px solid rgba(128,128,128,0.15); background: linear-gradient(180deg, rgba(102,10,239,0.26) 0%, transparent 100%); position: relative; }
.root.dark .mob-page-hero { background: linear-gradient(180deg, rgba(102,10,239,0.18) 0%, transparent 100%); }
.mob-page-hero::before { display: none; }
.mob-page-hero h1, .mob-page-hero p { margin: 0; padding: 0; }
.mob-page-hero h1::before, .mob-page-hero h1::after { display: none; }
.mob-page-hero p::before, .mob-page-hero p::after { display: none !important; }
.mob-page-hero h1 { font-size: 1.15rem; font-weight: 700; color: #c084fc; line-height: 1.2; letter-spacing: normal; margin-bottom: 0.5rem; }
.root.dark .mob-page-hero h1 { color: #7c3aed; }
.mob-page-hero p { font-size: 0.75rem; color: var(--color-on-background); opacity: 0.5; line-height: 1.55; letter-spacing: normal; }

/* Pending Page */
.mob-pending-page { display: flex; flex-direction: column; }
.mob-pending-page h1, .mob-pending-page p { margin: 0; padding: 0; }
.mob-pending-page h1::before, .mob-pending-page h1::after { display: none; }
.mob-pending-hero { text-align: center; padding: 2.5rem 1.25rem 2rem; background: linear-gradient(180deg, rgba(102,10,239,0.25) 0%, transparent 100%); border-bottom: 1px solid rgba(128,128,128,0.15); }
.root.dark .mob-pending-hero { background: linear-gradient(180deg, rgba(102,10,239,0.15) 0%, transparent 100%); }
.mob-pending-hero h1 { font-size: 1.6rem; font-weight: 700; color: #c084fc; margin-bottom: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.root.dark .mob-pending-hero h1 { color: #7c3aed; }
.mob-pending-hero p { font-size: 0.82rem; font-weight: 400; color: var(--color-on-background); opacity: 0.5; line-height: 1.7; }
.mob-pending-cards { padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; }
.mob-pending-card { background: var(--color-background-hover); border: 1px solid rgba(128,128,128,0.15); border-radius: 0.75rem; padding: 1.25rem; }
.mob-pending-card__title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--color-primary) 65%, white); margin-bottom: 0.75rem; }
.root.dark .mob-pending-card__title, .dark .mob-pending-card__title { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.mob-pending-rows { display: flex; flex-direction: column; gap: 0.15rem; }
.mob-pending-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.6rem; border-radius: 0.4rem; transition: background-color 100ms; }
.mob-pending-row:hover { background: rgba(128,128,128,0.06); }
.mob-pending-row img { width: 1.3rem; height: 1.3rem; flex-shrink: 0; }
.mob-pending-row a, .mob-pending-row > span { font-size: 0.85rem; font-weight: 500; color: var(--color-on-background); text-decoration: none; }
.mob-pending-row a:hover { text-decoration: underline; }
.mob-pending-row__rank { font-size: 0.7rem; font-weight: 500; opacity: 0.4; margin-left: auto; white-space: nowrap; }
.mob-pending-removal-icon { font-size: 0.85rem; flex-shrink: 0; }
.mob-pending-empty { font-size: 0.85rem; font-weight: 400; color: var(--color-on-background); opacity: 0.45; padding: 0.75rem 0.6rem; margin: 0; }

/* Mobile Footer (shared) */
/* A fixed breathing gap above the footer, always present, whether the page is one
   search result or the whole list. One level row is a 3rem thumbnail plus the
   0.6rem padding above and below it (see .mob-level-btn / .mob-thumb) — the gap is
   two of those. */
:root { --mob-level-h: 4.2rem; }
.mob-footer {
    border-top: 1px solid rgba(128,128,128,0.15);
    padding: 1.5rem 1.25rem 2rem;
    margin-top: calc(var(--mob-level-h) * 2);
}
.mob-footer h3, .mob-footer h4, .mob-footer p { margin: 0; padding: 0; }
.mob-footer h3::before, .mob-footer h3::after, .mob-footer h4::before, .mob-footer h4::after { display: none; }
.mob-footer h3 { font-size: 0.9rem; font-weight: 700; color: var(--color-on-background); margin-bottom: 0.4rem; line-height: 1.3; }
.mob-footer > p { font-size: 0.7rem; font-weight: 400; color: var(--color-on-background); opacity: 0.4; line-height: 1.6; margin-bottom: 1.25rem !important; }
.mob-footer-links { display: flex; gap: 2rem; margin-bottom: 1.25rem; }
.mob-footer-col h4 { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-background); opacity: 0.4; margin-bottom: 0.4rem; }
.mob-footer-col a { display: block; font-size: 0.72rem; color: var(--color-on-background); opacity: 0.4; text-decoration: none; padding: 0.15rem 0; transition: opacity 100ms; }
.mob-footer-col a:hover { opacity: 0.8; }
.mob-footer-bottom { padding-top: 1rem; border-top: 1px solid rgba(128,128,128,0.15); }
.mob-footer-bottom p { font-size: 0.62rem; line-height: 1.4; color: var(--color-on-background); opacity: 0.2; }
.mob-footer-bottom p::before, .mob-footer-bottom p::after { display: none; }

/* Mobile Home Page */
.mob-home-page { display: flex; flex-direction: column; }
.mob-home-page h1, .mob-home-page p { margin: 0; padding: 0; }
.mob-home-page h1::before, .mob-home-page h1::after { display: none; }

.mob-home-hero {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 10vh 1.5rem 0.5rem;
    background: linear-gradient(180deg, rgba(102,10,239,0.15) 0%, transparent 100%);
}
.mob-home-hero h1 { font-size: 1.6rem; font-weight: 700; color: #c084fc; margin-bottom: 14px; line-height: 1.2; letter-spacing: -0.02em; }
.mob-home-hero p { font-size: 0.82rem; font-weight: 400; color: var(--color-on-background); opacity: 0.5; line-height: 1.7; max-width: 600px; margin: 0 auto; }

.mob-home-actions { padding: 1.25rem 1rem 0; display: flex; flex-direction: column; gap: 0.65rem; }
.mob-home-btn-col { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.mob-home-social-row { display: flex; justify-content: center; gap: 0.5rem; }
.mob-home-btn {
    flex: none; width: 63%; max-width: 250px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 0.65rem 0.75rem; border-radius: 0.5rem; text-decoration: none;
    font-family: "Lexend Deca", sans-serif; font-size: 0.82rem; font-weight: 600;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #a855f7) 100%);
    color: white; transition: opacity 120ms ease; border: none; cursor: pointer;
}
.mob-home-btn:hover { opacity: 0.85; }
.mob-home-otherpages-btn { background: rgba(128,128,128,0.08); color: var(--color-on-background); border: 1px solid rgba(128,128,128,0.15); }
.mob-home-otherpages-btn:hover { opacity: 0.75; }
.mob-home-otherpages-arrow { font-size: 0.65rem; opacity: 0.7; margin-left: 0.3rem; }
.mob-home-otherpages-menu { display: grid; grid-template-columns: auto auto; gap: 0.4rem; justify-content: center; padding-top: 0.1rem; }
.mob-home-other-btn {
    display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: nowrap; padding: 0.48rem 0.9rem; border-radius: 0.4rem; text-decoration: none;
    font-family: "Lexend Deca", sans-serif; font-size: 0.78rem; font-weight: 500;
    color: var(--color-on-background); background: rgba(128,128,128,0.06);
    border: 1px solid rgba(128,128,128,0.12); transition: opacity 100ms;
}
.mob-home-other-btn:hover { opacity: 0.7; }
.mob-home-social-btn {
    flex: none; width: 3rem; height: 2.25rem;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border-radius: 0.4rem; text-decoration: none;
    color: var(--color-on-background); background: rgba(128,128,128,0.07);
    border: 1px solid rgba(128,128,128,0.15); opacity: 0.6; transition: opacity 100ms;
}
.mob-home-social-btn:hover { opacity: 1; }
.mob-home-social-btn img, .mob-home-social-btn svg { width: 1rem; height: 1rem; }

.mob-home-cards { padding: 15vh 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }

.mob-home-changes { height: 330px; overflow-y: auto; scrollbar-width: thin; border: 1px solid rgba(128,128,128,0.1); border-radius: 0.4rem; padding: 0.75rem; background: rgba(128,128,128,0.03); }
.mob-home-changes-date { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-on-background); opacity: 0.35; margin: 1rem 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; }
.mob-home-changes-date:first-child { margin-top: 0; }
.mob-home-changes-date::before, .mob-home-changes-date::after { content: ''; flex: 1; height: 1px; background: rgba(128,128,128,0.18); }
.mob-home-change { font-size: 0.76rem; line-height: 1.6; padding: 0.1rem 0; color: var(--color-on-background); }
.mob-home-change .dim { opacity: 0.45; }
.mob-home-change strong { font-weight: 600; }

.mob-home-partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
.mob-home-partner { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid rgba(128,128,128,0.12); text-decoration: none; background: rgba(128,128,128,0.03); transition: border-color 100ms, background 100ms; }
.mob-home-partner:hover { border-color: rgba(128,128,128,0.25); background: rgba(128,128,128,0.06); }
.mob-home-partner-logo { width: 100%; aspect-ratio: 1; border-radius: 0.35rem; background: rgba(128,128,128,0.08); border: 1px solid rgba(128,128,128,0.1); display: flex; align-items: center; justify-content: center; }
.mob-home-partner-logo-placeholder { width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; background: rgba(128,128,128,0.2); }
.mob-home-partner-name { font-size: 0.78rem; font-weight: 700; color: var(--color-on-background); line-height: 1.3; }

/* Mobile Events Page */
.mob-events-page { display: flex; flex-direction: column; }
.mob-events-page h1, .mob-events-page p { margin: 0; padding: 0; }
.mob-events-page h1::before, .mob-events-page h1::after { display: none; }
.mob-events-page .mob-pending-hero h1 { margin-bottom: 16px; }
.mob-events-content { padding: 1.5rem 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mob-events-thumb { width: 100%; aspect-ratio: 16/9; border-radius: 0.4rem; overflow: hidden; background: rgba(128,128,128,0.08); margin-bottom: 0.85rem; }
.mob-events-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mob-events-level-name { font-size: 1.1rem; font-weight: 700; color: var(--color-on-background); line-height: 1.2; margin-bottom: 0.35rem; }
.mob-events-level-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; font-size: 0.75rem; margin-bottom: 0.85rem; }
.mob-events-rank { font-weight: 700; color: var(--color-on-background); opacity: 0.35; }
.mob-events-sep { color: var(--color-on-background); opacity: 0.2; }
.mob-events-author { font-weight: 400; color: var(--color-on-background); opacity: 0.5; }
.mob-events-id { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-primary) 65%, white); background: rgba(102,10,239,0.12); padding: 0.1rem 0.4rem; border-radius: 0.25rem; border: 1px solid rgba(102,10,239,0.2); }
.root.dark .mob-events-id { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.mob-events-records { display: flex; flex-direction: column; gap: 0.1rem; border: 1px solid rgba(128,128,128,0.1); border-radius: 0.4rem; padding: 0.25rem; background: rgba(128,128,128,0.03); margin-bottom: 0.85rem; }
.mob-events-record-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: 0.3rem; text-decoration: none; transition: background 100ms; }
.mob-events-record-row:hover { background: rgba(128,128,128,0.06); }
.mob-events-record-pct { font-size: 0.9rem; font-weight: 700; color: color-mix(in srgb, var(--color-primary) 65%, white); min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.root.dark .mob-events-record-pct { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.mob-events-record-player { font-size: 0.82rem; font-weight: 600; color: var(--color-on-background); flex: 1; }
.mob-events-record-label { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-on-background); opacity: 0.25; white-space: nowrap; }
.mob-events-discord-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-family: "Lexend Deca", sans-serif; font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--color-primary) 65%, white); text-decoration: none; opacity: 0.8; transition: opacity 100ms; }
.root.dark .mob-events-discord-btn { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.mob-events-discord-btn:hover { opacity: 1; }
.mob-events-discord-btn img { width: 0.85rem; height: 0.85rem; }
.mob-events-ctv-btn { display: inline-flex; align-items: center; font-family: "Lexend Deca", sans-serif; font-size: 0.78rem; font-weight: 600; color: color-mix(in srgb, var(--color-primary) 65%, white); text-decoration: none; opacity: 0.8; transition: opacity 100ms; }
.root.dark .mob-events-ctv-btn { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.mob-events-ctv-btn:hover { opacity: 1; }
.mob-events-lotd-date { margin-top: 25px; font-size: 0.72rem; opacity: 0.4; font-family: "Lexend Deca", sans-serif; text-align: center; }

.mob-scroll-top-btn {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 2rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    z-index: 200;
    white-space: nowrap;
    transition: opacity 120ms;
}
.mob-scroll-top-btn:hover { opacity: 0.88; }
/* X (@ull_gd) uses the brand's black rather than Discord's blurple. */
.mob-contact-btn--x { background: #000; }

/* ── css/pages/mobile-info.css ── */
/* Information */
.mob-info { padding: 0; display: flex; flex-direction: column; }
.mob-info *, .mob-info { font-family: "Lexend Deca", sans-serif; box-sizing: border-box; }
.mob-info h1, .mob-info h2, .mob-info h3, .mob-info h4, .mob-info p { margin: 0; padding: 0; }
.mob-info h1::before, .mob-info h1::after, .mob-info h2::before, .mob-info h2::after,
.mob-info h3::before, .mob-info h3::after, .mob-info h4::before, .mob-info h4::after { display: none; }

.mob-info-hero { text-align: center; padding: 2.5rem 1.25rem 2rem; background: linear-gradient(180deg, rgba(102,10,239,0.25) 0%, transparent 100%); border-bottom: 1px solid rgba(128,128,128,0.15); }
.root.dark .mob-info-hero { background: linear-gradient(180deg, rgba(102,10,239,0.15) 0%, transparent 100%); }
.mob-info-hero h1 { font-size: 1.6rem; font-weight: 700; color: #c084fc; margin-bottom: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.root.dark .mob-info-hero h1 { color: #7c3aed; }
.mob-info-hero p { font-size: 0.82rem; font-weight: 400; color: var(--color-on-background); opacity: 0.5; line-height: 1.7; max-width: 600px; margin: 0 auto; }

.mob-info-content { padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; }

.mob-info-card { background: var(--color-background-hover); border: 1px solid rgba(128,128,128,0.15); border-radius: 0.75rem; padding: 1.25rem; }
.mob-info-card__title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--color-primary) 65%, white); margin-bottom: 0.75rem; }
.root.dark .mob-info-card__title,
.dark .mob-info-card__title { color: color-mix(in srgb, var(--color-primary) 65%, black); }

/* mob editors */
.mob-info-editors { display: flex; flex-direction: column; gap: 0.35rem; }
.mob-info-editor { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 0.3rem; }
.mob-info-editor img { width: 1rem; height: 1rem; opacity: 0.7; }
.mob-info-editor a, .mob-info-editor span { color: var(--color-on-background); text-decoration: none; font-size: 0.8rem; font-weight: 500; line-height: 1.6; }
.mob-info-editor a:hover { text-decoration: underline; }
.mob-info-role { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.1rem 0.35rem; border-radius: 0.2rem; background: rgba(128,128,128,0.15); color: var(--color-on-background); opacity: 0.5; margin-left: auto; white-space: nowrap; }
.mob-info-role-owner { background: rgba(255,180,50,0.15); color: #ffcc55; opacity:1; }
.mob-info-role-admin { background: rgba(100,180,255,0.15); color: #77bbff; opacity:1; }
.mob-info-role-seniormod { background: rgba(100,220,180,0.15); color: #66ddaa; opacity:1; }
.mob-info-role-dev { background: rgba(200,100,255,0.15); color: #cc88ff; opacity:1; }

/* mob legend */
.mob-info-legend { display: flex; flex-direction: column; gap: 0.45rem; }
.mob-info-legend-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; font-weight: 400; line-height: 1.6; color: var(--color-on-background); }
.mob-info-legend-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; flex-shrink: 0; }
.mob-info-legend-label { color: var(--color-on-background); opacity: 0.4; font-size: 0.7rem; margin-left: auto; white-space: nowrap; }
.mob-info-coloring-desc { font-size: 0.75rem; font-weight: 400; color: var(--color-on-background); opacity: 0.5; margin-bottom: 16px !important; line-height: 1.6; }

/* mob pending */
.mob-info-pending { display: flex; flex-direction: column; gap: 0.35rem; }
.mob-info-pending-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 400; padding: 0.25rem 0.4rem; color: var(--color-on-background); }
.mob-info-pending-row img { width: 1.2rem; height: 1.2rem; }

/* mob guidelines */
.mob-info-gl { background: var(--color-background-hover); border: 1px solid rgba(128,128,128,0.15); border-radius: 0.75rem; overflow: hidden; }
.mob-info-gl-header { padding: 1.25rem; border-bottom: 1px solid rgba(128,128,128,0.15); }
.mob-info-gl-header h2 { font-size: 1.1rem; font-weight: 700; color: var(--color-on-background); line-height: 1.3; }
.mob-info-gl-header p { font-size: 0.75rem; font-weight: 400; color: var(--color-on-background); opacity: 0.5; margin-top: 0.25rem; }
.mob-info-gl-search { display: block; width: 100%; margin-top: 0.75rem; padding: 0.45rem 0.75rem; background: rgba(128,128,128,0.08); border: 1px solid rgba(128,128,128,0.3); border-radius: 0.4rem; color: var(--color-on-background); font-family: "Lexend Deca", sans-serif; font-size: 0.75rem; font-weight: 400; line-height: 1.4; }
.mob-info-gl-search:focus { outline: 2px solid var(--color-primary); }
.mob-info-gl-search::placeholder { color: var(--color-on-background); opacity: 0.35; }

/* mob toc */
.mob-info-toc { border-bottom: 1px solid rgba(128,128,128,0.15); padding: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem; padding-left: 1rem; padding-right: 1rem; }
.mob-info-toc-group { width: 100%; font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-background); opacity: 0.4; padding: 0.5rem 0 0.2rem; }
.mob-info-toc-group:first-child { padding-top: 0; }
.mob-info-toc-link { display: inline-block; padding: 0.3rem 0.6rem; font-size: 0.7rem; font-weight: 500; color: var(--color-on-background); opacity: 0.45; text-decoration: none; cursor: pointer; border-radius: 0.3rem; transition: all 100ms ease; }
.mob-info-toc-link:hover { opacity: 0.8; background: rgba(128,128,128,0.05); }
.mob-info-toc-link.active { color: color-mix(in srgb, var(--color-primary) 65%, white); opacity: 1; background: rgba(102,10,239,0.1); }
.root.dark .mob-info-toc-link.active,
.dark .mob-info-toc-link.active { color: color-mix(in srgb, var(--color-primary) 65%, black); }

/* mob gl content */
.mob-info-gl-content { padding: 1.25rem; }
.mob-info-gl-group-header { margin-top: 2rem; margin-bottom: 0.6rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(128,128,128,0.15); }
.mob-info-gl-group-header:first-child { margin-top: 0; }
.mob-info .mob-info-gl-group-header h2 { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--color-primary) 65%, white); line-height: 1.3; }
.root.dark .mob-info-gl-group-header h2,
.dark .mob-info-gl-group-header h2 { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.mob-info-gl-intro { margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: rgba(128,128,128,0.04); border-left: 3px solid rgba(128,128,128,0.2); border-radius: 0 0.3rem 0.3rem 0; }
.mob-info-gl-intro p { font-size: 0.75rem; font-weight: 400; line-height: 1.7; color: var(--color-on-background); opacity: 0.6; }
.mob-info-gl-intro p + p { margin-top: 0.5rem; }
.mob-info-gl-section { margin-bottom: 2rem; }
.mob-info .mob-info-gl-section h3 { font-size: 0.85rem; font-weight: 700; color: var(--color-on-background); line-height: 1.4; margin-bottom: 0.75rem; padding-bottom: 0.3rem; border-bottom: 1px solid rgba(128,128,128,0.08); }
.mob-info .mob-info-gl-section h4 { font-size: 0.78rem; font-weight: 700; color: var(--color-on-background); opacity: 0.85; line-height: 1.4; margin-top: 1.25rem; margin-bottom: 0.5rem; }
.mob-info-gl-section p { font-size: 0.75rem; font-weight: 400; line-height: 1.7; color: var(--color-on-background); opacity: 0.75; }
.mob-info-gl-section p + p { margin-top: 0.6rem; }
.mob-info-gl-section ul, .mob-info-gl-section ol { margin: 0.5rem 0 0.5rem 1.2rem; padding: 0; font-size: 0.75rem; font-weight: 400; line-height: 1.7; color: var(--color-on-background); opacity: 0.75; }
.mob-info-gl-section ol { list-style-type: decimal; }
.mob-info-gl-section ul { list-style-type: disc; }
.mob-info-gl-section li { margin-bottom: 0.3rem; padding-left: 0.2rem; }
.mob-info-gl-section li ul, .mob-info-gl-section li ol { margin-top: 0.25rem; opacity: 1; }
.mob-info-gl-section li ol { list-style-type: lower-alpha; }
.mob-info-gl-section li li ol { list-style-type: lower-roman; }
.mob-info-gl-section li ul { list-style-type: circle; }
.mob-info-gl-section li li ul { list-style-type: square; }
.mob-info-gl-section strong { font-weight: 600; opacity: 1; color: var(--color-on-background); }
.mob-info-gl-section a { color: color-mix(in srgb, var(--color-primary) 65%, white); text-decoration: underline; text-decoration-color: transparent; }
.mob-info-gl-section a:hover { text-decoration-color: currentColor; }
.root.dark .mob-info-gl-section a,
.dark .mob-info-gl-section a { color: color-mix(in srgb, var(--color-primary) 65%, black); }
.mob-info-gl-section .gl-contacts-grid { display: grid !important; grid-template-columns: 1fr; gap: 0.5rem; }
.mob-info-gl-section .gl-contact-card { background: rgba(128,128,128,0.06); border: 1px solid rgba(128,128,128,0.12); border-radius: 0.5rem; padding: 0.65rem 0.85rem; }
.mob-info-gl-section .gl-contact-role { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--color-primary) 60%, white); margin-bottom: 0.2rem; }
.mob-info-gl-section .gl-contact-name { font-size: 0.8rem; font-weight: 700; color: var(--color-on-background); margin-bottom: 0.1rem; }
.mob-info-gl-section .gl-contact-detail { font-size: 0.65rem; font-weight: 400; color: var(--color-on-background); opacity: 0.45; margin-bottom: 0.2rem; }
.mob-info-gl-section .gl-contact-links span { font-size: 0.65rem; font-weight: 400; color: var(--color-on-background); opacity: 0.55; }
.mob-info-gl-no-results { padding: 2rem 1rem; opacity: 0.25; text-align: center; color: var(--color-on-background); }
.mob-info-gl-no-results span { font-size: 1.5rem; }
.mob-info-gl-no-results p { font-size: 0.8rem; }

/* mob info footer */
.mob-info-footer { margin-top: 2rem; border-top: 1px solid rgba(128,128,128,0.15); padding: 1.5rem 1.25rem; }
.mob-info-footer h3 { font-size: 0.9rem; font-weight: 700; color: var(--color-on-background); margin-bottom: 0.5rem; line-height: 1.3; }
.mob-info-footer > p { font-size: 0.7rem; font-weight: 400; color: var(--color-on-background); opacity: 0.4; line-height: 1.6; margin-bottom: 1.25rem; }
.mob-info-footer-links { display: flex; gap: 2rem; margin-bottom: 1.25rem; }
.mob-info-footer-col h4 { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-on-background); opacity: 0.4; margin-bottom: 0.4rem; }
.mob-info-footer-col a { display: block; font-size: 0.72rem; color: var(--color-on-background); opacity: 0.4; text-decoration: none; padding: 0.15rem 0; }
.mob-info-footer-bottom { padding-top: 1rem; border-top: 1px solid rgba(128,128,128,0.15); }
.mob-info-footer-bottom p { font-size: 0.62rem; line-height: 1.4; color: var(--color-on-background); opacity: 0.2; }
.mob-info-footer-bottom p::before, .mob-info-footer-bottom p::after { display: none; }

/* ── css/components/nav.css ── */
.nav {
    display: flex;
    column-gap: 2rem;
}
.nav .nav__tab {
    padding-top: 4px;
    border-bottom: 4px solid transparent;
    display: flex;
    align-items: center;
    padding-inline: 0.5rem;
    transition: border-color 100ms ease;
}
.nav .nav__tab.router-link-active {
    border-color: var(--color-on-primary);
}
.nav .nav__tab:hover {
    border-color: var(--color-on-primary);
}

header.new .nav .nav__tab.router-link-active {
    border-color: var(--color-background);
}
header.new .nav .nav__tab:hover {
    border-color: var(--color-background);
}

.nav .nav__actions {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.nav .nav__actions .nav__icon {
    height: 3rem;
    width: 3rem;
    border: none;
    background-color: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 100ms ease;
}
.nav .nav__actions .nav__icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
}
.nav .nav__actions .nav__icon img {
    height: 1.5rem;
}
.nav .nav__actions .nav__cta {
    margin-left: 1rem;
    padding: 1rem;
    background-color: var(--color-on-primary);
    color: var(--color-primary);
    border-radius: 0.5rem;
    box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 102, 0.5);
    transition: transform 100ms ease;
    white-space: nowrap;
}
.nav .nav__actions .nav__cta:hover:not(:active) {
    transform: translateY(-2px);
}


.filters {
    width: 220px;
    position: relative;
}

.filters-collapse {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    width: 220px;
    pointer-events: none;
}

.filters-selected .filters-collapse {
    pointer-events: auto;
}

.filters-numeric {
    padding: 8px 20px 4px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filters-numeric-label {
    font-family: "Lexend Deca", sans-serif;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.6;
}

.filters-numeric-input {
    width: 100%;
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background: rgba(128, 128, 128, 0.1);
    color: inherit;
    font-family: "Lexend Deca", sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

.filters-numeric-input:focus {
    outline: 2px solid var(--color-primary);
}

.color-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 12px;
    margin-bottom: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 1;
    transition: background-color 100ms ease;
    align-self: center;
}

.thumb-toggle-btn {
    margin-left: -121px;
    margin-right: 25px;
}

.color-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.color-toggle-btn.active {
    opacity: 1;
}

.filters-text {
    padding: 16px 0px 16px 20px;
    border-bottom: 4px solid transparent;
    font-family: "Lexend Deca", sans-serif;
    font-size: 20px;
    line-height: 20px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
    cursor: pointer;
}

.filters-menu {
    width: 220px;
    background: rgba(0, 0, 0, 1);
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.3s ease-out;
}

.filters-one {
    font-family: "Lexend Deca", sans-serif;
    font-size: 17.2428571429px;
    line-height: 18px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
    padding: 7px 20px 7px 20px;
    /*    color: var(--color-on-background); */
}
.filters-one:hover {
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.filters-one span {
    display: inline-block;
    opacity: 0;
}

.filters-one.active span {
    opacity:1
}

.filters-selected .filters-menu {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.filters-selected .filters-menu::-webkit-scrollbar {
    display: none;
}

.separator-filter {
    line-height: 18px;
}


.level-hidden {
    display: none;
}

/* Shitty */

.shity .nav .nav__tab.router-link-active {
    border-color: transparent;
    color: orange;
}

.shitty .nav .nav__tab:hover {
    border-color: transparent;
    color: orange;
}

.shitty .nav .nav__actions .nav__cta {
    padding: 0.5rem;
    background-color: #ccc;
    color: black;
    border-radius: 0;
    border: 4px outset #eee;
}

/* ── css/components/btn.css ── */
.btn {
border: none;
    cursor: pointer;
    font: inherit;
    padding: 1rem;
    margin: 0;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: 0.5rem;
    box-shadow: 0 1px 0.5rem 0 rgba(0, 0, 102, 0.5);
    transition: transform 100ms ease;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:not(:disabled):hover:not(:active) {
    transform: translateY(-2px);
}

.shitty .btn {
    border: 4px outset #eee;
    padding: 0.5rem;
    background-color: #ccc;
    border-radius: 0;
    color: black;
}

/* ── css/components/tabs.css ── */
.tabs {
    display: flex;
}

.tabs .tab{
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 1rem;
    margin: 0;
    background-color: transparent;
    color: var(--color-on-background);
    border-bottom: 3px solid transparent;
}

.tabs .tab:first-child {
    border-top-left-radius: 0.5rem;
}

.tabs .tab:last-child {
    border-top-right-radius: 0.5rem;
}

.tabs .tab.selected{
    border-bottom: 3px solid var(--color-on-background);
}

.tabs .tab:hover{
    background-color: var(--color-background-hover);
}

/* ── css/components/sidebar.css ── */
/* Vertical Sidebar Header */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 180px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 100;
    background-color: var(--color-background);
    border-right: 1px solid rgba(128, 128, 128, 0.2);
}

.sidebar__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(180deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%);
    color: var(--color-on-primary);
    cursor: pointer;
    text-decoration: none;
}

.sidebar__logo h2 {
    font-size: 1.75rem;
    font-weight: 700;
}

.sidebar__logo p {
    font-size: 0.75rem;
    margin-left: 0.5rem;
    opacity: 0.8;
}

.sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    overflow-y: auto;
}

.sidebar__section-label {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 1.25rem 0.4rem;
    opacity: 0.5;
    color: var(--color-on-background);
}

.sidebar__link {
    display: block;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.6rem 1.25rem 0.6rem 1.75rem;
    color: var(--color-on-background);
    text-decoration: none;
    transition: background-color 100ms ease;
    cursor: pointer;
}

.sidebar__link:hover {
    background-color: var(--color-background-hover);
}

.sidebar__link.router-link-active {
    background: linear-gradient(90deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%);
    color: var(--color-on-primary);
}

.sidebar__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.sidebar__settings-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-on-background);
    padding: 0.5rem 0.75rem;
    border-radius: 0.35rem;
    transition: background-color 100ms ease;
}

.sidebar__settings-btn:hover {
    background-color: var(--color-background-hover);
}

.sidebar__discord {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    transition: background-color 100ms ease;
}

.sidebar__discord:hover {
    background-color: var(--color-background-hover);
}

.sidebar__discord img {
    height: 1.25rem;
}

.root.dark .sidebar__discord img {
    filter: brightness(0);
}

/* Push page content to the right */
.page-with-sidebar {
    margin-left: 180px;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Minimum page width (PC only) — prevents content from getting too narrow */
html.desktop {
    min-width: 850px;
    overflow-x: auto;
}

/* Sidebar toggle button (hidden by default, shown when collapsed) */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 101;
    background: rgba(128, 128, 128, 0.15);
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 0.4rem;
    padding: 0.35rem 0.6rem;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--color-on-background);
    line-height: 1;
    font-family: "Lexend Deca", sans-serif;
    transition: background-color 100ms ease;
}
.sidebar-toggle:hover {
    background: rgba(128, 128, 128, 0.3);
}

/* Sidebar backdrop for overlay mode */
.sidebar-backdrop {
    display: none;
}

/* Collapsed sidebar breakpoint */
@media (max-width: 1100px) {
    .sidebar {
        display: none;
    }
    .sidebar.sidebar--open {
        display: flex;
        z-index: 200;
    }
    .sidebar-toggle {
        display: block;
    }
    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 199;
    }
    .page-with-sidebar {
        margin-left: 0;
    }
}

/* ── css/components/filters-popup.css ── */
/* Filters Popup Overlay */
.filters-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filters-popup {
    width: 55%;
    max-height: 85vh;
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.filters-popup__title {
    font-family: "Lexend Deca", sans-serif;
    font-size: 1.53rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.filters-popup__columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem 2.5rem;
    margin-bottom: 1.5rem;
}

.filters-popup__column-title {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.83rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    margin-bottom: 0.75rem;
}

.filters-popup__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    cursor: pointer;
    font-family: "Lexend Deca", sans-serif;
    font-size: 1.08rem;
    font-weight: 500;
}

.filters-popup__item:hover {
    opacity: 0.8;
}

.filters-popup__checkbox {
    width: 1.17rem;
    height: 1.17rem;
    border: 2px solid rgba(128, 128, 128, 0.5);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 100ms ease;
}

.filters-popup__item.active .filters-popup__checkbox {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.filters-popup__check {
    font-size: 0.77rem;
    opacity: 0;
}

.filters-popup__item.active .filters-popup__check {
    opacity: 1;
}

.filters-popup__numeric {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.35rem 0;
}

.filters-popup__numeric label {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    opacity: 0.7;
}

.filters-popup__numeric input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.3);
    background: rgba(128, 128, 128, 0.1);
    color: inherit;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.88rem;
    box-sizing: border-box;
}

.filters-popup__numeric input:focus {
    outline: 2px solid var(--color-primary);
}

.filters-popup__actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.filters-popup__btn {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.93rem;
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: opacity 100ms ease;
}

.filters-popup__btn:hover {
    opacity: 0.85;
}

.filters-popup__btn--apply {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%);
    color: white;
}

.filters-popup__btn--benchmark {
    background: rgba(128, 128, 128, 0.12);
    color: var(--color-on-background);
    border: 1px solid rgba(128, 128, 128, 0.25);
    margin-right: auto;
}

.filters-popup__btn--benchmark.active {
    background: rgba(102, 10, 239, 0.15);
    color: color-mix(in srgb, var(--color-primary) 65%, white);
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* ── css/components/settings-popup.css ── */
/* Settings Popup */
.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-popup {
    width: 50%;
    max-width: 40rem;
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 1rem;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.settings-popup__title {
    font-family: "Lexend Deca", sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
}

.settings-popup__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.settings-popup__item:last-of-type {
    border-bottom: none;
}

.settings-popup__label {
    font-family: "Lexend Deca", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-popup__question {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: rgba(128, 128, 128, 0.25);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-on-background);
}

.settings-popup__question:hover {
    background: rgba(128, 128, 128, 0.4);
}

.settings-popup__toggle {
    display: flex;
    gap: 0;
    border-radius: 0.35rem;
    overflow: hidden;
    border: 1px solid rgba(128, 128, 128, 0.3);
}

.settings-popup__toggle-btn {
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--color-on-background);
    transition: all 100ms ease;
}

.settings-popup__toggle-btn.active {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%);
    color: white;
}

.settings-popup__contact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-on-background);
    text-decoration: none;
    padding: 0.5rem 0;
}

.settings-popup__contact:hover {
    text-decoration: underline;
}

.settings-popup__contact img {
    height: 1.25rem;
}

/* The Discord/X marks ship as white glyphs (see assets/*.svg); on the light
   theme (.root.dark) flip them to black so they stay visible. */
.root.dark .settings-popup__contact img {
    filter: brightness(0);
}

/* ── css/components/footer.css ── */
/* ── SHARED FOOTER ── */
.site-footer {
    border-top: 1px solid rgba(128,128,128,0.15);
    padding: 2.5rem 2rem 2rem;
    font-family: "Lexend Deca", sans-serif;
}
.site-footer, .site-footer * { box-sizing: border-box; }
.site-footer h3, .site-footer h4, .site-footer p { margin: 0; padding: 0; }
.site-footer h3::before, .site-footer h3::after,
.site-footer h4::before, .site-footer h4::after { display: none; }
.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}
.site-footer-brand h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-on-background);
    margin-bottom: 0.25rem;
}
.site-footer-brand p {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-on-background);
    opacity: 0.4;
    line-height: 1.6;
    max-width: 320px;
    margin-top: 1em;
}
.site-footer-links {
    display: flex !important;
    gap: 2.5rem;
}
.site-footer-col h4 {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-on-background);
    opacity: 0.4;
    margin-bottom: 0.6rem;
}
.site-footer-col a {
    display: block;
    font-size: 0.78rem;
    color: var(--color-on-background);
    opacity: 0.4;
    text-decoration: none;
    padding: 0.2rem 0;
    transition: opacity 100ms ease;
}
.site-footer-col a:hover { opacity: 0.8; }
.site-footer-bottom {
    max-width: 1100px;
    margin: 1.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(128,128,128,0.15);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.site-footer-bottom p {
    font-size: 0.68rem;
    color: var(--color-on-background);
    opacity: 0.2;
}

/* ── css/pages/admin.css ── */
/* ── LOGIN GATE ── */
.admin-login-gate {
    max-width: 400px;
    margin: 6rem auto;
    padding: 2.5rem;
    background: var(--color-background-hover);
    border: 1px solid rgba(128,128,128,0.15);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: "Lexend Deca", sans-serif;
}
.admin-login-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-on-background);
    margin: 0;
}
.admin-login-desc {
    font-size: 0.85rem;
    color: var(--color-on-background);
    opacity: 0.55;
    margin: 0;
    line-height: 1.5;
}
.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.admin-login-input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(128,128,128,0.25);
    background: rgba(128,128,128,0.06);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.9rem;
    outline: none;
    box-sizing: border-box;
    transition: border-color 120ms ease;
}
.admin-login-input:focus { border-color: var(--color-primary); }
.admin-login-error {
    font-size: 0.8rem;
    color: #ef4444;
    margin: 0;
}
.admin-login-btn {
    padding: 0.65rem 1.4rem;
    border-radius: 0.5rem;
    background: var(--color-primary);
    color: white;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 120ms ease;
    align-self: flex-start;
}
.admin-login-btn:hover { opacity: 0.85; }
.admin-login-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── ADMIN PAGE ── */
.admin-page {
    display: block;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    font-family: "Lexend Deca", sans-serif;
}
.admin-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}
.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.admin-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-on-background);
    margin: 0;
}
.admin-logout-btn {
    padding: 0.45rem 1rem;
    border-radius: 0.4rem;
    background: rgba(128,128,128,0.1);
    border: 1px solid rgba(128,128,128,0.2);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 100ms ease;
}
.admin-logout-btn:hover { opacity: 1; }

/* ── TOOLBAR ── */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.admin-search {
    flex: 1;
    max-width: 360px;
    padding: 0.55rem 0.9rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(128,128,128,0.2);
    background: rgba(128,128,128,0.06);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 120ms ease;
}
.admin-search:focus { border-color: var(--color-primary); }
.admin-count {
    font-size: 0.75rem;
    opacity: 0.4;
    white-space: nowrap;
}

/* ── TABLE ── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.admin-th {
    text-align: left;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-on-background);
    opacity: 0.4;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(128,128,128,0.12);
}
.admin-th--pos { width: 3.5rem; }
.admin-th--type { width: 6rem; }
.admin-th--move { width: 12rem; }
.admin-th--action { width: 5rem; }

.admin-row { transition: background 80ms ease; }
.admin-row:hover { background: rgba(128,128,128,0.04); }
.admin-td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(128,128,128,0.07);
    color: var(--color-on-background);
    vertical-align: middle;
}
.admin-td--pos {
    font-weight: 700;
    opacity: 0.35;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.admin-level-name { font-weight: 600; font-size: 0.875rem; }
.admin-level-author { font-size: 0.72rem; opacity: 0.45; margin-top: 1px; }

/* ── BADGES ── */
.admin-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.18rem 0.5rem;
    border-radius: 2rem;
}
.admin-badge--verified { background: rgba(102,10,239,0.12); color: color-mix(in srgb, var(--color-primary) 70%, white); }
.admin-badge--main { background: rgba(16,185,129,0.12); color: #10b981; }
.admin-badge--future { background: rgba(245,158,11,0.12); color: #f59e0b; }
.root.dark .admin-badge--verified { color: color-mix(in srgb, var(--color-primary) 70%, black); }

/* ── MOVE / DELETE CONTROLS ── */
.admin-td--move { display: flex; align-items: center; gap: 0.4rem; }
.admin-pos-input {
    width: 4rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(128,128,128,0.2);
    background: rgba(128,128,128,0.06);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.8rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.admin-pos-input:focus { border-color: var(--color-primary); }
.admin-btn {
    padding: 0.3rem 0.7rem;
    border-radius: 0.35rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: opacity 100ms ease;
    white-space: nowrap;
}
.admin-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-btn--move { background: rgba(102,10,239,0.12); color: color-mix(in srgb, var(--color-primary) 70%, white); }
.admin-btn--move:hover:not(:disabled) { background: rgba(102,10,239,0.2); }
.admin-btn--delete { background: rgba(239,68,68,0.1); color: #ef4444; }
.admin-btn--delete:hover:not(:disabled) { background: rgba(239,68,68,0.2); }
.root.dark .admin-btn--move { color: color-mix(in srgb, var(--color-primary) 70%, black); }

/* The primary action on the Levels tab — solid, so it reads as "create" next to
   the tinted secondary buttons. */
.admin-btn--new {
    background: var(--color-primary);
    color: #fff;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    flex-shrink: 0;
}
.admin-btn--new:hover:not(:disabled) { filter: brightness(1.12); }

/* Confirmation strip after a level is created. */
.admin-notice {
    background: rgba(16,185,129,0.12);
    color: #10b981;
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 0.45rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
}

/* ── STATES ── */
.admin-loading, .admin-empty {
    padding: 3rem;
    text-align: center;
    opacity: 0.4;
    font-size: 0.875rem;
}

/* ── CLICKABLE ROW ── */
.admin-row--clickable { cursor: pointer; }

/* ── EDIT MODAL ── */
.admin-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.admin-edit-modal {
    background: var(--color-background);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 660px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    font-family: "Lexend Deca", sans-serif;
}
.admin-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    flex-shrink: 0;
}
.admin-edit-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-on-background);
}
.admin-edit-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-on-background);
    cursor: pointer;
    opacity: 0.45;
    line-height: 1;
    padding: 0;
    transition: opacity 100ms ease;
}
.admin-edit-close:hover { opacity: 1; }

.admin-edit-form {
    overflow-y: auto;
    flex: 1;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.admin-edit-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.admin-edit-group > label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-on-background);
    opacity: 0.45;
}
.admin-edit-group input[type="text"],
.admin-edit-group input[type="url"],
.admin-edit-group input[type="number"] {
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(128, 128, 128, 0.2);
    background: rgba(128, 128, 128, 0.06);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 120ms ease;
    box-sizing: border-box;
    width: 100%;
}
.admin-edit-group input:focus { border-color: var(--color-primary); }

.admin-edit-row {
    display: flex;
    gap: 0.65rem;
}
.admin-edit-row .admin-edit-group { flex: 1; }

.admin-edit-checks {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
}
.admin-edit-checks label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--color-on-background);
    cursor: pointer;
}

.admin-edit-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.2rem;
}
.admin-edit-tags label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(128, 128, 128, 0.08);
    padding: 0.28rem 0.65rem;
    border-radius: 2rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--color-on-background);
    opacity: 1;
    text-transform: none;
    letter-spacing: 0;
}

.admin-edit-subheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.admin-edit-record {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.35rem;
    align-items: center;
}
.admin-edit-record input {
    flex: 1;
    padding: 0.38rem 0.5rem;
    border-radius: 0.35rem;
    border: 1px solid rgba(128, 128, 128, 0.2);
    background: rgba(128, 128, 128, 0.06);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.8rem;
    outline: none;
    min-width: 0;
    box-sizing: border-box;
}
.admin-edit-record input:focus { border-color: var(--color-primary); }
.admin-edit-record--sm { flex: 0 0 4rem !important; }
.admin-edit-record--md { flex: 0 0 6.5rem !important; }
.admin-edit-empty {
    font-size: 0.78rem;
    opacity: 0.4;
    margin: 0.2rem 0 0;
}

.admin-edit-footer {
    padding: 0.9rem 1.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.15);
    display: flex;
    gap: 0.65rem;
    flex-shrink: 0;
}

/* ── TABS ── */
.admin-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(128,128,128,0.15);
    padding-bottom: 0;
}
.admin-tab {
    padding: 0.55rem 1.1rem;
    border-radius: 0.4rem 0.4rem 0 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 100ms ease, border-color 100ms ease;
}
.admin-tab:hover { opacity: 0.7; }
.admin-tab.active {
    opacity: 1;
    border-bottom-color: var(--color-primary);
}

/* ── CARD ── */
.admin-card {
    background: var(--color-background-hover);
    border: 1px solid rgba(128,128,128,0.12);
    border-radius: 0.65rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.admin-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-on-background);
    margin: 0 0 0.1rem;
}
.admin-card-subhead {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-on-background);
    opacity: 0.45;
    margin-top: 0.25rem;
}

/* ── EVENTS GRID ── */
.admin-events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 780px) {
    .admin-events-grid { grid-template-columns: 1fr; }
}

/* ── SELECT ── */
.admin-select {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(128,128,128,0.2);
    background: rgba(128,128,128,0.06);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem;
    outline: none;
    cursor: pointer;
    transition: border-color 120ms ease;
    box-sizing: border-box;
}
.admin-select:focus { border-color: var(--color-primary); }

/* ── CARD INPUTS (inherit admin-edit-group styles) ── */
.admin-card .admin-edit-group input[type="text"],
.admin-card .admin-edit-group input[type="url"],
.admin-card .admin-edit-group input[type="number"] {
    padding: 0.5rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid rgba(128,128,128,0.2);
    background: rgba(128,128,128,0.06);
    color: var(--color-on-background);
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 120ms ease;
    box-sizing: border-box;
    width: 100%;
}
.admin-card .admin-edit-group input:focus { border-color: var(--color-primary); }
.admin-card .admin-edit-group > label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-on-background);
    opacity: 0.45;
}

/* ── css/components/level-generator.css ── */
.generator-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    width: 100%;
    font-family: "Lexend Deca", sans-serif;
}
.generator-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.generator-form label {
    font-family: "Lexend Deca", sans-serif;
}
.generator-form input[type="text"],
.generator-form input[type="url"],
.generator-form input[type="number"] {
    width: 100%;
    padding: 0.8rem;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: inherit;
    box-sizing: border-box;
    font-family: "Lexend Deca", sans-serif;
}
.generator-form input:focus {
    outline: 2px solid var(--color-primary);
    background: rgba(255,255,255,0.1);
}

/* ── css/components/coloring-hint.css ── */
/* Hide everything until Vue mounts to prevent FOUC */
[v-cloak] { display: none !important; }

/* Coloring hint popup */
.coloring-hint {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 150;
    background-color: var(--color-background);
    border: 1px solid rgba(128,128,128,0.3);
    border-radius: 0.75rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-width: 320px;
    font-family: "Lexend Deca", sans-serif;
    pointer-events: auto;
}
.coloring-hint__close {
    position: absolute;
    top: 0.4rem;
    left: 0.2rem;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--color-on-background);
    opacity: 0.5;
    line-height: 1;
}
.coloring-hint__close:hover { opacity: 1; }
.coloring-hint__text {
    font-size: 0.92rem;
    font-weight: 500;
    margin-top: 0.5rem;
    color: var(--color-on-background);
}
.coloring-hint__never {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    opacity: 0.6;
    cursor: pointer;
    color: var(--color-on-background);
}
.coloring-hint__never input { cursor: pointer; }
.coloring-hint__btn {
    display: inline-block;
    text-align: center;
    font-family: "Lexend Deca", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 65%, white) 100%);
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 100ms ease;
}
.coloring-hint__btn:hover { opacity: 0.85; }

/* ── css/components/level-share.css ── */
/* Share control in a list's level panel. It is a real link to the level's own
   page — so it can be middle-clicked, right-click-copied and crawled — that
   copies the URL instead of navigating when clicked. */

.level-share {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(128, 128, 128, 0.32);
    border-radius: 999px;
    background: transparent;
    color: var(--color-on-background);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    align-self: flex-start;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.level-share:hover {
    background: rgba(128, 128, 128, 0.12);
    border-color: rgba(128, 128, 128, 0.5);
}

.level-share:active { background: rgba(128, 128, 128, 0.2); }

.level-share:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.level-share__icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

/* Confirmation state. Green reads as "done" in both themes. */
.level-share--copied {
    border-color: #3fbf7f;
    color: #3fbf7f;
    background: rgba(63, 191, 127, 0.1);
}
.level-share--copied:hover {
    background: rgba(63, 191, 127, 0.16);
    border-color: #3fbf7f;
}

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

/* ── Open Level Page ────────────────────────────────────────────────────────
   The panel shows the level; this opens the level's own page at /level/<slug>.
   It sits on the title row rather than under the fold, because it is the one
   control in the panel that leads somewhere new. */

.level-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}
.level-head__text { min-width: 0; }

.level-open {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.6rem 1.05rem;
    border-radius: 0.55rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 62%, white) 100%);
    color: var(--color-on-primary);
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 1px 8px color-mix(in srgb, var(--color-primary) 35%, transparent);
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.level-open:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 14px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.level-open:active { transform: none; opacity: 0.9; }
.level-open:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

.level-open__icon { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }

/* Narrow panels put the button under the title rather than squeezing it. */
@media (max-width: 1100px) {
    .level-head { flex-direction: column; gap: 0.9rem; }
    .level-open { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .level-open { transition: none; }
    .level-open:hover { transform: none; }
}

/* ── css/typography-shitty.css ── */
/* Shitty Variants */

.shitty h1,
.shitty .type-h1,
.shitty .type-headline-lg {
    font-family: "Times New Roman", serif;
    font-size: 51.4285714286px;
    line-height: 52px;
    font-weight: 700;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty h1::before,
.shitty .type-h1::before,
.shitty .type-headline-lg::before {
    content: "";
    margin-bottom: -0.1805555556em;
    display: table;
}
.shitty h1::after,
.shitty .type-h1::after,
.shitty .type-headline-lg::after {
    content: "";
    margin-top: -0.1305555556em;
    display: table;
}

.shitty h2,
.shitty .type-h2,
.shitty .type-headline-md {
    font-family: "Times New Roman", serif;
    font-size: 34.2857142857px;
    line-height: 40px;
    font-weight: 700;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty h2::before,
.shitty .type-h2::before,
.shitty .type-headline-md::before {
    content: "";
    margin-bottom: -0.2583333333em;
    display: table;
}
.shitty h2::after,
.shitty .type-h2::after,
.shitty .type-headline-md::after {
    content: "";
    margin-top: -0.2083333333em;
    display: table;
}

.shitty h3,
.shitty .type-h3,
.shitty .type-headline-sm {
    font-family: "Verdana", sans-serif;
    font-size: 22.8571428571px;
    line-height: 28px;
    font-weight: 700;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty h3::before,
.shitty .type-h3::before,
.shitty .type-headline-sm::before {
    content: "";
    margin-bottom: -0.2875em;
    display: table;
}
.shitty h3::after,
.shitty .type-h3::after,
.shitty .type-headline-sm::after {
    content: "";
    margin-top: -0.2375em;
    display: table;
}

.shitty h4,
.shitty .type-h4,
.shitty .type-title-lg {
    font-family: "Verdana", sans-serif;
    font-size: 22.8571428571px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty h4::before,
.shitty .type-h4::before,
.shitty .type-title-lg::before {
    content: "";
    margin-bottom: -0.2875em;
    display: table;
}
.shitty h4::after,
.shitty .type-h4::after,
.shitty .type-title-lg::after {
    content: "";
    margin-top: -0.2375em;
    display: table;
}

.shitty h5,
.shitty .type-h5,
.shitty .type-title-md {
    font-family: "Verdana", sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty h5::before,
.shitty .type-h5::before,
.shitty .type-title-md::before {
    content: "";
    margin-bottom: -0.325em;
    display: table;
}
.shitty h5::after,
.shitty .type-h5::after,
.shitty .type-title-md::after {
    content: "";
    margin-top: -0.275em;
    display: table;
}

.shitty h6,
.shitty dt,
.shitty .type-h6,
.shitty .type-title-sm {
    font-family: "Verdana", sans-serif;
    font-size: 17.1428571429px;
    line-height: 24px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty h6::before,
.shitty dt::before,
.shitty .type-h6::before,
.shitty .type-title-sm::before {
    content: "";
    margin-bottom: -0.375em;
    display: table;
}
.shitty h6::after,
.shitty dt::after,
.shitty .type-h6::after,
.shitty .type-title-sm::after {
    content: "";
    margin-top: -0.325em;
    display: table;
}

.shitty label,
.shitty input[type="text"],
.shitty input[type="number"],
.shitty .type-label-lg {
    font-family: "Comic Sans MS", "Comic Sans", sans-serif;
    font-size: 17.1428571429px;
    line-height: 20px;
    font-weight: bold;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty .type-label-lg::before {
    content: "";
    margin-bottom: -0.2583333333em;
    display: table;
}
.shitty .type-label-lg::after {
    content: "";
    margin-top: -0.2083333333em;
    display: table;
}

.shitty .type-label-md {
    font-family: "Verdana", sans-serif;
    font-size: 14.2857142857px;
    line-height: 18px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty .type-label-md::before {
    content: "";
    margin-bottom: -0.305em;
    display: table;
}
.shitty .type-label-md::after {
    content: "";
    margin-top: -0.255em;
    display: table;
}

.shitty .type-label-sm {
    font-family: "Verdana", sans-serif;
    font-size: 11.4285714286px;
    line-height: 12px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty .type-label-sm::before {
    content: "";
    margin-bottom: -0.2em;
    display: table;
}
.shitty .type-label-sm::after {
    content: "";
    margin-top: -0.15em;
    display: table;
}

.shitty p,
.shitty .type-body {
    font-family: "Verdana", sans-serif;
    font-size: 17.1428571429px;
    line-height: 28px;
    font-weight: 500;
    -webkit-font-smoothing: subpixel-antialiased;
}
.shitty p::before,
.shitty .type-body::before {
    content: "";
    margin-bottom: -0.4916666667em;
    display: table;
}
.shitty p::after,
.shitty .type-body::after {
    content: "";
    margin-top: -0.4416666667em;
    display: table;
}

/* ── css/components/seo-fallback.css ── */
/* Static, no-JavaScript page content generated by scripts/build-seo.mjs.
   It is what search engines and AI crawlers that do not run JavaScript read.
   A visitor never sees it: the boot shield in index.html hides it as soon as
   scripting is detected, and main.js removes it before Vue mounts. These rules
   are therefore only for readers with JavaScript off. */

#seo-fallback {
    background-color: var(--color-background, #1c1b1f);
    color: var(--color-on-background, #fff);
    min-height: 100%;
}

#seo-fallback, #seo-fallback * {
    font-family: "Lexend Deca", ui-sans-serif, system-ui, sans-serif;
}

#seo-fallback .seo-fallback__inner {
    max-width: 52rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    line-height: 1.6;
    font-size: 1rem;
}

#seo-fallback h1 {
    font-size: 2.25rem;
    line-height: 1.2;
    margin: 0 0 1rem;
}

#seo-fallback h2 { font-size: 1.4rem; margin: 2rem 0 0.75rem; }
#seo-fallback h3 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }
#seo-fallback h4 { font-size: 1rem; margin: 1.25rem 0 0.4rem; opacity: 0.9; }
#seo-fallback p { margin: 0 0 0.9rem; }
#seo-fallback ul, #seo-fallback ol { margin: 0 0 1rem; padding-left: 1.4rem; }
#seo-fallback li { margin-bottom: 0.35rem; list-style: disc; }
#seo-fallback ol > li { list-style: decimal; }
#seo-fallback a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#seo-fallback code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

#seo-fallback .seo-faq { margin: 0 0 1rem; }
#seo-fallback .seo-faq dt { font-weight: 700; margin-top: 1rem; }
#seo-fallback .seo-faq dd { margin: 0.25rem 0 0; }

#seo-fallback .seo-fallback__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 2.5rem 0 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid currentColor;
    opacity: 0.85;
}

#seo-fallback .seo-fallback__note {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* The site's typography rules uppercase some headings; the static text is prose
   and should read as written. */
#seo-fallback h1,
#seo-fallback h2,
#seo-fallback h3,
#seo-fallback h4,
#seo-fallback .seo-faq dt {
    text-transform: none;
    letter-spacing: normal;
}