/* Stat Potato. Dense esports layout, light by default, with a "liquid glass" control layer.
Tokens first; every colour below comes from them. The palette is picked with
SITE_PALETTE (spike, neon, acid, gold), rendered as .
No JavaScript, no third-party assets (CSP).
Material rules: CONTENT (panels, tables, scoreboards, text) is solid so it stays
legible. CONTROLS that float above content (sticky nav, segmented tabs, the map
row, buttons, pills, highlight cards) are glass: a translucent fill, a backdrop
blur, a 1px inner highlight and a soft neutral shadow. Nothing glows. */
/* Barlow Condensed (SIL OFL 1.1, see fonts/OFL-barlow-condensed.txt), self-hosted. */
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap;
src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap;
src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
/* ── palettes: dark (opt-in: ) ─────────────────────── */
:root[data-theme="dark"], :root[data-theme="dark"][data-palette="spike"] {
--bg: #0f1923; --bg-2: #0b131b; --panel: #16222e; --panel-2: #1d2b39;
--line: #263748; --line-2: #31455a;
--text: #ece8e1; --text-2: #b8c0c8; --text-3: #8e9aa6;
--accent: #ff4655; --accent-ink: #0f1923; --accent-soft: rgba(255, 70, 85, .14);
--live: #ff4655; --win: #ffffff; --link: #ff7a85; --good: #3ecf8e;
--team-a: #ff4655; --team-b: #3dd6c6;
}
:root[data-theme="dark"][data-palette="neon"] {
--bg: #0b0d17; --bg-2: #080a12; --panel: #12152a; --panel-2: #191d37; --line: #262b4c; --line-2: #333a66;
--text: #e8eaf6; --text-2: #aeb3d3; --text-3: #8a90b6;
--accent: #22d3ee; --accent-ink: #04121a; --accent-soft: rgba(34, 211, 238, .13);
--live: #f43f5e; --win: #ffffff; --link: #67e8f9; --good: #3ecf8e;
--team-a: #22d3ee; --team-b: #f472b6;
}
:root[data-theme="dark"][data-palette="acid"] {
--bg: #0f1011; --bg-2: #0a0b0c; --panel: #17191b; --panel-2: #1f2225; --line: #292d31; --line-2: #383d43;
--text: #f2f4f3; --text-2: #bcc3c0; --text-3: #939b97;
--accent: #c6f432; --accent-ink: #0f1011; --accent-soft: rgba(198, 244, 50, .12);
--live: #ff5a36; --win: #ffffff; --link: #d9ff6b; --good: #3ecf8e;
--team-a: #c6f432; --team-b: #a78bfa;
}
:root[data-theme="dark"][data-palette="gold"] {
--bg: #0d1015; --bg-2: #090b0f; --panel: #151a21; --panel-2: #1c222b; --line: #262e38; --line-2: #343e4b;
--text: #eef1f5; --text-2: #b6bfcb; --text-3: #8e99a7;
--accent: #f5b83d; --accent-ink: #1a1206; --accent-soft: rgba(245, 184, 61, .13);
--live: #ef4444; --win: #ffffff; --link: #fbd07a; --good: #3ecf8e;
--team-a: #f5b83d; --team-b: #60a5fa;
}
/* ── palettes: light (default) ───────────────────────────────────────────── */
:root, :root[data-palette="spike"] {
/* calm neutrals (Apple-like): near-white page, white surfaces, hairlines, one blue accent */
/* a soft grey page so the white cards stand out (owner: "too white" on #f5f5f7) */
--bg: #e9e9ee; --bg-2: #dedee4; --panel: #ffffff; --panel-2: #f2f2f5; --line: #e5e5ea; --line-2: #d2d2d7;
--text: #1d1d1f; --text-2: #424245; --text-3: #6e6e73;
--accent: #0071e3; --accent-ink: #ffffff; --accent-soft: rgba(0, 113, 227, .1);
--live: #ff3b30; --win: #1d1d1f; --link: #0066cc; --good: #248a3d; --bad: #d70015;
--team-a: #0071e3; --team-b: #f56300;
}
:root[data-palette="neon"] {
--bg: #eef1f8; --bg-2: #e4e8f2; --panel: #ffffff; --panel-2: #f4f6fb; --line: #d9deec; --line-2: #c3cadf;
--text: #0b0d17; --text-2: #3a4063; --text-3: #585f85;
--accent: #0e7490; --accent-ink: #ffffff; --accent-soft: rgba(14, 116, 144, .1);
--live: #e11d48; --win: #0b0d17; --link: #0e7490; --good: #15803d;
--team-a: #0e7490; --team-b: #be185d;
}
:root[data-palette="acid"] {
--bg: #f1f3ee; --bg-2: #e7eae3; --panel: #ffffff; --panel-2: #f6f7f3; --line: #dadfd3; --line-2: #c5ccbd;
--text: #0f1011; --text-2: #3c423f; --text-3: #5a615d;
--accent: #0f1011; --accent-ink: #c6f432; --accent-soft: rgba(77, 124, 15, .12);
--live: #d9381e; --win: #0f1011; --link: #3f6212; --good: #15803d;
--team-a: #4d7c0f; --team-b: #7c3aed;
}
:root[data-palette="gold"] {
--bg: #f4f2ec; --bg-2: #ebe8e0; --panel: #ffffff; --panel-2: #f8f7f3; --line: #ded9cf; --line-2: #cac4b7;
--text: #121417; --text-2: #3f4650; --text-3: #5d6570;
--accent: #121417; --accent-ink: #f5b83d; --accent-soft: rgba(183, 121, 31, .12);
--live: #dc2626; --win: #121417; --link: #8a5a12; --good: #15803d;
--team-a: #b7791f; --team-b: #2563eb;
}
/* ── shared tokens: type, spacing, radii, depth, glass ────────────────────── */
:root {
/* the system face everywhere (SF Pro on Apple devices); numbers use tabular figures,
not a monospace face */
--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: var(--font);
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
/* concentric radii: an inner element's radius = the outer radius minus the padding */
--r: 12px; --r-lg: 18px; --r-sm: 8px; --r-round: 999px;
--ease: cubic-bezier(.23, 1, .32, 1);
/* plain neutral depth for solid content surfaces */
--shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 2px 12px rgba(0, 0, 0, .04);
--shadow-up: 0 4px 20px rgba(0, 0, 0, .08);
/* glass: fill, hover fill, the raised "lens" of a selected control, edges, depth, sheen */
--glass: rgba(255, 255, 255, .6); --glass-2: rgba(255, 255, 255, .78);
--glass-lens: rgba(255, 255, 255, .95);
--glass-hi: rgba(255, 255, 255, .75); --glass-hi-2: rgba(255, 255, 255, .95); --glass-lo: rgba(15, 25, 35, .14);
--glass-shadow: 0 8px 30px rgba(15, 25, 35, .12); --glass-shadow-sm: 0 4px 16px rgba(15, 25, 35, .1);
--glass-blur: blur(22px) saturate(170%);
--sheen: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 38%, transparent 62%);
--field-a: color-mix(in srgb, var(--team-a) 6%, transparent);
--field-b: color-mix(in srgb, var(--team-b) 5%, transparent);
color-scheme: light;
}
:root[data-theme="dark"] {
--shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px -18px rgba(0, 0, 0, .6);
--shadow-up: 0 14px 34px -16px rgba(0, 0, 0, .6);
--glass: color-mix(in srgb, var(--panel) 62%, transparent);
--glass-2: color-mix(in srgb, var(--panel-2) 74%, transparent);
--glass-lens: color-mix(in srgb, var(--text) 13%, color-mix(in srgb, var(--panel-2) 80%, transparent));
--glass-hi: rgba(255, 255, 255, .11);
--glass-hi-2: rgba(255, 255, 255, .18);
--glass-lo: rgba(0, 0, 0, .28);
--glass-shadow: 0 8px 30px rgba(0, 0, 0, .25);
--glass-shadow-sm: 0 4px 16px rgba(0, 0, 0, .22);
--sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 38%, transparent 62%);
--field-a: color-mix(in srgb, var(--team-a) 7%, transparent);
--field-b: color-mix(in srgb, var(--team-b) 6%, transparent);
color-scheme: dark;
}
/* ── base ─────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; background: var(--bg);
scrollbar-width: none; /* hidden bar; wheel, trackpad and keys still scroll */ }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
margin: 0; color: var(--text); background: transparent;
font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
/* footer sits at the bottom of the window on short pages */
min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
overflow-x: hidden;
}
/* The page background: a calm, deep gradient with two very soft colour fields in the
team hues, fixed to the viewport so the glass has something to refract. It is a
backdrop, not a halo: nothing radiates from any element. */
body::before { content: none; } /* a flat page: calm, and no band on long pages */
main { flex: 1 0 auto; min-width: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.skip { position: absolute; left: var(--s4); top: -60px; z-index: 20; background: var(--accent);
color: var(--accent-ink); padding: var(--s2) var(--s4); border-radius: var(--r); }
.skip:focus { top: var(--s2); }
.wrap { width: min(1180px, 100% - 2 * var(--s4)); margin-inline: auto; }
.wrap.narrow { width: min(760px, 100% - 2 * var(--s4)); }
.page { padding: var(--s5) 0 var(--s7); }
h1, h2, h3 { font-family: var(--font-head); color: var(--text); margin: 0 0 var(--s3);
letter-spacing: .01em; text-wrap: balance; }
h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.05; font-weight: 700; text-transform: uppercase; }
h2 { font-size: 22px; line-height: 1.2; font-weight: 700; }
h3 { font-size: 17px; line-height: 1.3; font-weight: 700; }
p { margin: 0 0 var(--s3); }
.muted { color: var(--text-2); }
.small { font-size: 13px; color: var(--text-3); }
.center { text-align: center; }
.empty { color: var(--text-3); padding: var(--s5) var(--s4); margin: 0; text-align: center; }
.kicker { font: 700 11px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.legend { margin: var(--s2) var(--s1) 0; line-height: 1.55; }
.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor;
opacity: .6; margin: 0 var(--s2); vertical-align: middle; }
/* ── glass material ───────────────────────────────────────────────────────
Applied to the floating layer only. Edges: a 1px translucent border, a brighter
inner top edge and a darker inner bottom edge; depth: one soft neutral shadow;
sheen: a faint top-edge gradient painted by ::before where the element has one
to spare. Content underneath stays solid, so glass never stacks on glass. */
.nav, .tabs, .btn-quiet, .hl, .pct, .tag-final, .mt {
background: var(--glass);
-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-hi);
box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 -1px 0 var(--glass-lo), var(--glass-shadow-sm);
}
.tabs::before, .btn-quiet::before, .hl::before, .btn-primary::before {
content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sheen);
pointer-events: none; z-index: 0; }
.tabs, .btn, .hl { position: relative; isolation: isolate; }
.tabs > *, .btn > *, .hl > * { position: relative; z-index: 1; }
/* ── nav ──────────────────────────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 10; border-width: 0 0 1px; border-radius: 0;
box-shadow: inset 0 1px 0 var(--glass-hi-2), 0 6px 24px -14px rgba(0, 0, 0, .45); }
.nav .wrap { display: flex; align-items: center; gap: var(--s3); height: 60px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text); text-decoration: none;
font: 700 20px/1 var(--font-head); letter-spacing: .03em; text-transform: uppercase; min-height: 44px;
transition: opacity .15s var(--ease); }
.wordmark:hover { opacity: .85; }
.wordmark img { width: 32px; }
.links { display: flex; align-items: center; gap: 2px; height: 100%; margin-right: auto; margin-left: var(--s2);
overflow-x: auto; scrollbar-width: none; min-width: 0; }
.links::-webkit-scrollbar { display: none; }
.links a { position: relative; display: flex; align-items: center; height: 36px; padding: 0 var(--s3);
border-radius: var(--r-round); color: var(--text-2); text-decoration: none;
font: 600 15px/1 var(--font-head); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
transition: color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease); }
.links a:hover { color: var(--text); background: var(--glass-2); }
.links a:active { transform: scale(.98); }
/* the current page is a raised lens */
.links a[aria-current] { color: var(--text); background: var(--glass-lens);
box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 0 0 1px var(--glass-hi), 0 2px 8px rgba(0, 0, 0, .18); }
.links a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 14px; height: 2px;
margin-left: -7px; border-radius: 1px; background: var(--accent); }
@media (max-width: 980px) { .links a { padding: 0 10px; font-size: 14px; letter-spacing: .05em; } }
@media (max-width: 640px) {
.nav .wrap { flex-wrap: wrap; height: auto; padding-top: var(--s2); padding-bottom: var(--s2); row-gap: var(--s1); }
/* phones: the seven links wrap into a second row of pills rather than clipping */
.links { order: 3; width: 100%; margin: 0; height: auto; flex-wrap: wrap; overflow: visible; row-gap: 2px;
padding-bottom: 2px; }
.links a { height: 34px; padding: 0 10px; font-size: 14px; }
.wordmark { margin-right: auto; }
}
/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
padding: 0 var(--s5); border-radius: var(--r-round); font: 700 15px/1 var(--font-head);
letter-spacing: .07em; text-transform: uppercase; text-decoration: none; overflow: hidden;
border: 1px solid transparent;
transition: transform .15s var(--ease), filter .15s var(--ease), background-color .15s var(--ease),
border-color .15s var(--ease), box-shadow .15s var(--ease); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: color-mix(in srgb, #fff 18%, var(--accent));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .18), var(--glass-shadow-sm); }
.btn-primary::before { opacity: .6; }
.btn-quiet { color: var(--text); }
.btn-quiet:hover { background: var(--glass-2); }
.btn-sm { min-height: 36px; padding: 0 var(--s4); font-size: 14px; }
button.btn { cursor: pointer; }
form { margin: 0 0 var(--s4); }
/* ── panels (solid content surfaces) ──────────────────────────────────────── */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
margin: 0 0 var(--s4); overflow: hidden; box-shadow: var(--shadow); }
.panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); margin: 0; }
.panel-h h2, h2.panel-h { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; margin: 0; color: var(--text); }
.panel-h h2 .logo { width: 20px; height: 20px; margin-right: var(--s2); vertical-align: -4px; }
.panel-h a { font-size: 13px; color: var(--text-3); text-decoration: none; transition: color .15s var(--ease); }
.panel-h a:hover { color: var(--text); }
.day { font: 700 11px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
background: color-mix(in srgb, var(--panel-2) 70%, var(--panel)); padding: 9px var(--s4); margin: 0;
border-bottom: 1px solid var(--line); }
.mlist + .day { border-top: 1px solid var(--line); }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--s3); margin-bottom: var(--s2); }
.page-head h1 { margin: 0; }
.page-head + .small { margin-bottom: var(--s4); }
/* segmented controls: a glass pill; the selected segment is a raised lens */
.tabs { display: inline-flex; border-radius: var(--r-round); padding: 4px; gap: 2px; max-width: 100%; }
.tabs a { padding: 8px var(--s4); border-radius: var(--r-round); color: var(--text-2); text-decoration: none;
font: 600 14px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
transition: color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease),
transform .15s var(--ease); }
.tabs a:hover { color: var(--text); background: var(--glass-2); }
.tabs a:active { transform: scale(.98); }
.tabs a[aria-current] { color: var(--text); background: var(--glass-lens);
box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, var(--glass-hi)),
0 2px 8px rgba(0, 0, 0, .2); }
/* home */
.hub { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 900px) { .hub { grid-template-columns: 1fr; } }
.featured { position: relative; border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.featured::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
.featured-h { display: block; padding: var(--s4) var(--s5) var(--s3); }
.featured-h .kicker { display: inline-flex; align-items: center; gap: 6px; }
.featured-h h2 { font-size: 26px; text-transform: none; letter-spacing: .01em; margin-top: var(--s1); }
@media (min-width: 901px) {
.featured .mlist { display: grid; grid-template-columns: 1fr 1fr; }
.featured .mlist li { border-top: 1px solid var(--line); }
.featured .mlist li:nth-child(-n+2) { border-top: 0; }
.featured .mlist li:nth-child(even) { border-left: 1px solid var(--line); }
}
/* ── match rows (VLR-style) ───────────────────────────────────────────────── */
.mlist { list-style: none; margin: 0; padding: 0; }
.mlist li + li { border-top: 1px solid var(--line); }
.mrow { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, .9fr) 92px;
align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); color: var(--text); text-decoration: none;
transition: background-color .15s var(--ease); }
.mrow:hover { background: color-mix(in srgb, var(--panel-2) 80%, var(--panel)); }
.mrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent;
transition: background-color .15s var(--ease); }
.mrow:hover::before { background: var(--line-2); }
.mrow.is-live::before, .mrow.is-live:hover::before { background: var(--live); }
.mtime { font: 600 14px/1 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mfinal { font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mteams { display: grid; gap: 7px; min-width: 0; }
.mteam { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text-2); font-weight: 600; }
.mteam.won { color: var(--win); }
.mrow-finished .mteam:not(.won) { color: var(--text-3); }
.mrow-finished .mteam:not(.won) .logo { opacity: .7; }
.tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tscore { font: 700 15px/1 var(--mono); min-width: 1.2em; text-align: right; font-variant-numeric: tabular-nums; }
.mteam.won .tscore { color: var(--accent); }
.mevent { display: grid; min-width: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.mevent .ev, .mevent .st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mevent .st { color: var(--text-3); }
.mfmt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--text-3);
text-align: right; white-space: nowrap; }
.fmt { font: 600 11px/1 var(--mono); letter-spacing: .04em; color: var(--text-3); }
/* model-estimate pill: glass, tinted only by the accent-coloured team tag */
.pct { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: var(--r-round);
font: 700 12px/1 var(--mono); color: var(--text); box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 -1px 0 var(--glass-lo); }
.pct-who { font: 700 10px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.hub-side .mrow, .featured .mrow { grid-template-columns: 64px minmax(0, 1fr) 40px; }
@media (max-width: 640px) {
.mrow { grid-template-columns: 52px minmax(0, 1fr) 64px; gap: var(--s3); }
.hub-side .mrow, .featured .mrow { grid-template-columns: 52px minmax(0, 1fr) 40px; }
.mevent { grid-column: 2 / 4; grid-row: 2; }
.mtime { font-size: 13px; }
}
.logo { width: 24px; height: 24px; flex: none; object-fit: contain; }
/* Some PandaScore logos are white (their "dark mode" art, e.g. Team Vitality): a thin dark
edge keeps them visible on the light theme and is barely there on coloured logos. */
img.logo { --edge: drop-shadow(0 0 .6px rgba(15, 25, 35, .75)) drop-shadow(0 0 .4px rgba(15, 25, 35, .6));
filter: var(--edge); }
:root[data-theme="dark"] img.logo { --edge: ; }
.logo-none { display: inline-grid; place-items: center; border-radius: 6px; background: var(--panel-2);
border: 1px solid var(--line-2); color: var(--text-3); font: 700 9px/1 var(--font); letter-spacing: .02em; }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font); letter-spacing: .08em;
text-transform: uppercase; border-radius: var(--r-round); padding: 5px 9px; }
.tag-live { background: var(--live); color: #fff; }
.tag-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.tag-final { color: var(--text-2); box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 -1px 0 var(--glass-lo); }
.tag-soon { background: var(--accent-soft); color: var(--accent); }
.tag-warn { background: color-mix(in srgb, #f5b83d 16%, transparent); color: #8a5a12; }
:root[data-theme="dark"] .tag-warn { color: #f5b83d; }
.tag-free { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.tag-premium { background: var(--accent); color: var(--accent-ink); }
/* ── match page: header (solid; team colour only in the top rule and the bars) ── */
.mhead { position: relative; padding: var(--s5) var(--s5) var(--s6); isolation: isolate; }
.mhead::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--team-a) 0 35%, var(--line-2) 50%, var(--team-b) 65% 100%); }
.mhead-event { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0;
margin: 0; color: var(--text-2); font-size: 13px; letter-spacing: .02em; }
.mhead-event .ev { color: var(--text); font-weight: 600; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); margin: var(--s5) 0 0; }
.vteam { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center;
color: var(--text-2); font: 700 26px/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .02em;
min-width: 0; }
.vteam .vname { max-width: 100%; }
.vteam.won { color: var(--win); }
.vteam .logo { width: 84px; height: 84px; filter: var(--edge) drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.vteam .logo-none { font-size: 20px; border-radius: 16px; }
.vteam::after { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--team-a); opacity: .9; }
.vteam-b::after { background: var(--team-b); }
.vscore { display: grid; justify-items: center; gap: var(--s2); min-width: 150px; }
.big { font: 700 64px/1 var(--font-head); color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: .02em;
display: inline-flex; align-items: baseline; }
.big .colon { color: var(--text-3); margin: 0 10px; font-weight: 600; opacity: .7; }
.big .sa.w { color: var(--team-a); } .big .sb.w { color: var(--team-b); }
.big.vs { font-size: 34px; color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; padding: 12px 0; }
.vstatus { font-size: 13px; color: var(--text-2); }
.vmeta { display: inline-flex; align-items: center; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.vfmt { font: 700 12px/1 var(--mono); color: var(--text-2); letter-spacing: .04em; }
@media (max-width: 640px) {
.mhead { padding: var(--s4) var(--s3) var(--s5); }
.versus { gap: var(--s2); margin-top: var(--s4); }
.vteam { font-size: 17px; gap: var(--s2); }
.vteam .logo { width: 56px; height: 56px; }
.vteam .logo-none { font-size: 14px; }
.big { font-size: 44px; } .big .colon { margin: 0 6px; }
.big.vs { font-size: 26px; }
.vscore { min-width: 110px; }
.vmeta { flex-direction: column; gap: 2px; white-space: normal; text-align: center; }
.vmeta .dot { display: none; }
}
/* ── match page: preview (model estimate + last 5) ────────────────────────── */
.preview { display: grid; }
.pred { padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--line); }
.pred-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s3); }
.pred-h .kicker { margin: 0; }
/* the split is a width class (w0–w20, 5% steps) so no inline style is needed */
.w0 { --w: 0%; } .w1 { --w: 5%; } .w2 { --w: 10%; } .w3 { --w: 15%; } .w4 { --w: 20%; } .w5 { --w: 25%; }
.w6 { --w: 30%; } .w7 { --w: 35%; } .w8 { --w: 40%; } .w9 { --w: 45%; } .w10 { --w: 50%; } .w11 { --w: 55%; }
.w12 { --w: 60%; } .w13 { --w: 65%; } .w14 { --w: 70%; } .w15 { --w: 75%; } .w16 { --w: 80%; } .w17 { --w: 85%; }
.w18 { --w: 90%; } .w19 { --w: 95%; } .w20 { --w: 100%; }
.pred-bar { position: relative; display: flex; height: 44px; border-radius: var(--r); overflow: hidden;
background: color-mix(in srgb, var(--team-b) 22%, var(--panel-2)); margin-bottom: var(--s4);
font: 700 20px/1 var(--font-head); letter-spacing: .03em; text-transform: uppercase; }
.pred-bar .pa, .pred-bar .pb { display: flex; align-items: center; padding: 0 var(--s4); white-space: nowrap; }
.pred-bar .pa { flex: 0 0 var(--w); min-width: max-content; color: var(--team-a);
background: color-mix(in srgb, var(--team-a) 22%, var(--panel-2)); box-shadow: inset -2px 0 0 var(--panel); }
.pred-bar .pa::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--team-a);
opacity: .12; pointer-events: none; }
.pred-bar .pb { flex: 1; justify-content: flex-end; color: var(--team-b); }
.pred-maps { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s2) var(--s6); }
.pred-maps li { display: grid; grid-template-columns: 84px 1fr 70px; align-items: center; gap: var(--s3);
font-size: 13px; color: var(--text-2); }
.pm-name { font: 700 14px/1 var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-bar { position: relative; height: 6px; border-radius: 3px; overflow: hidden;
background: color-mix(in srgb, var(--team-b) 45%, var(--panel-2)); }
.pm-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--team-a); border-radius: 3px; }
.pm-p { text-align: right; font: 600 12px/1 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pred-note { margin: 0 0 var(--s1); line-height: 1.55; }
/* map veto: simulated picks prefilled; the user changes them with a plain GET form */
.veto { margin: var(--s2) 0 var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.veto .kicker { margin: 0 0 var(--s1); }
.vs-n { font: 700 12px/1 var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.veto-mine { margin-top: var(--s3) !important; }
.veto .pred-bar { margin-bottom: var(--s3); }
.forms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); padding: var(--s4) var(--s5); }
.forms .kicker { color: var(--text-3); margin-bottom: var(--s2); }
.forms .fteam { color: var(--text); }
.form-a .kicker::before, .form-b .kicker::before { content: ""; display: inline-block; width: 8px; height: 8px;
border-radius: 2px; margin-right: 8px; vertical-align: 0; background: var(--team-a); }
.form-b .kicker::before { background: var(--team-b); }
.form { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.fg { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
font: 700 14px/1 var(--font-head); letter-spacing: .04em; cursor: default;
background: var(--panel-2); color: var(--text-3); border: 1px solid var(--line); }
.fg-w { background: color-mix(in srgb, var(--good) 18%, var(--panel-2)); color: var(--good);
border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.fg-l { background: color-mix(in srgb, var(--accent) 12%, var(--panel-2)); color: var(--text-2);
border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
/* the compact last-5 list: badge · opponent · score · Elo change · date */
.elo-now { display: flex; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3); font-size: 12px;
letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.elo-now b { font: 700 24px/1 var(--font-head); letter-spacing: .02em; color: var(--text); font-variant-numeric: tabular-nums; }
.flist { list-style: none; margin: 0; padding: 0; display: grid; }
.fl { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 44px 42px; align-items: center; gap: var(--s3);
padding: 6px 0; font-size: 14px; border-top: 1px solid var(--line); }
.fl:first-child { border-top: 0; padding-top: 0; }
.fl .fg { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }
.fl-opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.fl-w .fl-opp { color: var(--text); }
.fl-score { font: 600 13px/1 var(--mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.fl-elo { font: 600 13px/1 var(--mono); text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fl-date { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.pred { padding: var(--s4) var(--s4) var(--s3); }
.pred-bar { height: 40px; font-size: 17px; }
.pred-bar .pa, .pred-bar .pb { padding: 0 var(--s3); }
.pred-maps { grid-template-columns: 1fr; gap: var(--s2); }
.forms { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s4); }
.fl { gap: var(--s2); }
}
/* ── pricing, notes, FAQ, docs, alerts ────────────────────────────────────── */
section { padding: 0; }
#pricing { padding-top: var(--s7); }
main > section:last-child { padding-bottom: var(--s8); }
#pricing h1 { margin-bottom: var(--s2); }
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); margin: var(--s5) 0 var(--s4); }
.plan { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5);
box-shadow: var(--shadow); }
.plan h3 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.plan-premium { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.plan-premium h3 { color: var(--accent); }
.price { font: 700 44px/1.1 var(--font-head); margin: var(--s2) 0 var(--s4); }
.price small { font: 400 15px/1 var(--font); color: var(--text-3); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.ticks li { position: relative; padding-left: 24px; color: var(--text-2); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px;
border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } }
.note { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s5);
margin: var(--s6) 0; box-shadow: var(--shadow); }
.note h2 { font-size: 20px; }
.note p { color: var(--text-2); }
.note p:last-child { margin: 0; }
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { cursor: pointer; padding: var(--s3) 0; min-height: 48px; font-weight: 600; list-style: none;
display: flex; align-items: center; gap: var(--s3); transition: color .15s var(--ease); }
summary:hover { color: var(--link); }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px;
border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line); color: var(--accent);
font-weight: 700; transition: transform .2s var(--ease), background-color .2s var(--ease); }
details[open] summary::before { transform: rotate(45deg); background: var(--accent-soft); }
details p { color: var(--text-2); margin: 0 0 var(--s4) 38px; }
.doc { padding: var(--s7) 0 var(--s6); }
.doc h1 { font-size: clamp(30px, 4vw, 38px); }
.doc h2 { font-size: 20px; margin: var(--s6) 0 var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.doc h1 + h2, .doc p + h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p, .doc li { color: var(--text-2); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 6px; }
.doc .meta { font-size: 13px; color: var(--text-3); margin-top: calc(-1 * var(--s2)); margin-bottom: var(--s5); }
.doc-art { width: 96px; display: block; margin-bottom: var(--s4); }
.doc details { border-color: var(--line); }
.doc summary { color: var(--text); }
.alert { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-left: 3px solid var(--accent); color: var(--text); border-radius: var(--r); padding: var(--s3) var(--s4); }
.cards { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); }
/* ── footer ───────────────────────────────────────────────────────────────── */
footer { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--bg-2); padding: var(--s6) 0 var(--s5); }
.foot { display: grid; gap: var(--s3); }
footer .wordmark { opacity: .8; }
footer nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: 14px; }
footer nav a { color: var(--text-2); text-decoration: none; padding: var(--s1) 0; transition: color .15s var(--ease); }
footer nav a:hover { color: var(--text); text-decoration: underline; }
footer p { margin: 0; line-height: 1.55; max-width: 90ch; }
/* ── rankings ─────────────────────────────────────────────────────────────── */
.rank { width: 100%; border-collapse: collapse; font-size: 15px; }
.rank th { text-align: left; font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
color: var(--text-3); background: var(--panel-2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.rank td { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); transition: background-color .15s var(--ease); }
.rank tbody tr:first-child td { border-top: 0; }
.rank tbody tr:hover td { background: var(--panel-2); }
.rank .num { text-align: right; font-variant-numeric: tabular-nums; }
.rank-n { color: var(--text-3); width: 3em; font-family: var(--mono); }
.rank tbody tr:nth-child(-n+3) .rank-n { color: var(--accent); font-weight: 700; }
.rank-team { font-weight: 700; }
.rank-reg { color: var(--text-2); }
.rank-elo { font: 700 17px/1 var(--font-head); letter-spacing: .03em; }
.up { color: var(--good); font-family: var(--mono); }
.down { color: var(--accent); font-family: var(--mono); }
@media (max-width: 640px) { .hide-sm { display: none; } .rank td, .rank th { padding: var(--s2) var(--s3); } }
/* ── VLR detail on the match page ─────────────────────────────────────────── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.veto { margin: 0 var(--s1) var(--s5); color: var(--text-2); line-height: 1.6; }
.veto .kicker { margin-right: var(--s2); }
/* map row: glass tiles over the map banner (from /art.css); ?map=N selects.
The selected tile is the lens: a brighter fill and an accent edge, no glow. */
.maprow { display: flex; gap: var(--s2); margin: 0 0 var(--s3); overflow-x: auto; scrollbar-width: none;
scroll-snap-type: x proximity; padding: 3px; margin-inline: -3px; /* room for the focus ring */ }
.maprow::-webkit-scrollbar { display: none; }
.mt { --hue: 220; position: relative; flex: 1 0 168px; min-width: 0; height: 84px; scroll-snap-align: start;
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: end;
column-gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
color: var(--text-2); text-decoration: none;
background: hsl(var(--hue) 30% 20%);
transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.mt::before { content: ""; position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat;
opacity: .5; transform: scale(1.02); transition: opacity .25s var(--ease), transform .4s var(--ease); }
/* the glass over the banner: a translucent fill with the sheen along the top edge */
.mt::after { content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--sheen),
linear-gradient(90deg, color-mix(in srgb, var(--bg) 84%, transparent) 0%,
color-mix(in srgb, var(--bg) 58%, transparent) 55%,
color-mix(in srgb, var(--bg) 40%, transparent) 100%); }
.mt:hover { border-color: var(--glass-hi-2); transform: translateY(-1px); }
.mt:hover::before { opacity: .65; transform: scale(1.05); }
.mt:active { transform: scale(.98); }
.mt[aria-current] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 70%, var(--glass-hi-2));
box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), var(--glass-shadow); }
.mt[aria-current]::before { opacity: .75; }
.mt.won-a { box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 -3px 0 var(--team-a), var(--glass-shadow-sm); }
.mt.won-b { box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 -3px 0 var(--team-b), var(--glass-shadow-sm); }
.mt.won-a[aria-current] { box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
inset 0 -3px 0 var(--team-a), var(--glass-shadow); }
.mt.won-b[aria-current] { box-shadow: inset 0 1px 0 var(--glass-hi-2), inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
inset 0 -3px 0 var(--team-b), var(--glass-shadow); }
.mt-n { grid-column: 1 / -1; align-self: start; font: 700 10px/1.2 var(--font); letter-spacing: .1em;
text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-name { font: 700 22px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-score { font: 700 18px/1 var(--font-head); color: var(--text-3); font-variant-numeric: tabular-nums;
letter-spacing: .02em; white-space: nowrap; }
.mt-score .colon { margin: 0 3px; opacity: .55; }
.mt-score .sa.w { color: var(--team-a); } .mt-score .sb.w { color: var(--team-b); }
.mt-all { --hue: 210; background: var(--glass); flex-basis: 184px; flex-grow: 0; }
.mt-all::after { background: var(--sheen); }
.mt-all .mt-name { font-size: 20px; }
.mt.m-abyss { --hue: 265; } .mt.m-ascent { --hue: 205; } .mt.m-bind { --hue: 25; } .mt.m-breeze { --hue: 175; }
.mt.m-corrode { --hue: 330; } .mt.m-fracture { --hue: 15; } .mt.m-haven { --hue: 45; } .mt.m-icebox { --hue: 190; }
.mt.m-lotus { --hue: 150; } .mt.m-pearl { --hue: 220; } .mt.m-split { --hue: 350; } .mt.m-sunset { --hue: 35; }
@media (max-width: 640px) {
.maprow { scroll-snap-type: x mandatory; }
.mt { flex: 0 0 150px; height: 76px; padding: 10px var(--s3); border-radius: var(--r-lg); }
.mt-all { flex-basis: 150px; }
.mt-name { font-size: 19px; } .mt-all .mt-name { font-size: 17px; }
.mt-score { font-size: 16px; }
}
/* round-by-round cards (solid content) */
.mcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: var(--s3); margin: 0 0 var(--s3); }
.mcards.one { grid-template-columns: 1fr; }
.mcards.one .rd { width: 28px; height: 30px; }
.mcards.one .ico { width: 14px; height: 14px; }
.mcards.one .rounds { gap: 4px; padding: var(--s4); }
.mcard { --hue: 220; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
box-shadow: var(--shadow); }
.mcard.won-a { box-shadow: inset 3px 0 0 var(--team-a), var(--shadow); }
.mcard.won-b { box-shadow: inset 3px 0 0 var(--team-b), var(--shadow); }
.mcard-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
padding: var(--s3) var(--s4);
background: linear-gradient(110deg, hsl(var(--hue) 60% 55% / .16), hsl(var(--hue) 60% 55% / .04) 60%, transparent); }
.mcard-n { margin: 0; font: 700 10px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mcard-name { margin: 3px 0 0; font: 700 26px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.mcard-score { margin: 0; font: 700 30px/1 var(--font-head); color: var(--text-3); font-variant-numeric: tabular-nums; }
.mcard-score .colon { margin: 0 4px; opacity: .55; }
.mcard-score .sa.w { color: var(--team-a); }
.mcard-score .sb.w { color: var(--team-b); }
.rounds { list-style: none; margin: 0; padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap; gap: 3px;
border-top: 1px solid var(--line); }
.rd { width: 22px; height: 24px; border-radius: 6px; display: grid; place-items: center;
transition: transform .15s var(--ease), filter .15s var(--ease); }
.rd:hover { transform: translateY(-2px); filter: brightness(1.25); }
.rd-a { background: color-mix(in srgb, var(--team-a) 20%, transparent); color: var(--team-a); }
.rd-b { background: color-mix(in srgb, var(--team-b) 20%, transparent); color: var(--team-b); }
.rd-break { margin-left: 11px; position: relative; }
.rd-break::before { content: ""; position: absolute; left: -8px; top: 3px; bottom: 3px; width: 2px;
border-radius: 1px; background: var(--line-2); }
.ico { width: 12px; height: 12px; }
.mcard-sides { display: flex; justify-content: space-between; gap: var(--s3); margin: 0; padding: 0 var(--s4) var(--s3);
font-size: 12px; color: var(--text-3); }
.mcard-sides b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.mcard-sides .sep { margin: 0 5px; opacity: .6; }
.mcard-sides .who { font: 700 11px/1 var(--font-head); letter-spacing: .06em; text-transform: uppercase; }
.mcard-sides .ta .who { color: var(--team-a); margin-right: 8px; }
.mcard-sides .tb .who { color: var(--team-b); margin-left: 8px; }
.mcard.m-abyss { --hue: 265; } .mcard.m-ascent { --hue: 205; } .mcard.m-bind { --hue: 25; } .mcard.m-breeze { --hue: 175; } .mcard.m-corrode { --hue: 330; } .mcard.m-fracture { --hue: 15; } .mcard.m-haven { --hue: 45; } .mcard.m-icebox { --hue: 190; } .mcard.m-lotus { --hue: 150; } .mcard.m-pearl { --hue: 220; } .mcard.m-split { --hue: 350; } .mcard.m-sunset { --hue: 35; }
/* PandaScore-only map list (no VLR detail yet) */
.maps { list-style: none; margin: 0; padding: 0; }
.map { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s3); padding: var(--s3) var(--s4); align-items: center; }
.map + .map { border-top: 1px solid var(--line); }
.map-n { font: 700 10px/1.2 var(--font); color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.map-name { font: 700 18px/1 var(--font-head); text-transform: uppercase; letter-spacing: .04em; }
.map-res { font-size: 13px; color: var(--text-2); }
.rosters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 640px) { .rosters { grid-template-columns: 1fr; } }
.rosters .panel { margin: 0; }
.roster-a .panel-h { box-shadow: inset 3px 0 0 var(--team-a); }
.roster-b .panel-h { box-shadow: inset 3px 0 0 var(--team-b); }
.players { list-style: none; margin: 0; padding: 0; }
.players li { display: flex; align-items: baseline; gap: var(--s2); padding: 10px var(--s4); }
.players li + li { border-top: 1px solid var(--line); }
.nick { font-weight: 700; }
.real { color: var(--text-3); font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc { font: 600 11px/1 var(--mono); color: var(--text-3); }
/* agent chips: the icon (from /art.css) sits on a role-coloured tile; initials show if it can't load */
.ag { --role: var(--text-3); position: relative; flex: none; display: inline-grid; place-items: center;
width: 32px; height: 32px; border-radius: 9px; overflow: hidden;
background: color-mix(in srgb, var(--role) 18%, var(--panel-2));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--role) 50%, transparent); }
/* The icon is a background on ::after: if it can't load, nothing shows and the
initials underneath stay visible (an ![]()
would show a broken-image glyph). */
.ag::after { content: ""; position: absolute; inset: 0; background: center / cover no-repeat; }
.ag-ini { font: 700 11px/1 var(--font-head); letter-spacing: .04em; color: var(--role); }
.ag-lg { width: 60px; height: 60px; border-radius: 16px; }
.ag-lg .ag-ini { font-size: 19px; }
.ag-xs { width: 18px; height: 18px; border-radius: 5px; }
.ag-xs .ag-ini { font-size: 8px; }
.ag-duelist { --role: #ff7a45; } .ag-initiator { --role: #3fd08a; }
.ag-controller { --role: #a78bfa; } .ag-sentinel { --role: #38bdf8; }
/* highlight cards: glass, with the team colour as a bar on the left edge */
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0 0 var(--s4); }
@media (max-width: 760px) { .highlights { grid-template-columns: 1fr; } }
.hl { --t: var(--team-a); display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s4) var(--s4) 20px;
border-radius: var(--r-lg); overflow: hidden;
box-shadow: inset 3px 0 0 var(--t), inset 0 1px 0 var(--glass-hi-2), inset 0 -1px 0 var(--glass-lo), var(--glass-shadow); }
.hl-b { --t: var(--team-b); }
.hl p { margin: 0; }
.hl-body { min-width: 0; }
.hl-label { font: 700 10px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hl-name { font: 700 24px/1.1 var(--font-head); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.hl-val { font-size: 13px; color: var(--text-3); }
.hl-val b { color: var(--text-2); font-weight: 600; }
/* ── scoreboard (solid) ───────────────────────────────────────────────────── */
.tabs-sm { padding: 3px; flex-wrap: wrap; }
.tabs-sm a { padding: 6px var(--s3); font-size: 13px; }
.panel-h:has(.tabs-sm) { align-items: center; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.board-wrap { overflow-x: auto; scrollbar-width: none; }
.board-wrap::-webkit-scrollbar { display: none; }
.board-wrap + .board-wrap { border-top: 1px solid var(--line); }
.board { width: 100%; min-width: 360px; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
/* fixed widths so both teams' tables line up column for column */
.c-ag { width: 58px; } .c-nick { width: auto; } .c-r { width: 76px; } .c-acs { width: 68px; } .c-n { width: 52px; }
.c-pm { width: 60px; } .c-x { width: 72px; } .c-kda { width: 124px; }
.board th { text-align: left; font: 700 10px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
color: var(--text-3); background: var(--panel-2); padding: 10px var(--s3); white-space: nowrap; }
.board th.bteam { color: var(--text); font: 700 15px/1 var(--font-head); letter-spacing: .06em; padding-left: 18px; }
.board th.bteam > * { vertical-align: middle; }
.board th.bteam .logo { width: 22px; height: 22px; margin-right: 10px; }
.bavg { margin-left: var(--s3); font: 600 11px/1 var(--mono); color: var(--text-3); letter-spacing: 0; text-transform: none; }
.board-a th.bteam { box-shadow: inset 3px 0 0 var(--team-a); }
.board-b th.bteam { box-shadow: inset 3px 0 0 var(--team-b); }
.board td { padding: 7px var(--s3); border-top: 1px solid var(--line); white-space: nowrap; vertical-align: middle;
transition: background-color .15s var(--ease); }
.board .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.board tbody tr:hover td { background: var(--panel-2); }
.agcell { width: 58px; padding-right: 0 !important; padding-left: 14px !important; }
.agcell .avatar, .agcell .ag { vertical-align: middle; }
.agcell .avatar { width: 34px; height: 34px; }
.board .nick { font-weight: 700; }
.nick-in { display: block; line-height: 1.25; }
.played { display: flex; gap: 3px; margin-top: 4px; }
tr.is-mvp td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mvp { display: inline-block; margin-left: 6px; padding: 3px 6px; border-radius: var(--r-round); vertical-align: 1px;
font: 700 10px/1 var(--font); letter-spacing: .08em; background: var(--accent); color: var(--accent-ink); }
.rt { display: inline-block; min-width: 46px; padding: 4px 6px; border-radius: var(--r-round); text-align: center; font-weight: 700; }
.rt-elite { background: var(--accent); color: var(--accent-ink); }
.rt-good { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.rt-avg { color: var(--text); }
.rt-cold, .rt-na { color: var(--text-3); }
/* ACS is a plain number; the team's top scorer is emphasised, nothing else */
.board .acs { color: var(--text-2); }
.board .acs-top { color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
.board { table-layout: auto; min-width: 0; } /* phone: some columns hidden; let them size */
.board td, .board th { padding: 7px 6px; }
.board .nick { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.board th.bteam .bavg { display: none; }
.board th.bteam { font-size: 13px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.agcell { width: 44px; padding-left: 10px !important; }
.agcell .avatar { width: 30px; height: 30px; }
.rt { min-width: 0; padding: 3px 4px; }
}
/* ── players ──────────────────────────────────────────────────────────────── */
.page-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s4); }
.page-sub .small { margin: 0; }
.page-sub-l { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sortbar { margin: 0 0 var(--s3); }
.table-wrap { overflow-x: auto; scrollbar-width: none; }
.table-wrap::-webkit-scrollbar { display: none; }
.ptable th a.sort { color: inherit; text-decoration: none; }
.ptable th a.sort:hover, .ptable th a.sort.on { color: var(--accent); }
.plink { color: var(--text); text-decoration: none; }
.plink:hover { color: var(--accent); }
.pcell .plink { display: grid; line-height: 1.25; }
.pname { font-weight: 700; }
.pteam { font-size: 12px; color: var(--text-3); }
.apool { display: inline-flex; gap: 4px; }
.apool .ag { width: 26px; height: 26px; border-radius: 7px; }
.acell { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 600; }
.mapname { font: 700 15px/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
/* player photos: initials underneath, the photo covers them when it loads */
.avatar { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2);
box-shadow: inset 0 0 0 1px var(--line-2); }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.av-ini { font: 700 12px/1 var(--font-head); letter-spacing: .04em; color: var(--text-3); }
/* No photo on PandaScore: the player's main agent fills the avatar (a role-coloured tile if the
icon fails). Icons are transparent, so the initials underneath are hidden, not layered. */
.avatar .av-ag { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; box-shadow: none; }
.avatar .av-ag + .av-ini { position: relative; z-index: 1; opacity: 0; }
.av-lg { width: 96px; height: 96px; border-radius: 24px; }
.av-lg .av-ini { font-size: 30px; }
.av-xl { width: 88px; height: 88px; border-radius: 22px; }
.av-xl .av-ini { font-size: 28px; }
.prow { display: flex !important; align-items: center; gap: var(--s3); }
.pwho { display: grid; line-height: 1.25; }
/* player cards (solid content) */
.pgrid { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pcard { position: relative; display: grid; justify-items: center; gap: 6px; padding: var(--s5) var(--s4) var(--s4);
background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
color: var(--text); text-decoration: none; text-align: center; box-shadow: var(--shadow);
transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); }
.pcard:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-up); }
.pcard:active { transform: scale(.98); }
.pc-rank { position: absolute; top: var(--s3); left: var(--s3); font: 700 13px/1 var(--mono); color: var(--text-3); }
li:nth-child(-n+3) .pc-rank { color: var(--accent); }
.pcard .avatar { margin-bottom: var(--s2); }
.pc-name { font: 700 22px/1.1 var(--font-head); letter-spacing: .02em; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-team { font-size: 13px; color: var(--text-3); margin-top: -4px; }
.pc-rating { margin: var(--s2) 0 2px; font-size: 16px; min-width: 60px; }
.pc-stats { display: flex; gap: var(--s4); font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.pc-stats span { display: grid; justify-items: center; gap: 2px; }
.pc-stats b { font: 700 16px/1 var(--mono); color: var(--text); letter-spacing: 0; }
.pcard .apool { margin-top: var(--s2); }
@media (max-width: 640px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.pcard { padding: var(--s4) var(--s2) var(--s3); } .av-lg { width: 72px; height: 72px; border-radius: 18px; }
.pc-name { font-size: 18px; } .pc-stats { gap: var(--s3); } }
/* results pager */
.pager { display: flex; gap: var(--s3); margin: var(--s4) 0; }
.pager .older { margin-left: auto; }
/* player page */
.phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s5); }
.phead-main { display: flex; align-items: center; gap: var(--s4); }
.phead .muted { margin: 0; }
.pname-h { margin: 0; font-size: clamp(30px, 5vw, 44px); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--s2); margin: 0 0 var(--s4); }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s3) var(--s4);
box-shadow: var(--shadow); }
.kpi p { margin: 0; }
.kpi-l { font: 700 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.kpi-v { margin-top: 6px !important; font: 700 26px/1 var(--font-head); font-variant-numeric: tabular-nums; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.recent { list-style: none; margin: 0; padding: 0; }
.rm { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s3);
padding: var(--s2) var(--s4); border-top: 1px solid var(--line); }
.rm:first-child { border-top: 0; }
.rm-w { box-shadow: inset 3px 0 0 var(--good); }
.rm-l { box-shadow: inset 3px 0 0 var(--line-2); }
.rm-main { display: grid; min-width: 0; line-height: 1.3; }
.rm-top { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-kda { font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.rm-main .small { white-space: nowrap; }
.board .plink { font-weight: 700; }
@media (max-width: 640px) { .rm { gap: var(--s2); padding: var(--s2) var(--s3); } .rm-kda { font-size: 12px; } }
/* ── fallbacks: no backdrop-filter, reduced transparency, reduced motion ──── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
:root { --glass: var(--panel); --glass-2: var(--panel-2); --glass-lens: color-mix(in srgb, var(--text) 14%, var(--panel-2)); }
.mt-all { background: var(--panel); }
}
@media (prefers-reduced-transparency: reduce) {
:root { --glass: var(--panel); --glass-2: var(--panel-2); --glass-lens: color-mix(in srgb, var(--text) 14%, var(--panel-2)); }
.nav, .tabs, .btn-quiet, .hl, .pct, .tag-final, .mt, .mt-all { -webkit-backdrop-filter: none; backdrop-filter: none; }
.mt-all { background: var(--panel); }
.mt::after { background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 70%, transparent)); }
body::before { background: var(--bg); }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
html { scroll-behavior: auto; }
.btn:active, .tabs a:active, .links a:active, .mt:active, .pcard:active, .pcard:hover, .mt:hover { transform: none; }
}
/* ══ Apple-like layer (2026-09-25) ═════════════════════════════════════════════
Calm, spacious and quiet: sentence case instead of condensed capitals, the system
face, tabular figures, white cards on a near-white page, hairline separators, one
accent. It comes last so it wins over the component rules above. */
body { font-size: 15px; line-height: 1.47; letter-spacing: -.01em; background: var(--bg); }
h1, h2, h3, .kicker, .day, .panel-h h2, h2.panel-h, .mfinal, .pct-who, .big.vs, .pm-name,
.vs-n, .plan h3, .rank th, .mt-n, .mt-name, .mcard-n, .mcard-name, .mcard-sides .who, .map-n,
.map-name, .hl-label, .board th, .mapname, .pc-stats, .kpi-l, .vname, .wordmark, .links a,
.tabs a, .tag-final, .fmt {
text-transform: none; letter-spacing: -.01em; font-family: var(--font-head);
}
h1 { font-size: clamp(30px, 4.5vw, 44px); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
h2 { font-weight: 600; }
.kicker, .day, .kpi-l, .hl-label, .mt-n, .vs-n, .rank th, .board th, .map-n, .mcard-n {
font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: 0;
}
.num, .mtime, .tscore, .pct, .acs, .rt, .fl-score, .fl-elo, .kpi-v, .pm-p, .elo-now b,
.vscore, .big, .sa, .sb { font-family: var(--font); font-variant-numeric: tabular-nums; }
/* navigation: a translucent bar, plain text links; the current page is just darker */
.nav { background: rgba(233, 233, 238, .82); -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px); border: 0; border-bottom: 1px solid rgba(0, 0, 0, .08);
box-shadow: none; }
@media (min-width: 641px) { .nav .wrap { height: 52px; } }
@media (max-width: 640px) {
/* phone: logo on top, the links in one row that scrolls sideways (no wrapping) */
.links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0; margin: 0 calc(-1 * var(--s2)); }
.links a { flex: none; height: 36px; font-size: 14px; }
}
.wordmark { font-size: 17px; font-weight: 600; }
.links a { height: 32px; padding: 0 10px; font-size: 13px; font-weight: 400; color: var(--text-2);
background: none; border-radius: 0; box-shadow: none; }
.links a:hover { background: none; color: var(--text); }
.links a[aria-current] { background: none; box-shadow: none; color: var(--text); font-weight: 600; }
.links a[aria-current]::after, .links a::before { content: none; }
.nav .btn-sm { min-height: 30px; font-size: 13px; }
/* segmented control: a grey track, the selected item a white thumb */
.tabs { background: rgba(118, 118, 128, .12); border: 0; box-shadow: none; padding: 2px; border-radius: 9px; gap: 0; }
.tabs::before { content: none; }
.tabs a { padding: 5px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--text); }
.tabs a:hover { background: none; }
.tabs a[aria-current] { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 .5px rgba(0, 0, 0, .04); }
.tabs a[aria-current]::after { content: none; }
/* surfaces: white cards, no border, barely any shadow */
.panel { background: var(--panel); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); }
.panel-h { border-bottom: 1px solid var(--line); background: none; }
.panel-h h2, h2.panel-h { font-size: 17px; font-weight: 600; color: var(--text); }
.panel-h a { color: var(--link); font-size: 14px; }
.page-head h1 { margin: var(--s6) 0 var(--s4); }
/* match lists: day labels are quiet grey text, rows are separated by hairlines */
.day, h2.panel-h[data-day-h] { background: none; color: var(--text-3); font-size: 13px; font-weight: 600; }
.mrow { border-color: var(--line); }
.mrow:hover { background: var(--row-hover, rgba(0, 0, 0, .025)); }
.mtime { color: var(--text-2); font-weight: 500; }
.mfinal { font-size: 12px; font-weight: 500; color: var(--text-3); }
.tname { font-weight: 500; }
.mteam.won .tname, .mteam.won .tscore { font-weight: 700; color: var(--text); }
.fmt { font-size: 12px; color: var(--text-3); background: none; border: 0; }
.pct { background: var(--panel-2); border: 0; box-shadow: none; }
.tag-final { background: var(--panel-2); border: 0; color: var(--text-2); font-weight: 600; }
/* buttons: pills; primary is the one blue */
.btn { border-radius: var(--r-round); font-weight: 500; box-shadow: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary::before, .btn-quiet::before, .hl::before { content: none; }
.btn-quiet { background: rgba(0, 0, 0, .05); border: 0; color: var(--text); }
/* match header */
.vname { font-size: 21px; font-weight: 600; color: var(--text); text-decoration: none; }
a.vname:hover { color: var(--link); }
/* map row: the map's art sits on the right of each tab, fading out under the text */
.mt { border-radius: var(--r); box-shadow: none; }
.mt::before { background-position: right center; background-size: cover; opacity: 1; }
.mt::after { background: linear-gradient(90deg, var(--panel) 30%, color-mix(in srgb, var(--panel) 55%, transparent) 60%, transparent); }
.mt-name { font-size: 20px; font-weight: 700; color: var(--text); }
/* team links in lists */
.rank-team a, .tname a, .fl-opp a { color: inherit; text-decoration: none; }
.rank-team a:hover, .fl-opp a:hover { color: var(--link); }
.up { color: var(--good); } .down { color: var(--bad); }
/* teams grid and team page */
.tgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4);
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tcard { display: grid; gap: 4px; padding: var(--s5); border-radius: var(--r-lg); background: var(--panel);
box-shadow: var(--shadow); color: var(--text); text-decoration: none; height: 100%;
transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.tcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.tcard-logo { width: 56px; height: 56px; margin-bottom: var(--s3); }
.tcard-name { font: 600 19px/1.2 var(--font-head); letter-spacing: -.015em; }
.tcard-meta, .tcard-rec, .tcard-five { font-size: 13px; color: var(--text-3); }
.tcard-elo { font-size: 15px; color: var(--text-2); margin-top: var(--s2); }
.tcard-elo b { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.tcard-five { margin-top: var(--s2); line-height: 1.4; }
.muted { color: var(--text-3); }
.thead { display: flex; align-items: center; gap: var(--s5); padding: var(--s6); margin-top: var(--s5); }
.thead-logo { width: 88px; height: 88px; }
.thead-main { flex: 1; min-width: 0; }
.thead-main h1 { margin: 0 0 6px; }
.thead-main p { margin: 0; }
.thead-elo { display: grid; justify-items: end; gap: 2px; }
.thead-elo .kpi-v { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.five { list-style: none; margin: 0; padding: var(--s5); display: grid; gap: var(--s4);
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.five-p { display: grid; justify-items: center; gap: var(--s2); color: var(--text); text-decoration: none; }
.five-p:hover .five-name { color: var(--link); }
.five-name { font-weight: 600; }
.pad { padding: 0 var(--s5) var(--s4); }
.pad:first-child { padding-top: var(--s4); }
.maps-table td:first-child { font-weight: 500; }
@media (max-width: 640px) {
.thead { flex-wrap: wrap; padding: var(--s5); gap: var(--s4); }
.thead-logo { width: 64px; height: 64px; }
.thead-elo { justify-items: start; }
}
/* quiet the remaining decoration: no stripes, bars or coloured edges */
.featured { border: 0; }
.featured::before, .mhead::before, .vteam::after { content: none; }
.featured-h h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.fg-l { background: color-mix(in srgb, var(--bad) 10%, var(--panel-2)); color: var(--bad); }
.fg-w { background: color-mix(in srgb, var(--good) 12%, var(--panel-2)); color: var(--good); }
.fg { border: 0; font-weight: 600; }
.hl { background: var(--panel); border: 0; box-shadow: var(--shadow); padding-left: var(--s4); }
.hl::after { content: none; }
.pad-top { padding-top: var(--s3); }
/* map veto board: tiles carry the map art (.vt.m-