:root {
    color-scheme: dark;
    --arena-bg: #090d13;
    --arena-panel: #111923;
    --arena-panel-raised: #17222e;
    --arena-border: rgba(168, 190, 202, .12);
    --arena-text: #edf5f7;
    --arena-muted: #93a6af;
    --arena-lime: #c6ff4a;
    --arena-cyan: #57e3dc;
    --arena-radius: 18px;
}

html {
    background: var(--arena-bg);
    scroll-behavior: smooth;
}

body {
    color: var(--arena-text) !important;
    background:
        radial-gradient(ellipse at 12% 0%, rgba(28, 91, 80, .18), transparent 34rem),
        radial-gradient(ellipse at 94% 16%, rgba(29, 66, 91, .14), transparent 30rem),
        var(--arena-bg) !important;
    font-family: "Space Grotesk", system-ui, sans-serif !important;
    letter-spacing: 0;
}

body,
body * {
    scrollbar-color: #34444a var(--arena-bg);
}

body .bg-surface {
    background-color: var(--arena-bg) !important;
}

body .bg-surface-container,
body .bg-surface-container-low {
    background-color: var(--arena-panel) !important;
}

body .bg-surface-container-high,
body .bg-surface-container-highest,
body .bg-surface-variant {
    background-color: var(--arena-panel-raised) !important;
}

body .text-on-surface {
    color: var(--arena-text) !important;
}

body .text-on-surface-variant {
    color: var(--arena-muted) !important;
}

body .text-primary-container,
body .text-primary-fixed-dim {
    color: var(--arena-lime) !important;
}

body .text-secondary,
body .text-secondary-container {
    color: var(--arena-cyan) !important;
}

body .bg-primary-container {
    background-color: var(--arena-lime) !important;
}

body .text-on-primary-container {
    color: #18210a !important;
}

body .border-outline-variant,
body .border-outline-variant\/10,
body .border-outline-variant\/15,
body .border-outline-variant\/20,
body .border-outline-variant\/30 {
    border-color: var(--arena-border) !important;
}

body h1,
body h2,
body h3,
body h4,
body .font-headline-xl,
body .font-headline-xl-mobile,
body .font-headline-lg,
body .font-headline-lg-mobile,
body .font-headline-md,
body .font-headline-sm {
    font-family: "Anybody", "Space Grotesk", system-ui, sans-serif !important;
    letter-spacing: -.035em;
}

body .font-body-md,
body .font-body-sm,
body .font-body-lg,
body .font-admin-body {
    font-family: "Space Grotesk", system-ui, sans-serif !important;
}

a,
button,
input,
select,
textarea {
    transition-property: color, background-color, border-color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: ease;
}

a {
    text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--arena-cyan);
    outline-offset: 3px;
}

button,
input,
select,
textarea {
    font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    color: var(--arena-text) !important;
    background-color: #0b1219 !important;
    border: 1px solid var(--arena-border) !important;
    border-radius: 12px !important;
}

input::placeholder,
textarea::placeholder {
    color: #71838b !important;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--arena-lime);
}

body .rounded-lg,
body .rounded-xl,
body .rounded-2xl,
body .rounded-3xl {
    border-radius: var(--arena-radius);
}

body .bg-surface-container,
body .bg-surface-container-low,
body .bg-surface-container-high,
body .bg-surface-container-highest {
    border-color: var(--arena-border);
}

body main {
    isolation: isolate;
}

body main > section {
    position: relative;
}

body main .match-card,
body main .category-tab,
body main [class*="shadow-2xl"] {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
}

body main .match-card {
    background-color: var(--arena-panel) !important;
    border: 1px solid var(--arena-border);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body main .match-card:hover {
    transform: translateY(-3px);
    border-color: rgba(198, 255, 74, .35);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .34);
}

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

body table th {
    color: var(--arena-muted);
    font-family: "Space Grotesk", system-ui, sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body table th,
body table td {
    border-color: var(--arena-border) !important;
}

body tr:hover td {
    background-color: rgba(198, 255, 74, .035);
}

body > header,
body > nav.fixed,
body > footer {
    border-color: var(--arena-border) !important;
}

body > header,
body > nav.fixed.top-0,
body > nav.fixed.bottom-0 {
    background-color: rgba(9, 13, 19, .88) !important;
    backdrop-filter: blur(18px);
}

body > nav.fixed.bottom-0 {
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .28);
}

body > footer {
    background-color: #0d141c !important;
}

@media (min-width: 1024px) {
    body.landing-page > footer > div > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

body #admin-sidebar {
    background-color: #0d141c !important;
    border-color: var(--arena-border) !important;
}

body #admin-sidebar a:hover,
body #admin-sidebar button:hover {
    border-color: rgba(198, 255, 74, .2);
}

body .admin-toast,
body .admin-modal-card {
    border-color: var(--arena-border);
}

body .hero-grid {
    background-image:
        linear-gradient(rgba(198, 255, 74, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(198, 255, 74, .035) 1px, transparent 1px);
    background-size: 54px 54px;
}

body .hero-glow {
    background: radial-gradient(60% 55% at 52% 36%, rgba(198, 255, 74, .12), transparent 72%);
}

body .animate-float {
    animation-duration: 7s;
}

body ::selection {
    color: #101609;
    background: var(--arena-lime);
}

.dashboard-page,
.matches-page,
.leaderboard-page,
.profile-page {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.dashboard-page {
    gap: 1.35rem;
}

.dashboard-welcome {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    padding: clamp(1.25rem, 3.5vw, 2.25rem);
    border: 1px solid rgba(198, 255, 74, .17);
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 83% 16%, rgba(87, 227, 220, .15), transparent 22rem),
        radial-gradient(ellipse at 6% 90%, rgba(198, 255, 74, .1), transparent 25rem),
        linear-gradient(125deg, #121d21 0%, #101820 58%, #102126 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .2);
}

.dashboard-welcome::after {
    position: absolute;
    top: -60%;
    right: -7%;
    width: min(42vw, 370px);
    aspect-ratio: 1;
    border: 1px solid rgba(198, 255, 74, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(198, 255, 74, .025), 0 0 0 72px rgba(87, 227, 220, .025);
    content: "";
    pointer-events: none;
}

.dashboard-welcome-copy,
.dashboard-welcome-actions {
    position: relative;
    z-index: 1;
}

.dashboard-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--arena-cyan);
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.dashboard-eyebrow .material-symbols-outlined {
    font-size: 1rem;
}

.dashboard-welcome h1,
.matches-heading h1,
.leaderboard-heading h1 {
    margin: .55rem 0 .4rem;
    color: var(--arena-text);
    font-family: "Anybody", "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.65rem, 4vw, 2.65rem);
    font-weight: 800;
    letter-spacing: -.055em;
    line-height: 1.08;
}

.dashboard-welcome h1 span {
    color: var(--arena-lime);
}

.dashboard-welcome p,
.matches-heading p,
.leaderboard-heading p {
    margin: 0;
    color: var(--arena-muted);
    font-size: .9rem;
    line-height: 1.6;
}

.dashboard-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .65rem;
}

.dashboard-primary-action,
.dashboard-secondary-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem .95rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-primary-action {
    color: #18210a;
    background: var(--arena-lime);
    box-shadow: 0 8px 24px rgba(198, 255, 74, .14);
}

.dashboard-primary-action:hover {
    transform: translateY(-2px);
    background: #d5ff79;
    box-shadow: 0 12px 28px rgba(198, 255, 74, .2);
}

.dashboard-secondary-action {
    color: var(--arena-text);
    border-color: var(--arena-border);
    background: rgba(9, 13, 19, .48);
}

.dashboard-secondary-action:hover {
    color: var(--arena-cyan);
    border-color: rgba(87, 227, 220, .36);
    background: rgba(87, 227, 220, .06);
}

.dashboard-primary-action .material-symbols-outlined,
.dashboard-secondary-action .material-symbols-outlined {
    font-size: 1.15rem;
}

.dashboard-quick-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--arena-border);
    padding-top: 1rem;
}

.dashboard-quick-stats > div {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    column-gap: .55rem;
    padding-inline: 1rem;
    border-right: 1px solid var(--arena-border);
}

.dashboard-quick-stats > div:first-child {
    padding-left: 0;
}

.dashboard-quick-stats > div:last-child {
    border-right: 0;
}

.dashboard-quick-stats .material-symbols-outlined {
    grid-row: span 2;
    color: var(--arena-lime);
    font-size: 1.25rem;
}

.dashboard-quick-stats strong {
    color: var(--arena-text);
    font-size: 1.05rem;
    line-height: 1.1;
}

.dashboard-quick-stats > div > span:last-child {
    color: var(--arena-muted);
    font-size: .67rem;
}

.dashboard-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: -.4rem;
}

.dashboard-section-heading > div {
    display: grid;
    gap: .2rem;
}

.dashboard-section-heading h2 {
    margin: 0;
    color: var(--arena-text);
    font-family: "Anybody", "Space Grotesk", system-ui, sans-serif;
    font-size: clamp(1.1rem, 2.3vw, 1.45rem);
    font-weight: 750;
    letter-spacing: -.035em;
}

.dashboard-section-heading > span {
    color: var(--arena-muted);
    font-size: .75rem;
    white-space: nowrap;
}

.dashboard-page #banner-carousel > div {
    min-height: 180px;
}

.dashboard-page #match-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.dashboard-page #match-list > .match-card {
    min-width: 0;
    padding: 1.1rem;
    border-radius: 18px;
}

.dashboard-page #match-list > .match-card > .absolute:first-child {
    width: 7rem;
    height: 7rem;
}

.dashboard-page .match-card-actions,
.dashboard-page .match-card > div:has(.join-btn) {
    gap: .55rem;
}

.dashboard-page .match-card-actions > a,
.dashboard-page .match-card a.bg-surface-container-lowest,
.dashboard-page .match-card-actions > .join-btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    border-radius: 11px;
    font-size: .78rem;
}

.dashboard-page .match-card a.bg-surface-container-lowest {
    padding-inline: 1rem;
}

.dashboard-page .match-card .join-btn {
    min-height: 44px;
    padding: .65rem 1.15rem;
    border-radius: 11px;
    font-size: .78rem;
}

.dashboard-page .match-card-actions > .join-btn {
    min-width: 96px;
    padding-inline: 1.15rem;
}

.dashboard-page #match-list > .in-between-banner,
.dashboard-page #match-list > #filter-empty-state,
.dashboard-page #match-list > .text-center {
    grid-column: 1 / -1;
}

.matches-page {
    gap: 1rem;
}

.matches-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: clamp(1.1rem, 3vw, 1.65rem);
    border: 1px solid rgba(87, 227, 220, .14);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 94% 10%, rgba(87, 227, 220, .11), transparent 20rem),
        linear-gradient(120deg, var(--arena-panel), #0d171d);
}

.matches-heading h1 {
    margin-top: .35rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
    text-transform: none;
}

.matches-heading p {
    font-size: .78rem;
}

.matches-active-count {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border: 1px solid rgba(198, 255, 74, .24);
    border-radius: 999px;
    color: var(--arena-lime);
    background: rgba(198, 255, 74, .07);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}

.matches-page > .bg-surface-container-low {
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(87, 227, 220, .055), transparent 20rem),
        var(--arena-panel) !important;
}

.matches-page > [id^="roomcard-"] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: stretch;
    gap: 1rem;
    padding: 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(20, 31, 39, .98), rgba(13, 20, 28, .98)) !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .18);
}

.matches-page > [id^="roomcard-"] > div:first-child {
    justify-content: space-between;
    min-height: 100%;
    padding: 1.1rem;
    border: 1px solid var(--arena-border);
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(87, 227, 220, .1), transparent 16rem),
        #101a20 !important;
}

.matches-page > [id^="roomcard-"] > div:nth-child(2) {
    justify-content: center;
    align-self: stretch;
    padding: 1rem;
    border-color: var(--arena-border);
    border-radius: 16px;
    background: rgba(8, 14, 20, .55) !important;
}

.matches-page > [id^="roomcard-"] > div:nth-child(2) > div:nth-child(2) > div {
    background: #101820 !important;
    border-radius: 12px;
}

.matches-page > [id^="roomcard-"] > div:nth-child(2) > a {
    min-height: 46px;
    border-radius: 12px;
}

.leaderboard-page {
    gap: .75rem !important;
}

.leaderboard-page > .flex.bg-surface-container {
    margin-bottom: 0 !important;
}

.leaderboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    border: 1px solid rgba(198, 255, 74, .14);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at 88% 10%, rgba(198, 255, 74, .11), transparent 18rem),
        linear-gradient(125deg, var(--arena-panel), #101820);
}

.leaderboard-heading h1 {
    margin-top: .35rem;
    font-size: clamp(1.4rem, 3.4vw, 2.2rem);
}

.leaderboard-heading p {
    font-size: .8rem;
}

.leaderboard-season {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .8rem;
    border: 1px solid rgba(198, 255, 74, .2);
    border-radius: 14px;
    color: var(--arena-lime);
    background: rgba(198, 255, 74, .055);
    font-size: .6rem;
    letter-spacing: .11em;
    line-height: 1.5;
    white-space: nowrap;
}

.leaderboard-season .material-symbols-outlined {
    font-size: 1.55rem;
}

.leaderboard-season strong {
    color: var(--arena-text);
    font-size: .65rem;
}

.leaderboard-page > .flex.bg-surface-container {
    padding: .3rem;
    border: 1px solid var(--arena-border);
    border-radius: 14px;
    background: #0d151c !important;
}

.leaderboard-page > .flex.bg-surface-container button {
    min-height: 42px;
    border-radius: 11px;
}

.leaderboard-page .leaderboard-podium > .leaderboard-player-card {
    position: relative;
    min-height: 145px;
    justify-content: flex-end;
    padding: 2rem .65rem .85rem;
    border: 1px solid var(--arena-border);
    background: linear-gradient(180deg, rgba(198, 255, 74, .055), var(--arena-panel)) !important;
}

.leaderboard-page .leaderboard-podium > .leaderboard-rank-1 {
    min-height: 166px;
    border-color: rgba(198, 255, 74, .34);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(198, 255, 74, .15), transparent 12rem),
        linear-gradient(180deg, #17221d, #111923) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
}

.leaderboard-page .leaderboard-podium-count-1 > .leaderboard-rank-1 {
    grid-column: 2;
}

.leaderboard-page .leaderboard-podium-count-2 > .leaderboard-rank-1 {
    grid-column: 2;
    grid-row: 1;
}

.leaderboard-page .leaderboard-podium-count-2 > .leaderboard-rank-2 {
    grid-column: 1;
    grid-row: 1;
}

.leaderboard-page .leaderboard-podium > .leaderboard-player-card > div[class*="rounded-full"] {
    border-radius: 999px;
}

.leaderboard-page #content-leaderboard > div:nth-child(2) > div:last-child > div {
    min-height: 66px;
    border: 1px solid var(--arena-border);
    background: linear-gradient(110deg, var(--arena-panel), rgba(17, 25, 35, .7)) !important;
    transition: transform 160ms ease, border-color 160ms ease;
}

.leaderboard-page #content-leaderboard > div:nth-child(2) > div:last-child > div:hover {
    transform: translateX(3px);
    border-color: rgba(198, 255, 74, .24);
}

.profile-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-page > .bg-surface-container {
    border-radius: 22px;
    background:
        radial-gradient(ellipse at 88% 2%, rgba(87, 227, 220, .08), transparent 20rem),
        var(--arena-panel) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .18);
}

.profile-page > .bg-surface-container > div:first-child {
    height: clamp(100px, 16vw, 160px);
    background:
        linear-gradient(115deg, rgba(198, 255, 74, .2), rgba(87, 227, 220, .12) 60%, transparent),
        repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 11px) !important;
}

.profile-page > .bg-surface-container .grid > div {
    transition: transform 160ms ease, border-color 160ms ease;
}

.profile-page > .bg-surface-container .grid > div:hover {
    transform: translateY(-2px);
    border-color: rgba(198, 255, 74, .22);
}

.profile-page form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1rem;
}

.profile-page form > input[type="hidden"] {
    display: none;
}

.profile-page form > .bg-surface-container {
    height: 100%;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--arena-panel-raised), var(--arena-panel)) !important;
}

.profile-page form > .bg-surface-container > div:first-child {
    background: rgba(255, 255, 255, .018) !important;
}

.profile-page form > .bg-surface-container:nth-of-type(2) > div:first-child {
    background: linear-gradient(90deg, rgba(87, 227, 220, .055), transparent) !important;
}

.profile-page form > div:last-child {
    grid-column: 1 / -1;
}

.profile-page form > div:last-child > button[type="submit"] {
    justify-self: end;
}

.profile-page form > button[type="submit"] {
    min-height: 46px;
    padding-inline: 1.4rem;
    border-radius: 12px;
}

.td-page {
    display: grid;
    width: min(100%, 1180px);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: start;
    gap: 1rem;
    margin-inline: auto;
}

body .td-page {
    display: grid;
    gap: 1rem;
}

body .td-page > .td-flash,
body .td-page > .td-hero,
body .td-page > .td-stats {
    grid-column: 1 / -1;
}

.td-hero {
    min-height: 270px;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 2.5rem) !important;
    border: 1px solid rgba(198, 255, 74, .2);
    border-radius: 24px !important;
    background:
        radial-gradient(ellipse at 82% 15%, rgba(87, 227, 220, .19), transparent 25rem),
        radial-gradient(ellipse at 8% 95%, rgba(198, 255, 74, .14), transparent 25rem),
        linear-gradient(125deg, #121d21 0%, #101820 58%, #102126 100%) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}

.td-hero .td-hero-image,
.td-hero .td-hero-image-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.td-hero .td-hero-image {
    z-index: 0;
    object-fit: cover;
    object-position: center;
}

.td-hero .td-hero-image-overlay {
    z-index: 0;
    background: linear-gradient(90deg, rgba(8, 13, 19, .94) 0%, rgba(8, 13, 19, .77) 54%, rgba(8, 13, 19, .43) 100%);
}

.td-hero::after {
    position: absolute;
    right: -3rem;
    bottom: -8rem;
    width: 18rem;
    aspect-ratio: 1;
    border: 1px solid rgba(198, 255, 74, .16);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(198, 255, 74, .025), 0 0 0 58px rgba(87, 227, 220, .025);
    content: "";
    pointer-events: none;
}

.td-hero h1 {
    max-width: 850px;
    font-size: clamp(1.8rem, 4.6vw, 3.5rem) !important;
    letter-spacing: -.055em;
}

.td-hero > div,
.td-hero > p {
    position: relative;
    z-index: 1;
}

.td-hero > div:first-of-type > span {
    border-radius: 999px;
    letter-spacing: .08em;
}

.td-hero > div:last-child > div {
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(9, 13, 19, .5) !important;
    backdrop-filter: blur(8px);
}

.td-stats {
    gap: .85rem !important;
}

body .td-stats {
    display: grid;
    gap: .85rem;
}

.td-stat,
.td-panel {
    border: 1px solid var(--arena-border);
    border-radius: 20px !important;
    background:
        radial-gradient(ellipse at 100% 0%, rgba(87, 227, 220, .055), transparent 18rem),
        linear-gradient(150deg, var(--arena-panel-raised), var(--arena-panel)) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .15);
}

.td-stat {
    min-height: 120px;
    justify-content: center;
    padding: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.td-stat > span:nth-child(2) {
    font-size: clamp(1.35rem, 3vw, 2rem) !important;
}

.td-stat > div {
    height: 7px !important;
    border: 1px solid rgba(255, 255, 255, .07);
}

.td-panel {
    gap: 1rem !important;
    padding: clamp(1rem, 2.5vw, 1.5rem) !important;
}

.td-panel h2 {
    font-size: 1.05rem !important;
    letter-spacing: .025em;
}

.td-panel > div > div,
.td-panel #td-player-fields > div {
    border: 1px solid rgba(168, 190, 202, .09);
    border-radius: 13px !important;
    background-color: rgba(9, 13, 19, .38) !important;
}

.td-register {
    grid-column: 1;
}

.td-register #td-player-fields {
    gap: .75rem !important;
}

.td-register #td-player-fields > div:not(#td-msg-error) {
    padding: 1rem !important;
}

.td-register input {
    min-height: 46px;
    border-radius: 11px !important;
}

.td-cta {
    position: sticky;
    top: 1.25rem;
    grid-column: 2;
    align-self: start;
    padding: 0 !important;
}

.td-cta > button,
.td-cta > div {
    min-height: 58px;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(198, 255, 74, .14);
}

.td-cta > button {
    color: #15200c !important;
    background: var(--arena-lime) !important;
}

.td-cta > button:hover {
    background: #d5ff79 !important;
    transform: translateY(-2px);
}

@media (min-width: 768px) {
    body > nav.fixed.bottom-0 {
        border-radius: 18px 18px 0 0;
    }

}

@media (max-width: 900px) {
    body .td-page {
        grid-template-columns: minmax(0, 1fr);
    }

    body .td-page > .td-flash,
    body .td-page > .td-hero,
    body .td-page > .td-stats,
    body .td-register,
    body .td-cta {
        grid-column: 1;
    }

    body .td-cta {
        position: static;
        margin-top: -.2rem;
    }
}

@media (min-width: 1024px) {
    .dashboard-page #banner-carousel > div {
        min-height: 220px;
    }
}

@media (max-width: 640px) {
    :root {
        --arena-radius: 15px;
    }

    body main {
        overflow-wrap: anywhere;
    }

    body main > section {
        scroll-margin-top: 76px;
    }

    .td-page {
        grid-template-columns: minmax(0, 1fr);
        gap: .8rem;
    }

    .td-page > .td-flash,
    .td-page > .td-hero,
    .td-page > .td-stats,
    .td-register,
    .td-cta {
        grid-column: 1;
    }

    .td-hero {
        min-height: 0;
        border-radius: 19px !important;
    }

    .td-hero h1 {
        font-size: 1.75rem !important;
    }

    .td-stats {
        gap: .55rem !important;
    }

    .td-stat {
        min-height: 104px;
        border-radius: 16px !important;
    }

    .td-panel {
        border-radius: 17px !important;
    }

    .td-cta {
        position: static;
        margin-top: -.2rem;
    }

    .dashboard-page {
        gap: 1rem;
    }

    .dashboard-welcome {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        border-radius: 19px;
    }

    .dashboard-welcome::after {
        top: -25%;
        right: -30%;
        width: 72vw;
    }

    .dashboard-welcome p {
        max-width: 30rem;
        font-size: .78rem;
    }

    .dashboard-welcome-actions {
        justify-content: flex-start;
    }

    .dashboard-primary-action,
    .dashboard-secondary-action {
        min-height: 42px;
        padding-inline: .75rem;
        font-size: .69rem;
    }

    .dashboard-quick-stats {
        padding-top: .8rem;
    }

    .dashboard-quick-stats > div {
        grid-template-columns: auto 1fr;
        column-gap: .35rem;
        padding-inline: .5rem;
    }

    .dashboard-quick-stats > div:first-child {
        padding-left: 0;
    }

    .dashboard-quick-stats .material-symbols-outlined {
        grid-row: 1;
        font-size: 1rem;
    }

    .dashboard-quick-stats strong {
        font-size: .92rem;
    }

    .dashboard-quick-stats > div > span:last-child {
        grid-column: 1 / -1;
        font-size: .58rem;
    }

    .dashboard-section-heading > span {
        font-size: .65rem;
    }

    .dashboard-page #match-list {
        grid-template-columns: minmax(0, 1fr);
        gap: .75rem;
    }

    .dashboard-page #match-list > .match-card {
        padding: .9rem;
    }

    .matches-heading {
        align-items: flex-start;
        padding: 1rem;
        border-radius: 17px;
    }

    .matches-heading h1 {
        font-size: 1.45rem;
    }

    .matches-heading p {
        max-width: 18rem;
        font-size: .68rem;
    }

    .matches-active-count {
        min-height: 36px;
        padding: .4rem .6rem;
        font-size: .65rem;
    }

    .matches-page > [id^="roomcard-"] {
        grid-template-columns: minmax(0, 1fr);
        gap: .7rem;
        padding: .65rem;
        border-radius: 17px;
    }

    .matches-page > [id^="roomcard-"] > div:first-child,
    .matches-page > [id^="roomcard-"] > div:nth-child(2) {
        padding: .8rem;
        border-radius: 13px;
    }

    .matches-page > [id^="roomcard-"] > div:nth-child(2) {
        gap: .65rem;
    }

    .leaderboard-heading {
        align-items: flex-start;
        border-radius: 17px;
    }

    .leaderboard-heading h1 {
        max-width: 16rem;
        font-size: 1.42rem;
    }

    .leaderboard-heading p {
        font-size: .7rem;
    }

    .leaderboard-season {
        gap: .35rem;
        padding: .5rem;
        font-size: .5rem;
    }

    .leaderboard-season .material-symbols-outlined {
        font-size: 1.15rem;
    }

    .leaderboard-season strong {
        font-size: .52rem;
    }

    .leaderboard-page .leaderboard-podium > .leaderboard-player-card {
        min-height: 132px;
        padding-inline: .4rem;
    }

    .leaderboard-page .leaderboard-podium > .leaderboard-rank-1 {
        min-height: 149px;
    }

    .profile-page form {
        grid-template-columns: minmax(0, 1fr);
        gap: .8rem;
    }

    .profile-page form > div:last-child {
        grid-column: auto;
    }

    .profile-page form > div:last-child > button[type="submit"] {
        justify-self: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}