:root { color-scheme: dark; --bg: #0a0a0a; --bg-soft: rgba(17, 17, 17, 0.72); --bg-card: rgba(22, 22, 22, 0.66); --bg-hover: rgba(30, 30, 30, 0.6); --border: #2a2a2a; --border-soft: #1e1e1e; --text: #f5f5f5; --text-dim: #a3a3a3; --text-faint: #6b6b6b; --accent: #ef4444; --accent-2: #dc2626; --accent-3: #f87171; --copper: #d97706; --burgundy: #7f1d1d; --plum: #7c3aed; --gold: #fbbf24; --green: #10b981; --blue: #3b82f6; --red: #ef4444; --silver: #c0c0c0; --rose-gold: #e8a87c; --yellow: #eab308; --magenta: #ec4899; --orange: #f97316; --blush: #f4c2c2; --sage: #84cc16; --slate: #64748b; --cream: #f5f0e1; --taupe: #8b7d6b; --radius: 14px; --radius-sm: 9px; --shadow: 0 8px 30px rgba(0, 0, 0, 0.45); --font: 'JetBrains Mono', 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', ui-monospace, monospace; --mono: 'JetBrains Mono', 'Consolas', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', ui-monospace, monospace; --glow-red: rgba(239, 68, 68, 0.55); --glow-orange: rgba(251, 191, 36, 0.45); --glow-yellow: rgba(251, 191, 36, 0.4); --glow-green: rgba(16, 185, 129, 0.45); --glow-plum: rgba(124, 58, 237, 0.5); --glow-copper: rgba(217, 119, 6, 0.45); --glow-silver: rgba(192, 192, 192, 0.45); --glow-magenta: rgba(236, 72, 153, 0.5); --glow-sage: rgba(132, 204, 22, 0.45); --glow-slate: rgba(100, 116, 139, 0.45); --glow-rose: rgba(232, 168, 124, 0.45); /* Single source of truth for the light palette. Both light triggers (manual [data-theme="light"] and OS-following media query) remap the standard tokens to these, so light colors are only ever defined here. */ --light-bg: #f6f7f9; --light-bg-soft: rgba(238, 240, 243, 0.72); --light-bg-card: rgba(255, 255, 255, 0.66); --light-bg-hover: rgba(240, 242, 245, 0.6); --light-border: #d4d8de; --light-border-soft: #e3e6ea; --light-text: #1a1d23; --light-text-dim: #4b5563; --light-text-faint: #8a94a0; --light-accent: #dc2626; --light-accent-2: #b91c1c; --light-accent-3: #ef4444; --light-copper: #b45309; --light-burgundy: #7f1d1d; --light-plum: #6d28d9; --light-gold: #d97706; --light-green: #059669; --light-blue: #2563eb; --light-red: #dc2626; --light-silver: #9ca3af; --light-rose-gold: #c2703d; --light-yellow: #ca8a04; --light-magenta: #db2777; --light-orange: #ea580c; --light-blush: #e8b4b4; --light-sage: #65a30d; --light-slate: #64748b; --light-cream: #faf6ec; --light-taupe: #8b7d6b; --light-shadow: 0 8px 30px rgba(0, 0, 0, 0.10); --light-glow-red: rgba(220, 38, 38, 0.45); --light-glow-orange: rgba(234, 88, 12, 0.4); --light-glow-yellow: rgba(217, 119, 6, 0.38); --light-glow-green: rgba(5, 150, 105, 0.4); --light-glow-plum: rgba(109, 40, 217, 0.42); --light-glow-copper: rgba(180, 83, 9, 0.4); --light-glow-silver: rgba(156, 163, 175, 0.42); --light-glow-magenta: rgba(219, 39, 119, 0.42); --light-glow-sage: rgba(101, 163, 13, 0.4); --light-glow-slate: rgba(100, 116, 139, 0.4); --light-glow-rose: rgba(194, 112, 61, 0.4); } /* ─── Light theme ────────────────────────────────────────── */ /* Two ways to get light mode: 1. OS is in light mode AND the user hasn't forced dark (media query below) 2. User manually picked light via the header toggle (:root[data-theme="light"]) The manual toggle (data-theme attr on ) always wins over the OS. Both triggers remap the same --light-* tokens defined once on :root, so there is a single source of truth for light colors. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; } } /* Manual light override — applies regardless of OS setting. */ :root[data-theme="light"] { --bg: var(--light-bg); --bg-soft: var(--light-bg-soft); --bg-card: var(--light-bg-card); --bg-hover: var(--light-bg-hover); --border: var(--light-border); --border-soft: var(--light-border-soft); --text: var(--light-text); --text-dim: var(--light-text-dim); --text-faint: var(--light-text-faint); --accent: var(--light-accent); --accent-2: var(--light-accent-2); --accent-3: var(--light-accent-3); --copper: var(--light-copper); --burgundy: var(--light-burgundy); --plum: var(--light-plum); --gold: var(--light-gold); --green: var(--light-green); --blue: var(--light-blue); --red: var(--light-red); --silver: var(--light-silver); --rose-gold: var(--light-rose-gold); --yellow: var(--light-yellow); --magenta: var(--light-magenta); --orange: var(--light-orange); --blush: var(--light-blush); --sage: var(--light-sage); --slate: var(--light-slate); --cream: var(--light-cream); --taupe: var(--light-taupe); --shadow: var(--light-shadow); --glow-red: var(--light-glow-red); --glow-orange: var(--light-glow-orange); --glow-yellow: var(--light-glow-yellow); --glow-green: var(--light-glow-green); --glow-plum: var(--light-glow-plum); --glow-copper: var(--light-glow-copper); --glow-silver: var(--light-glow-silver); --glow-magenta: var(--light-glow-magenta); --glow-sage: var(--light-glow-sage); --glow-slate: var(--light-glow-slate); --glow-rose: var(--light-glow-rose); } /* OS-following default (no manual override) — same light palette. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: var(--light-bg); --bg-soft: var(--light-bg-soft); --bg-card: var(--light-bg-card); --bg-hover: var(--light-bg-hover); --border: var(--light-border); --border-soft: var(--light-border-soft); --text: var(--light-text); --text-dim: var(--light-text-dim); --text-faint: var(--light-text-faint); --accent: var(--light-accent); --accent-2: var(--light-accent-2); --accent-3: var(--light-accent-3); --copper: var(--light-copper); --burgundy: var(--light-burgundy); --plum: var(--light-plum); --gold: var(--light-gold); --green: var(--light-green); --blue: var(--light-blue); --red: var(--light-red); --silver: var(--light-silver); --rose-gold: var(--light-rose-gold); --yellow: var(--light-yellow); --magenta: var(--light-magenta); --orange: var(--light-orange); --blush: var(--light-blush); --sage: var(--light-sage); --slate: var(--light-slate); --cream: var(--light-cream); --taupe: var(--light-taupe); --shadow: var(--light-shadow); --glow-red: var(--light-glow-red); --glow-orange: var(--light-glow-orange); --glow-yellow: var(--light-glow-yellow); --glow-green: var(--light-glow-green); --glow-plum: var(--light-glow-plum); --glow-copper: var(--light-glow-copper); --glow-silver: var(--light-glow-silver); --glow-magenta: var(--light-glow-magenta); --glow-sage: var(--light-glow-sage); --glow-slate: var(--light-glow-slate); --glow-rose: var(--light-glow-rose); } } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 14px; scrollbar-gutter: stable; } body { font-family: var(--font); background: radial-gradient(1400px 700px at 80% -10%, var(--glow-plum), transparent 62%), radial-gradient(1200px 600px at 55% -5%, var(--glow-red), transparent 58%), radial-gradient(1000px 500px at 10% -10%, rgba(59, 130, 246, 0.18), transparent 58%), radial-gradient(900px 500px at 25% 115%, var(--glow-green), transparent 58%), radial-gradient(800px 450px at 95% 115%, var(--glow-magenta), transparent 58%), radial-gradient(700px 400px at 50% 50%, rgba(239, 68, 68, 0.10), transparent 60%), var(--bg); background-attachment: fixed; color: var(--text); min-height: 100vh; line-height: 1.45; -webkit-font-smoothing: antialiased; } /* Subtle noise overlay to break up gradient banding. Fixed, sits ABOVE all content (z-index 9999) so the grain shows through translucent cards too. pointer-events: none so it never blocks clicks/selection. Opacity is controlled by --noise-opacity (default 0.08) via the header slider. mix-blend-mode: overlay keeps the grain from washing out text — it darkens darks and lightens lights, so contrast is preserved/enhanced, not reduced. */ body::before { content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; mix-blend-mode: overlay; opacity: var(--noise-opacity, 0.08); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } /* ─── Header ─────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-soft); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 46px; } .header-left { display: flex; align-items: center; gap: 24px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; } .brand-mark { font-size: 1.3rem; filter: drop-shadow(0 0 8px var(--glow-red)) drop-shadow(0 0 12px var(--glow-plum)); } .brand-accent { background: linear-gradient(120deg, var(--accent), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nav { display: flex; gap: 4px; } .nav-link { color: var(--text-dim); text-decoration: none; font-size: 0.9rem; font-weight: 500; padding: 8px 14px; border-radius: 8px; transition: all 0.15s ease; } .nav-link:hover { color: var(--text); background: var(--bg-hover); } .nav-link.active { color: var(--copper); background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(124, 58, 237, 0.12)); box-shadow: inset 0 0 0 1px var(--border); } /* Theme toggle button */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(135deg, var(--bg-hover), var(--bg-card)); color: var(--text); font-size: 1.05rem; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .theme-toggle:hover { border-color: var(--copper); box-shadow: 0 0 0 1px var(--copper), 0 0 14px var(--glow-copper); transform: translateY(-1px); } .theme-toggle-icon { line-height: 1; } /* ─── Header actions (noise slider + theme toggle) ───────── */ .header-actions { display: flex; align-items: center; gap: 12px; } /* ─── Noise strength slider ──────────────────────────────── */ .noise-control { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; height: 24px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--bg-hover), var(--bg-card)); color: var(--text-dim); font-size: 0.78rem; white-space: nowrap; } .noise-control label { cursor: pointer; user-select: none; } .noise-control input[type="range"] { width: 70px; accent-color: var(--copper); cursor: pointer; } .noise-control .noise-val { min-width: 2.4em; text-align: right; font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--text); } /* ─── Hero ───────────────────────────────────────────────── */ .hero { padding: 20px 0 14px; text-align: center; } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; background: linear-gradient(120deg, var(--accent) 10%, var(--text) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero p { color: var(--text-dim); font-size: 0.95rem; max-width: 640px; margin: 6px auto 0; } /* ─── Stat cards ─────────────────────────────────────────── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; } .peak-row { display: flex; gap: 12px; margin: 0 0 12px; } .peak-row .card { flex: 1; margin-bottom: 0; } .stat-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 14px; text-align: center; text-decoration: none; color: inherit; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .stat-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 4px 20px var(--glow-red); } .stat-value { font-size: 1.6rem; font-weight: 800; font-family: var(--mono); background: linear-gradient(120deg, var(--accent-2), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-label { color: var(--text-dim); font-size: 0.82rem; font-weight: 500; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; } /* ─── Cards / sections ───────────────────────────────────── */ .card { background: linear-gradient(90deg, var(--accent), var(--orange), var(--gold), var(--plum), var(--blue)) top/100% 2px no-repeat, var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; position: relative; overflow: visible; } .card-title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; } .card-title .dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--orange), var(--gold)); box-shadow: 0 0 10px var(--accent); } .section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; } .section-head h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; position: relative; padding-bottom: 3px; background: linear-gradient(120deg, var(--accent) 20%, var(--text) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-head h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--orange), var(--gold)); } .section-head h2 a { font-size: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--text); text-decoration: none; } .section-head h2 a:hover { color: var(--copper); text-decoration: underline; } .section-sub { color: var(--text-faint); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .peak-date { font-size: 0.7rem; color: var(--text-faint); font-weight: 500; margin-top: 2px; white-space: nowrap; } /* Two-column layout for dashboard */ .dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; } .dash-grid > div { display: flex; flex-direction: column; } .dash-grid > div .card { flex: 1; margin-bottom: 0; } @media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } .dash-grid > div .card { margin-bottom: 16px; } } /* Mini stat badge */ .mini-stat { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-hover); border: 1px solid var(--border-soft); border-radius: 8px; padding: 4px 12px; font-size: 0.85rem; } .mini-stat strong { color: var(--accent-2); font-family: var(--mono); } /* ─── Tables ─────────────────────────────────────────────── */ .table-wrap { overflow: visible; border-radius: var(--radius-sm); } .maps-table-wrap { overflow: visible; } .maps-card .maps-table-wrap th.col-score, .maps-card .maps-table-wrap td.col-score { text-align: center; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } /* Global fixed layout: every table uses fixed column widths so the layout never shifts when rows are re-sorted or data changes. The flexible column (player/game/tournament name) is marked .col-flex and absorbs the remaining space; every other column gets a narrow fixed width via a shared class. */ table { table-layout: fixed; } /* Flexible name column — absorbs all remaining space. In table-layout: fixed, a column with no explicit width receives the space left over after the fixed-width columns. Long content is truncated with an ellipsis so it never pushes the table wider than its container. */ th.col-flex, td.col-flex { width: auto; } td.col-flex { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } td.col-flex .player-name { display: inline-flex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } /* Shared narrow fixed widths for non-flex columns. */ th.col-num, td.col-num { width: 56px; } /* generic narrow number (matches lb rank col) */ th.col-rating, td.col-rating { width: 64px; } /* rating / peak rating */ th.col-peak, td.col-peak { width: 120px; } /* peak rating + date under it */ th.col-rd, td.col-rd { width: 48px; } /* glicko RD */ th.col-peak-date, td.col-peak-date { width: 130px; } /* peak date */ th.col-w, td.col-w { width: 56px; } /* wins */ th.col-l, td.col-l { width: 56px; } /* losses */ th.col-m, td.col-m { width: 56px; } /* matches */ th.col-wr, td.col-wr { width: 56px; } /* win rate % */ .rival-link { color: inherit; text-decoration: none; display: block; width: 100%; } .rival-link:hover { color: var(--copper); text-decoration: underline; } th.col-delta, td.col-delta { width: 76px; } /* rating delta (Elo / Glicko-2) */ th.col-date, td.col-date { width: 110px; } /* date */ th.col-stage, td.col-stage { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* match stage */ th.col-score, td.col-score { width: 70px; } /* match score */ th.col-game, td.col-game { width: 120px; } /* game name */ th.col-tier, td.col-tier { width: 80px; text-align: center; } /* tier tag */ th.col-main-game, td.col-main-game { width: 150px; } /* main game */ th.col-tournament, td.col-tournament { width: 200px; } /* tournament */ /* Auto-sized tables (main page): switch off the global fixed layout so columns size to their content. The col-* width classes are neutralized here so they don't fight the natural sizing. */ table.auto-cols { table-layout: auto; } table.auto-cols th, table.auto-cols td { width: auto !important; } table.auto-cols td.col-flex { overflow: visible; text-overflow: clip; white-space: normal; } table.auto-cols td.col-flex .player-name { max-width: none; overflow: visible; } /* In auto-layout standings, keep the rank column narrow and let the Player column absorb the leftover space so # and Player stay anchored left instead of the extra width being spread across every column. */ table.player-ratings-table.auto-cols th:nth-child(1), table.player-ratings-table.auto-cols td:nth-child(1) { width: 64px !important; } table.player-ratings-table.auto-cols th:nth-child(2), table.player-ratings-table.auto-cols td:nth-child(2) { width: auto !important; } /* Cap the tournament column in auto-layout tables so a single long name doesn't blow out the layout and push the last column (Tier) off-screen. */ table.auto-cols th.col-tournament, table.auto-cols td.col-tournament { max-width: 300px; } table.auto-cols td.col-tournament { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Back-compat: existing tables that already set widths via nth-child keep working; these explicit rules just ensure the flexible column wins. */ table.lb-table th:nth-child(2) { width: auto; } /* Player — absorbs remaining space */ thead th { text-align: left; color: var(--text-faint); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: linear-gradient(120deg, var(--accent), var(--text-dim)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Sortable headers */ table.sortable thead th { cursor: pointer; user-select: none; } table.sortable thead th:hover { background: linear-gradient(120deg, var(--accent), var(--text)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Unified sort-arrow reserved space: applies to EVERY table header across the site (leaderboard, player page, matches, tournaments, h2h, home top players). Every header reserves a fixed space on the right for the sort triangle so text never shifts when a column is sorted. The triangle is transparent by default and only colors in when the column is sorted (sort-asc/sort-desc). */ thead th::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; vertical-align: middle; } /* Mirror the same reserved space on the LEFT of every header so the columns stay horizontally symmetric with the sort-arrow space on the right. Always transparent (the arrow only colors in on the right via ::after when actually sorted). */ thead th::before { content: ''; display: inline-block; width: 0; height: 0; margin-right: 6px; border-left: 4px solid transparent; border-right: 4px solid transparent; vertical-align: middle; } thead th.sort-asc::after { border-bottom: 5px solid var(--copper); } thead th.sort-desc::after { border-top: 5px solid var(--copper); } /* Server-side sort links (leaderboard) */ thead th a.sort-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; } thead th a.sort-link:hover { color: var(--copper); } thead th a.sort-link.active { color: var(--copper); } /* Rank column: left-aligned. The '#' header gets an invisible 30×30px box matching the rank-badge geometry so the '#' glyph centers exactly where the badge number centers. ::before sort-arrow spacer is hidden so the box sits flush-left like the badge. padding-left:20px gives glow room. */ th.num:first-child { position: relative; text-align: left; } th.num:first-child::before { display: none; } /* Invisible box for '#' header — same width as .rank-badge for horizontal alignment. Height is minimal so it doesn't add vertical space. */ th.num:first-child .rank-head-box, th.num:first-child a.sort-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; } tbody td { padding: 5px 14px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; /* Fixed-width font for ALL table data so numeric columns align consistently regardless of which font actually loads. */ font-family: var(--mono); } /* Allow long tournament names to wrap so the table fits and the last column (e.g. Tier) isn't pushed off-screen / cropped by overflow-x. */ td.tournament-cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 120px; } tbody tr { transition: background 0.12s ease; } tbody tr:hover { background: var(--bg-hover); } tbody tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; font-family: var(--mono); } /* Numeric cells need a wide enough content box for 4-digit values to render right-aligned. The base tbody td padding (14px each side) leaves only ~16px of content in a 44px cell, which overflows and makes the numbers render left-aligned. Reduce horizontal padding on numeric cells. */ td.num { padding-left: 4px; padding-right: 18px; } /* Rank badge cell: give the glow room so it isn't cropped by the cell edge. The badge is 30px with a 16px box-shadow glow; the base td.num padding (4px left) clips it. Add horizontal padding and widen the rank column. */ table.lb-table td.num:first-child, table.lb-table th.num:first-child, table.player-ratings-table td.num:first-child, table.player-ratings-table th.num:first-child, table.top-players-table td.num:first-child, table.top-players-table th.num:first-child, table.auto-cols td.num:first-child, table.auto-cols th.num:first-child { text-align: left; padding-left: 20px; padding-right: 14px; } /* Fixed row height for rank tables so rows without a badge (showing '—') are the same height as rows with the 30px badge. 30px badge + 5px top/bottom padding = 40px. Fixed height on the rank cell forces the row height (min-height on tr/td is ignored by Chromium's table layout). */ table.lb-table td.num:first-child, table.player-ratings-table td.num:first-child, table.top-players-table td.num:first-child, table.auto-cols td.num:first-child { height: 40px; } /* Rank badge cells: same vertical padding as other cells (5px). The badge glow (16px) pokes slightly into adjacent rows but the shadow is soft and low-opacity — keeping rows slim is more important than fully containing it. */ table.lb-table th:nth-child(1), table.player-ratings-table th:nth-child(1) { width: 64px; } /* Match header padding to data cells so header labels sit flush with the numbers below (otherwise headers have extra free space on the right). */ th.num { padding-left: 4px; padding-right: 4px; } td.center, th.center { text-align: center; } td.right, th.right { text-align: right; } td.left, th.left { text-align: left; } /* Visually hidden but available to screen readers (used to keep a column header label while hiding it visually, e.g. reserved RD column in Elo table). */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; background: var(--bg-hover); color: var(--text-dim); } .rank-1 { background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b); color: #1a1400; box-shadow: 0 0 16px var(--glow-yellow); } .rank-2 { background: linear-gradient(135deg, #fca5a5, #ef4444, #b91c1c); color: #fff; box-shadow: 0 0 12px var(--glow-copper); } .rank-3 { background: linear-gradient(135deg, #b91c1c, #7f1d1d, #4a0e0e); color: #fff; box-shadow: 0 0 12px var(--glow-red); } .rank-4 { background: linear-gradient(135deg, #c0c0c0, #8a8a8a); color: #1a1a1a; box-shadow: 0 0 12px var(--glow-silver); } .rank-5 { background: linear-gradient(135deg, #64748b, #475569); color: #fff; box-shadow: 0 0 12px var(--glow-slate); } .rating { font-family: var(--mono); font-weight: 600; } .rating-elo { color: var(--accent-2); } .rating-glicko2 { color: var(--plum); } /* Home Top Players: both Elo and Glicko-2 columns render white, like the player name. */ table.top-players-table .rating { color: var(--text); } .rating-pos { color: var(--green); } .rating-neg { color: var(--red); } a.player-link { color: var(--text); text-decoration: none; font-weight: 600; transition: color 0.12s ease; } a.player-link:hover { color: var(--copper); text-decoration: underline; } /* Clickable all-time peak value on the home page — links to the leaderboard for that game + system, sorted by peak. Keeps the original gold stat look (no default blue/underline), but underlines + recolors on hover like player names. */ a.peak-link { color: var(--gold); text-decoration: none; transition: color 0.12s ease; } a.peak-link:hover { color: var(--copper); text-decoration: underline; } /* Player name + country flag. The flag sits inline before the name and is sized to match the text; .flag-lg is the larger variant for page headers. */ .player-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .flag { font-size: 0.95em; display: inline-flex; align-items: center; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); } .flag-lg { font-size: 1.1em; } /* Larger flag for page headers (player page h1) — the fixed 20px width is too small next to a big heading, so bump it up here. */ .flag-lg .flag-img { width: 28px; } /* Real flag image (flagcdn SVG) — fixed PIXEL width so all flags are exactly the same width regardless of aspect ratio (Switzerland 1:1, most 3:2, Qatar 1:2) or parent font-size. Height auto-scales to preserve natural shape. */ .flag-img { width: 20px; height: auto; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); vertical-align: -0.1em; flex-shrink: 0; } a.game-link { color: var(--copper); text-decoration: none; font-weight: 500; font-size: 0.88rem; } a.game-link:hover { color: var(--copper); text-decoration: underline; } a.tournament-link { color: var(--text-dim); text-decoration: none; font-weight: 500; } a.tournament-link:hover { color: var(--copper); text-decoration: underline; } /* Tournaments page: tournament name column reads like player/match links (bold, non-dim), while the first/last match date columns stay dim 500. */ table.tournaments-table a.tournament-link { color: var(--text); font-weight: 600; } table.tournaments-table td.col-date { color: var(--text-dim); font-weight: 500; } a.tier-link { text-decoration: none; } a.tier-link:hover .tag { filter: brightness(1.2); } .tag { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .tag-premier { color: var(--gold); background-image: linear-gradient(120deg, var(--gold), var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-major { color: var(--accent); background-image: linear-gradient(120deg, var(--accent), var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-minor { color: var(--text-dim); } .tag-none { color: var(--text-faint); } /* Extended tier/tag color variants (used when data has these tiers) */ .tag-qualifier { color: var(--slate); background-image: linear-gradient(120deg, var(--slate), var(--silver)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-online { color: var(--sage); background-image: linear-gradient(120deg, var(--sage), var(--green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-showmatch { color: var(--magenta); background-image: linear-gradient(120deg, var(--magenta), var(--plum)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-frag { color: var(--orange); background-image: linear-gradient(120deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-plum { color: var(--plum); background-image: linear-gradient(120deg, var(--plum), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-copper { color: var(--copper); background-image: linear-gradient(120deg, var(--copper), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-silver { color: var(--silver); background-image: linear-gradient(120deg, var(--silver), var(--slate)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-rose { color: var(--rose-gold); background-image: linear-gradient(120deg, var(--rose-gold), var(--copper)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-yellow { color: var(--yellow); background-image: linear-gradient(120deg, var(--yellow), var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .tag-burgundy { color: var(--burgundy); background-image: linear-gradient(120deg, var(--burgundy), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .win { color: var(--green); font-weight: 600; } .loss { color: var(--red); font-weight: 600; } .score-link { text-decoration: none; border-bottom: 1px dashed var(--border); color: var(--text-dim); } .score-link:hover { border-bottom-color: var(--copper); } /* Form indicator */ .form-indicator { display: inline-flex; gap: 3px; } .form-dot { width: 9px; height: 9px; border-radius: 50%; } .form-dot.w { background: linear-gradient(135deg, var(--green), var(--sage)); box-shadow: 0 0 6px var(--glow-green); } .form-dot.l { background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 0 6px var(--glow-red); } .form-dot.d { background: linear-gradient(135deg, var(--slate), var(--silver)); box-shadow: 0 0 6px var(--glow-slate); } .form-dot.o { background: linear-gradient(135deg, var(--orange), var(--gold)); box-shadow: 0 0 6px var(--glow-orange); } .form-dot.p { background: linear-gradient(135deg, var(--plum), var(--magenta)); box-shadow: 0 0 6px var(--glow-plum); } /* ─── Filters / forms ────────────────────────────────────── */ .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; } .filters.section-filters { margin-bottom: 0; flex: 1 1 auto; justify-content: flex-end; } .filters select, .filters input, .filters button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); font-family: var(--font); font-size: 0.9rem; padding: 4px 10px; border-radius: var(--radius-sm); outline: none; transition: border-color 0.15s ease; } .filters select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px; } .filters select:focus, .filters input:focus { border-color: var(--copper); } .filters button { background: linear-gradient(120deg, var(--accent), var(--orange)); border: none; font-weight: 600; cursor: pointer; color: #fff; } .filters button:hover { filter: brightness(1.15); box-shadow: 0 4px 16px var(--glow-orange); } .filters button.btn-clear { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-weight: 500; } .filters button.btn-clear:hover { color: var(--text); border-color: var(--accent-2); box-shadow: none; filter: none; } .filters label { color: var(--text-dim); font-size: 0.85rem; font-weight: 500; } /* ─── Autocomplete dropdown ─────────────────────────── */ .ac-wrap { position: relative; display: inline-block; } .ac-list { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 100%; max-height: 260px; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-top: 4px; } .ac-item { padding: 8px 14px; font-size: 0.9rem; color: var(--text); cursor: pointer; white-space: nowrap; } .ac-item:hover, .ac-item.active { background: linear-gradient(135deg, var(--accent), var(--orange), var(--gold)); color: #fff; } .ac-id { margin-left: 8px; font-size: 0.75rem; color: var(--text-dim); } .ac-item:hover .ac-id, .ac-item.active .ac-id { color: rgba(255, 255, 255, 0.7); } /* ─── Pagination ──────────────────────────────────────── */ .pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 4px 2px; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.85rem; text-decoration: none; transition: color .15s, border-color .15s, background .15s; } a.page-link:hover { color: var(--text); border-color: var(--copper); } .page-link.current { background: linear-gradient(135deg, var(--accent), var(--orange), var(--gold)); border-color: transparent; color: #fff; font-weight: 600; box-shadow: 0 2px 10px var(--glow-orange); } .page-link.disabled { opacity: .4; cursor: not-allowed; } .page-ellipsis { color: var(--text-dim); padding: 0 2px; } /* ─── Player profile ────────────────────────────────────── */ .player-head { display: flex; align-items: center; gap: 16px; margin: 12px 0 10px; } .player-avatar { width: 64px; height: 64px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--orange), var(--gold), var(--plum), var(--magenta)); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #fff; box-shadow: 0 8px 24px var(--glow-red); } .player-head h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; line-height: 1.2; } .player-aliases { color: var(--text-dim); font-weight: 500; font-size: 1.1rem; letter-spacing: 0; } .player-sub { color: var(--text-dim); font-size: 0.95rem; } /* Match details page */ .map-thumb-wrap { position: relative; } .map-thumb-preview { position: fixed; max-width: 500px; max-height: 400px; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 50; pointer-events: none; left: 0; top: 0; } .map-thumb-wrap:hover .map-thumb-preview { opacity: 1; visibility: visible; transform: none; } .map-link { color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--border); } .map-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .match-link { color: var(--text-dim); text-decoration: none; font-weight: 500; } .match-link:hover { color: var(--copper); text-decoration: underline; } .rank-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .rank-pill { background: linear-gradient(135deg, var(--bg-card), var(--bg-hover)); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 10px; font-size: 0.78rem; color: var(--text-dim); } .rank-pill strong { color: var(--accent-2); font-family: var(--mono); } .count-badge { display: inline-block; vertical-align: middle; margin-left: 8px; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; font-size: 0.8rem; color: var(--text-faint); font-family: var(--mono); font-weight: 600; } .maplist-grid { display: flex; flex-wrap: nowrap; gap: 12px; } .map-plaque { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px; text-align: center; cursor: default; flex: 1 1 0; min-width: 0; } .map-plaque .map-name { font-family: var(--mono); font-size: 0.9rem; font-weight: 600; color: var(--text); } .map-thumb-wrap .map-plaque-img { width: 100%; height: auto; display: block; border-radius: var(--radius-xs); } .map-plaque-preview { position: fixed; max-width: 500px; max-height: 400px; border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.15s ease; z-index: 50; pointer-events: none; left: 0; top: 0; } .map-thumb-wrap:hover .map-plaque-preview { opacity: 1; visibility: visible; } /* Player highlight cards */ .highlight-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; } .highlight-box { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 8px; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; } .highlight-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--orange), var(--gold), var(--plum), var(--blue)); opacity: 0.6; } .highlight-box .label { flex: 0 0 auto; color: var(--text-faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .highlight-box .value { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--text); margin-top: 2px; } .highlight-box .value.accent { background: linear-gradient(120deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.gold { background: linear-gradient(120deg, var(--gold), var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.green { background: linear-gradient(120deg, var(--green), var(--sage)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.red { background: linear-gradient(120deg, var(--red), var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.copper { background: linear-gradient(120deg, var(--copper), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.plum { background: linear-gradient(120deg, var(--plum), var(--magenta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.silver { background: linear-gradient(120deg, var(--silver), var(--slate)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.rose { background: linear-gradient(120deg, var(--rose-gold), var(--copper)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.orange { background: linear-gradient(120deg, var(--orange), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.sage { background: linear-gradient(120deg, var(--sage), var(--green)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.slate { background: linear-gradient(120deg, var(--slate), var(--silver)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.blush { background: linear-gradient(120deg, var(--blush), var(--rose-gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.magenta { background: linear-gradient(120deg, var(--magenta), var(--plum)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.yellow { background: linear-gradient(120deg, var(--yellow), var(--orange)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.burgundy { background: linear-gradient(120deg, var(--burgundy), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.cream { background: linear-gradient(120deg, var(--cream), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .highlight-box .value.taupe { background: linear-gradient(120deg, var(--taupe), var(--copper)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ─── Charts ────────────────────────────────────────────── */ .chart-box { position: relative; height: 220px; } .chart-box.tall { height: 300px; } .chart-box.small { height: 160px; } /* ─── H2H ───────────────────────────────────────────────── */ .h2h-score { display: flex; align-items: center; justify-content: center; gap: 32px; padding: 8px 0; } .h2h-player { text-align: center; min-width: 160px; } .h2h-player .name { font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; line-height: 1.2; } .h2h-player .rating { color: var(--text-faint); font-size: 0.8rem; margin-top: 2px; } .h2h-player .rating + .rating { margin-top: 1px; } .h2h-player .wins { font-family: var(--mono); font-size: 2.4rem; font-weight: 800; background: linear-gradient(120deg, var(--accent), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .h2h-player .wins.win { background: none; -webkit-text-fill-color: var(--green); color: var(--green); } .h2h-player .wins.loss { background: none; -webkit-text-fill-color: var(--red); color: var(--red); } .h2h-vs { color: var(--text-faint); font-weight: 800; font-size: 4.5rem; line-height: 1; letter-spacing: -0.05em; } .h2h-vs .vs-link { color: inherit; text-decoration: none; transition: color 0.15s ease; } .h2h-vs .vs-link:hover { color: var(--copper); text-decoration: underline; } .h2h-breakdown { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px; } .h2h-stat { text-align: center; padding: 8px; background: var(--bg-soft); border-radius: var(--radius-sm); } .h2h-stat .label { color: var(--text-faint); font-size: 0.8rem; } .h2h-stat .value { font-family: var(--mono); font-size: 1.2rem; font-weight: 700; background: linear-gradient(120deg, var(--copper), var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ─── Empty state ───────────────────────────────────────── */ .empty { text-align: center; color: var(--text-faint); padding: 20px 0; font-size: 1rem; } .empty .big { font-size: 2.4rem; margin-bottom: 12px; } /* ─── Footer ────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border-soft); margin-top: 20px; padding: 10px 0; color: var(--text-faint); font-size: 0.85rem; text-align: center; position: relative; } .site-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--orange), var(--gold), var(--plum), var(--blue), var(--magenta)); opacity: 0.5; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; } .site-footer .noise-control { align-self: flex-end; margin-top: 9px; } /* ─── Responsive ─────────────────────────────────────────── */ @media (max-width: 720px) { .header-inner { flex-direction: column; height: auto; padding: 8px 0; gap: 8px; } .nav { flex-wrap: wrap; justify-content: center; } .hero { padding: 20px 0 14px; } .player-head { flex-direction: column; text-align: center; } .h2h-score { flex-direction: column; gap: 12px; } .h2h-breakdown { grid-template-columns: 1fr; } }