* {
box-sizing: border-box;
}
html {
scroll-padding-top: 5rem;
}
body {
background-color: var(--clr-surface);
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
color: var(--clr-light);
padding: 0;
margin: 0;
&.no-scroll {
overflow: hidden;
}
}
/* Brand */
.brand {
display: inline-flex;
gap: 0.6rem;
align-items: center;
font-family: "Fondamento", cursive;
font-size: 1.5rem;
font-weight: bold;
font-style: normal;
color: var(--clr-light);
text-decoration: none;
&, &:hover, &:visited, &:active {
color: var(--clr-light) !important;
text-decoration: none !important;
background-color: transparent;
}
.highlight {
color: var(--clr-primary);
}
img {
opacity: 0.9;
}
}
.user-link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
vertical-align: middle;
}
.user-link-flag {
height: 1rem;
aspect-ratio: 4/3;
}
.user-link-avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
}
.user-link-avatar-sm {
width: 1.25rem;
height: 1.25rem;
}
.content {
display: grid;
grid-template-columns: var(--content-sidebar-width) auto var(--content-ad-width, 0px);
gap: var(--content-gap);
min-height: 70vh;
margin: 0 calc(var(--content-margin-inline) / 2);
padding-top: 1.5rem;
> main {
min-width: 0;
overflow-x: clip;
> section {
margin-bottom: 1.5rem;
}
}
}
.content-sidebar {
display: flex;
flex-direction: column;
}
.content-sidebar-ad {
margin-top: auto;
position: sticky;
bottom: 0;
padding-block: 1rem;
max-width: 80%;
}
.content-ad {
position: sticky;
top: 5rem;
align-self: start;
justify-self: center;
}
@media (min-width: 68.01rem) {
.content:has(.content-ad) {
--content-ad-width: 200px;
}
}
@media (max-width: 68rem) {
.content {
display: block;
}
.content-ad {
display: none;
}
.content-sidebar-ad {
max-width: 100%;
}
}
/* ── Offcanvas panel — shared mobile styles ── */
@media (max-width: 68rem) {
offcanvas-panel {
position: fixed;
top: 0;
left: 0;
width: min(30rem, 85vw);
height: 100dvh;
z-index: 1100;
background-color: var(--clr-surface);
transform: translateX(-100%);
transition: transform 0.25s ease;
overflow-y: auto;
padding: 1rem;
border-right: 1px solid var(--clr-surface-20);
&[open] {
transform: translateX(0);
}
}
}
.offcanvas-backdrop {
position: fixed;
inset: 0;
z-index: 1099;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
&[data-open] {
opacity: 1;
pointer-events: auto;
}
}
.offcanvas-header {
display: none;
}
.btn.offcanvas-toggle {
display: none;
}
@media (max-width: 68rem) {
.offcanvas-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--clr-surface-20);
}
.offcanvas-close {
background: none;
border: none;
color: var(--clr-surface-40);
font-size: 1.1rem;
padding: 0.25rem;
cursor: pointer;
&:hover {
color: var(--clr-light);
background: none;
}
}
.btn.offcanvas-toggle {
display: inline-flex;
margin-bottom: 1rem;
}
}
/* Single-column page layout */
.content-single {
margin-inline: var(--content-margin-inline);
min-height: 70vh;
> main {
max-width: var(--content-single-max-width);
margin-inline: auto;
padding-top: 1.5rem;
min-width: 0;
overflow-x: clip;
}
}
/* Hero/full-bleed breakout — escapes the content-single margin to span
the full viewport width. Apply to direct children of .content-single. */
.content-breakout {
margin-inline: calc(-1 * var(--content-margin-inline));
}
.text-page {
max-width: 52rem;
margin: 0 auto;
padding: 2rem var(--content-margin-inline);
line-height: 1.7;
> h1 {
font-size: 1.5rem;
margin: 0 0 1rem;
}
h3 {
font-size: 1.15rem;
margin: 1.5rem 0 0.5rem;
}
h4 {
font-size: 1rem;
margin: 1.25rem 0 0.5rem;
}
a {
color: var(--clr-primary);
}
}
/* Panels */
.panel {
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
}
/* Data tables */
.data-table {
width: 100%;
border-collapse: collapse;
th, td {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--clr-surface-10);
vertical-align: middle;
}
th {
text-align: start;
font-size: 0.85rem;
color: var(--clr-surface-40);
}
tbody tr:nth-child(even) {
background-color: var(--clr-surface-tonal);
}
tbody tr:hover {
background-color: var(--clr-surface-10);
}
}
/* Badge */
.badge {
display: inline-block;
padding: 0.2em 0.55em;
font-size: 0.8rem;
font-weight: 600;
background-color: var(--clr-surface-20);
color: var(--clr-secondary-20);
border-radius: 3px;
}
/* Section headings */
.section-heading {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
margin: 0 0 0.75rem;
> i {
color: var(--clr-primary-30);
font-size: 0.9em;
}
}
.section-heading-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
> .section-heading { margin-bottom: 0; }
> .btn {
font-size: 0.75rem;
padding: 0.35rem 0.75rem;
white-space: nowrap;
}
}
.card {
background-color: var(--clr-surface-5);
padding: 1rem;
border: 1px solid var(--clr-surface-20);
box-shadow: 0 3px 15px -5px var(--clr-dark);
margin-bottom: 1rem;
> .card-header {
font-family: "Fondamento", cursive;
font-weight: bold;
padding: 0 0 0.5rem;
margin: 0 0 0.75rem;
border-bottom: 1px solid var(--clr-surface-20);
> i {
color: var(--clr-primary-30);
font-size: 0.9em;
}
}
> .card-header-muted {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-surface-40);
padding: 0 0 0.5rem;
margin: 0 0 0.75rem;
border-bottom: 1px solid var(--clr-surface-20);
}
}
.card-chart {
padding: 0;
display: flex;
flex-direction: column;
.card-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--clr-surface-20);
}
.card-chart-title {
font-size: 1rem;
font-weight: 600;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
> i {
color: var(--clr-primary-30);
font-size: 0.9em;
}
}
menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 0.25rem;
> li > a {
display: block;
padding: 0.3rem 0.75rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
text-decoration: none;
border-radius: 3px;
&.active, &:hover {
background-color: var(--clr-surface-tonal);
color: var(--clr-light);
}
}
}
.tab-content {
padding: 1rem;
}
}
hr {
border-width: 0 0 2px;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(184, 134, 45, 0), #b8862d, #ffdf91, #b8862d, rgba(184, 134, 45, 0));
border-style: solid;
padding: 0;
margin: 1rem 0;
}
/* Buttons */
button,
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.5rem 1.25rem;
font-family: inherit;
font-size: 1rem;
cursor: pointer;
text-decoration: none;
transition: background-color 0.15s ease;
background-color: var(--clr-primary);
border: 1px solid var(--clr-primary-10);
color: var(--clr-dark);
&:hover {
background-color: var(--clr-primary-5);
}
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--clr-primary);
color: var(--clr-primary);
&:hover {
background-color: color-mix(in oklab, var(--clr-primary) 12%, transparent);
}
}
.btn-subtle {
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-30);
color: var(--clr-light);
&:hover {
background-color: var(--clr-surface-20);
}
}
.btn-danger {
background-color: var(--clr-danger);
border-color: var(--clr-danger);
color: var(--clr-light);
&:hover {
background-color: color-mix(in oklab, var(--clr-danger) 80%, white);
}
}
button:disabled,
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
/* Form elements */
select,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
textarea {
padding: 0.5rem 0.75rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-30);
color: var(--clr-light);
font-size: 1rem;
font-family: inherit;
transition: border-color 0.15s ease, background-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-20);
}
&:focus {
outline: 1px solid var(--clr-primary);
border-color: var(--clr-primary);
}
}
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23888%27 d=%27M6 8L1 3h10z%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2rem;
}
/* Sidebar filters (shared) */
.filter-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
> label {
text-transform: uppercase;
color: var(--clr-secondary-40);
padding-left: 0.5rem;
}
}
.filter-tiles {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.filter-tile {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.6rem;
font-size: 0.85rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-secondary-20);
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-20);
text-decoration: none;
}
&.active {
background-color: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-dark);
}
}
.filter-tile-count {
font-size: 0.75rem;
opacity: 0.5;
&:empty { display: none; }
}
.filter-list {
display: flex;
flex-direction: column;
}
.filter-item {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.5rem;
color: var(--clr-light);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
text-align: left;
min-width: 0;
transition: background-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-20);
text-decoration: none;
}
&.active {
background-color: var(--clr-primary);
color: var(--clr-dark);
}
img {
flex-shrink: 0;
}
}
.filter-item-count {
margin-left: auto;
font-size: 0.75rem;
color: var(--clr-surface-40);
}
.filter-item.active .filter-item-count {
color: color-mix(in oklab, var(--clr-dark) 60%, transparent);
}
.filter-list-grid {
display: grid;
grid-template-columns: 1fr 1fr;
max-height: 9rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--clr-surface-20) transparent;
}
/* Filter bar */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
}
.filter-bar .filter-group {
flex: 1 1 10rem;
}
.filter-bar .filter-group label {
font-size: 0.7rem;
}
.filter-bar .filter-actions {
display: flex;
align-items: flex-end;
gap: 0.5rem;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
gap: 0.25rem;
list-style: none;
padding: 0;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.pagination .page-item {
display: inline-block;
}
.pagination .page-link {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.75rem;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-30);
color: var(--clr-light);
text-decoration: none;
font-size: 0.9rem;
transition: background-color 0.15s ease;
}
.pagination .page-link:hover {
background-color: var(--clr-surface-20);
}
.pagination .page-item.active .page-link {
background-color: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-dark);
}
.pagination .page-link:disabled {
opacity: 0.35;
pointer-events: none;
}
/* Stat cards */
.stat-card {
position: relative;
overflow: hidden;
color: var(--clr-light);
text-decoration: none;
&:hover {
text-decoration: none;
}
}
.stat-body {
position: relative;
overflow: hidden;
padding: 0.75rem 1rem;
text-align: end;
}
.stat-bg {
position: absolute;
left: -1rem;
top: -1rem;
width: 9rem;
height: auto;
opacity: 0.6;
}
.stat-bg-icon {
position: absolute;
left: -0.5rem;
top: 0;
font-size: 8rem;
opacity: 0.25;
color: var(--clr-primary);
}
.stat-card:has(.stat-bg-icon) {
overflow: visible;
}
.stat-body:has(.stat-bg-icon) {
overflow: visible;
}
.stat-bg-flag {
height: 9rem;
left: -1rem;
top: -1rem;
}
.stat-name {
font-size: 1.3rem;
font-weight: 700;
position: relative;
z-index: 1;
}
.stat-value {
position: relative;
z-index: 1;
text-align: end;
}
.stat-value .h3 {
font-size: 1.75rem;
font-weight: 700;
}
.stats-grid {
display: flex;
gap: 1rem;
padding-bottom: 2rem;
> * {
flex: 1 0 0;
min-width: 14rem;
}
}
/* Callouts */
.callout {
padding: 0.6rem 0.75rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--clr-surface-40);
background: var(--clr-surface-5);
border-radius: 4px;
border-left: 3px solid var(--_callout-clr);
.fa-info-circle,
.fa-circle-info,
.fa-triangle-exclamation,
.fa-circle-exclamation,
.fa-circle-xmark {
color: var(--_callout-clr);
margin-right: 0.3rem;
}
&.callout-info { --_callout-clr: var(--clr-info); }
&.callout-warning { --_callout-clr: var(--clr-warning); }
&.callout-danger { --_callout-clr: var(--clr-danger); }
&.callout-success { --_callout-clr: var(--clr-success); }
}
/* Site footer */
.site-footer {
margin-top: 3rem;
border-top: 2px solid;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(184, 134, 45, 0), #b8862d, #ffdf91, #b8862d, rgba(184, 134, 45, 0));
background-color: var(--clr-surface-5);
color: var(--clr-surface-40);
line-height: 1.6;
a {
color: var(--clr-secondary-20);
text-decoration: none;
&:hover {
color: var(--clr-primary);
}
}
}
.site-footer-top {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
padding: 2.5rem var(--content-margin-inline);
}
.site-footer-brand {
p {
margin: 0.5rem 0 0;
}
}
.site-footer-social {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
a {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
font-size: 1rem;
transition: border-color 0.15s ease, color 0.15s ease;
&:hover {
border-color: var(--clr-primary);
color: var(--clr-primary);
}
}
}
.site-footer-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
h3 {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-light);
margin: 0 0 0.35rem;
&:not(:first-child) {
margin-top: 1rem;
}
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li a {
display: inline-block;
padding: 0.15rem 0;
}
}
.site-footer-bottom {
padding: 1rem var(--content-margin-inline);
border-top: 1px solid var(--clr-surface-20);
font-size: 0.75rem;
text-align: center;
p {
margin: 0;
}
p + p {
margin-top: 0.25rem;
color: var(--clr-surface-30);
}
}
@media (max-width: 68rem) {
.site-footer-top {
grid-template-columns: 1fr;
gap: 2rem;
}
.site-footer-links {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 30rem) {
.site-footer-links {
grid-template-columns: 1fr;
}
}
/* ── Speed Runs page ── */
.speed-runs {
margin: 0 var(--content-margin-inline);
padding-top: 1.5rem;
> .speed-runs-intro {
max-width: 52rem;
line-height: 1.7;
margin-bottom: 2rem;
}
}
.speed-run-card {
margin-bottom: 1.5rem;
}
.speed-run-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
padding: 1rem;
@media (max-width: 68rem) {
grid-template-columns: 1fr;
}
}
.speed-run-leaderboard {
.leaderboard-rank {
white-space: nowrap;
}
.leaderboard-first .leaderboard-rank { font-size: 1.4rem; }
.leaderboard-second .leaderboard-rank { font-size: 1.3rem; }
.leaderboard-third .leaderboard-rank { font-size: 1.2rem; }
.crown-gold { color: gold; }
.crown-silver { color: silver; }
.crown-bronze { color: #bf8970; }
.sub-table {
margin-left: 2rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
}
/* ── Tooltips ── */
.tooltip {
position: absolute;
z-index: 9999;
max-width: 26rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
&.is-visible {
opacity: 1;
}
}
.tooltip-inner {
background: var(--clr-surface-tonal-20);
color: var(--clr-light);
font-size: 0.8rem;
line-height: 1.4;
padding: 0.4rem 0.6rem;
border-radius: 0.3rem;
box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}
/* ── User tooltip (loaded via AJAX) ── */
.user-tooltip {
display: flex;
gap: 0.75rem;
align-items: center;
}
.user-tooltip-avatar {
width: 4rem;
height: 4rem;
border-radius: 50%;
flex-shrink: 0;
}
.user-tooltip-info {
white-space: nowrap;
}
.user-tooltip-table {
margin-top: 0.25rem;
border-collapse: collapse;
width: 100%;
th {
font-weight: 600;
padding: 0.1rem 0.4rem;
border-bottom: 1px solid var(--clr-surface-40);
}
td {
padding: 0.1rem 0.4rem;
}
th:first-child, td:first-child {
text-align: left;
}
th:not(:first-child), td:not(:first-child) {
text-align: right;
}
tr:nth-child(even) {
background: rgb(255 255 255 / 0.04);
}
}
/* devanagari */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/poppins-v20-devanagari_latin_latin-ext-regular.67f2fd4268f7337f5c63.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/poppins-v20-devanagari_latin_latin-ext-regular.67f2fd4268f7337f5c63.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/poppins-v20-devanagari_latin_latin-ext-regular.67f2fd4268f7337f5c63.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fondamento – latin-ext */
@font-face {
font-family: 'Fondamento';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/fondamento-v22-latin-ext-regular.c26e340f30bff5cb8088.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fondamento – latin */
@font-face {
font-family: 'Fondamento';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/fondamento-v22-latin-regular.564fbcafdfbde60c429d.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fondamento italic – latin-ext */
@font-face {
font-family: 'Fondamento';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/fondamento-v22-latin-ext-italic.7b1f85c4876d0790a404.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fondamento italic – latin */
@font-face {
font-family: 'Fondamento';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(/static/fonts/fondamento-v22-latin-italic.b9d1d1346534614caf49.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ═══════════════════════════════════════════════════
Team Grid — shared [team] [vs] [team] layout
Used by: unit-totals, economy-overview,
market-usage, tech-uptimes
Host element should set container-type: inline-size
for the VS flip to work.
═══════════════════════════════════════════════════ */
.tg {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.75rem;
}
.tg-team {
flex: 1 1 20rem;
min-width: 0;
display: flex;
gap: 0.5rem;
}
.tg-col {
flex: 1;
min-width: 0;
}
/* ── VS Divider (vertical by default) ── */
.tg-vs {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
justify-content: center;
flex: 0 0 auto;
padding: 0 0.75rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-surface-40);
&::before,
&::after {
content: "";
flex: 1;
width: 1px;
background-color: color-mix(in oklab, var(--clr-light) 12%, transparent);
}
&::before { margin-bottom: 0.4rem; }
&::after { margin-top: 0.4rem; }
}
/* Teams stacked → VS becomes horizontal separator */
@container (max-width: 44rem) {
.tg-vs {
flex-basis: 100%;
flex-direction: row;
padding: 0;
&::before,
&::after {
height: 1px;
width: auto;
}
&::before { margin-bottom: 0; margin-right: 0.5rem; }
&::after { margin-top: 0; margin-left: 0.5rem; }
}
}
/* ── Player header ── */
.tg-player {
display: flex;
align-items: center;
gap: 0.35rem;
border-bottom: 3px solid;
padding: 0 0.5rem 0.3rem;
margin-bottom: 0.25rem;
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tg-civ {
width: 1.1rem;
height: 1.1rem;
flex-shrink: 0;
}
.tg-name {
overflow: hidden;
text-overflow: ellipsis;
}
.tg-nil {
color: var(--clr-surface-20);
}
html {
font-size: clamp(1rem, 0.8vw, 1.2rem);
}
a {
color: var(--clr-primary);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: "Fondamento", cursive;
font-style: normal;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }
body > header {
position: sticky;
top: 0;
display: flex;
align-items: center;
gap: 1rem;
margin: 0;
padding: 0 1rem;
z-index: 1000;
overflow-x: clip;
background-color: var(--clr-surface);
box-shadow: 0 10px 25px 0 rgba(51, 51, 51, 0.5);
border-width: 0 0 2px;
border-image-slice: 1;
border-image-source: linear-gradient(90deg, rgba(184, 134, 45, 0), #b8862d, #ffdf91, #b8862d, rgba(184, 134, 45, 0));
border-style: solid;
transition: transform 0.3s ease, top 0.3s ease, margin 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
&[data-hidden] {
transform: translateY(-100%);
}
/* ── Hamburger (hidden on desktop) ── */
> .nav-toggle {
display: none;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--clr-light);
font-size: 1.25rem;
padding: 0.5rem;
cursor: pointer;
&:hover { color: var(--clr-primary); }
}
> .brand {
flex: 0 1 var(--content-sidebar-width);
min-width: 0;
}
> .header-search {
display: flex;
align-items: stretch;
margin-left: auto;
min-width: 0;
> input {
width: 14rem;
min-width: 0;
font-size: 0.8rem;
padding: 0.4rem 0.75rem;
border-right: 0;
background-color: var(--clr-surface-10);
border-color: var(--clr-surface-20);
&::placeholder {
color: var(--clr-surface-30);
}
}
> button {
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
background: none;
border: 1px solid var(--clr-surface-20);
border-left: 0;
color: var(--clr-surface-40);
font-size: 0.85rem;
cursor: pointer;
transition: color 0.15s ease;
&:hover {
color: var(--clr-primary);
}
}
}
}
/* Desktop: panel is transparent in the header flex layout */
@media (min-width: 68.01rem) {
body > header > #main-nav {
display: contents;
}
}
/* ── Nav menu (works both inside header and when moved to body) ── */
#main-nav > menu {
display: flex;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
> li.nav-divider {
display: none;
}
> li {
position: relative;
padding: 1rem 1.25rem;
font-family: "Fondamento", cursive;
font-size: 1.25rem;
> a {
z-index: 2;
position: relative;
color: var(--clr-light);
text-decoration: none;
&:hover {
color: var(--clr-primary);
text-decoration: none;
}
> i {
background: linear-gradient(
160deg,
#b8862d 0%,
#ffdf91 45%,
#b8862d 55%,
#ffdf91 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&.active {
> a {
color: var(--clr-primary);
}
&::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -2rem;
right: -2rem;
background: radial-gradient(
ellipse 120% 160% at 50% -30%,
color-mix(in oklab, var(--clr-primary) 70%, transparent) 0%,
transparent 60%
);
pointer-events: none;
}
}
}
}
#main-nav > menu > li.nav-has-dropdown {
> .nav-dropdown {
display: none;
position: absolute;
top: 100%;
left: 1.25rem;
max-width: calc(100vw - 1rem);
z-index: 1200;
min-width: 10rem;
padding: 0.35rem 0;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
> a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.85rem;
color: var(--clr-light);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease;
> i {
background: none;
-webkit-text-fill-color: inherit;
}
&:hover {
background-color: var(--clr-surface-20);
}
}
}
&:hover > .nav-dropdown,
&:focus-within > .nav-dropdown {
display: block;
}
> .nav-dropdown-leaderboards {
display: none;
width: max-content;
a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.85rem;
color: var(--clr-light);
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-20);
}
}
.nav-dropdown-section {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0.35rem 0;
&:not(:last-child) {
border-bottom: 1px solid var(--clr-surface-20);
}
}
.nav-dropdown-label {
grid-column: 1 / -1;
padding: 0.25rem 1rem;
font-size: 0.75rem;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.05em;
}
}
&:hover > .nav-dropdown-leaderboards,
&:focus-within > .nav-dropdown-leaderboards {
display: block;
}
}
/* ── Mobile offcanvas ── */
@media (max-width: 68rem) {
body > header {
> .nav-toggle {
display: flex;
}
> .brand {
flex: 1;
}
> .header-search {
margin-left: auto;
> input {
width: 0;
padding-inline: 0;
border-width: 0;
opacity: 0;
transition: width 0.2s ease, opacity 0.2s ease, padding 0.2s ease, border-width 0.2s ease;
}
> button {
border: none;
width: 2.2rem;
color: var(--clr-surface-40);
&:hover {
color: var(--clr-primary);
}
}
&.is-open > input {
width: 10rem;
padding: 0.4rem 0.75rem;
border-width: 1px;
border-right: 0;
opacity: 1;
}
&.is-open > button {
border: 1px solid var(--clr-surface-20);
border-left: 0;
}
}
}
#main-nav {
padding: 0;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
}
#main-nav > menu {
flex-direction: column;
gap: 0;
padding: 1.5rem 0;
> li {
padding: 0;
> a {
display: block;
padding: 0.75rem 1.5rem;
}
&.active::after {
bottom: 0;
top: 0;
left: 0;
right: auto;
width: 3px;
height: auto;
background: var(--clr-primary);
}
}
}
#main-nav > menu > li.nav-has-dropdown {
> .nav-dropdown {
display: flex;
flex-direction: column;
position: static;
box-shadow: none;
border: none;
padding: 0;
background: none;
> a {
padding: 0.75rem 1.5rem 0.75rem 2.5rem;
font-size: inherit;
}
}
> .nav-dropdown-leaderboards {
display: flex;
flex-direction: column;
.nav-dropdown-section {
display: flex;
flex-direction: column;
padding: 0;
border: none;
&:not(:last-child) {
border-bottom: none;
}
}
.nav-dropdown-label {
padding: 0.5rem 1.5rem 0.25rem 2.5rem;
}
a {
padding: 0.75rem 1.5rem 0.75rem 2.5rem;
font-size: inherit;
}
}
}
#main-nav > menu > li.nav-divider {
display: block;
height: 1px;
margin: 0.5rem 1rem;
background-color: var(--clr-surface-20);
}
}
/* ── Auth Pages (Login / Signup) ── */
.auth-page {
display: flex;
justify-content: center;
padding: 3rem 1rem;
min-height: 60vh;
}
.auth-card {
width: 100%;
max-width: 52rem;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
box-shadow: 0 3px 15px -5px var(--clr-dark);
padding: 2.5rem;
}
.auth-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 2rem;
align-items: start;
}
.auth-form {
> h1 {
font-size: 1.25rem;
margin: 0 0 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-bottom: 1rem;
> label {
font-size: 0.85rem;
color: var(--clr-surface-40);
}
> input {
width: 100%;
}
> .form-help {
font-size: 0.75rem;
color: var(--clr-surface-30);
}
}
.form-errors {
padding: 0.5rem 0.75rem;
margin-bottom: 1rem;
background-color: color-mix(in oklab, var(--clr-danger) 15%, transparent);
border: 1px solid var(--clr-danger);
font-size: 0.85rem;
> ul {
list-style: none;
margin: 0;
padding: 0;
}
}
}
.auth-divider {
width: 1px;
align-self: stretch;
background-color: var(--clr-surface-20);
}
.auth-social {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding-top: 2.5rem;
> a {
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.6rem 1.25rem;
text-decoration: none;
font-size: 1rem;
transition: filter 0.15s ease;
&:hover {
filter: brightness(1.15);
text-decoration: none;
}
}
}
.btn-steam {
background-color: #2a475e;
border-color: #2a475e;
color: var(--clr-light);
&:hover {
filter: brightness(1.15);
}
}
.btn-signup {
background-color: var(--clr-success);
border-color: var(--clr-success);
color: var(--clr-light);
&:hover {
filter: brightness(1.15);
}
}
.auth-card--narrow {
max-width: 32rem;
text-align: center;
> h1 {
font-size: 1.25rem;
margin: 0 0 1rem;
}
> p {
color: var(--clr-surface-40);
line-height: 1.5;
margin: 0 0 0.5rem;
}
}
.auth-card__actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
.btn {
width: 100%;
justify-content: center;
}
}
.auth-privacy {
grid-column: 1 / -1;
margin-top: 1.5rem;
font-size: 0.7rem;
color: var(--clr-surface-30);
line-height: 1.5;
a {
color: var(--clr-secondary-20);
}
}
@media (max-width: 40rem) {
.auth-card {
padding: 1.5rem;
}
.auth-grid {
grid-template-columns: 1fr;
}
.auth-divider {
width: 100%;
height: 1px;
}
}
/* ── User Profile ── */
.user-statistics {
min-height: 211px;
}
.user-rankings {
display: flex;
gap: 1rem;
> * {
flex: 1 0 0;
min-width: 10rem;
}
> .card-ranking {
text-align: center;
padding: 0.75rem;
> .card-title {
font-size: 1rem;
margin-bottom: 0.25rem;
}
> .rank {
font-family: "Fondamento", cursive;
font-size: 2rem;
font-weight: normal;
color: var(--clr-light);
line-height: 1.2;
}
> .rating {
font-size: 1rem;
color: var(--clr-surface-40);
margin-top: 0.15rem;
}
> .all-time-high {
font-size: 0.6rem;
font-style: italic;
color: var(--clr-surface-30);
margin-top: 0.25rem;
}
}
}
.user-box {
display: flex;
gap: 1rem;
> a:has(.avatar) {
width: 40%;
max-width: 12rem;
flex-shrink: 0;
align-self: start;
}
.avatar {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
}
> .info {
flex: 1 60%;
display: flex;
flex-direction: column;
> .name {
font-weight: bold;
font-size: 1.3rem;
margin: 0;
> a {
color: inherit;
text-decoration: none;
&:hover {
color: var(--clr-primary);
}
}
}
> .aliases {
font-size: 0.8rem;
color: var(--clr-surface-40);
}
> .team {
display: flex;
align-items: center;
font-size: 1rem;
> img {
max-width: 2rem;
max-height: 1.5rem;
}
}
> .country {
display: flex;
align-items: center;
font-size: 1rem;
gap: 0.3rem;
margin-top: 0.5rem;
}
> .game-id {
margin-top: 0.2rem;
font-size: 0.7rem;
color: var(--clr-surface-50);
}
> .claim-hint {
font-size: 0.65rem;
}
> .user-social {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.75rem;
.user-social-stats {
display: contents;
font-size: 0.75rem;
color: var(--clr-surface-40);
> div {
display: flex;
flex-direction: column;
align-items: center;
}
.amount {
font-weight: 600;
color: var(--clr-light);
font-size: 1rem;
}
}
.follow-button {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
padding: 0.4rem 0.6rem;
font-size: 0.65rem;
line-height: 1;
background-color: var(--clr-surface-tonal);
border: 0;
color: var(--clr-primary-20);
&:hover {
background-color: var(--clr-surface-tonal-5);
}
> i {
font-size: 0.85rem;
}
}
}
}
}
.user-nav {
> ul {
position: relative;
list-style: none;
margin: 1rem 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr));
gap: 0.5rem;
> li {
> fetch-dialog { display: contents; }
> a, > button, > fetch-dialog > a {
display: flex;
flex-direction: column;
align-items: center;
font-size: inherit;
border: 0;
color: var(--clr-primary-20);
width: 100%;
height: 100%;
padding: 1rem;
background-color: var(--clr-surface-tonal);
&:hover {
background-color: var(--clr-surface-tonal-5);
text-decoration: none;
}
&.user-nav-danger {
color: var(--clr-danger-10);
&:hover {
background-color: color-mix(in oklab, var(--clr-danger) 15%, var(--clr-surface-tonal));
}
}
}
}
}
}
@media (max-width: 68rem) {
.user-nav > ul {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
> li {
> a, > button, > fetch-dialog > a {
flex-direction: row;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
font-size: 0.85rem;
border-radius: 4px;
> i { font-size: 0.8rem; }
}
}
}
}
.user-links {
display: flex;
gap: 0.5rem;
margin: 1rem 0;
> a {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
font-size: 1.1rem;
background-color: var(--clr-surface-tonal);
border: 1px solid var(--clr-surface-tonal-10);
text-decoration: none;
transition: background-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-tonal-10);
text-decoration: none;
}
}
}
.profile-outdated {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
color: var(--clr-surface-30);
margin-top: 1rem;
> button {
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
}
}
/* ── Settings Page ── */
.user-settings {
.settings-section {
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--clr-surface-10);
}
.settings-section-title {
font-size: 1.1rem;
margin: 0 0 1rem;
color: var(--clr-light);
}
.settings-account-info {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.35rem 1rem;
margin: 0;
> dt {
color: var(--clr-surface-40);
font-weight: normal;
}
> dd {
margin: 0;
> a {
margin-left: 0.35rem;
color: var(--clr-surface-40);
font-size: 0.85em;
}
}
}
.settings-toggle {
margin-bottom: 1rem;
}
.settings-toggle-row {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.settings-toggle-preview {
margin: 0.25rem 0 0 1.75rem;
font-size: 0.85rem;
color: var(--clr-surface-40);
font-style: italic;
}
.settings-toggle-quote {
margin: 0.5rem 0 0 1.75rem;
padding: 0.5rem 0.75rem;
border-left: 3px solid var(--clr-primary-30);
font-size: 0.85rem;
font-style: italic;
color: var(--clr-surface-40);
line-height: 1.5;
}
.settings-field {
display: flex;
flex-direction: column;
gap: 0.3rem;
margin-bottom: 1rem;
> label {
font-size: 0.85rem;
color: var(--clr-surface-40);
> i { margin-right: 0.15rem; }
}
> input {
width: 100%;
max-width: 28rem;
}
}
.settings-form > .btn {
margin-top: 0.5rem;
}
.settings-danger-zone {
border-bottom: none;
margin-bottom: 0;
padding: 1.25rem;
background-color: color-mix(in oklab, var(--clr-danger) 6%, transparent);
border: 1px solid color-mix(in oklab, var(--clr-danger) 25%, transparent);
> .settings-section-title {
color: var(--clr-danger-10);
}
p, li {
font-size: 0.85rem;
color: var(--clr-secondary-20);
line-height: 1.6;
}
ul {
padding-left: 1.25rem;
margin: 0.5rem 0 1rem;
}
}
}
.rating-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
gap: 1rem;
margin: 0;
padding: 1.5rem 0;
> div {
text-align: center;
}
dt {
font-size: 0.75rem;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
dd {
font-size: 1.5rem;
font-family: "Fondamento", cursive;
color: var(--clr-light);
margin: 0;
}
.rating-positive {
color: var(--clr-success);
}
.rating-negative {
color: var(--clr-danger);
}
}
.user-compare {
> ol {
list-style: none;
margin: 1rem 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
> li {
> a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: var(--card-bg);
}
}
}
}
/* ── Compare Page ── */
.compare-page {
grid-template-columns: 1fr;
--compare-label-w: 9rem;
> main {
max-width: 54rem;
margin-inline: auto;
width: 100%;
}
}
/* Hero header with blurred background */
.compare-hero {
position: relative;
overflow: hidden;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-10);
border-radius: 6px;
padding: 2.5rem 1rem;
}
.compare-hero-bg {
position: absolute;
top: -10px;
bottom: -10px;
width: 40%;
height: calc(100% + 20px);
object-fit: cover;
opacity: 0.25;
filter: blur(14px) saturate(0.7);
pointer-events: none;
&.compare-hero-bg--left {
left: 0;
}
&.compare-hero-bg--right {
right: 0;
}
}
.compare-players {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1.5rem, 6vw, 5rem);
}
.compare-player {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: inherit;
&:hover {
text-decoration: none;
.compare-avatar {
border-color: var(--clr-primary-20);
box-shadow: 0 0 20px -4px var(--clr-primary);
}
}
.compare-avatar {
width: 7rem;
height: 7rem;
border-radius: 50%;
object-fit: cover;
border: 3px solid var(--clr-surface-20);
transition: border-color 0.2s, box-shadow 0.2s;
}
.compare-player-name {
font-family: "Fondamento", cursive;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 0.35rem;
color: var(--clr-light);
white-space: nowrap;
}
.compare-player-flag {
height: 1rem;
aspect-ratio: 4/3;
}
.compare-player-team {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
> img {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
object-fit: cover;
background-color: var(--clr-light);
}
}
}
.compare-vs {
font-family: "Fondamento", cursive;
font-size: 2rem;
color: var(--clr-primary-40);
text-shadow: 0 0 30px color-mix(in oklab, var(--clr-primary) 30%, transparent);
}
/* Head to Head */
.compare-h2h-score {
display: grid;
grid-template-columns: 1fr var(--compare-label-w) 1fr;
align-items: center;
}
.compare-h2h-count {
font-size: 2.5rem;
line-height: 1;
color: var(--clr-surface-30);
}
.compare-h2h-dots {
display: grid;
grid-template-columns: 1fr var(--compare-label-w) 1fr;
margin-top: 0.75rem;
.dot {
display: inline-block;
width: 0.7rem;
height: 0.7rem;
border-radius: 50%;
transition: transform 0.15s;
}
a:hover .dot {
transform: scale(1.4);
}
.dot--win {
background-color: var(--clr-success);
}
.dot--loss {
background-color: var(--clr-surface-30);
}
}
.compare-h2h-dots-side {
display: flex;
align-items: center;
gap: 0.4rem;
&.compare-h2h-dots-side--left {
justify-content: end;
}
&.compare-h2h-dots-side--right {
grid-column: 3;
justify-content: start;
}
}
.compare-h2h-hint {
text-align: center;
font-size: 0.7rem;
color: var(--clr-surface-30);
margin: 0.5rem 0 0;
}
/* Stats grid — subgrid for cross-row alignment, 1px row-gap divider */
.compare-stats {
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr var(--compare-label-w) 1fr;
gap: 1px 0;
}
.compare-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
align-items: center;
background-color: var(--clr-surface-5);
}
.compare-cell {
padding-block: 0.85rem;
&.compare-cell--left {
display: grid;
grid-template-columns: 1.2rem 4rem 1fr 3rem;
align-items: center;
gap: 0.3rem;
padding-left: 1rem;
> .compare-crown { justify-self: center; }
> .compare-diff { justify-self: end; }
> .compare-value { justify-self: end; }
> .compare-rank { justify-self: end; }
}
&.compare-cell--label {
display: flex;
justify-content: center;
color: var(--clr-surface-40);
padding-inline: 0.5rem;
white-space: nowrap;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
&.compare-cell--right {
display: grid;
grid-template-columns: 3rem 1fr 4rem 1.2rem;
align-items: center;
gap: 0.3rem;
padding-right: 1rem;
> .compare-rank { justify-self: start; }
> .compare-value { justify-self: start; }
> .compare-diff { justify-self: start; }
> .compare-crown { justify-self: center; }
}
}
.compare-value {
font-family: "Fondamento", cursive;
font-size: 1.35rem;
color: var(--clr-light);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.compare-rank {
font-family: "Poppins", sans-serif;
font-size: 0.75rem;
color: var(--clr-surface-30);
}
.compare-diff {
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
text-align: center;
justify-self: center;
}
.compare-crown {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--clr-primary);
filter: drop-shadow(0 0 4px color-mix(in oklab, var(--clr-primary) 50%, transparent));
justify-self: center;
}
.compare-value--text {
font-family: inherit;
font-size: 1rem;
}
.compare-rank--icon {
display: flex;
align-items: center;
justify-content: center;
> img {
width: 1.4rem;
height: 1.4rem;
object-fit: contain;
border-radius: 2px;
}
}
.compare-value.compare-h2h-count {
font-size: 2.5rem;
&.compare-h2h-count--lead {
color: var(--clr-success);
}
}
.compare-wp-text {
text-align: center;
color: var(--clr-surface-40);
font-size: 0.9rem;
margin: 0.75rem 0 1.5rem;
font-style: italic;
}
/* Chart section */
.compare-chart {
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
padding: 1rem;
}
.compare-chart-title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem;
display: flex;
align-items: center;
gap: 0.5rem;
> i {
color: var(--clr-primary-30);
font-size: 0.9em;
}
}
.compare-empty {
text-align: center;
padding: 4rem 1rem;
color: var(--clr-surface-30);
font-size: 1.25rem;
font-family: "Fondamento", cursive;
}
/* ── User Announcements ── */
.user-announcements-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
> h2 { margin: 0; }
}
.user-announcements-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.user-announcement-item {
padding: 1rem;
}
.user-announcement-top {
display: flex;
align-items: start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.4rem;
}
.user-announcement-title {
font-size: 1.1rem;
}
.user-announcement-badges {
display: flex;
gap: 0.3rem;
flex-shrink: 0;
}
.badge--success {
background-color: color-mix(in oklab, var(--clr-success) 35%, transparent);
color: var(--clr-success-10);
}
.badge--warning {
background-color: color-mix(in oklab, var(--clr-warning) 35%, transparent);
color: var(--clr-warning);
}
.badge--danger {
background-color: color-mix(in oklab, var(--clr-danger) 35%, transparent);
color: var(--clr-danger-10);
}
.badge--subtle {
background-color: var(--clr-surface-10);
color: var(--clr-surface-40);
}
.user-announcement-text {
color: var(--clr-secondary-20);
margin: 0 0 0.75rem;
line-height: 1.5;
}
.user-announcement-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.user-announcement-meta {
display: flex;
gap: 0.75rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
}
.user-announcement-actions {
display: flex;
gap: 0.35rem;
}
/* ── Announcement Approvals ── */
.approval-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.approval-item {
padding: 1rem;
}
.approval-header {
display: flex;
align-items: start;
justify-content: space-between;
gap: 1rem;
}
.approval-title {
font-size: 1.1rem;
> a {
color: inherit;
text-decoration: none;
&:hover { color: var(--clr-primary); }
}
}
.approval-meta {
display: flex;
gap: 0.75rem;
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
}
.approval-actions {
display: flex;
gap: 0.35rem;
flex-shrink: 0;
}
.approval-preview {
color: var(--clr-secondary-20);
margin: 0.75rem 0 0;
line-height: 1.5;
}
@media (max-width: 40rem) {
.approval-header {
flex-direction: column;
gap: 0.5rem;
}
.approval-meta {
flex-wrap: wrap;
gap: 0.5rem;
}
}
@media (max-width: 40rem) {
.compare-players {
flex-direction: column;
gap: 1rem;
}
.compare-vs {
font-size: 1.4rem;
}
.compare-player {
min-width: 0;
.compare-avatar {
width: 4.5rem;
height: 4.5rem;
}
.compare-player-name {
white-space: normal;
text-align: center;
}
}
.compare-hero {
padding: 1.5rem 1rem;
}
.compare-h2h-score {
grid-template-columns: 1fr;
text-align: center;
.compare-cell {
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 0.25rem 0;
}
}
.compare-h2h-dots {
grid-template-columns: 1fr;
gap: 0.5rem;
.compare-h2h-dots-side {
justify-content: center;
&.compare-h2h-dots-side--right {
grid-column: auto;
}
}
}
.compare-stats {
grid-template-columns: 1fr;
gap: 0;
border: none;
background: none;
}
.compare-row {
grid-template-columns: 1fr;
border: 1px solid var(--clr-surface-10);
margin-bottom: -1px;
padding: 0.5rem 0;
}
.compare-cell {
padding-block: 0.15rem;
&.compare-cell--label {
order: 0;
}
/* value centered, diff + crown flanking */
&.compare-cell--left {
order: -1;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding-inline: 1rem;
> .compare-diff { order: 0; justify-self: end; }
> .compare-value { order: 1; justify-self: center; }
> .compare-crown { order: 2; justify-self: start; }
> .compare-rank { display: none; }
}
&.compare-cell--right {
order: 1;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding-inline: 1rem;
> .compare-crown { order: 0; justify-self: end; }
> .compare-value { order: 1; justify-self: center; }
> .compare-diff { order: 2; justify-self: start; }
> .compare-rank { display: none; }
}
}
.compare-value {
font-size: 1.15rem;
}
}
/* ═══════════════════════════════════════════════════
Match Teams — shared .teams layout
Used by: match-tile, match-detail hero, savegames
═══════════════════════════════════════════════════ */
.teams {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 0.5rem;
.team {
flex: 1 1 auto;
max-width: 20rem;
padding: 0.25rem 0.5rem;
position: relative;
&.won {
border: 1px solid #d4a017;
border-radius: 4px;
box-shadow: 0 0 4px rgba(213, 138, 37, 0.4);
animation: won-glow 3s ease-in-out infinite;
> .won-icon {
position: absolute;
top: -0.5rem;
right: -0.3rem;
font-size: 0.85rem;
background: linear-gradient(135deg, #f5d442, #d4a017, #f5e27a, #c8960e);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 3px rgba(212, 160, 23, 0.6));
}
}
@keyframes won-glow {
0%, 100% { box-shadow: 0 0 4px rgba(213, 138, 37, 0.3); }
50% { box-shadow: 0 0 8px rgba(213, 138, 37, 0.6); }
}
/* Mirror alignment for 2-team matches
(team + vs + team = 3 children) */
&:last-child:nth-child(3) {
text-align: right;
&.won > .won-icon {
right: auto;
left: -0.3rem;
}
.team-player {
flex-direction: row-reverse;
&::before {
left: auto;
right: -0.5rem;
border-radius: 3px 0 0 3px;
}
}
.appendix {
margin-left: 0;
margin-right: auto;
}
.rating {
flex-direction: row-reverse;
}
.rating-change {
text-align: start;
}
.avg-elo {
flex-direction: row-reverse;
justify-content: flex-end;
padding-right: 0;
padding-left: 0.6rem;
> em {
text-align: start;
}
}
}
}
.players {
list-style: none;
margin: 0;
padding: 0;
> li {
margin: 2px 0;
}
}
.team-player {
display: flex;
align-items: center;
gap: 0.35rem;
position: relative;
padding: 2px 3px 2px 0.5rem;
&::before {
content: "";
position: absolute;
left: -0.5rem;
top: 0;
height: 100%;
width: 5px;
border-radius: 0 3px 3px 0;
transition: width 150ms ease-in-out;
}
&:hover::before {
width: 8px;
}
&.team-player-color-1::before { background-color: rgb(0, 0, 255); }
&.team-player-color-2::before { background-color: rgb(255, 0, 0); }
&.team-player-color-3::before { background-color: rgb(0, 255, 0); }
&.team-player-color-4::before { background-color: rgb(255, 255, 0); }
&.team-player-color-5::before { background-color: rgb(0, 255, 255); }
&.team-player-color-6::before { background-color: rgb(255, 0, 255); }
&.team-player-color-7::before { background-color: rgb(67, 67, 67); }
&.team-player-color-8::before { background-color: rgb(255, 130, 1); }
}
.vs {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
justify-content: center;
padding: 0 1rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-surface-40);
&::before,
&::after {
content: "";
flex: 1;
width: 1px;
background-color: var(--clr-surface-20);
}
&::before { margin-bottom: 0.4rem; }
&::after { margin-top: 0.4rem; }
}
.appendix {
margin-left: auto;
flex-shrink: 0;
}
.rating {
display: flex;
align-items: baseline;
gap: 0.25rem;
font-size: 1rem;
}
.rating-change {
display: inline-block;
font-size: 0.75rem;
width: 2.5rem;
text-align: end;
}
.rating-positive { color: var(--clr-success); }
.rating-negative { color: var(--clr-danger); }
.rating-neutral { color: var(--clr-surface-40); }
.avg-elo {
display: flex;
justify-content: flex-end;
align-items: baseline;
gap: 0.25rem;
margin-top: 0.25rem;
padding: 0.3rem 3px 0 0;
border-top: 1px solid color-mix(in oklab, var(--clr-light) 12%, transparent);
font-size: 1rem;
color: var(--clr-surface-40);
> em {
display: inline-block;
width: 2.5rem;
text-align: end;
font-size: 0.75rem;
}
}
/* Responsive: stack vertically */
@media (max-width: 48rem) {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
.team {
max-width: none;
}
.team:last-child:nth-child(3) {
text-align: left;
.team-player {
flex-direction: row;
&::before {
left: -0.5rem;
right: auto;
border-radius: 0 3px 3px 0;
}
}
.appendix {
margin-left: auto;
margin-right: 0;
}
.rating {
flex-direction: row;
}
.rating-change {
text-align: end;
}
.avg-elo {
flex-direction: row;
justify-content: flex-end;
> em {
text-align: end;
}
}
&.won > .won-icon {
left: auto;
right: -0.3rem;
}
}
.vs {
flex-direction: row;
align-self: auto;
padding: 0;
&::before,
&::after {
width: auto;
height: 1px;
flex: 1;
}
&::before {
margin-bottom: 0;
margin-right: 0.5rem;
}
&::after {
margin-top: 0;
margin-left: 0.5rem;
}
}
}
}
.match-tile {
display: grid;
grid-template-columns: 18rem 1fr;
grid-template-rows: auto 1fr;
padding: 0.6rem 1rem;
transition: background-color 0.15s ease;
position: relative;
cursor: pointer;
&:hover {
background-color: var(--clr-surface-10);
}
/* Header spans full width */
> .match-title {
grid-column: 1 / -1;
padding-bottom: 0.3rem;
margin-bottom: 0.4rem;
a {
color: inherit;
text-decoration: none;
&::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
}
}
}
.match-id {
font-size: 0.6rem;
color: var(--clr-surface-30);
margin-top: auto;
}
/* Elevate interactive elements above the stretched link */
a:not(.match-title a) {
position: relative;
z-index: 1;
}
/* Aside: map image + info as left sidebar */
> aside {
display: flex;
gap: 0.75rem;
padding-right: 1rem;
margin-right: 1rem;
border-right: 1px solid var(--clr-surface-20);
.match-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.match-map {
font-size: 1rem;
.custom-badge {
font-size: 0.7rem;
font-style: italic;
color: var(--clr-surface-40);
margin-left: 0.25rem;
}
}
.match-meta {
font-size: 0.75rem;
color: var(--clr-surface-40);
line-height: 1.4;
}
}
/* Strategy (tile-only) */
.strategy {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.75rem;
font-style: italic;
color: var(--clr-surface-40);
}
.strategy-icon {
width: 1rem;
height: 1rem;
border-radius: 50%;
}
/* Strategy mirror for 2-team matches */
.team:last-child:nth-child(3) {
.strategy {
flex-direction: row-reverse;
justify-content: flex-end;
}
}
/* Responsive: stack everything vertically */
@media (max-width: 48rem) {
display: block;
> .match-title {
margin-bottom: 0.5rem;
}
> aside {
border-right: none;
border-bottom: 1px solid var(--clr-surface-20);
padding-right: 0;
padding-bottom: 0.75rem;
margin-right: 0;
margin-bottom: 0.75rem;
}
.team:last-child:nth-child(3) {
.strategy {
flex-direction: row;
}
}
}
}
tabbed-menu {
menu {
list-style: none;
padding: 0;
display: flex;
> li > a {
display: block;
padding: 0.5rem 2rem;
white-space: nowrap;
background-color: var(--clr-surface-tonal);
border-bottom: 3px solid var(--clr-surface-tonal-10);
margin-right: 0.25rem;
&.active, &:hover {
background-color: var(--clr-surface-tonal-5);
}
}
}
}
.leaderboard-content {
h1 {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
}
@media (min-width: 68.01rem) {
.leaderboard-content > offcanvas-panel {
align-self: start;
position: sticky;
top: 1rem;
}
}
/* Stats Cards */
.leaderboard-stats {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
.card {
flex: 1 1 auto;
min-width: 150px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
margin-bottom: 0;
}
.card-icon {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.card-title {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-secondary-30);
margin-bottom: 0.25rem;
}
.card-value {
font-size: 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
em {
font-size: 0.75rem;
color: var(--clr-secondary-40);
}
}
}
/* Sidebar Filter */
.leaderboard-filter {
display: flex;
flex-direction: column;
gap: 1.25rem;
.filter-list-countries {
display: grid;
grid-template-columns: 1fr 1fr;
max-height: 18rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--clr-surface-20) transparent;
}
.filter-item {
font-size: 0.85rem;
i.fa-xmark {
margin-left: auto;
}
}
}
/* SEO Content */
.seo-content {
margin-top: 2rem;
color: var(--clr-secondary-30);
h2 {
font-size: 1.5rem;
color: var(--clr-light);
margin-bottom: 1rem;
}
h3 {
font-size: 1.2rem;
color: var(--clr-light);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
p {
line-height: 1.7;
margin-bottom: 1rem;
}
strong {
color: var(--clr-primary-30);
}
}
/* Table Styles */
.leaderboard-content {
.table-container {
margin-bottom: 1.5rem;
border: 1px solid var(--clr-surface-20);
}
.table-responsive {
overflow-x: auto;
}
.table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
.table thead {
background-color: var(--clr-surface-10);
position: sticky;
top: 0;
}
/* .leaderboard-content .table th has specificity 0-2-1, which beats the
global th.num (0-1-1). Override here with 0-3-0 to win. */
.table .num { text-align: end; }
.table th {
padding: 0.5rem 0.75rem;
text-align: left;
font-weight: 600;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-secondary-30);
border-bottom: 1px solid var(--clr-surface-20);
a:hover {
color: var(--clr-primary);
}
}
.table td {
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--clr-surface-20);
vertical-align: middle;
}
.table tbody tr:last-child td {
border-bottom: none;
}
.table tbody tr:hover {
background-color: var(--clr-surface-10);
}
.lb-streak {
display: inline-flex;
padding: 0.1rem 0.4rem;
font-size: 0.8rem;
font-weight: 600;
}
.lb-streak--positive {
background-color: color-mix(in oklab, var(--clr-success) 35%, transparent);
color: var(--clr-success-10);
}
.lb-streak--negative {
background-color: color-mix(in oklab, var(--clr-danger) 35%, transparent);
color: var(--clr-danger-10);
}
}
@media (max-width: 68rem) {
.leaderboard-stats .card {
min-width: calc(50% - 0.5rem);
}
}
.match-detail {
/* ── Sidebar (match-box, mirrors user-box) ──────── */
.match-box {
display: flex;
gap: 0.75rem;
> picture {
flex: 0 0 35%;
max-width: 35%;
> img {
width: 100%;
border-radius: 4px;
aspect-ratio: 1;
object-fit: cover;
}
}
> .info {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
padding-top: 0.25rem;
> .name {
font-weight: bold;
font-size: 1.3rem;
margin: 0;
}
> .match-map {
font-size: 0.9rem;
margin-top: 0.2rem;
.custom-badge {
font-size: 0.65rem;
font-style: italic;
color: var(--clr-surface-40);
}
}
> .match-meta {
font-size: 0.75rem;
color: var(--clr-surface-40);
line-height: 1.6;
margin-top: 0.5rem;
}
}
}
/* ── Sidebar Navigation (same pattern as user-nav) ── */
.match-nav {
margin: 1rem 0;
ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr));
gap: 0.5rem;
}
li > a {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.75rem 0.5rem;
font-size: inherit;
color: var(--clr-primary-20);
text-decoration: none;
background-color: var(--clr-surface-tonal);
border: 0;
&:hover {
background-color: var(--clr-surface-tonal-5);
}
&.active {
background-color: var(--clr-surface-tonal-10);
}
}
}
/* ── Hero ─────────────────────────────────────────── */
.match-hero {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: 6px 6px 0 0;
margin-bottom: 0;
padding: 1.5rem 1.5rem;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-10);
}
.match-hero-bg {
position: absolute;
inset: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
object-fit: cover;
opacity: 0.15;
filter: blur(8px) saturate(0.5);
pointer-events: none;
}
.match-hero-content {
position: relative;
z-index: 1;
width: 100%;
}
.match-hero reaction-bar {
position: absolute;
bottom: 0.4rem;
right: 0.75rem;
z-index: 2;
justify-content: flex-end;
}
.match-hero-title {
font-family: "Fondamento", cursive;
font-size: clamp(1rem, 2.5vw, 1.4rem);
margin: 0 0 0.75rem;
color: var(--clr-light);
letter-spacing: 0.03em;
}
/* ── Teams (overrides for _match-teams.css) ──────── */
.teams {
max-width: 48rem;
margin: 0 auto;
}
.player-avatar {
width: 1.6rem;
height: 1.6rem;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--clr-surface-20);
}
.vs {
padding: 0 1.25rem;
&::before,
&::after {
background-color: color-mix(in oklab, var(--clr-light) 12%, transparent);
}
}
.vs-inline {
text-align: center;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-surface-40);
padding: 0.25rem 0;
}
/* ── Rating colors ─────────────────────────────────── */
.rating-positive { color: var(--clr-success); }
.rating-negative { color: var(--clr-danger); }
.rating-neutral { color: var(--clr-surface-40); }
/* ── Rating badge (overview table) ─────────────────── */
.rating-badge {
display: inline-block;
font-size: 0.7rem;
padding: 0.1em 0.45em;
border-radius: 3px;
font-weight: 600;
}
.rating-badge-positive {
background-color: var(--clr-success);
color: var(--clr-light);
}
.rating-badge-negative {
background-color: var(--clr-danger);
color: var(--clr-light);
}
/* ── Custom badge ──────────────────────────────────── */
.custom-badge {
display: inline-block;
font-size: 0.7rem;
font-style: italic;
padding: 0.1em 0.55em;
border-radius: 999px;
background-color: var(--clr-surface-20);
color: var(--clr-surface-50);
}
/* ── Match Settings Grid (dl key-value stats) ────── */
.match-settings-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: 1px;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-10);
border-radius: 0 0 4px 4px;
margin-top: -1px;
margin-bottom: 1.5rem;
> div {
background-color: var(--clr-surface-5);
padding: 0.75rem;
text-align: center;
}
dt {
font-size: 0.65rem;
font-weight: 600;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.25rem;
}
dd {
font-size: 1.1rem;
font-family: "Fondamento", cursive;
color: var(--clr-light);
margin: 0;
}
}
/* ── Overview layout (replay left, rules right) ───── */
.match-overview-layout {
display: flex;
gap: 1rem;
align-items: flex-start;
> minimap-replay {
flex: 2;
min-width: 0;
margin-bottom: 0;
}
> .match-overview-rules {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 48rem) {
.match-overview-layout {
flex-direction: column;
> minimap-replay,
> .match-overview-rules {
flex: none;
width: 100%;
}
}
}
/* ── Rules cards (team + game) ─────────────────────── */
.match-rules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
}
/* ── Settings check lists ──────────────────────────── */
.settings-list {
list-style: none;
padding: 0;
margin: 0;
li {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0;
font-size: 1rem;
color: var(--clr-surface-30);
i {
font-size: 0.9rem;
width: 1.1em;
color: var(--clr-surface-20);
}
&.is-on {
color: var(--clr-light);
i {
color: var(--clr-success);
}
}
}
}
/* ── Savegame teams ──────────────────────────────────── */
.savegame-teams {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.75rem;
}
.savegame-vs {
display: flex;
flex-direction: column;
align-items: center;
align-self: stretch;
justify-content: center;
flex: 0 0 auto;
padding: 0 0.75rem;
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
color: var(--clr-surface-30);
&::before,
&::after {
content: "";
flex: 1;
width: 1px;
background-color: color-mix(in oklab, var(--clr-light) 12%, transparent);
}
&::before { margin-bottom: 0.4rem; }
&::after { margin-top: 0.4rem; }
}
.savegame-team {
flex: 1 1 14rem;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.savegame-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.6rem 0.75rem;
background: var(--clr-surface-5);
border-left: 3px solid currentColor;
&.team-player-color-1 { color: rgb(0, 0, 255); }
&.team-player-color-2 { color: rgb(255, 0, 0); }
&.team-player-color-3 { color: rgb(0, 255, 0); }
&.team-player-color-4 { color: rgb(255, 255, 0); }
&.team-player-color-5 { color: rgb(0, 255, 255); }
&.team-player-color-6 { color: rgb(255, 0, 255); }
&.team-player-color-7 { color: rgb(67, 67, 67); }
&.team-player-color-8 { color: rgb(255, 130, 1); }
}
.savegame-player {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
font-size: 1rem;
color: var(--clr-light);
a {
color: inherit;
text-decoration: none;
&:hover { text-decoration: underline; }
}
}
.savegame-dl {
flex-shrink: 0;
padding: 0.3rem 0.75rem;
}
.savegame-faq {
margin-top: 1.5rem;
p + p { margin-top: 0.4rem; }
}
/* ── Unit Icon (colored player background + mask) ─── */
.unit-icon {
position: relative;
display: inline-block;
width: 1.75rem;
vertical-align: middle;
flex-shrink: 0;
border-radius: 3px;
overflow: hidden;
> img {
display: block;
width: 100%;
mix-blend-mode: multiply;
}
> .unit-icon-mask {
position: absolute;
top: 0;
left: 0;
mix-blend-mode: screen;
}
}
/* ── Unit Totals ─────────────────────────────────── */
.unit-totals-collapse {
position: relative;
&.is-collapsible {
max-height: 12rem;
overflow: hidden;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3rem;
background: linear-gradient(transparent, var(--clr-surface));
pointer-events: none;
}
}
&.is-expanded {
max-height: none;
&::after {
display: none;
}
}
}
.unit-totals-toggle {
display: block;
width: 2rem;
height: 1rem;
margin: 0.15rem auto 0;
padding: 0;
font-size: 0.55rem;
line-height: 1rem;
background: none;
border: none;
color: var(--clr-surface-30);
cursor: pointer;
&:hover {
color: var(--clr-surface-50);
}
}
unit-totals {
display: block;
container-type: inline-size;
}
.unit-totals-list {
list-style: none;
margin: 0;
padding: 0;
> li {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.4rem;
border-radius: 3px;
font-size: 1rem;
}
}
.unit-totals-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--clr-surface-40);
}
.unit-totals-amount {
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.unit-totals-star {
color: var(--clr-primary);
font-size: 0.6rem;
flex-shrink: 0;
}
.unit-totals-top {
background-color: color-mix(in oklab, var(--clr-primary) 6%, transparent);
}
/* ── Player color indicators ──────────────────────── */
.player-color-1 { color: rgb(0, 0, 255); }
.player-color-2 { color: rgb(255, 0, 0); }
.player-color-3 { color: rgb(0, 255, 0); }
.player-color-4 { color: rgb(255, 255, 0); }
.player-color-5 { color: rgb(0, 255, 255); }
.player-color-6 { color: rgb(255, 0, 255); }
.player-color-7 { color: rgb(67, 67, 67); }
.player-color-8 { color: rgb(255, 130, 1); }
/* ── Sidebar Awards ─────────────────────────────────── */
.match-sidebar-awards {
margin: 1rem 0;
padding: 0.75rem;
background: var(--clr-surface-5);
border-radius: 6px;
border: 1px solid var(--clr-surface-10);
> h3 {
font-weight: 700;
color: var(--clr-primary);
margin: 0 0 0.6rem;
}
}
.match-awards-player {
& + & {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--clr-surface-10);
}
}
.match-awards-player-name {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 0.35rem;
}
.player-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.match-awards-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.3rem;
}
.match-award {
--_award-accent: var(--clr-surface-30);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2rem;
padding: 0.4rem 0.25rem;
background:
linear-gradient(
135deg,
color-mix(in oklab, var(--_award-accent) 20%, transparent) 0%,
color-mix(in oklab, var(--_award-accent) 4%, transparent) 40%,
color-mix(in oklab, var(--_award-accent) 12%, transparent) 60%,
color-mix(in oklab, var(--_award-accent) 6%, transparent) 100%
),
var(--clr-surface-tonal);
border: 1px solid color-mix(in oklab, var(--_award-accent) 55%, transparent);
border-radius: 4px;
text-decoration: none;
color: var(--clr-light);
transition: border-color 0.15s, box-shadow 0.15s;
box-shadow: 0 0 6px color-mix(in oklab, var(--_award-accent) 30%, transparent);
&:hover {
border-color: color-mix(in oklab, var(--_award-accent) 75%, transparent);
box-shadow: 0 0 10px color-mix(in oklab, var(--_award-accent) 45%, transparent);
}
&.match-award--new {
border-color: color-mix(in oklab, var(--_award-accent) 75%, transparent);
}
}
.match-award--lvl-1 { --_award-accent: #CD7F32; }
.match-award--lvl-2 { --_award-accent: #C0C0C0; }
.match-award--lvl-3 { --_award-accent: #FFD700; }
.match-award--special { --_award-accent: #b0e0ff; }
.match-award--special {
animation: award-glow-pulse 2s ease-in-out infinite;
}
.match-award-icon {
flex-shrink: 0;
height: 2rem;
display: flex;
align-items: center;
> img {
height: 100%;
width: auto;
}
}
.match-award-name {
font-size: 0.75rem;
font-weight: 600;
text-align: center;
line-height: 1.2;
color: color-mix(in oklab, var(--_award-accent) 60%, var(--clr-light));
}
/* ── Unlock Banners (Overview tab) ─────────────────── */
.award-unlock-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
&:empty {
display: none;
}
}
.award-unlock-banner {
flex: 1 1 12rem;
min-width: 0;
padding: 0.6rem 0.75rem;
background: color-mix(in oklab, var(--clr-primary) 6%, var(--clr-surface-5));
border: 1px solid color-mix(in oklab, var(--clr-primary) 25%, transparent);
border-radius: 6px;
box-shadow: 0 0 12px color-mix(in oklab, var(--clr-primary) 12%, transparent);
}
.award-unlock-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.3rem;
}
.award-unlock-label {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--clr-primary);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.award-unlock-progress-text {
font-size: 0.65rem;
font-weight: 600;
color: var(--clr-surface-40);
flex-shrink: 0;
}
.award-unlock-progress {
height: 3px;
background: var(--clr-surface-10);
border-radius: 2px;
overflow: hidden;
margin-bottom: 0.5rem;
}
.award-unlock-progress-bar {
height: 100%;
background: var(--clr-primary);
border-radius: 2px;
}
.award-unlock-list {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.award-unlock-card {
--_award-accent: var(--clr-surface-30);
--_border-angle: 0deg;
position: relative;
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.5rem;
background:
linear-gradient(
135deg,
color-mix(in oklab, var(--_award-accent) 15%, var(--clr-surface-tonal)),
color-mix(in oklab, var(--_award-accent) 4%, var(--clr-surface-tonal)) 40%,
color-mix(in oklab, var(--_award-accent) 8%, var(--clr-surface-tonal)) 60%,
color-mix(in oklab, var(--_award-accent) 4%, var(--clr-surface-tonal))
) padding-box,
conic-gradient(
from var(--_border-angle),
color-mix(in oklab, var(--_award-accent) 12%, var(--clr-surface-20)),
var(--_award-accent),
color-mix(in oklab, var(--_award-accent) 12%, var(--clr-surface-20)) 50%,
color-mix(in oklab, var(--_award-accent) 15%, var(--clr-surface-20)) 50%
) border-box;
border: 2px solid transparent;
border-radius: 6px;
text-decoration: none;
color: var(--clr-light);
box-shadow: 0 0 8px color-mix(in oklab, var(--_award-accent) 20%, transparent);
overflow: hidden;
animation:
unlock-fade-in 0.6s ease-out both,
unlock-border-spin 2.5s linear 3;
&::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 30%,
color-mix(in oklab, var(--_award-accent) 18%, transparent) 45%,
color-mix(in oklab, var(--_award-accent) 25%, transparent) 50%,
color-mix(in oklab, var(--_award-accent) 18%, transparent) 55%,
transparent 70%
);
animation: unlock-shimmer 2.5s ease-in-out 3;
pointer-events: none;
}
&:hover {
box-shadow: 0 0 16px color-mix(in oklab, var(--_award-accent) 40%, transparent);
}
.match-award-icon {
height: 1.8rem;
}
}
.award-unlock-name {
font-weight: 600;
}
.glow-dropshadow-animate {
animation: glow-dropshadow-animation 1s infinite alternate;
}
/* ── Responsive ────────────────────────────────────── */
@media (max-width: 48rem) {
.match-hero {
padding: 1rem 0.75rem;
min-height: 0;
}
}
}
/* ── Award animations (top-level for css-loader compatibility) ── */
@property --_border-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
@keyframes award-glow-pulse {
0%, 100% { box-shadow: 0 0 6px #b0e0ff30, 0 0 2px #b0e0ff20; }
50% { box-shadow: 0 0 14px #b0e0ff55, 0 0 6px #e0f0ff40; }
}
@keyframes unlock-fade-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes unlock-border-spin {
to { --_border-angle: 360deg; }
}
@keyframes unlock-shimmer {
0%, 100% { transform: translateX(-100%); }
40%, 60% { transform: translateX(100%); }
}
@keyframes glow-dropshadow-animation {
from { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.9)); }
to { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); }
}
.game-timeline {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
.game-timeline-track {
position: relative;
min-width: 36rem;
padding-bottom: 1.8rem;
}
/* ── Cursor ─────────────────────────────────── */
.game-timeline-cursor {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: var(--clr-primary-30);
pointer-events: none;
z-index: 10;
.game-timeline-cursor-time {
position: absolute;
bottom: 0;
left: 50%;
translate: -50% 0;
font-size: 0.65rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--clr-primary);
background-color: var(--clr-surface);
padding: 0.1rem 0.35rem;
border-radius: 3px;
}
}
/* ── VS divider between teams ───────────────── */
.game-timeline-vs {
text-align: center;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-surface-40);
padding: 0.35rem 0;
}
/* ── Team group ──────────────────────────────── */
.game-timeline-team {
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
overflow: clip;
}
/* ── Player row ──────────────────────────────── */
.game-timeline-player {
display: flex;
align-items: stretch;
&:not(:last-child) {
border-bottom: 1px solid var(--clr-surface-10);
}
}
/* ── Label (left sidebar, sticky on scroll) ──── */
.game-timeline-label {
flex: 0 0 var(--label-width, 15rem);
position: sticky;
left: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.4rem 0.5rem;
border-left: 4px solid;
background-color: var(--clr-surface-5);
font-size: 1rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.game-timeline-civ {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.game-timeline-name {
overflow: hidden;
text-overflow: ellipsis;
}
}
/* ── Lanes container ─────────────────────────── */
.game-timeline-lanes {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
position: relative;
}
/* ── Age background segments ────────────────── */
.game-timeline-age-bg {
position: absolute;
top: 0;
bottom: 0;
pointer-events: none;
&.game-timeline-age-bg--dark {
background-color: color-mix(in oklab, #4a3a2a 25%, transparent);
}
&.game-timeline-age-bg--feudal {
background-color: color-mix(in oklab, #2a5a3a 25%, transparent);
}
&.game-timeline-age-bg--castle {
background-color: color-mix(in oklab, #2a3a6a 25%, transparent);
}
&.game-timeline-age-bg--imperial {
background-color: color-mix(in oklab, #6a2a5a 25%, transparent);
}
}
/* ── Meta lane (ages + techs) ────────────────── */
.game-timeline-meta {
position: relative;
height: 1.6rem;
}
/* ── Unit lane ───────────────────────────────── */
.game-timeline-units {
position: relative;
min-height: 3rem;
}
/* ── Tech bucket in meta lane ──────────────── */
.game-timeline-tech-bucket {
position: absolute;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.15rem;
padding: 0 0.1rem;
> img {
display: block;
width: 1.2rem;
height: 1.2rem;
border-radius: 2px;
opacity: 0.85;
flex-shrink: 0;
}
}
/* ── Timeframe bucket (column of units) ──────── */
.game-timeline-bucket {
position: absolute;
top: 0;
bottom: 0;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: center;
gap: 0.15rem;
padding: 0.25rem 0.1rem;
}
/* Unit icon inside a bucket */
.game-timeline-unit {
display: inline-flex;
flex-direction: column;
align-items: center;
.game-timeline-unit-icon {
width: 2.2rem;
}
.game-timeline-badge {
font-size: 0.6rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--clr-light);
text-shadow: 0 1px 2px var(--clr-dark);
}
}
/* Overflow indicator */
.game-timeline-more {
font-size: 0.6rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--clr-surface-40);
align-self: center;
white-space: nowrap;
}
/* ── Grid lines ─────────────────────────────── */
.game-timeline-grid {
position: absolute;
top: 0;
bottom: 1.8rem;
left: var(--label-width, 15rem);
right: 0;
pointer-events: none;
z-index: 0;
}
.game-timeline-gridline {
position: absolute;
top: 0;
bottom: 0;
width: 0;
border-left: 1px dashed var(--clr-surface-10);
}
/* ── Time axis ───────────────────────────────── */
.game-timeline-axis {
position: absolute;
left: var(--label-width, 15rem);
right: 0;
bottom: 0;
height: 1.8rem;
}
.game-timeline-tick {
position: absolute;
top: 0;
translate: -50% 0;
display: flex;
flex-direction: column;
align-items: center;
.game-timeline-tick-line {
width: 1px;
height: 0.5rem;
background-color: var(--clr-surface-20);
}
.game-timeline-tick-label {
font-size: 0.6rem;
font-variant-numeric: tabular-nums;
color: var(--clr-surface-40);
white-space: nowrap;
}
}
}
/* ── Toolbar (outside scroll container) ──────── */
.game-timeline-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.25rem 0.4rem;
.game-timeline-legend {
display: flex;
gap: 0.75rem;
}
.game-timeline-legend-item {
display: inline-flex;
align-items: center;
gap: 0.3rem;
}
.game-timeline-legend-icon {
width: 1.1rem;
height: 1.1rem;
border-radius: 2px;
}
.game-timeline-legend-swatch {
display: inline-block;
width: 0.75rem;
height: 0.75rem;
border-radius: 2px;
&.game-timeline-age-bg--dark {
background-color: color-mix(in oklab, #4a3a2a 50%, var(--clr-surface));
}
&.game-timeline-age-bg--feudal {
background-color: color-mix(in oklab, #2a5a3a 50%, var(--clr-surface));
}
&.game-timeline-age-bg--castle {
background-color: color-mix(in oklab, #2a3a6a 50%, var(--clr-surface));
}
&.game-timeline-age-bg--imperial {
background-color: color-mix(in oklab, #6a2a5a 50%, var(--clr-surface));
}
}
.game-timeline-zoom-controls {
display: flex;
gap: 0.25rem;
}
.game-timeline-zoom-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
font-size: 0.7rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
border-radius: 3px;
cursor: pointer;
&:hover {
background-color: var(--clr-surface-20);
color: var(--clr-light);
}
}
}
minimap-replay {
display: block;
margin-bottom: 1.5rem;
/* ── Placeholder (no analysis yet) ── */
.minimap-replay-placeholder {
position: relative;
overflow: hidden;
aspect-ratio: 2 / 1;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
}
.minimap-replay-placeholder-map {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3;
}
.minimap-replay-placeholder-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1rem;
> .minimap-replay-placeholder-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 1.5rem 2rem;
background: color-mix(in oklab, var(--clr-surface) 60%, transparent);
backdrop-filter: blur(6px);
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
text-align: center;
> i {
font-size: 2rem;
color: var(--clr-surface-30);
}
> span {
font-size: 0.85rem;
color: var(--clr-surface-40);
}
}
}
/* ── Viewport ── */
.minimap-replay-viewport {
position: relative;
padding: 1.5rem 1rem;
overflow: hidden;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
}
/* ── Map column (map + overlaid players) ── */
.minimap-replay-map-col {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Isometric map container ── */
/* After scale(1,0.5) rotate(-45deg) a square of side s
becomes a diamond s·√2 wide × s·√2/2 tall.
70.7% ≈ 1/√2 → the diamond fills the column width. */
.minimap-replay-map {
position: relative;
width: 70.7%;
aspect-ratio: 1;
transform: scale(1, 0.5) rotate(-45deg);
/* Collapse the empty space above/below the diamond.
Layout height = s, visual height = s·√2/2.
Excess per side = s·(1 − √2/2)/2 ≈ 10.35% of parent width. */
margin-block: -10.35%;
flex-shrink: 0;
.minimap-replay-bg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.minimap-replay-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}
/* ── Big play button (centered over map) ── */
.minimap-replay-big-play {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
color: var(--clr-light);
font-size: 3rem;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
opacity: 0.7;
&:hover {
opacity: 1;
background: none;
}
&.is-playing {
opacity: 0;
}
}
/* ── Player list (overlays map, bottom-right) ── */
.minimap-replay-players {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
z-index: 1;
}
.minimap-replay-team {
display: flex;
align-items: stretch;
gap: 0;
}
.minimap-replay-team-label {
display: flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.2rem;
font-size: 0.6rem;
font-weight: 700;
color: var(--clr-surface-40);
background-color: color-mix(in oklab, var(--clr-surface) 85%, transparent);
letter-spacing: 0.02em;
white-space: nowrap;
writing-mode: vertical-rl;
rotate: 180deg;
}
.minimap-replay-team-players {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.minimap-replay-player {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.4rem;
font-size: 0.85rem;
font-weight: 600;
border-left: 3px solid var(--player-color, #888);
background-color: color-mix(in oklab, var(--clr-surface) 85%, transparent);
> img:first-child {
width: 0.9rem;
height: 0.9rem;
}
.minimap-replay-age-icon {
width: 0.9rem;
height: 0.9rem;
border-radius: 2px;
margin-left: auto;
}
.minimap-replay-player-name {
max-width: 7rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.is-resigned {
opacity: 0.45;
.minimap-replay-player-name {
text-decoration: line-through;
}
}
}
/* ── Chat panel (overlays from the right, doesn't shrink map) ── */
.minimap-replay-chat-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
z-index: 5;
&.is-collapsed {
.minimap-replay-chat { display: none; }
}
}
.minimap-replay-chat-toggle {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 1.1rem;
padding: 0;
font-size: 0.55rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-30);
color: var(--clr-light);
cursor: pointer;
&:hover {
background-color: var(--clr-surface-20);
}
}
.minimap-replay-chat {
flex: 1;
min-width: 0;
width: 18rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1px;
background-color: color-mix(in oklab, var(--clr-surface) 92%, transparent);
cursor: grab;
user-select: none;
scrollbar-width: thin;
scrollbar-color: var(--clr-surface-20) transparent;
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: var(--clr-surface-20);
border-radius: 2px;
&:hover {
background-color: var(--clr-surface-30);
}
}
}
.minimap-replay-chat-header {
padding: 0.3rem 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: var(--clr-surface-40);
border-bottom: 1px solid var(--clr-surface-10);
flex-shrink: 0;
}
/* ── Chat overlay (when panel collapsed) ── */
.minimap-replay-chat-overlay {
position: absolute;
top: 0.4rem;
left: 0.4rem;
z-index: 2;
display: flex;
flex-direction: column;
gap: 2px;
max-width: 60%;
pointer-events: none;
.minimap-replay-msg {
background-color: color-mix(in oklab, var(--clr-surface) 80%, transparent);
font-size: 0.65rem;
.minimap-replay-msg-text {
padding-left: 0;
}
}
.is-fading {
animation: overlay-fade-out 1s ease-out forwards;
}
}
@keyframes overlay-fade-out {
to { opacity: 0; }
}
.minimap-replay-msg {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.25rem 0.4rem;
color: var(--clr-secondary-20);
border-left: 2px solid var(--player-color, #888);
.minimap-replay-msg-meta {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
}
.minimap-replay-msg-time {
flex-shrink: 0;
font-size: 0.65rem;
font-variant-numeric: tabular-nums;
color: var(--clr-surface-30);
min-width: 2.5rem;
}
.minimap-replay-msg-team {
flex-shrink: 0;
font-size: 0.6rem;
font-weight: 700;
color: var(--clr-surface-40);
letter-spacing: 0.02em;
}
.minimap-replay-msg-civ {
width: 0.9rem;
height: 0.9rem;
flex-shrink: 0;
vertical-align: middle;
}
strong {
color: var(--player-color, #888);
white-space: nowrap;
}
.minimap-replay-msg-text {
padding-left: 2.9rem;
}
&.minimap-replay-msg--resign {
color: var(--clr-danger);
font-style: italic;
}
}
/* ── Controls bar ── */
.minimap-replay-controls {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
border-top: 0;
flex-wrap: wrap;
}
.minimap-replay-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 0.8rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-30);
color: var(--clr-light);
cursor: pointer;
flex-shrink: 0;
&:hover {
background-color: var(--clr-surface-20);
}
}
.minimap-replay-scrubber {
flex: 1;
min-width: 6rem;
height: 4px;
appearance: none;
background: linear-gradient(to right, var(--clr-primary) var(--progress, 0%), var(--clr-surface-20) var(--progress, 0%));
border: none;
border-radius: 2px;
cursor: pointer;
padding: 0;
&::-webkit-slider-thumb {
appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--clr-primary);
cursor: pointer;
}
&::-moz-range-thumb {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--clr-primary);
border: none;
cursor: pointer;
}
&:focus {
outline: none;
}
}
.minimap-replay-time {
width: 6rem;
text-align: right;
font-size: 1rem;
font-variant-numeric: tabular-nums;
color: var(--clr-surface-40);
white-space: nowrap;
flex-shrink: 0;
.minimap-replay-current {
color: var(--clr-light);
}
}
.minimap-replay-speed {
font-size: 1rem;
padding: 0.25rem 1.5rem 0.25rem 0.4rem;
flex-shrink: 0;
align-self: stretch;
}
.minimap-replay-fullscreen {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
font-size: 0.8rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-30);
color: var(--clr-light);
cursor: pointer;
flex-shrink: 0;
&:hover {
background-color: var(--clr-surface-20);
}
}
/* ── Overlay toggles (top-left inside map column) ── */
.minimap-replay-toggles {
position: absolute;
top: 0.4rem;
right: 0.4rem;
z-index: 4;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.minimap-replay-toggle {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.85rem;
color: var(--clr-secondary-20);
cursor: pointer;
user-select: none;
padding: 0.2rem 0.4rem;
background-color: color-mix(in oklab, var(--clr-surface) 80%, transparent);
input[type="checkbox"] {
accent-color: var(--clr-primary);
cursor: pointer;
}
}
/* ── Mobile: hide chat, center map ── */
@media (max-width: 40rem) {
.minimap-replay-viewport {
justify-content: center;
}
.minimap-replay-chat-panel {
display: none;
}
}
/* ── Fullscreen mode ── */
&:fullscreen {
background-color: var(--clr-surface);
display: flex;
flex-direction: column;
.minimap-replay-viewport {
flex: 1;
align-items: center;
}
.minimap-replay-map-col {
justify-content: center;
}
.minimap-replay-map {
/* In fullscreen, constrain by viewport height:
visual height = s·√2/2 → s = h·√2 ≈ h·1.414
Cap at 70.7% of width as before. */
width: min(70.7%, 130vh);
}
.minimap-replay-chat {
max-height: none;
}
}
}
market-usage {
display: block;
container-type: inline-size;
.market-usage-team {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: 0;
}
.market-usage-corner {
/* empty top-left cell for label column */
}
.market-usage-player {
justify-content: center;
padding: 0.3rem 0.4rem;
}
.market-usage-civ {
width: 0.9rem;
height: 0.9rem;
}
.market-usage-row {
display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
border-bottom: 1px solid var(--clr-surface-10);
&:last-child {
border-bottom: none;
}
}
.market-usage-gold-row {
border-top: 1px solid var(--clr-surface-20);
.market-usage-val {
background: var(--clr-surface-5);
}
}
.market-usage-res {
white-space: nowrap;
font-weight: 600;
font-size: 0.7rem;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.3rem 0.4rem;
display: flex;
align-items: center;
}
.market-usage-icon {
font-size: 0.6rem;
width: 1em;
text-align: center;
margin-right: 0.25rem;
}
.market-usage-val {
padding: 0.3rem 0.4rem;
text-align: center;
white-space: nowrap;
}
.market-usage-values {
display: inline-flex;
gap: 0.15rem;
}
.market-usage-buy {
font-weight: 600;
color: var(--clr-success);
}
.market-usage-sep {
color: var(--clr-surface-20);
}
.market-usage-sell {
font-weight: 600;
color: var(--clr-danger);
}
@media (max-width: 30rem) {
.tg {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
}
economy-overview {
display: block;
container-type: inline-size;
/* ── Show/hide desktop vs mobile ── */
.eco-mobile { display: none; }
/* ── Unit team: players side by side ── */
.eco-unit-team {
display: flex;
gap: 0.5rem;
}
/* ── Market team: stack vertically ── */
.eco-market-team {
flex-direction: column;
}
/* ── Player headers (market: centered, smaller) ── */
.eco-market-player {
flex: 1;
justify-content: center;
padding: 0.3rem 0.4rem;
}
.eco-players {
display: flex;
gap: 0.5rem;
}
/* ── Market resource labels ── */
.eco-res-label {
font-weight: 600;
font-size: 0.7rem;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.35rem 0 0.1rem;
}
.eco-data-row + .eco-res-label {
border-top: 1px solid var(--clr-surface-10);
}
.eco-market-team:not(:first-of-type) .eco-res-label {
color: transparent;
}
/* ── Market data rows ── */
.eco-data-row {
display: flex;
gap: 0.5rem;
}
.eco-gold-row {
.eco-val { background: var(--clr-surface-5); }
}
.eco-val {
flex: 1;
min-width: 0;
padding: 0.25rem 0.3rem;
text-align: center;
white-space: nowrap;
}
/* ══════════════════════════════════════
Shared styles (desktop + mobile)
══════════════════════════════════════ */
.eco-icon {
font-size: 0.6rem;
width: 1em;
text-align: center;
margin-right: 0.25rem;
}
.eco-values { display: inline-flex; gap: 0.15rem; }
.eco-buy { font-weight: 600; color: var(--clr-success); }
.eco-sep { color: var(--clr-surface-20); }
.eco-sell { font-weight: 600; color: var(--clr-danger); }
.eco-unit-list {
list-style: none;
margin: 0;
padding: 0;
> li {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.35rem;
border-radius: 3px;
}
}
.eco-unit-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--clr-surface-40);
}
.eco-unit-amount {
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.eco-unit-star {
color: var(--clr-primary);
font-size: 0.55rem;
flex-shrink: 0;
}
.eco-unit-top {
background-color: color-mix(in oklab, var(--clr-primary) 6%, transparent);
}
/* ══════════════════════════════════════
Mobile layout: per-player cards
══════════════════════════════════════ */
@media (max-width: 40rem) {
.eco-desktop { display: none; }
.eco-mobile { display: flex; flex-direction: column; gap: 0.4rem; }
.eco-m-card {
border-left: 3px solid;
padding: 0.5rem 0.6rem;
background: var(--clr-surface-5);
border-radius: 0 4px 4px 0;
}
.eco-m-header {
font-weight: 600;
font-size: 1rem;
margin-bottom: 0.35rem;
}
.eco-m-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eco-m-market {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.15rem 0.75rem;
margin-bottom: 0.35rem;
}
.eco-m-trade {
display: flex;
align-items: center;
gap: 0.25rem;
white-space: nowrap;
}
.eco-m-units {
border-top: 1px solid var(--clr-surface-10);
padding-top: 0.25rem;
}
.eco-vs-h {
display: flex;
align-items: center;
padding: 0.2rem 0;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--clr-surface-40);
&::before,
&::after {
content: "";
flex: 1;
height: 1px;
background-color: color-mix(in oklab, var(--clr-light) 12%, transparent);
}
&::before { margin-right: 0.5rem; }
&::after { margin-left: 0.5rem; }
}
}
}
tech-uptimes {
display: block;
container-type: inline-size;
/* ── Team grid: column-flow with label column ── */
.tu-team {
container: team / inline-size;
display: grid;
grid-template-rows: repeat(var(--tu-rows), auto);
grid-auto-flow: column;
grid-template-columns: auto;
grid-auto-columns: 1fr;
gap: 0 0.5rem;
align-items: center;
}
/* Children dissolve into parent grid */
.tu-col-label,
.tg-col {
display: contents;
}
/* Inline age icons hidden in grid mode (label column visible) */
.tu-cell-icon {
display: none;
}
/* ── Row label (age icon / strategy text) ── */
.tu-label {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.35rem;
white-space: nowrap;
}
.tu-label-text {
font-size: 0.7rem;
font-weight: 600;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.tu-age-label {
color: var(--clr-surface-40);
}
/* ── Grid cells ── */
.tu-cell {
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.35rem;
border-radius: 3px;
}
.tu-fastest {
background-color: color-mix(in oklab, var(--clr-primary) 6%, transparent);
}
/* ── Strategy cell ── */
.tu-strat-cell {
color: var(--clr-surface-40);
}
.tu-strat-icon {
width: 1.1rem;
height: 1.1rem;
border-radius: 2px;
flex-shrink: 0;
}
/* ── Age icons & time ── */
.tu-age-icon {
width: 1rem;
height: 1rem;
flex-shrink: 0;
}
.tu-time {
font-variant-numeric: tabular-nums;
}
.tu-crown {
color: var(--clr-primary);
font-size: 0.6rem;
flex-shrink: 0;
}
/* ══════════════════════════════════════
Narrow team → player cards
══════════════════════════════════════ */
@container team (max-width: 24rem) {
.tu-team {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.tu-col-label { display: none; }
.tg-col {
display: block;
border-left: 3px solid var(--col-color);
padding: 0.5rem 0.6rem;
background: var(--clr-surface-5);
border-radius: 0 4px 4px 0;
}
.tg-player {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0.2rem;
font-size: 1rem;
}
.tu-cell-icon {
display: inline;
width: 1rem;
height: 1rem;
vertical-align: -0.15em;
}
}
}
eapm-overview {
display: block;
container-type: inline-size;
overflow: hidden;
& > .tg {
margin-top: 1.25rem;
}
/* ── APM Charts row (line + boxplot) ── */
.eapm-charts {
display: flex;
gap: 1rem;
align-items: stretch;
}
.eapm-chart-wrap {
position: relative;
height: clamp(12rem, 25cqi, 20rem);
flex: 3;
min-width: 0;
}
.eapm-boxplot-wrap {
position: relative;
flex: 2;
min-width: 0;
min-height: 0;
}
/* ══════════════════════════════════════
Stats Grid (column-flow with label column)
══════════════════════════════════════ */
.eapm-stats-team {
container: eapm-team / inline-size;
display: grid;
grid-template-rows: repeat(var(--eapm-rows), auto);
grid-auto-flow: column;
grid-template-columns: auto auto;
grid-auto-columns: 1fr;
gap: 0 0.5rem;
align-items: stretch;
position: relative;
overflow: hidden;
.eapm-col-group,
.eapm-col-sub,
.tg-col {
display: contents;
}
}
.eapm-group-label {
grid-row: span 2;
display: flex;
align-items: center;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-surface-30);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.eapm-label {
display: flex;
align-items: center;
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.03em;
white-space: nowrap;
}
.eapm-cell {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.3rem;
padding: 0.25rem 0.5rem;
border-radius: 3px;
font-variant-numeric: tabular-nums;
text-align: right;
}
.eapm-best {
background: color-mix(in oklab, var(--clr-primary) 6%, transparent);
}
.eapm-group-label.eapm-group-start {
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: -100vw;
border-top: 1px solid var(--clr-surface-10);
pointer-events: none;
}
}
.eapm-star {
color: var(--clr-primary);
font-size: 0.55rem;
flex-shrink: 0;
margin-right: auto;
}
.eapm-pct {
font-size: 0.7rem;
color: var(--clr-surface-40);
}
.callout {
margin-top: 1.25rem;
}
/* ══════════════════════════════════════
Ratio Charts
══════════════════════════════════════ */
.eapm-ratio-charts {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.eapm-ratio-chart {
flex: 1;
min-width: 0;
}
.eapm-ratio-wrap {
position: relative;
height: 6rem;
background: linear-gradient(to bottom, rgba(255,255,255,0.04) 50%, transparent 50%);
}
.eapm-ratio-label {
font-size: 0.7rem;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* ══════════════════════════════════════
Responsive
══════════════════════════════════════ */
@container (max-width: 36rem) {
.eapm-charts {
flex-direction: column;
}
.eapm-chart-wrap {
height: clamp(12rem, 40cqi, 18rem);
}
.eapm-boxplot-wrap {
height: 12rem;
}
}
@container eapm-team (max-width: 24rem) {
.eapm-stats-team {
display: flex;
flex-direction: column;
gap: 0.4rem;
.eapm-col-group,
.eapm-col-sub { display: none; }
.tg-col {
display: block;
border-left: 3px solid var(--col-color);
padding: 0.5rem 0.6rem;
background: var(--clr-surface-5);
border-radius: 0 4px 4px 0;
}
.tg-player {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0.2rem;
font-size: 1rem;
}
}
.eapm-cell::before {
content: attr(data-label);
font-size: 0.65rem;
color: var(--clr-surface-40);
text-transform: uppercase;
letter-spacing: 0.03em;
min-width: 6em;
}
}
}
elo-chart {
display: flex;
flex-direction: column;
.elo-chart-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
}
.elo-chart-legend {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.elo-chart-legend-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
font-size: 1rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-light);
cursor: pointer;
transition: opacity 0.15s ease;
&:hover {
background-color: var(--clr-surface-10);
}
&.is-hidden {
opacity: 0.35;
}
}
.elo-chart-legend-swatch {
display: inline-block;
width: 0.7rem;
height: 0.2rem;
border-radius: 1px;
}
.elo-chart-axis-toggle {
display: flex;
gap: 0.6rem;
font-size: 1rem;
> label {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--clr-surface-40);
cursor: pointer;
&:has(input:checked) {
color: var(--clr-light);
}
> input {
accent-color: var(--clr-primary);
}
}
}
.elo-chart-fallback {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
padding: 1rem;
}
.elo-chart-fallback-ladder {
> h4 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.5rem;
}
}
}
civ-pick-chart {
display: block;
/* ── Bar chart (desktop) ── */
.civ-pick-bars {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.civ-pick-bar-row {
display: flex;
align-items: center;
gap: 0.6rem;
}
.civ-pick-bar-icon > img {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
}
.civ-pick-bar-name {
width: 8rem;
flex-shrink: 0;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.civ-pick-bar-track {
flex: 1;
height: 1.4rem;
background: var(--clr-surface-10);
border-radius: 0.2rem;
overflow: hidden;
}
.civ-pick-bar {
display: block;
height: 100%;
background: var(--clr-primary);
border-radius: 0.2rem;
min-width: 0.25rem;
}
.civ-pick-bar-value {
flex-shrink: 0;
min-width: 5.5rem;
text-align: right;
font-variant-numeric: tabular-nums;
> small {
color: var(--clr-surface-40);
}
}
/* ── Toggle button ── */
.civ-pick-toggle {
display: block;
width: 100%;
margin-top: 0.75rem;
padding: 0.4rem;
font-size: 0.8rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
text-align: center;
&:hover {
background-color: var(--clr-surface-10);
color: var(--clr-light);
}
}
/* ── Tiles (mobile only) ── */
@media (max-width: 48rem) {
.civ-pick-grid {
display: flex;
gap: 0.5rem;
}
.civ-pick-tile {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
padding: 0.6rem 0.4rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-20);
text-align: center;
flex: 0 0 6rem;
}
.civ-pick-medal {
position: absolute;
top: 0.3rem;
right: 0.35rem;
font-size: 0.9rem;
}
.civ-pick-gold > .civ-pick-medal {
background: linear-gradient(135deg, #f5d442, #d4a017, #f5e27a, #c8960e);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 3px rgba(212, 160, 23, 0.6));
}
.civ-pick-silver > .civ-pick-medal {
background: linear-gradient(135deg, #e8e8e8, #a0a0a0, #d8d8d8, #888);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 3px rgba(180, 180, 180, 0.5));
}
.civ-pick-bronze > .civ-pick-medal {
background: linear-gradient(135deg, #e0a060, #b87333, #daa070, #a05e20);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 0 3px rgba(184, 115, 51, 0.5));
}
.civ-pick-icon {
> img {
width: 2.5rem;
height: 2.5rem;
object-fit: contain;
}
}
.civ-pick-name {
font-size: 1rem;
font-weight: 600;
line-height: 1.2;
}
.civ-pick-stats {
display: flex;
flex-direction: column;
font-variant-numeric: tabular-nums;
line-height: 1.3;
> strong {
font-size: 1rem;
color: var(--clr-light);
}
> small {
font-size: 0.65rem;
color: var(--clr-surface-40);
}
}
}
}
.home {
.ad-desktop { display: block; }
.ad-mobile { display: none; }
.discord-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.4em 0.8em;
font-size: 0.85rem;
font-weight: 600;
background-color: #5865F2;
color: var(--clr-light);
border-radius: 3px;
text-decoration: none;
&:hover {
background-color: #4752c4;
text-decoration: none;
}
}
/* Hero */
.home-hero {
position: relative;
margin: 0 calc(-1 * var(--content-margin-inline));
padding: clamp(3rem, 8vw, 6rem) var(--content-margin-inline);
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--clr-surface) 50%, transparent) 0%,
color-mix(in oklab, var(--clr-surface) 65%, transparent) 60%,
var(--clr-surface) 100%
),
url(/static/images/match_header_1920.93a684bbd88027c069cd.webp) center 30% / cover no-repeat;
text-align: center;
overflow: hidden;
&::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 80% 60% at 50% 40%,
color-mix(in oklab, var(--clr-primary) 8%, transparent) 0%,
transparent 70%
);
pointer-events: none;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--clr-primary-40),
var(--clr-primary),
var(--clr-primary-40),
transparent
);
}
}
.home-hero-content {
position: relative;
z-index: 1;
max-width: 40rem;
margin: 0 auto;
background: color-mix(in oklab, var(--clr-surface) 60%, transparent);
backdrop-filter: blur(6px);
padding: 2rem 2.5rem;
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
}
.home-hero-title {
font-family: "Fondamento", cursive;
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 0.5rem;
color: var(--clr-light);
.highlight {
color: var(--clr-primary);
}
}
.home-hero-tagline {
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
color: var(--clr-secondary-20);
line-height: 1.6;
margin: 0 0 2rem;
}
.home-hero-search {
display: flex;
max-width: 30rem;
margin: 0 auto 1.5rem;
box-shadow: 0 4px 24px -4px color-mix(in oklab, var(--clr-dark) 60%, transparent);
> input {
flex: 1;
min-width: 0;
border-right: 0;
font-size: 1rem;
padding: 0.75rem 1rem;
}
> .btn {
white-space: nowrap;
font-size: 1rem;
padding: 0.75rem 1.5rem;
}
}
.home-hero-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.home-ads {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.home-announcements { margin-top: 1.5rem; margin-bottom: 1rem; overflow-x: clip; }
.home-announcements-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
}
.home-announcements-side {
display: flex;
flex-direction: column;
gap: 1rem;
> .announcement-tile { flex: 1; }
}
.home-announcements-more {
text-align: end;
margin-bottom: 2rem;
}
.home-statistics {
min-height: 187px;
margin-bottom: 1rem;
}
.home-features {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
> .card {
display: flex;
flex-direction: column;
margin-bottom: 0;
}
.card-image {
width: 100%;
height: 140px;
object-fit: cover;
}
.card-action {
margin-top: auto;
}
}
.home-leaderboards { margin-bottom: 1rem; }
.home-leaderboards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-top: 1rem;
}
.home-leaderboard-table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
thead th {
text-align: center;
padding: 0.5rem;
}
thead small {
font-size: 0.7rem;
text-transform: uppercase;
color: var(--clr-secondary-30);
}
td {
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--clr-surface-10);
}
.col-rank {
text-align: end;
white-space: nowrap;
width: 1%;
}
.col-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 0;
width: 100%;
}
.col-elo {
text-align: end;
white-space: nowrap;
width: 1%;
font-variant-numeric: tabular-nums;
}
tbody tr:hover {
background-color: var(--clr-surface-10);
}
tfoot td {
padding-top: 0.75rem;
border-bottom: none;
}
}
/* Announcement tiles */
.announcement-tile {
display: flex;
flex-direction: column;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
overflow: hidden;
position: relative;
}
.announcement-image-wrap {
position: relative;
overflow: hidden;
}
.announcement-image {
width: 100%;
object-fit: cover;
}
.announcement-tile-big {
height: 100%;
.announcement-image-wrap {
flex: 1;
}
.announcement-image {
position: absolute;
inset: 0;
height: 100%;
}
}
.announcement-tile-small .announcement-image {
max-height: 8rem;
}
.announcement-image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 1rem;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
h5 {
margin: 0;
line-height: 1.3;
overflow-wrap: anywhere;
}
}
.announcement-tile-big .announcement-image-overlay h5 {
font-size: 1.4rem;
}
.announcement-tile-small .announcement-image-overlay h5 {
font-size: 1rem;
}
.announcement-body {
padding: 1rem;
flex: 1;
overflow-wrap: break-word;
min-width: 0;
}
.announcement-meta {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.75rem 1rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
}
.announcement-meta a {
color: var(--clr-surface-40);
}
.stretched-link::after {
content: "";
position: absolute;
inset: 0;
}
@media (max-width: 68rem) {
margin: 0 1rem;
.ad-desktop { display: none; }
.ad-mobile { display: block; }
.home-hero {
margin: 0 -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.home-ads { grid-template-columns: 1fr; }
.home-announcements-grid { grid-template-columns: 1fr; }
.home-features { grid-template-columns: repeat(2, 1fr); }
.home-leaderboards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 36rem) {
.home-features { grid-template-columns: 1fr; }
.home-leaderboards-grid { grid-template-columns: 1fr; }
}
}
/* ── Announcement Detail ── */
.announcement-detail {
display: grid;
grid-template-columns: var(--content-sidebar-width) 1fr;
gap: var(--content-gap);
min-height: 70vh;
margin: 0 calc(var(--content-margin-inline) / 2);
padding-top: 1.5rem;
> main {
min-width: 0;
overflow-wrap: break-word;
> h1 {
font-size: 1.5rem;
margin: 0 0 0.5rem;
}
.announcement-content {
line-height: 1.7;
img {
max-width: 100%;
height: auto;
}
}
.tab-content {
line-height: 1.7;
img {
max-width: 100%;
height: auto;
}
}
}
}
.announcement-sidebar {
position: sticky;
top: 5rem;
align-self: start;
display: flex;
flex-direction: column;
gap: 1rem;
}
.announcement-nav {
display: flex;
flex-direction: column;
gap: 2px;
> a {
display: block;
padding: 0.5rem 0.75rem;
color: var(--clr-light);
text-decoration: none;
background-color: var(--clr-surface-tonal);
font-size: 0.9rem;
transition: background-color 0.15s ease;
&:hover, &.active {
background-color: var(--clr-surface-tonal-5);
text-decoration: none;
}
&.active {
border-left: 3px solid var(--clr-primary);
padding-left: calc(0.75rem - 3px);
}
}
}
.announcement-author {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.announcement-author-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-surface-40);
}
.announcement-stats {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--clr-surface-40);
a {
color: var(--clr-surface-40);
text-decoration: none;
&:hover {
color: var(--clr-primary);
}
}
}
.announcement-reactions {
margin-top: 0.25rem;
}
/* ── Announcement List ── */
.announcement-list {
margin: 0 var(--content-margin-inline);
padding-top: 1.5rem;
}
.announcement-list-hero {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
}
.announcement-list-hero-side {
display: flex;
flex-direction: column;
gap: 1rem;
}
.announcement-list-body {
display: grid;
grid-template-columns: 1fr var(--content-sidebar-width);
gap: var(--content-gap);
margin-bottom: 1.5rem;
}
.announcement-list-items {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
/* Horizontal announcement tile */
.announcement-horizontal {
display: grid;
grid-template-columns: 16rem 1fr;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
overflow: hidden;
position: relative;
}
.announcement-horizontal-image {
background-size: cover;
background-position: center;
min-height: 8rem;
}
.announcement-horizontal-content {
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
min-width: 0;
> h3 {
font-size: 1.25rem;
margin: 0 0 0.5rem;
}
> p {
flex: 1;
overflow-wrap: break-word;
}
}
.announcement-horizontal-meta {
font-size: 0.8rem;
color: var(--clr-surface-40);
margin-top: 0.75rem;
a {
color: var(--clr-surface-40);
text-decoration: none;
&:hover { color: var(--clr-primary); }
}
}
@media (max-width: 68rem) {
.announcement-list { margin: 0 1rem; }
.announcement-list-hero { grid-template-columns: 1fr; }
.announcement-list-body { grid-template-columns: 1fr; }
.announcement-horizontal { grid-template-columns: 10rem 1fr; }
}
@media (max-width: 36rem) {
.announcement-horizontal {
grid-template-columns: 1fr;
.announcement-horizontal-image { min-height: 10rem; }
}
}
@media (max-width: 68rem) {
.announcement-detail {
display: block;
margin: 0 1rem;
> main > h1 {
font-size: 1.3rem;
}
}
.announcement-sidebar {
position: static;
margin-bottom: 1.5rem;
}
.announcement-nav {
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem;
> a {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
&.active {
border-left: none;
border-bottom: 3px solid var(--clr-primary);
padding-left: 0.75rem;
padding-bottom: calc(0.4rem - 3px);
}
}
}
}
/* Search Hero */
.search-hero {
position: relative;
padding: clamp(2.5rem, 6vw, 4.5rem) var(--content-margin-inline);
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--clr-surface) 50%, transparent) 0%,
color-mix(in oklab, var(--clr-surface) 65%, transparent) 60%,
var(--clr-surface) 100%
),
url(/static/images/match_header_1920.93a684bbd88027c069cd.webp) center 30% / cover no-repeat;
text-align: center;
overflow: hidden;
&::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 80% 60% at 50% 40%,
color-mix(in oklab, var(--clr-primary) 8%, transparent) 0%,
transparent 70%
);
pointer-events: none;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--clr-primary-40),
var(--clr-primary),
var(--clr-primary-40),
transparent
);
}
}
.search-hero-content {
position: relative;
z-index: 1;
max-width: 36rem;
margin: 0 auto;
background: color-mix(in oklab, var(--clr-surface) 60%, transparent);
backdrop-filter: blur(6px);
padding: 2rem 2.5rem;
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
}
.search-hero-title {
font-family: "Fondamento", cursive;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 0.4rem;
color: var(--clr-light);
}
.search-hero-tagline {
font-size: clamp(0.85rem, 1.6vw, 1rem);
color: var(--clr-secondary-20);
line-height: 1.6;
margin: 0 0 1.5rem;
}
.search-hero-bar {
display: flex;
max-width: 30rem;
margin: 0 auto;
box-shadow: 0 4px 24px -4px color-mix(in oklab, var(--clr-dark) 60%, transparent);
> input {
flex: 1;
min-width: 0;
border-right: 0;
font-size: 1rem;
padding: 0.75rem 1rem;
}
> .btn {
white-space: nowrap;
font-size: 1rem;
padding: 0.75rem 1.5rem;
}
}
/* Results */
.search-content {
display: block;
margin: 0 var(--content-margin-inline);
padding-top: 1.5rem;
}
.search-results-header {
font-size: 0.8rem;
color: var(--clr-surface-40);
margin-bottom: 1rem;
}
.search-results {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
gap: 0.75rem;
}
.search-ad {
grid-column: 1 / -1;
text-align: center;
}
.search-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--clr-surface-40);
i {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
color: var(--clr-surface-20);
}
}
/* User tile */
.user-tile {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
transition: background-color 0.15s ease, border-color 0.15s ease;
.user-tile-hero-wrap {
position: relative;
overflow: hidden;
}
.user-tile-hero {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
display: block;
}
.user-tile-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
}
.user-tile-name {
display: block;
font-size: 1rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-tile-country {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-secondary-20);
img {
height: 0.7rem;
}
}
.user-tile-body {
padding: 0.75rem;
flex: 1;
display: flex;
flex-direction: column;
}
.user-tile-ratings {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.rating-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.15rem 0.45rem;
background-color: var(--clr-surface-tonal);
border: 1px solid var(--clr-surface-tonal-10);
small {
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--clr-surface-40);
}
strong {
font-size: 0.85rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
}
.user-tile-alias {
font-size: 0.7rem;
color: var(--clr-surface-40);
font-style: italic;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
mark {
background: none;
color: var(--clr-primary);
}
}
.user-tile-meta {
font-size: 0.7rem;
color: var(--clr-surface-40);
margin-top: auto;
padding-top: 0.5rem;
}
.stretched-link::after {
content: "";
position: absolute;
inset: 0;
}
&:hover {
background-color: var(--clr-surface-10);
border-color: var(--clr-surface-30);
}
}
@media (max-width: 36rem) {
.search-hero {
padding-left: 1rem;
padding-right: 1rem;
}
.search-content {
margin: 0 1rem;
}
}
.teams-content {
display: block;
margin: 0 var(--content-margin-inline);
}
.teams-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
gap: 0.75rem;
}
.teams-ad {
grid-column: 1 / -1;
text-align: center;
}
/* Team tile */
.team-tile {
display: flex;
flex-direction: column;
padding: 0;
overflow: hidden;
transition: background-color 0.15s ease, border-color 0.15s ease;
&:hover {
border-color: var(--clr-surface-30);
}
.team-tile-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 10;
background-color: var(--clr-surface-10);
overflow: hidden;
}
.team-tile-logo {
max-width: 60%;
max-height: 70%;
object-fit: contain;
}
.team-tile-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 0.5rem 0.75rem;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
}
.team-tile-name {
display: block;
font-size: 1rem;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-tile-elo {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--clr-secondary-20);
}
.team-tile-body {
padding: 0.75rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.team-tile-summary {
font-size: 1rem;
color: var(--clr-surface-40);
line-height: 1.5;
margin: 0;
}
.team-tile-players {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.team-tile-player {
display: block;
position: relative;
z-index: 1;
> img {
width: 2rem;
height: 2rem;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--clr-surface-20);
transition: border-color 0.15s ease;
}
&:hover > img {
border-color: var(--clr-primary);
}
}
.team-tile-link {
font-size: 0.7rem;
color: var(--clr-surface-40);
margin-top: auto;
position: relative;
z-index: 1;
&:hover {
color: var(--clr-primary);
}
}
}
@media (max-width: 36rem) {
.teams-content {
margin: 0 1rem;
}
}
/* Analysis Hero */
.analysis-hero {
position: relative;
padding: clamp(2.5rem, 6vw, 4.5rem) var(--content-margin-inline);
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--clr-surface) 50%, transparent) 0%,
color-mix(in oklab, var(--clr-surface) 65%, transparent) 60%,
var(--clr-surface) 100%
),
url(/static/images/match_header_1920.93a684bbd88027c069cd.webp) center 30% / cover no-repeat;
text-align: center;
overflow: hidden;
&::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 80% 60% at 50% 40%,
color-mix(in oklab, var(--clr-primary) 8%, transparent) 0%,
transparent 70%
);
pointer-events: none;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--clr-primary-40),
var(--clr-primary),
var(--clr-primary-40),
transparent
);
}
}
.analysis-hero-content {
position: relative;
z-index: 1;
max-width: 36rem;
margin: 0 auto;
background: color-mix(in oklab, var(--clr-surface) 60%, transparent);
backdrop-filter: blur(6px);
padding: 2rem 2.5rem;
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
}
.analysis-hero-title {
font-family: "Fondamento", cursive;
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 0.4rem;
color: var(--clr-light);
}
.analysis-hero-tagline {
font-size: clamp(0.85rem, 1.6vw, 1rem);
color: var(--clr-secondary-20);
line-height: 1.6;
margin: 0;
}
/* Content */
.analysis-content {
display: block;
margin: 0 var(--content-margin-inline);
padding-top: 1.5rem;
}
.analysis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
gap: 1rem;
}
.analysis-card {
display: flex;
flex-direction: column;
margin-bottom: 0;
.analysis-card-text {
font-size: 1rem;
color: var(--clr-secondary-20);
line-height: 1.6;
margin: 0 0 1rem;
flex: 1;
a {
color: var(--clr-primary);
}
}
}
/* Dropzone */
.dropzone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 2rem 1rem;
border: 2px dashed var(--clr-surface-20);
background-color: var(--clr-surface-tonal);
cursor: pointer;
text-align: center;
transition: border-color 0.15s ease, background-color 0.15s ease;
> i {
font-size: 2rem;
color: var(--clr-surface-30);
transition: color 0.15s ease;
}
.dropzone-label {
font-size: 1rem;
color: var(--clr-surface-40);
}
.dropzone-hint {
font-size: 0.7rem;
color: var(--clr-surface-30);
}
.dropzone-filename {
display: none;
font-size: 1rem;
font-weight: 600;
color: var(--clr-primary);
}
&:hover, &.is-dragover {
border-color: var(--clr-primary);
background-color: color-mix(in oklab, var(--clr-primary) 5%, var(--clr-surface-tonal));
> i {
color: var(--clr-primary);
}
}
&.has-file {
border-color: var(--clr-success);
border-style: solid;
> i {
color: var(--clr-success);
}
.dropzone-label,
.dropzone-hint {
display: none;
}
.dropzone-filename {
display: block;
}
}
}
.analysis-search {
display: flex;
gap: 0;
margin-top: auto;
> input {
flex: 1;
min-width: 0;
border-right: 0;
}
}
.analysis-help {
margin-top: 1.5rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
> summary {
cursor: pointer;
color: var(--clr-surface-30);
&:hover {
color: var(--clr-light);
}
}
> ol {
margin-top: 0.5rem;
padding-left: 1.25rem;
line-height: 1.8;
}
}
@media (max-width: 36rem) {
.analysis-hero {
padding-left: 1rem;
padding-right: 1rem;
}
.analysis-hero-content {
padding: 1.5rem;
}
.analysis-content {
margin: 0 1rem;
}
}
/* Layout */
@media (min-width: 68.01rem) {
.lobby-content > offcanvas-panel {
align-self: start;
position: sticky;
top: 1rem;
}
}
/* Filter sidebar */
.lobby-filter {
display: flex;
flex-direction: column;
gap: 1.25rem;
.filter-toggles {
display: flex;
gap: 0.35rem;
}
.filter-toggle {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.25rem 0.6rem;
font-size: 0.85rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-secondary-20);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-20);
}
&.active {
background-color: var(--clr-primary);
border-color: var(--clr-primary);
color: var(--clr-dark);
}
}
.filter-tiles[data-filter="gameType"] {
max-height: 4.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--clr-surface-20) transparent;
}
.lobby-filter-maps {
display: grid;
grid-template-columns: 1fr 1fr;
max-height: 9rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--clr-surface-20) transparent;
}
.filter-item {
font-size: 0.85rem;
img {
width: 1.25rem;
height: 1.25rem;
}
.lobby-filter-map-icon {
width: 1.25rem;
text-align: center;
color: var(--clr-surface-40);
}
.filter-item-label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
/* Status bar */
.lobby-status {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
font-size: 0.85rem;
color: var(--clr-secondary-30);
.lobby-clear-filters {
font-size: 0.8rem;
padding: 0.25rem 0.75rem;
}
}
/* Lobby list — table-like */
.lobby-list {
--_lobby-cols: 1fr 10rem 8rem 5rem 5rem 9rem 3.5rem;
display: flex;
flex-direction: column;
border: 1px solid var(--clr-surface-20);
}
/* Table header */
.lobby-row-header {
display: grid;
grid-template-columns: var(--_lobby-cols);
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background-color: var(--clr-surface-10);
border-bottom: 1px solid var(--clr-surface-20);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-secondary-30);
}
/* ── Row ── */
.lobby-row {
cursor: pointer;
&:not(:last-child) {
border-bottom: 1px solid var(--clr-surface-20);
}
&:hover > .lobby-row-summary {
background-color: var(--clr-surface-10);
}
&.is-expanded > .lobby-row-summary {
background-color: var(--clr-surface-5);
}
}
/* Summary — the always-visible table row */
.lobby-row-summary {
display: grid;
grid-template-columns: var(--_lobby-cols);
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.75rem;
transition: background-color 0.12s ease;
}
.lobby-row-name {
font-weight: 600;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.fa-lock {
color: var(--clr-warning);
font-size: 0.85em;
margin-right: 0.15rem;
}
}
.lobby-row-map {
display: flex;
align-items: center;
gap: 0.35rem;
color: var(--clr-secondary-20);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
img {
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
}
.lobby-custom-badge {
font-size: 0.7rem;
font-style: italic;
color: var(--clr-surface-40);
}
.lobby-row-cell {
color: var(--clr-surface-40);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lobby-row-players {
white-space: nowrap;
display: flex;
align-items: center;
gap: 0.2rem;
.fa-robot {
font-size: 0.75em;
}
}
.lobby-row-elo {
color: var(--clr-primary-30);
white-space: nowrap;
text-align: right;
}
.lobby-join-btn {
font-size: 0.85rem;
padding: 0.25rem 0.75rem;
}
/* ── Expanded details ── */
.lobby-row-details {
display: grid;
grid-template-columns: var(--_lobby-cols);
gap: 0.5rem;
align-items: start;
padding: 0.4rem 0.75rem;
background-color: var(--clr-surface-5);
border-top: 1px solid var(--clr-surface-20);
}
.lobby-row-detail-lobby {
grid-column: 1;
display: flex;
gap: 1rem;
align-items: start;
}
.lobby-row-detail-map {
display: flex;
align-items: start;
gap: 0.5rem;
flex-shrink: 0;
img {
width: 3.5rem;
height: 3.5rem;
}
.lobby-detail-map-name {
font-weight: 600;
}
.lobby-detail-map-meta {
font-size: 0.85rem;
color: var(--clr-surface-40);
}
}
.lobby-row-detail-slots {
list-style: none;
margin: 0;
padding: 0;
min-width: 0;
li {
list-style: none;
}
}
.lobby-row-detail-badges {
grid-column: 2 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
align-self: start;
}
.lobby-badge {
display: inline-flex;
padding: 0.15rem 0.5rem;
font-size: 0.8rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-20);
color: var(--clr-secondary-20);
}
.lobby-badge-warn {
border-color: var(--clr-warning);
color: var(--clr-warning);
}
/* Slot row */
.lobby-slot {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.1rem 0;
list-style: none;
}
.lobby-slot-avatar {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
}
.lobby-slot-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
a {
color: inherit;
text-decoration: none;
&:hover {
color: var(--clr-primary);
}
}
}
.lobby-slot-elo {
margin-left: auto;
font-size: 0.85rem;
color: var(--clr-surface-40);
white-space: nowrap;
}
.lobby-slot-open {
color: var(--clr-surface-30);
font-style: italic;
}
.lobby-slot-ai {
color: var(--clr-surface-40);
.fa-robot {
font-size: 0.8em;
}
}
/* Loading state */
.lobby-loading {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
color: var(--clr-surface-40);
font-size: 1.25rem;
.fa-spinner {
animation: lobby-spin 1s linear infinite;
}
}
@keyframes lobby-spin {
to { transform: rotate(360deg); }
}
/* Empty state */
.lobby-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
color: var(--clr-surface-30);
text-align: center;
gap: 0.75rem;
> i {
font-size: 2rem;
}
}
/* ── Responsive ── */
@media (max-width: 68rem) {
/* Hide header + collapse middle columns on mobile */
.lobby-row-header {
display: none;
}
.lobby-row-summary {
grid-template-columns: 1fr auto auto;
}
.lobby-row-map,
.lobby-row-cell,
.lobby-row-elo {
display: none;
}
.lobby-row-details {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lobby-row-detail-lobby {
flex-direction: column;
}
.lobby-row-detail-map img {
width: 3rem;
height: 3rem;
}
}
.dashboard-title {
margin: 0 0 0.75rem;
font-size: 1.25rem;
}
.dashboard-meta {
display: flex;
flex-direction: column;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--clr-surface-40);
margin-bottom: 1rem;
i {
color: var(--clr-surface-30);
}
a {
color: var(--clr-surface-40);
&:hover {
color: var(--clr-primary);
}
}
}
.dashboard-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(5rem, auto);
gap: 0.5rem;
}
.dashboard-tile {
display: flex;
flex-direction: column;
padding: 0;
background-color: var(--clr-surface-5);
.dashboard-tile-header {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-surface-40);
padding: 0.6rem 1rem 0;
}
.dashboard-tile-body {
flex: 1;
}
}
/* Loading / error / empty states */
.dashboard-tile-loading,
.dashboard-tile-error {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--clr-surface-40);
font-size: 0.9rem;
gap: 0.5rem;
}
.dashboard-tile-error {
color: var(--clr-danger);
}
/* ── Chart tiles ── */
.dashboard-chart-wrap {
position: relative;
width: 100%;
min-height: 16rem;
padding: 0.5rem;
canvas {
width: 100% !important;
height: 100% !important;
}
}
/* ── Table tiles ── */
.dashboard-table-wrap {
padding: 0.5rem;
}
.dashboard-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
font-variant-numeric: tabular-nums;
border: 1px solid var(--clr-surface-20);
thead {
background-color: var(--clr-surface-10);
}
th {
text-align: start;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-secondary-30);
border-bottom: 1px solid var(--clr-surface-20);
white-space: nowrap;
}
td {
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--clr-surface-20);
white-space: nowrap;
}
tbody tr:last-child td {
border-bottom: none;
}
tbody tr:hover {
background-color: var(--clr-surface-10);
}
}
.dashboard-table-wrap .pagination {
margin: 0.75rem 0 0.25rem;
}
.dashboard-table-wrap .page-ellipsis {
pointer-events: none;
border-color: transparent;
background: none;
}
/* ── Single value tiles ── */
.dashboard-single-value {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
}
.dashboard-single-label {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-surface-40);
margin-bottom: 0.25rem;
}
.dashboard-single-number {
font-size: 2rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--clr-primary);
line-height: 1.1;
&.display-1 { font-size: 4rem; }
&.display-2 { font-size: 3.5rem; }
&.display-3 { font-size: 3rem; }
&.display-4 { font-size: 2.5rem; }
}
/* ── Text tiles ── */
.dashboard-text-content {
padding: 1rem;
line-height: 1.6;
h1, h2, h3, h4 {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
}
/* ── Responsive ── */
@media (max-width: 68rem) {
.dashboard-content {
padding: 0 1rem;
}
.dashboard-grid {
grid-template-columns: repeat(3, 1fr);
}
.dashboard-tile {
grid-column-end: span min(var(--tile-w), 3) !important;
}
}
@media (max-width: 36rem) {
.dashboard-grid {
grid-template-columns: 1fr;
}
.dashboard-tile {
grid-column: 1 / -1 !important;
grid-row: auto !important;
}
}
/* ── Dashboard Editor ── */
/* Toolbar */
.de-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1rem;
}
.de-toolbar-btn {
padding: 0.4rem 0.9rem;
font-size: 0.85rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
&:hover { background-color: var(--clr-surface-10); color: var(--clr-light); }
&.active { background-color: var(--clr-surface-10); color: var(--clr-primary); border-color: var(--clr-primary); }
}
.de-toolbar-btn--save {
margin-left: auto;
border-color: var(--clr-primary);
color: var(--clr-primary);
&:hover { background-color: color-mix(in oklab, var(--clr-primary) 12%, transparent); }
}
/* Edit Grid */
.de-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 5rem;
gap: 0.5rem;
min-height: 12rem;
}
.de-grid--editing {
border: 1px dashed var(--clr-surface-20);
}
/* Empty grid cells — pixel-perfect alignment with actual grid tracks */
.de-grid-cell {
border: 1px dashed var(--clr-surface-10);
cursor: pointer;
transition: border-color 0.15s ease;
&:hover { border-color: var(--clr-surface-20); }
}
.de-grid-add-row {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--clr-surface-30);
cursor: pointer;
min-height: 5rem;
font-size: 0.85rem;
border: 1px dashed var(--clr-surface-20);
transition: color 0.15s ease, border-color 0.15s ease;
&:hover { color: var(--clr-primary); border-color: var(--clr-primary); }
}
/* Tile (edit mode) */
.de-tile {
position: relative;
background-color: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.75rem;
}
.de-tile-header {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
min-height: 1.5rem;
cursor: grab;
touch-action: none;
user-select: none;
&:active { cursor: grabbing; }
}
.de-tile-type {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.03em;
font-size: 0.7rem;
white-space: nowrap;
> i { margin-right: 0.25rem; }
}
.de-tile-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--clr-light);
}
.de-tile-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.de-tile-btn {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
&:hover { color: var(--clr-light); border-color: var(--clr-surface-30); }
}
.de-tile-btn--danger {
&:hover { color: var(--clr-danger); border-color: var(--clr-danger); }
}
/* Resize handle — bottom-right corner (width + height) */
.de-tile-resize {
position: absolute;
right: 0;
bottom: 0;
width: 1.25rem;
height: 1.25rem;
cursor: nwse-resize;
touch-action: none;
opacity: 0.4;
transition: opacity 0.15s ease;
/* triangle grip indicator */
&::after {
content: '';
position: absolute;
right: 3px;
bottom: 3px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent var(--clr-surface-40) transparent;
}
&:hover {
opacity: 1;
&::after { border-color: transparent transparent var(--clr-primary) transparent; }
}
}
/* Dragging state — fixed position, follows pointer */
.de-tile--dragging {
position: fixed;
z-index: 1000;
opacity: 0.85;
pointer-events: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
.de-tile-header { cursor: grabbing; }
}
/* Ghost placeholder — shows target position in grid */
.de-tile-ghost {
border: 2px dashed var(--clr-primary);
background-color: color-mix(in oklab, var(--clr-primary) 8%, transparent);
pointer-events: none;
}
/* ── Dialogs ── */
.de-dialog {
background: var(--clr-surface-5);
color: var(--clr-light);
border: 1px solid var(--clr-surface-20);
max-width: min(90vw, 72rem);
width: 100%;
padding: 0;
&::backdrop { background: rgba(0, 0, 0, 0.5); }
}
.de-dialog--sm {
max-width: min(90vw, 28rem);
}
.de-dialog--wide {
max-width: min(95vw, 80rem);
height: min(90vh, 56rem);
}
.de-dialog-content {
display: flex;
flex-direction: column;
height: 100%;
}
.de-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--clr-surface-20);
flex-shrink: 0;
}
.de-dialog-title {
font-size: 1.1rem;
font-weight: 600;
}
.de-dialog-close {
background: none;
border: none;
color: var(--clr-surface-40);
font-size: 1.25rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
&:hover { color: var(--clr-light); }
}
.de-dialog-body {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--clr-surface-20) transparent;
}
.de-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--clr-surface-20);
flex-shrink: 0;
}
/* ── Type picker ── */
.de-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 0.75rem;
}
.de-type-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem 1rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-20);
color: var(--clr-light);
cursor: pointer;
transition: border-color 0.15s ease;
> i { font-size: 1.5rem; color: var(--clr-primary-20); }
&:hover { border-color: var(--clr-primary); }
}
/* ── Save dialog ── */
.de-save-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
> label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-surface-40);
}
}
/* ── Query Builder Layout ── */
.de-qb {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
.de-qb-main {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.de-qb-preview {
position: sticky;
top: 0;
}
.de-qb-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.de-qb-section-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-surface-40);
}
.de-qb-add {
padding: 0.15rem 0.5rem;
font-size: 0.7rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
&:hover { color: var(--clr-primary); border-color: var(--clr-primary); }
}
.de-qb-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
> select, > input {
flex: 1;
min-width: 0;
}
}
.de-qb-relative {
display: flex;
gap: 0.25rem;
flex: 1;
> input { width: 5rem; flex: 0 0 5rem; }
> select { flex: 1; }
}
.de-qb-remove {
padding: 0.25rem 0.45rem;
font-size: 0.75rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
flex-shrink: 0;
&:hover { color: var(--clr-danger); border-color: var(--clr-danger); }
&:disabled { opacity: 0.3; pointer-events: none; }
}
.de-qb-pills {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.de-qb-pill {
padding: 0.25rem 0.7rem;
font-size: 0.8rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
&:hover { border-color: var(--clr-surface-30); color: var(--clr-light); }
&.active { background-color: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-dark); }
}
.de-qb-pill--add {
border-style: dashed;
&:hover { border-color: var(--clr-primary); color: var(--clr-primary); }
}
.de-qb-loading {
color: var(--clr-surface-40);
padding: 2rem 0;
text-align: center;
}
.de-qb-hint {
font-size: 0.8rem;
color: var(--clr-surface-30);
font-style: italic;
}
/* Preview pane */
.de-qb-preview-wrap {
position: relative;
}
.de-qb-preview-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
font-size: 1.25rem;
color: var(--clr-surface-40);
}
.de-qb-preview-empty {
color: var(--clr-surface-30);
padding: 2rem 0;
text-align: center;
}
.de-qb-preview-info {
font-size: 0.8rem;
color: var(--clr-surface-40);
margin-bottom: 0.5rem;
}
.de-qb-preview-table-wrap {
overflow-x: auto;
}
/* ── Tile Settings ── */
.de-ts {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.de-ts-section {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.de-ts-label {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-surface-40);
}
.de-ts-query-info {
font-size: 0.8rem;
color: var(--clr-surface-40);
}
.de-ts-vis-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
gap: 0.5rem;
}
.de-ts-vis-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 1rem 0.5rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
> i { font-size: 1.25rem; }
> span { font-size: 0.75rem; }
&:hover { border-color: var(--clr-surface-30); color: var(--clr-light); }
&.active {
border-color: var(--clr-primary);
color: var(--clr-primary);
background-color: color-mix(in oklab, var(--clr-primary) 8%, var(--clr-surface-10));
}
}
.de-ts-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.de-ts-row {
display: flex;
align-items: center;
gap: 0.5rem;
> span { font-size: 0.8rem; color: var(--clr-surface-40); white-space: nowrap; }
}
.de-ts-check {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--clr-surface-40);
cursor: pointer;
> input[type="checkbox"] {
accent-color: var(--clr-primary);
}
}
.de-ts-hint {
font-size: 0.8rem;
color: var(--clr-surface-30);
}
.de-ts-textarea {
width: 100%;
resize: vertical;
}
/* Column list in table settings */
.de-ts-col-list {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.de-ts-col-row {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.5rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-20);
> input[type="text"] { flex: 1; min-width: 0; }
}
.de-ts-col-move {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.de-ts-col-name {
font-size: 0.8rem;
font-weight: 600;
color: var(--clr-light);
min-width: 6rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Responsive ── */
@media (max-width: 68rem) {
.de-grid {
grid-template-columns: repeat(3, 1fr);
}
.de-tile {
grid-column-end: span min(var(--tile-w, 3), 3) !important;
}
.de-qb {
grid-template-columns: 1fr;
}
.de-ts-columns {
grid-template-columns: 1fr;
}
}
@media (max-width: 36rem) {
.de-grid {
grid-template-columns: 1fr;
}
.de-tile {
grid-column: 1 / -1 !important;
}
.de-dialog--wide {
max-width: 100vw;
height: 100vh;
max-height: 100vh;
}
}
/* ── Stats Tab Navigation ── */
.stats-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
> a {
padding: 0.5rem 1rem;
color: var(--clr-primary-20);
text-decoration: none;
background-color: var(--clr-surface-tonal);
&:hover { background-color: var(--clr-surface-tonal-5); }
&.active { background-color: var(--clr-surface-tonal-10); }
}
}
/* ── Stats Sections ── */
.stats-section {
margin-bottom: 1.5rem;
}
/* ── Scroll Slider ── */
scroll-slider {
display: block;
position: relative;
> :first-child {
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
> * { scroll-snap-align: start; }
}
&.is-overflowing > :first-child {
padding-right: 2rem;
mask-image: linear-gradient(to right, black calc(100% - 2rem), transparent);
}
}
.scroll-slider-arrow {
position: absolute;
top: 50%;
translate: 0 -50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
&[hidden] { display: none; }
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid var(--clr-surface-20);
background-color: var(--clr-surface);
color: var(--clr-surface-40);
font-size: 0.75rem;
cursor: pointer;
padding: 0;
transition: color 0.15s ease, border-color 0.15s ease;
&:hover {
color: var(--clr-light);
border-color: var(--clr-primary);
}
}
.scroll-slider-left { left: 0; }
.scroll-slider-right { right: 0; }
/* ── People Grid (Opponents / Teammates) ── */
.stats-people-grid {
display: flex;
gap: 0.75rem;
> * {
min-width: 14rem;
flex: 1 0 14rem;
}
}
.stats-person-card {
position: relative;
overflow: hidden;
text-align: end;
text-decoration: none;
color: var(--clr-light);
&:hover { text-decoration: none; }
}
.stats-person-bg {
position: absolute;
left: -1rem;
top: -1rem;
width: 9rem;
height: auto;
opacity: 0.6;
border-radius: 50%;
}
.stats-person-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
> strong { font-size: 1.3rem; }
}
.stats-person-winrate {
font-family: "Fondamento", cursive;
font-size: 1.75rem;
font-weight: 700;
}
.stats-person-meta {
font-size: 0.8rem;
color: var(--clr-surface-40);
}
.stats-show-all {
text-align: end;
margin-top: 0.5rem;
> a {
font-size: 0.85rem;
color: var(--clr-primary-20);
}
}
/* ── Position Grid (Flank / Pocket) ── */
.stats-position-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
gap: 0.75rem;
}
.stats-position-card {
position: relative;
overflow: hidden;
text-align: end;
color: var(--clr-light);
}
.stats-position-bg {
position: absolute;
left: 0.2rem;
top: -1.7rem;
width: 13rem;
height: auto;
opacity: 0.6;
}
.stats-position-info {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
> strong { font-size: 1.3rem; }
}
/* ── Duration Grid ── */
.stats-duration-grid {
display: flex;
gap: 0.75rem;
> * {
min-width: 8rem;
flex: 1 0 8rem;
}
}
.stats-duration-card {
text-align: center;
}
.stats-duration-value {
font-family: "Fondamento", cursive;
font-size: 1.5rem;
color: var(--clr-light);
}
.stats-duration-meta {
font-size: 0.8rem;
color: var(--clr-surface-40);
}
/* ── Tables Grid (Civ + Map side by side) ── */
.stats-tables-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
gap: 1.5rem;
}
/* ── Stats Table ── */
sortable-table {
display: block;
overflow-x: auto;
}
.stats-table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
border: 1px solid var(--clr-surface-20);
thead { background-color: var(--clr-surface-10); }
th {
padding: 0.5rem 0.75rem;
font-weight: 600;
text-align: start;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--clr-surface-40);
}
td {
padding: 0.4rem 0.75rem;
border-bottom: 1px solid var(--clr-surface-20);
text-align: start;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background-color: var(--clr-surface-10); }
th.sortable {
cursor: pointer;
user-select: none;
&::after {
content: "⇅";
font-size: 0.7em;
margin-left: 0.3em;
opacity: 0.4;
}
&[data-sort-dir="asc"]::after { content: "▲"; opacity: 1; }
&[data-sort-dir="desc"]::after { content: "▼"; opacity: 1; }
}
}
.stats-icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
margin-right: 0.35rem;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
/* ── Win Rate Bar ── */
.stats-winrate-bar {
height: 4px;
margin-top: 0.2rem;
background: linear-gradient(
90deg,
transparent calc(50% - clamp(0%, (50 - var(--wr)) / 50 * 50%, 50%)),
var(--clr-danger) calc(50% - clamp(0%, (50 - var(--wr)) / 50 * 50%, 50%)),
var(--clr-danger) 50%,
var(--clr-success) 50%,
var(--clr-success) calc(50% + clamp(0%, (var(--wr) - 50) / 50 * 50%, 50%)),
transparent calc(50% + clamp(0%, (var(--wr) - 50) / 50 * 50%, 50%))
);
}
/* ── Compare Dialog ── */
.compare-search-form {
display: flex;
margin-bottom: 1rem;
> input {
flex: 1;
min-width: 0;
padding: 0.5rem 0.75rem;
background-color: var(--clr-surface-10);
border: 1px solid var(--clr-surface-20);
border-right: 0;
color: var(--clr-light);
&::placeholder { color: var(--clr-surface-30); }
&:focus { outline: 1px solid var(--clr-primary); }
}
> button {
padding: 0.5rem 0.75rem;
background: none;
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
&:hover { color: var(--clr-primary); }
}
}
.compare-suggestions,
.compare-results {
display: flex;
flex-direction: column;
}
.compare-suggestion,
.compare-result {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
color: var(--clr-light);
text-decoration: none;
transition: background-color 0.1s ease;
&:hover {
background-color: var(--clr-surface-10);
text-decoration: none;
}
> img {
width: 2rem;
height: 2rem;
border-radius: 50%;
object-fit: cover;
}
}
.compare-empty {
color: var(--clr-surface-40);
text-align: center;
padding: 2rem 0;
}
/* ── Footnote ── */
.stats-footnote {
font-size: 0.8rem;
color: var(--clr-surface-40);
}
/* ── Awards / Achievements Page ── */
.awards-page {
margin: 0;
}
/* ── Hero ── */
.awards-hero {
position: relative;
margin: 0 calc(-1 * var(--content-margin-inline));
padding: clamp(2.5rem, 6vw, 4.5rem) var(--content-margin-inline);
background:
linear-gradient(
180deg,
color-mix(in oklab, var(--clr-surface) 50%, transparent) 0%,
color-mix(in oklab, var(--clr-surface) 65%, transparent) 60%,
var(--clr-surface) 100%
),
url(/static/images/match_header_1920.93a684bbd88027c069cd.webp) center 30% / cover no-repeat;
text-align: center;
overflow: hidden;
&::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
ellipse 80% 70% at 50% 45%,
color-mix(in oklab, var(--clr-primary) 10%, transparent) 0%,
transparent 70%
);
pointer-events: none;
}
}
.awards-hero-content {
position: relative;
z-index: 1;
max-width: 32rem;
margin: 0 auto;
background: color-mix(in oklab, var(--clr-surface) 60%, transparent);
backdrop-filter: blur(6px);
padding: 1.5rem 2rem;
border: 1px solid var(--clr-surface-10);
border-radius: 4px;
h1 {
font-family: "Fondamento", cursive;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
letter-spacing: 0.02em;
margin: 0 0 0.4rem;
color: var(--clr-light);
}
> p {
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
color: var(--clr-secondary-20);
margin: 0;
}
}
/* ── Progress bar (logged-in users) ── */
.awards-progress {
margin-top: 1.25rem;
padding-top: 1rem;
border-top: 1px solid var(--clr-surface-10);
}
.awards-progress-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
.awards-progress-label {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.75rem;
color: var(--clr-primary);
}
.awards-progress-text {
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-surface-40);
}
.awards-progress-track {
height: 4px;
background: var(--clr-surface-10);
border-radius: 2px;
overflow: hidden;
}
.awards-progress-bar {
height: 100%;
background: var(--clr-primary);
border-radius: 2px;
transition: width 0.4s ease;
}
/* ── Sidebar progress bar (user pages) ── */
.award-progress-sidebar {
position: relative;
margin-top: 0.75rem;
padding: 0.6rem 0.75rem;
background: color-mix(in oklab, var(--clr-primary) 6%, var(--clr-surface-5));
border: 1px solid color-mix(in oklab, var(--clr-primary) 25%, transparent);
border-radius: 6px;
transition: border-color 0.15s, box-shadow 0.15s;
&:hover {
border-color: color-mix(in oklab, var(--clr-primary) 45%, transparent);
box-shadow: 0 0 8px color-mix(in oklab, var(--clr-primary) 15%, transparent);
}
.stretched-link::after {
content: "";
position: absolute;
inset: 0;
}
}
/* ── Section headings ── */
.awards-section {
margin-top: 2rem;
&:first-child {
margin-top: 0;
}
> h2 {
font-size: 1.25rem;
font-weight: 700;
color: var(--clr-primary);
margin: 0 0 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
}
/* ── Leveled Award Cards ── */
.awards-catalog {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
.award-card {
background: var(--clr-surface-tonal);
border: 1px solid var(--clr-surface-10);
border-radius: 6px;
padding: 1.25rem;
}
.award-card-header h3 {
font-family: "Fondamento", cursive;
font-size: 1.2rem;
margin: 0 0 0.4rem;
color: var(--clr-light);
}
.award-card-desc {
font-size: 1.15rem;
color: var(--clr-secondary-20);
line-height: 1.5;
margin: 0 0 1rem;
}
.award-card-levels {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
/* ── Level Tiles ── */
.award-level-tile {
--_award-accent: var(--clr-surface-30);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 0.75rem 0.5rem;
background:
linear-gradient(
135deg,
color-mix(in oklab, var(--_award-accent) 20%, transparent) 0%,
color-mix(in oklab, var(--_award-accent) 4%, transparent) 40%,
color-mix(in oklab, var(--_award-accent) 12%, transparent) 60%,
color-mix(in oklab, var(--_award-accent) 6%, transparent) 100%
),
var(--clr-surface-tonal);
border: 1px solid color-mix(in oklab, var(--_award-accent) 55%, transparent);
border-radius: 4px;
text-align: center;
transition: border-color 0.15s, box-shadow 0.15s;
box-shadow: 0 0 6px color-mix(in oklab, var(--_award-accent) 30%, transparent);
&:hover {
border-color: color-mix(in oklab, var(--_award-accent) 75%, transparent);
box-shadow: 0 0 10px color-mix(in oklab, var(--_award-accent) 45%, transparent);
}
}
.award-level-tile--lvl-1 { --_award-accent: #CD7F32; }
.award-level-tile--lvl-2 { --_award-accent: #C0C0C0; }
.award-level-tile--lvl-3 { --_award-accent: #FFD700; }
.award-level-icon {
height: 3.5rem;
display: flex;
align-items: center;
img {
height: 100%;
width: auto;
}
}
.award-level-rarity {
font-size: 0.75rem;
font-weight: 700;
color: var(--clr-secondary-30);
}
.award-level-desc {
font-size: 0.8rem;
color: var(--clr-secondary-30);
line-height: 1.4;
}
/* ── Earned / Locked states (leveled) ── */
.award-level-tile--earned {
position: relative;
border-width: 2px;
border-color: color-mix(in oklab, var(--_award-accent) 85%, transparent);
box-shadow:
0 0 12px color-mix(in oklab, var(--_award-accent) 50%, transparent),
inset 0 0 12px color-mix(in oklab, var(--_award-accent) 10%, transparent);
&::after {
content: "\f00c";
font-family: "Font Awesome 7 Free";
font-weight: 900;
position: absolute;
top: 0.3rem;
right: 0.3rem;
font-size: 1.15rem;
color: var(--_award-accent);
filter: drop-shadow(0 0 3px var(--_award-accent));
}
}
.award-level-tile--locked {
border-color: transparent;
box-shadow: none;
}
/* ── Earn count badge ── */
.award-earn-count {
position: absolute;
top: 0.25rem;
left: 0.25rem;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
color: var(--clr-light);
background: color-mix(in oklab, var(--_award-accent) 40%, var(--clr-surface));
padding: 0.15rem 0.35rem;
border-radius: 3px;
}
/* ── Special Award Cards ── */
.awards-specials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.award-special-card {
--_award-accent: #b0e0ff;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background:
linear-gradient(
135deg,
color-mix(in oklab, var(--_award-accent) 12%, transparent) 0%,
color-mix(in oklab, var(--_award-accent) 3%, transparent) 40%,
color-mix(in oklab, var(--_award-accent) 8%, transparent) 60%,
color-mix(in oklab, var(--_award-accent) 4%, transparent) 100%
),
var(--clr-surface-tonal);
border: 1px solid color-mix(in oklab, var(--_award-accent) 40%, transparent);
border-radius: 6px;
animation: award-glow-pulse 2s ease-in-out infinite;
}
.award-special-icon {
flex-shrink: 0;
height: 3rem;
display: flex;
align-items: center;
img {
height: 100%;
width: auto;
}
}
.award-special-body {
flex: 1;
min-width: 0;
h3 {
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.2rem;
color: var(--clr-light);
}
p {
font-size: 0.85rem;
color: var(--clr-secondary-20);
margin: 0;
line-height: 1.4;
}
}
.award-special-rarity {
flex-shrink: 0;
font-size: 0.8rem;
font-weight: 700;
color: color-mix(in oklab, var(--_award-accent) 70%, var(--clr-light));
background: color-mix(in oklab, var(--_award-accent) 15%, transparent);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}
/* ── Earned / Locked states (special) ── */
.award-special-card--earned {
position: relative;
border-width: 2px;
border-color: color-mix(in oklab, var(--_award-accent) 75%, transparent);
box-shadow: 0 0 14px color-mix(in oklab, var(--_award-accent) 45%, transparent);
&::after {
content: "\f00c";
font-family: "Font Awesome 7 Free";
font-weight: 900;
position: absolute;
top: 0.4rem;
right: 0.5rem;
font-size: 1.15rem;
color: var(--_award-accent);
filter: drop-shadow(0 0 3px var(--_award-accent));
}
}
.award-special-card--locked {
border-color: transparent;
box-shadow: none;
animation: none;
}
/* ── Responsive ── */
@media (max-width: 68rem) {
.awards-catalog {
grid-template-columns: 1fr;
}
.awards-specials {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 40rem) {
.award-card-levels {
grid-template-columns: 1fr;
}
.awards-specials {
grid-template-columns: 1fr;
}
}
.announcement-editor {
max-width: 64rem;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
& .ae-form {
display: flex;
flex-direction: column;
gap: .75rem;
padding: 1.25rem;
& .ae-form-row {
display: grid;
grid-template-columns: calc(12rem - 1.25rem) 1fr;
align-items: center;
gap: 1rem;
& label {
font-size: .85rem;
color: var(--clr-surface-40);
text-align: end;
}
}
& .ae-form-row-pair {
display: grid;
grid-template-columns: calc(12rem - 1.25rem) 1fr 1fr;
align-items: center;
gap: 1rem;
& label {
font-size: .85rem;
color: var(--clr-surface-40);
text-align: end;
}
}
& .ae-toggle-group {
display: flex;
gap: 0;
& .ae-toggle-btn {
flex: 1;
padding: .45rem .75rem;
font-size: .85rem;
font-weight: 500;
background: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
color: var(--clr-surface-40);
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
&:not(:first-child) {
border-left: 0;
}
&:hover {
background: var(--clr-surface-10);
color: var(--clr-light);
}
&.is-active {
background: var(--clr-primary);
color: var(--clr-dark);
border-color: var(--clr-primary);
font-weight: 600;
+ .ae-toggle-btn {
border-left-color: var(--clr-primary);
}
}
}
}
& .ae-field {
display: flex;
flex-direction: column;
gap: .25rem;
& input, & .ae-toggle-group { width: 100%; }
&.has-error {
& input {
border-color: var(--clr-danger);
}
& .ae-toggle-btn {
border-color: var(--clr-danger);
}
}
}
& .ae-field-error {
font-size: .8rem;
color: var(--clr-danger);
}
@media (width < 48rem) {
& .ae-form-row {
grid-template-columns: 1fr;
& label { text-align: start; }
}
& .ae-form-row-pair {
grid-template-columns: 1fr;
& label { text-align: start; }
}
}
}
& .ae-layout {
display: grid;
grid-template-columns: 12rem 1fr;
gap: 1rem;
min-height: 28rem;
@media (width < 48rem) {
grid-template-columns: 1fr;
min-height: auto;
}
}
& .ae-sections {
display: flex;
flex-direction: column;
gap: .25rem;
& .ae-sections-header {
padding: .5rem .75rem;
color: var(--clr-surface-40);
font-size: .85rem;
}
& .ae-section-tab {
display: flex;
align-items: center;
gap: .5rem;
padding: .5rem .75rem;
border-radius: .375rem;
cursor: pointer;
transition: background .15s;
&:hover {
background: var(--clr-surface-5);
}
&.is-active {
background: var(--clr-surface-10);
color: var(--clr-primary);
}
& .ae-section-name-input {
flex: 1;
min-width: 0;
padding: .2rem .4rem;
font-size: inherit;
}
& .ae-section-delete {
background: none;
border: none;
color: var(--clr-surface-30);
cursor: pointer;
padding: .2rem;
line-height: 1;
&:hover {
color: var(--clr-danger);
}
}
}
& .ae-section-add {
display: flex;
align-items: center;
gap: .4rem;
padding: .5rem .75rem;
background: none;
border: 1px dashed var(--clr-surface-20);
border-radius: .375rem;
color: var(--clr-surface-30);
cursor: pointer;
font-size: inherit;
margin-top: .25rem;
&:hover {
border-color: var(--clr-primary);
color: var(--clr-primary);
}
}
}
& .ae-main {
display: flex;
flex-direction: column;
background: var(--clr-surface-5);
border-radius: .5rem;
overflow: hidden;
}
& .ae-toolbar {
display: flex;
flex-wrap: wrap;
gap: .25rem;
padding: .5rem;
background: var(--clr-surface-10);
border-bottom: 1px solid var(--clr-surface-20);
& .ae-toolbar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: none;
border: none;
border-radius: .25rem;
color: var(--clr-surface-40);
cursor: pointer;
font-size: .875rem;
&:hover {
background: var(--clr-surface-20);
color: var(--clr-light);
}
&.is-active {
background: var(--clr-primary);
color: var(--clr-dark);
}
}
& .ae-toolbar-sep {
width: 1px;
align-self: stretch;
margin: .25rem .125rem;
background: var(--clr-surface-20);
}
}
& .ae-popover {
display: flex;
align-items: center;
gap: .5rem;
padding: .4rem .75rem;
background: var(--clr-surface);
border-bottom: 1px solid var(--clr-surface-20);
& .ae-popover-icon {
color: var(--clr-surface-30);
font-size: .875rem;
flex-shrink: 0;
}
& .ae-popover-input {
flex: 1;
min-width: 0;
padding: .3rem .5rem;
font-size: .875rem;
}
& .ae-popover-btn {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: .3rem .6rem;
border: none;
border-radius: .25rem;
cursor: pointer;
font-size: .8rem;
white-space: nowrap;
&:disabled {
opacity: .4;
cursor: default;
}
}
& .ae-popover-apply {
background: var(--clr-primary);
color: var(--clr-dark);
&:hover:not(:disabled) {
filter: brightness(1.1);
}
}
& .ae-popover-remove {
background: var(--clr-danger);
color: var(--clr-light);
&:hover {
filter: brightness(1.1);
}
}
& .ae-popover-close {
background: none;
color: var(--clr-surface-30);
&:hover {
color: var(--clr-light);
}
}
}
& .ae-editor-area {
display: flex;
flex-direction: column;
flex: 1;
min-height: 20rem;
& .tiptap {
flex: 1;
padding: 1rem;
outline: none;
color: var(--clr-light);
&:focus {
box-shadow: inset 0 0 0 2px var(--clr-primary-30);
}
& > *:first-child {
margin-top: 0;
}
& h2, & h3 {
color: var(--clr-primary);
margin-top: 1.5em;
margin-bottom: .5em;
}
& p {
margin: .75em 0;
}
& img {
max-width: 100%;
border-radius: .375rem;
margin: .5em 0;
}
& blockquote {
border-left: 3px solid var(--clr-primary);
padding-left: 1rem;
margin-left: 0;
color: var(--clr-surface-40);
}
& ul, & ol {
padding-left: 1.5rem;
}
& a {
color: var(--clr-primary);
text-decoration: underline;
}
& hr {
border: none;
border-top: 1px solid var(--clr-surface-20);
margin: 1.5em 0;
}
& iframe {
max-width: 100%;
border-radius: .375rem;
margin: .5em 0;
}
& div[data-youtube-video] {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
& iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
}
& .mention {
text-decoration: none;
}
& p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: var(--clr-surface-20);
pointer-events: none;
height: 0;
}
}
}
& .ae-save {
display: flex;
justify-content: flex-end;
}
}
/* Mention popup — appended to body, outside .announcement-editor */
.ae-mention-popup {
position: fixed;
z-index: 1000;
background: var(--clr-surface);
border: 1px solid var(--clr-surface-20);
border-radius: .5rem;
padding: .25rem;
min-width: 14rem;
max-height: 20rem;
overflow-y: auto;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
& .ae-mention-empty,
& .ae-mention-loading {
padding: .5rem .75rem;
color: var(--clr-surface-30);
font-size: .875rem;
}
& .ae-mention-item {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: .4rem .6rem;
border: none;
border-radius: .375rem;
background: none;
color: var(--clr-light);
cursor: pointer;
font-size: .875rem;
text-align: left;
&:hover, &.is-selected {
background: var(--clr-surface-10);
}
&.is-selected {
color: var(--clr-primary);
}
}
& .ae-mention-flag {
height: 1rem;
aspect-ratio: 4/3;
flex-shrink: 0;
}
& .ae-mention-avatar {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
& .ae-mention-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Bubble menu — positioned by tiptap/tippy */
.ae-bubble-menu {
display: flex;
gap: .125rem;
padding: .25rem;
background: var(--clr-surface);
border: 1px solid var(--clr-surface-20);
border-radius: .375rem;
box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
& .ae-bubble-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
background: none;
border: none;
border-radius: .25rem;
color: var(--clr-surface-40);
cursor: pointer;
font-size: .8rem;
&:hover {
background: var(--clr-surface-10);
color: var(--clr-light);
}
&.is-active {
background: var(--clr-primary);
color: var(--clr-dark);
}
}
}
comment-section {
display: block;
margin-top: 1.5rem;
/* Ensure hidden attribute always works despite explicit display rules */
[hidden] { display: none !important; }
/* ── Header ── */
.cs-header {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 1.25rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.cs-count {
font-size: 1rem;
font-weight: 400;
color: var(--clr-secondary-40);
&::before { content: "("; }
&::after { content: ")"; }
}
/* ── Loading ── */
.cs-loading {
color: var(--clr-secondary-30);
padding: 2rem 0;
text-align: center;
}
/* ── Login hint ── */
.cs-login-hint {
color: var(--clr-secondary-30);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
background: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
border-radius: 4px;
a {
color: var(--clr-primary);
font-weight: 600;
&:hover {
text-decoration: underline;
}
}
}
/* ── Comment form ── */
.cs-form {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 2rem;
}
.cs-form-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* ── Comment list ── */
.cs-comments {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* ── Single comment ── */
.cs-comment {
display: grid;
grid-template-columns: 2.5rem 1fr;
gap: 0.75rem;
padding: 1rem 0;
border-bottom: 1px solid var(--clr-surface-10);
&:first-child {
padding-top: 0;
}
&:last-child {
border-bottom: none;
}
}
.cs-avatar {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
object-fit: cover;
background-color: var(--clr-surface-10);
flex-shrink: 0;
}
.cs-avatar-placeholder {
display: block;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: var(--clr-surface-20);
flex-shrink: 0;
}
.cs-comment-body {
min-width: 0;
}
.cs-comment-meta {
display: flex;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.3rem;
}
.cs-author {
font-weight: 600;
color: var(--clr-primary);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.cs-comment-meta time {
font-size: 0.85rem;
color: var(--clr-secondary-40);
}
.cs-comment-content {
line-height: 1.6;
overflow-wrap: break-word;
color: var(--clr-secondary-5);
p {
margin: 0 0 0.4rem;
&:last-child {
margin-bottom: 0;
}
}
img {
max-width: 100%;
height: auto;
border-radius: 4px;
margin-top: 0.5rem;
}
}
/* ── Actions row ── */
.cs-comment-actions {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.5rem;
}
.cs-reply-btn {
background: none;
border: none;
padding: 0.2rem 0.4rem;
font-size: 0.85rem;
color: var(--clr-secondary-30);
cursor: pointer;
&:hover {
background: none;
color: var(--clr-primary);
}
}
/* ── Reactions ── */
.cs-reactions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
position: relative;
}
.cs-reaction {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.55rem;
font-size: 0.85rem;
background: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
color: var(--clr-secondary-20);
cursor: pointer;
border-radius: 1rem;
transition: background-color 0.15s ease, border-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-10);
border-color: var(--clr-surface-30);
}
&.is-active {
border-color: transparent;
background-color: color-mix(in oklab, var(--clr-primary) 12%, var(--clr-surface));
box-shadow: 0 0 0 1px color-mix(in oklab, var(--clr-primary) 50%, transparent),
0 0 6px color-mix(in oklab, var(--clr-primary) 35%, transparent);
}
}
.cs-reaction-add {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.15rem 0.55rem;
font-size: 0.85rem;
background: var(--clr-surface-20);
border: 1px solid var(--clr-surface-30);
color: var(--clr-secondary-10);
cursor: pointer;
border-radius: 1rem;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
span { font-size: 0.75rem; }
&:hover {
background-color: var(--clr-surface-30);
border-color: var(--clr-primary);
color: var(--clr-primary);
}
}
/* ── Reaction picker ── */
.cs-reaction-picker {
position: absolute;
bottom: calc(100% + 0.35rem);
left: 0;
display: flex;
gap: 0.15rem;
padding: 0.4rem;
background: var(--clr-surface);
border: 1px solid var(--clr-surface-20);
border-radius: 0.5rem;
box-shadow: 0 4px 16px rgb(0 0 0 / 0.5);
z-index: 10;
}
.cs-reaction-picker-item {
font-size: 1.25rem;
padding: 0.3rem 0.4rem;
background: none;
border: none;
cursor: pointer;
border-radius: 0.25rem;
line-height: 1;
&:hover {
background-color: var(--clr-surface-20);
transform: scale(1.2);
}
}
/* ── Replies ── */
.cs-replies {
margin-top: 0.75rem;
padding-left: 0.75rem;
border-left: 2px solid var(--clr-surface-20);
}
.cs-replies-list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.cs-replies-show-all,
.cs-replies-more {
margin-top: 0.25rem;
font-size: 0.85rem;
background: none;
border: none;
color: var(--clr-primary);
cursor: pointer;
padding: 0.25rem 0;
&:hover {
background: none;
text-decoration: underline;
}
}
/* Replies: smaller avatars, tighter spacing */
.cs-comment-reply {
grid-template-columns: 2rem 1fr;
padding: 0.75rem 0;
.cs-avatar,
.cs-avatar-placeholder {
width: 2rem;
height: 2rem;
}
}
/* ── Reply form ── */
.cs-reply-form {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.75rem;
.cs-form-actions {
display: flex;
justify-content: flex-end;
gap: 0.4rem;
button {
font-size: 0.85rem;
padding: 0.35rem 1rem;
}
}
.cs-editor-wrap {
.tiptap {
min-height: 3rem;
font-size: 0.9rem;
}
}
}
/* ── Editor ── */
.cs-editor-wrap {
border: 1px solid var(--clr-surface-20);
border-radius: 0.375rem;
background: var(--clr-surface-5);
overflow: hidden;
.cs-toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.2rem;
padding: 0.35rem 0.4rem;
background: var(--clr-surface-10);
border-bottom: 1px solid var(--clr-surface-20);
}
.cs-toolbar-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
background: none;
border: none;
border-radius: 0.25rem;
color: var(--clr-surface-40);
cursor: pointer;
font-size: 0.8rem;
&:hover {
background: var(--clr-surface-20);
color: var(--clr-light);
}
&.is-active {
background: var(--clr-primary);
color: var(--clr-dark);
}
}
.cs-link-input {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.5rem;
background: var(--clr-surface);
border-bottom: 1px solid var(--clr-surface-20);
input {
flex: 1;
min-width: 0;
padding: 0.25rem 0.4rem;
font-size: 0.8rem;
}
button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border: none;
border-radius: 0.25rem;
cursor: pointer;
font-size: 0.7rem;
}
.cs-link-apply {
background: var(--clr-primary);
color: var(--clr-dark);
&:hover {
filter: brightness(1.1);
}
}
.cs-link-remove {
background: var(--clr-danger);
color: var(--clr-light);
&:hover {
filter: brightness(1.1);
}
}
}
.tiptap {
padding: 0.6rem 0.75rem;
min-height: 5rem;
outline: none;
color: var(--clr-light);
&:focus {
box-shadow: inset 0 0 0 2px var(--clr-primary-30);
}
& > *:first-child {
margin-top: 0;
}
p {
margin: 0.4em 0;
}
ul, ol {
padding-left: 1.25rem;
}
a {
color: var(--clr-primary);
text-decoration: underline;
}
.mention {
text-decoration: none;
}
p.is-editor-empty:first-child::before {
content: attr(data-placeholder);
float: left;
color: var(--clr-surface-20);
pointer-events: none;
height: 0;
}
}
}
/* ── Load more ── */
.cs-load-more {
margin-top: 1.25rem;
width: 100%;
}
/* ── Empty state ── */
.cs-comments:empty + .cs-load-more {
display: none;
}
/* ── Responsive ── */
@media (max-width: 30rem) {
.cs-comment {
grid-template-columns: 2rem 1fr;
gap: 0.5rem;
}
.cs-avatar,
.cs-avatar-placeholder {
width: 2rem;
height: 2rem;
}
.cs-comment-reply {
grid-template-columns: 1.5rem 1fr;
.cs-avatar,
.cs-avatar-placeholder {
width: 1.5rem;
height: 1.5rem;
}
}
.cs-replies {
padding-left: 0.5rem;
}
}
}
reaction-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem;
position: relative;
.rb-reaction {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.15rem 0.55rem;
font-size: 0.85rem;
background: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
color: var(--clr-secondary-20);
cursor: pointer;
border-radius: 1rem;
transition: background-color 0.15s ease, border-color 0.15s ease;
&:hover {
background-color: var(--clr-surface-10);
border-color: var(--clr-surface-30);
}
&.is-active {
border-color: transparent;
background-color: color-mix(in oklab, var(--clr-primary) 12%, var(--clr-surface));
box-shadow: 0 0 0 1px color-mix(in oklab, var(--clr-primary) 50%, transparent),
0 0 6px color-mix(in oklab, var(--clr-primary) 35%, transparent);
}
}
.rb-reaction-add {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.15rem 0.55rem;
font-size: 0.85rem;
background: var(--clr-surface-20);
border: 1px solid var(--clr-surface-30);
color: var(--clr-secondary-10);
cursor: pointer;
border-radius: 1rem;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
span { font-size: 0.75rem; }
&:hover {
background-color: var(--clr-surface-30);
border-color: var(--clr-primary);
color: var(--clr-primary);
}
}
.rb-picker {
position: absolute;
bottom: calc(100% + 0.35rem);
right: 0;
display: flex;
gap: 0.15rem;
padding: 0.4rem;
background: var(--clr-surface);
border: 1px solid var(--clr-surface-20);
border-radius: 0.5rem;
box-shadow: 0 4px 16px rgb(0 0 0 / 0.5);
z-index: 10;
}
.rb-picker-item {
font-size: 1.25rem;
padding: 0.3rem 0.4rem;
background: none;
border: none;
cursor: pointer;
border-radius: 0.25rem;
line-height: 1;
&:hover {
background-color: var(--clr-surface-20);
transform: scale(1.2);
}
}
}
.nightbot-page {
max-width: 52rem;
margin: 0 auto;
line-height: 1.7;
a {
color: var(--clr-primary);
}
}
.nb-intro {
display: flex;
gap: 1.5rem;
align-items: flex-start;
.nb-logo {
height: 10rem;
width: auto;
flex-shrink: 0;
}
p {
margin: 0 0 0.5rem;
}
@media (max-width: 36rem) {
flex-direction: column;
align-items: center;
.nb-logo {
height: 7rem;
}
}
}
nightbot-command {
display: block;
}
.nb-heading {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.25rem;
margin: 0 0 0.75rem;
code {
font-size: inherit;
}
.nb-anchor {
color: var(--clr-surface-30);
font-size: 0.85rem;
text-decoration: none;
&:hover {
color: var(--clr-primary);
}
}
}
.nb-form {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.4rem 1rem;
align-items: center;
margin-bottom: 1.25rem;
> label {
color: var(--clr-secondary-20);
white-space: nowrap;
}
> input,
> select {
max-width: 16rem;
}
> small {
grid-column: 2;
color: var(--clr-surface-40);
margin-top: -0.25rem;
}
@media (max-width: 36rem) {
grid-template-columns: 1fr;
> input,
> select {
max-width: 100%;
}
> small {
grid-column: 1;
}
}
}
.nb-code-block {
position: relative;
background: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
padding: 1rem;
padding-right: 5rem;
margin-bottom: 1rem;
overflow-x: auto;
.nb-output {
word-break: break-all;
color: var(--clr-light);
}
.nb-copy {
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0.8rem;
padding: 0.3rem 0.7rem;
}
}
.nb-example-chat {
background: var(--clr-surface-5);
border: 1px solid var(--clr-surface-20);
padding: 0.75rem 1rem;
margin-top: 0.5rem;
line-height: 1.8;
code {
color: var(--clr-light);
}
}
.nb-user {
color: rgb(182, 66, 24);
}
.nb-bot {
color: rgb(94, 97, 195);
}
/* ── Base Dialog ── */
.a2i-dialog {
max-width: 60rem;
width: calc(100% - 2rem);
padding: 0;
border: 1px solid var(--clr-surface-20);
background-color: var(--clr-surface);
color: var(--clr-light);
&[open] {
display: flex;
flex-direction: column;
}
&::backdrop {
background: rgba(0, 0, 0, 0.6);
}
}
.a2i-dialog--sm {
max-width: 28rem;
height: auto;
max-height: min(32rem, 85vh);
}
.a2i-dialog-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--clr-surface-20);
flex-shrink: 0;
}
.a2i-dialog-title {
font-size: 1.1rem;
font-weight: 600;
}
.a2i-dialog-body {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--clr-surface-20) transparent;
}
.a2i-dialog-footer {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--clr-surface-10);
flex-shrink: 0;
}
.a2i-dialog-close {
background: none;
border: none;
color: var(--clr-surface-40);
font-size: 1.25rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
&:hover { color: var(--clr-light); }
}
/* ── Fetch Dialog variant ── */
.a2i-dialog--fetch {
height: 85vh;
}
/* ── Confirm Dialog variant ── */
.a2i-dialog--confirm {
.a2i-dialog-title > i {
color: var(--clr-danger);
font-size: 1.2rem;
}
.a2i-dialog-header {
gap: 0.5rem;
}
.a2i-dialog-body > p {
margin: 0 0 1.25rem;
line-height: 1.6;
color: var(--clr-secondary-20);
}
.confirm-challenge {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--clr-surface-40);
> input {
width: 100%;
font-size: 1rem;
}
}
}
:root {
--clr-dark: #000000;
--clr-light: #ffffff;
--clr-primary: #d58a25;
--clr-primary-5: color-mix(in oklab, var(--clr-primary) 94%, var(--clr-light));
--clr-primary-10: color-mix(in oklab, var(--clr-primary) 88%, var(--clr-light));
--clr-primary-20: color-mix(in oklab, var(--clr-primary) 78%, var(--clr-light));
--clr-primary-30: color-mix(in oklab, var(--clr-primary) 66%, var(--clr-light));
--clr-primary-40: color-mix(in oklab, var(--clr-primary) 52%, var(--clr-light));
--clr-primary-50: color-mix(in oklab, var(--clr-primary) 36%, var(--clr-light));
--clr-secondary: color-mix(in oklab, var(--clr-light) 88%, var(--clr-primary));
--clr-secondary-5: color-mix(in oklab, var(--clr-secondary) 94%, var(--clr-dark));
--clr-secondary-10: color-mix(in oklab, var(--clr-secondary) 88%, var(--clr-dark));
--clr-secondary-20: color-mix(in oklab, var(--clr-secondary) 78%, var(--clr-dark));
--clr-secondary-30: color-mix(in oklab, var(--clr-secondary) 66%, var(--clr-dark));
--clr-secondary-40: color-mix(in oklab, var(--clr-secondary) 52%, var(--clr-dark));
--clr-secondary-50: color-mix(in oklab, var(--clr-secondary) 36%, var(--clr-dark));
--clr-surface: #191c23;
--clr-surface-5: color-mix(in oklab, var(--clr-surface) 94%, var(--clr-light));
--clr-surface-10: color-mix(in oklab, var(--clr-surface) 88%, var(--clr-light));
--clr-surface-20: color-mix(in oklab, var(--clr-surface) 78%, var(--clr-light));
--clr-surface-30: color-mix(in oklab, var(--clr-surface) 66%, var(--clr-light));
--clr-surface-40: color-mix(in oklab, var(--clr-surface) 52%, var(--clr-light));
--clr-surface-50: color-mix(in oklab, var(--clr-surface) 36%, var(--clr-light));
--clr-surface-tonal: color-mix(in oklab, color-mix(in oklab, var(--clr-surface) 86.8%, var(--clr-primary)) 92%, var(--clr-dark));
--clr-surface-tonal-5: color-mix(in oklab, var(--clr-surface-tonal) 94%, var(--clr-light));
--clr-surface-tonal-10: color-mix(in oklab, var(--clr-surface-tonal) 88%, var(--clr-light));
--clr-surface-tonal-20: color-mix(in oklab, var(--clr-surface-tonal) 78%, var(--clr-light));
--clr-surface-tonal-30: color-mix(in oklab, var(--clr-surface-tonal) 66%, var(--clr-light));
--clr-surface-tonal-40: color-mix(in oklab, var(--clr-surface-tonal) 52%, var(--clr-light));
--clr-surface-tonal-50: color-mix(in oklab, var(--clr-surface-tonal) 36%, var(--clr-light));
--clr-success: #22946e;
--clr-success-10: color-mix(in oklab, var(--clr-success) 88%, var(--clr-light));
--clr-success-20: color-mix(in oklab, var(--clr-success) 78%, var(--clr-light));
--clr-warning: #a87a2a;
--clr-warning-10: color-mix(in oklab, var(--clr-warning) 88%, var(--clr-light));
--clr-warning-20: color-mix(in oklab, var(--clr-warning) 78%, var(--clr-light));
--clr-danger: #9c2121;
--clr-danger-10: color-mix(in oklab, var(--clr-danger) 88%, var(--clr-light));
--clr-danger-20: color-mix(in oklab, var(--clr-danger) 78%, var(--clr-light));
--clr-info: #21498a;
--clr-info-10: color-mix(in oklab, var(--clr-info) 88%, var(--clr-light));
--clr-info-20: color-mix(in oklab, var(--clr-info) 78%, var(--clr-light));
--content-sidebar-width: clamp(14rem, 20.8vw, 25rem);
--content-single-max-width: 110rem;
--content-gap: 1rem;
--content-margin-inline: 2rem;
}
/* ── Utilities ─────────────────────────────────────────────────────────────
Defined last so they win load-order tiebreakers against scoped component
rules with equal specificity.
─────────────────────────────────────────────────────────────────────── */
/* Semantic numeric column — always right-aligned */
th.num, td.num { text-align: end; }
/* ── Ad Placements ── */
ad-placement {
display: block;
&[placement="billboard"] { height: 300px; }
&[placement="mpu"] { height: 250px; }
&[placement="double_mpu"] { height: 600px; }
&[placement="leaderboard"] { height: 90px; }
&[placement="mobile_banner"] { height: 100px; }
&[placement="video"] { height: auto; aspect-ratio: 16/9; }
/* Desktop-only placements */
&[placement="billboard"],
&[placement="leaderboard"] {
display: none;
@media (min-width: 68.01rem) { display: block; }
}
/* Mobile-only placements */
&[placement="mobile_banner"] {
@media (min-width: 68.01rem) { display: none; }
}
}