/* pingrank.gg — BBS/ANSI brand direction "1d" Tokens from design/README.md; brand elements are hard-edged (radius 0), outer content panels may use 6px. */ :root { /* color-scheme keeps the browser's own canvas matched to the theme during navigation, so pages never flash the wrong shade between loads. */ color-scheme: dark; --bg: #05080f; --bg-panel: #080c16; --bg-inset: #070b15; --bg-slab-top: #0a1428; --surface-box: #080f22; --border: #16233f; --blue-900: #1e40e0; --blue-700: #2f5cff; --blue-500: #3a68ff; --blue-400: #4d7bff; --blue-300: #5f86ff; --blue-200: #7aa0ff; --blue-100: #a8c0ff; --text: #eaf0ff; --text-dim: #93a5cc; --text-dim-2: #7d90ba; --text-faint: #66799f; --text-shade: #1e3a7a; /* Lone off-brand accent, reserved for heads-up moments: admin verdicts that need an operator's eye (last-hop promote/review) and the estimate marker on last-hop games (badge, note, "+" on figures). Muted gold that sits on the dark blue. */ --amber: #e8a33d; /* Text sitting on a filled blue-700/900 or amber badge — stays light in both themes (the fill stays dark), so it can't follow --text. */ --text-on-accent: #eaf0ff; --text-on-amber: #1a1204; --panel-head-bg: #0b1424; --panel-head-hero-bg: #0c1730; --row-border: #0d1526; --row-hover: #0b1424; --note-bg: #070c17; --sig-off: #152444; /* Game logos come as-is — several are white-on-transparent — so their tile stays dark in both themes. */ --icon-tile: #070b15; --scanline: rgba(120, 150, 255, 0.05); --glow-rgb: 47, 92, 255; --hero-glow: 0 0 18px rgba(47, 92, 255, 0.3); --mono: 'Twemoji Country Flags', 'IBM Plex Mono', ui-monospace, Consolas, monospace; /* shared page column: 1200px centered on desktop, gutter padding below that. Backgrounds stay full-bleed; only the content is inset. */ --gutter: max(26px, calc((100% - 1200px) / 2)); } /* ---- light theme: night chrome, paper page ---- Dark is the default: the layout's inline script stamps data-theme="dark" on before first paint unless the header toggle stored "light" or "auto" (auto leaves the attribute off so the media block below follows the OS). The brand chrome — site header, site footer, panel heads — keeps the dark theme in light mode: the logo, meter, scanlines, and glow never translate to daylight because they never leave the dark slab. Only the reading surfaces go to paper: cool near-neutral — never warm cream — with text in deep navy and cobalt kept saturated for accents. The blue ramp inverts by role on the paper side (tokens named --blue-1xx..9xx are roles, not fixed lightness): what was near-white emphasis text becomes deep navy. All text pairs hold WCAG AA (4.5:1). The chrome rule re-scopes the FULL dark token set onto the chrome elements, so everything inside them — wordmark, nav, mark bars, filter selects, tags, livedot — resolves through vars exactly as in dark mode; color-scheme:dark keeps native select popups matched. The site footer takes its slab from the base rule's background: var(--bg). Each block appears twice: once for OS-light (unless forced dark), once for forced light. CSS cannot share one rule between a media query and a selector — KEEP BOTH COPIES IDENTICAL. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #eef1f7; --bg-panel: #f9fafd; --bg-inset: #e7edf8; --bg-slab-top: #dfe7f6; --surface-box: #f2f5fc; --border: #c3cde4; --blue-900: #1e40e0; --blue-700: #2447d0; --blue-500: #2c55e6; --blue-400: #1e46d6; --blue-300: #2450e8; --blue-200: #1a3cba; --blue-100: #122d8f; --text: #101a30; --text-dim: #3e4d73; --text-dim-2: #586487; --text-faint: #5c6a92; --text-shade: #b8c5e2; --amber: #955e06; --text-on-accent: #f7f9ff; --text-on-amber: #fff; --panel-head-bg: #e9eef9; --panel-head-hero-bg: #dce6f8; --row-border: #e0e7f4; --row-hover: #eaf0fb; --note-bg: #edf1f9; --sig-off: #c8d5ec; --icon-tile: #0d1830; --scanline: rgba(30, 64, 200, 0.05); --glow-rgb: 30, 64, 200; /* a glow behind dark text on paper reads as smudge, not light */ --hero-glow: none; } :root:not([data-theme="dark"]) .site-header, :root:not([data-theme="dark"]) .site-footer, :root:not([data-theme="dark"]) .panel-head { color-scheme: dark; --bg: #05080f; --bg-panel: #080c16; --bg-inset: #070b15; --bg-slab-top: #0a1428; --surface-box: #080f22; --border: #16233f; --blue-900: #1e40e0; --blue-700: #2f5cff; --blue-500: #3a68ff; --blue-400: #4d7bff; --blue-300: #5f86ff; --blue-200: #7aa0ff; --blue-100: #a8c0ff; --text: #eaf0ff; --text-dim: #93a5cc; --text-dim-2: #7d90ba; --text-faint: #66799f; --text-shade: #1e3a7a; --amber: #e8a33d; --text-on-accent: #eaf0ff; --text-on-amber: #1a1204; --panel-head-bg: #0b1424; --panel-head-hero-bg: #0c1730; --row-border: #0d1526; --row-hover: #0b1424; --note-bg: #070c17; --sig-off: #152444; --icon-tile: #070b15; --scanline: rgba(120, 150, 255, 0.05); --glow-rgb: 47, 92, 255; } /* Bare row logos get the dark tile back — white logos would vanish on a light row. (.tag-icon needs nothing: it sits inside the dark head.) */ :root:not([data-theme="dark"]) .game-icon.xs { background: var(--icon-tile); } } :root[data-theme="light"] { color-scheme: light; --bg: #eef1f7; --bg-panel: #f9fafd; --bg-inset: #e7edf8; --bg-slab-top: #dfe7f6; --surface-box: #f2f5fc; --border: #c3cde4; --blue-900: #1e40e0; --blue-700: #2447d0; --blue-500: #2c55e6; --blue-400: #1e46d6; --blue-300: #2450e8; --blue-200: #1a3cba; --blue-100: #122d8f; --text: #101a30; --text-dim: #3e4d73; --text-dim-2: #586487; --text-faint: #5c6a92; --text-shade: #b8c5e2; --amber: #955e06; --text-on-accent: #f7f9ff; --text-on-amber: #fff; --panel-head-bg: #e9eef9; --panel-head-hero-bg: #dce6f8; --row-border: #e0e7f4; --row-hover: #eaf0fb; --note-bg: #edf1f9; --sig-off: #c8d5ec; --icon-tile: #0d1830; --scanline: rgba(30, 64, 200, 0.05); --glow-rgb: 30, 64, 200; --hero-glow: none; } :root[data-theme="light"] .site-header, :root[data-theme="light"] .site-footer, :root[data-theme="light"] .panel-head { color-scheme: dark; --bg: #05080f; --bg-panel: #080c16; --bg-inset: #070b15; --bg-slab-top: #0a1428; --surface-box: #080f22; --border: #16233f; --blue-900: #1e40e0; --blue-700: #2f5cff; --blue-500: #3a68ff; --blue-400: #4d7bff; --blue-300: #5f86ff; --blue-200: #7aa0ff; --blue-100: #a8c0ff; --text: #eaf0ff; --text-dim: #93a5cc; --text-dim-2: #7d90ba; --text-faint: #66799f; --text-shade: #1e3a7a; --amber: #e8a33d; --text-on-accent: #eaf0ff; --text-on-amber: #1a1204; --panel-head-bg: #0b1424; --panel-head-hero-bg: #0c1730; --row-border: #0d1526; --row-hover: #0b1424; --note-bg: #070c17; --sig-off: #152444; --icon-tile: #070b15; --scanline: rgba(120, 150, 255, 0.05); --glow-rgb: 47, 92, 255; } :root[data-theme="light"] .game-icon.xs { background: var(--icon-tile); } * { box-sizing: border-box; } /* Flag emoji render as bare letters on Windows (no OS flag font). This subset font supplies the flags; unicode-range limits it to the regional-indicator pairs, so all other text still uses IBM Plex Mono. */ @font-face { font-family: 'Twemoji Country Flags'; unicode-range: U+1F1E6-1F1FF; src: url('/static/fonts/TwemojiCountryFlags.woff2') format('woff2'); font-display: swap; } /* IBM Plex Mono, self-hosted (latin + latin-ext subsets from Google Fonts v20). Other scripts fall back to the system monospace stack in --mono. */ @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexMono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexMono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/IBMPlexMono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/IBMPlexMono-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/IBMPlexMono-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } html { background: var(--bg); } body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.6 var(--mono); -webkit-font-smoothing: antialiased; } a { color: var(--blue-300); text-decoration: none; } a:hover { color: var(--blue-100); } /* ---- swap transitions ---- In-page htmx swaps fade their container with a plain opacity transition, NOT the View Transitions API. A view transition snapshots the page and paints text with grayscale AA instead of the platform's subpixel/ClearType, which made text shimmer heavier/brighter for the length of each swap on Windows. Instead each filter swaps innerHTML into a stable container with transition:false + swap/settle delays (see the filter forms), so htmx holds the fade: the container fades out, its contents swap while invisible (so a changing row count never bounces the page), then it fades back in. */ @view-transition { navigation: auto; } /* cross-document navigation only */ #lb-table, #games-grid { transition: opacity 120ms ease; } #lb-table.htmx-swapping, #lb-table.htmx-settling, #games-grid.htmx-swapping, #games-grid.htmx-settling { opacity: 0; } @media (prefers-reduced-motion: reduce) { #lb-table, #games-grid { transition: none; } } /* ---- scanline slab ---- */ .slab { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--bg-slab-top) 0%, var(--bg-inset) 100%); } .slab::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 4px); pointer-events: none; } .slab > * { position: relative; z-index: 1; } /* ---- ping-meter mark ---- */ .mark { display: flex; align-items: flex-end; justify-content: center; border: 2px solid var(--blue-700); background: var(--surface-box); flex: none; } .mark span { display: block; } .mark span:nth-child(1) { height: 26%; background: var(--blue-900); } .mark span:nth-child(2) { height: 50%; background: var(--blue-500); } .mark span:nth-child(3) { height: 74%; background: var(--blue-300); } .mark span:nth-child(4) { height: 100%; background: var(--blue-100); } .mark--40 { width: 40px; height: 40px; gap: 3px; padding: 6px 0; } .mark--40 span { width: 5px; } .mark--104 { width: 104px; height: 104px; gap: 6px; padding: 14px 0; } .mark--104 span { width: 12px; } /* ---- site header (spec lockup) ---- */ .site-header { display: flex; align-items: center; gap: 16px; padding: 18px var(--gutter); background: linear-gradient(180deg, var(--bg-slab-top) 0%, var(--bg-inset) 100%); position: relative; overflow: hidden; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .site-header::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, var(--scanline) 0 1px, transparent 1px 4px); pointer-events: none; } .site-header > * { position: relative; z-index: 1; } .brand { display: flex; align-items: center; gap: 16px; color: var(--text); } .brand:hover { color: var(--text); } .wordmark { display: flex; align-items: baseline; gap: 8px; } .wordmark b { font-family: var(--mono); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.5px; color: var(--text); } .wordmark b i { font-style: normal; color: var(--blue-400); } .wordmark small { font-family: var(--mono); font-size: 11px; letter-spacing: 5px; color: var(--blue-700); } .site-nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; letter-spacing: 1px; } .site-nav a { color: var(--text-dim); } .site-nav a:hover { color: var(--blue-200); } .site-nav a.active { color: var(--blue-400); } /* theme toggle: styled as one more nav item; hidden until its script runs */ .theme-btn { border: 0; background: none; padding: 0; font: inherit; letter-spacing: inherit; color: var(--text-dim); cursor: pointer; } .theme-btn:hover { color: var(--blue-200); } /* ---- layout ---- */ main { padding: 36px var(--gutter) 72px; } .site-footer { border-top: 1px solid var(--border); padding: 26px var(--gutter); /* same as the page in dark mode; the light theme re-scopes --bg dark here so the footer reads as the closing slab of the night chrome */ background: var(--bg); color: var(--text-dim-2); font-size: 13px; } .site-footer .shade-rule { margin-bottom: 14px; } .site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; } .site-footer a { color: var(--text-dim); } .shade-rule { font-size: 14px; line-height: 1; letter-spacing: -1px; color: var(--text-shade); white-space: nowrap; overflow: hidden; } /* The glyphs live in CSS content, not the DOM: the strip is pure decoration (WCAG 1.4.3 exempts it) but contrast scanners cannot tell, and they do not evaluate pseudo-element text. Deliberately below 4.5:1 — it is shading. */ .shade-rule::before { content: "█▓▒░ real-time game latency rankings ░▒▓████▓▒░░"; } /* ---- home hero: a slim thesis band; the ranking below is the real hero ---- */ .home-hero { border: 1px solid var(--border); border-radius: 6px; padding: 22px clamp(20px, 4vw, 32px); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 34px; flex-wrap: wrap; } .home-hero .lede { flex: 1 1 auto; min-width: 0; } .home-hero .kick { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--blue-700); margin-bottom: 10px; } .home-hero .lede h1 { font-size: clamp(24px, 3.4vw, 33px); line-height: 1.08; letter-spacing: -0.5px; text-wrap: pretty; text-shadow: var(--hero-glow); } .home-hero .lede h1 i { font-style: normal; color: var(--blue-300); } .home-hero .lede p { margin: 12px 0 0; color: var(--text-dim); font-size: 15px; max-width: 56ch; } .home-hero .lede .hero-cta { color: var(--blue-200); font-weight: 600; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* live indicator: a slow pulse marks the ranking as continuously updated */ .livedot { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-200); } .livedot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-300); box-shadow: 0 0 8px var(--blue-300); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .livedot::before { animation: none; } } /* the leaderboard IS the hero: lift its panel so the eye lands here first */ .panel--hero { border-color: var(--blue-700); box-shadow: 0 0 0 1px rgba(var(--glow-rgb), 0.12), 0 0 30px rgba(var(--glow-rgb), 0.08); } .panel--hero > .panel-head { background: var(--panel-head-hero-bg); } .head-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .head-link { font-size: 12px; font-weight: 400; letter-spacing: 1px; color: var(--text-dim-2); } .head-link:hover { color: var(--blue-200); } /* ---- buttons ---- */ .btn { display: inline-block; border: 1px solid var(--blue-700); background: var(--surface-box); color: var(--blue-200); font-family: var(--mono); font-size: 14px; letter-spacing: 1px; padding: 10px 18px; cursor: pointer; } .btn:hover { color: var(--text); box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.45), inset 0 0 8px rgba(var(--glow-rgb), 0.18); } .btn--ghost { border-color: var(--border); color: var(--text-dim); } .btn--ghost:hover { border-color: var(--blue-700); color: var(--blue-200); } /* ---- panels / sections ---- */ .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 28px; } /* Panel heads: the descriptive text is the heading, so it carries the bright full-weight ink; the tag is a quiet outlined index leading the line. The old arrangement (filled tag right, dim text left) made the index the brightest thing in the bar and the heading a label. */ .panel-head { display: flex; align-items: center; justify-content: flex-start; gap: 14px; padding: 13px 16px; background: var(--panel-head-bg); border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.4px; flex-wrap: wrap; } .panel-head .tag { background: none; border: 1px solid var(--border); color: var(--text-dim-2); font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 3px; } /* Composite heads (home hero, leaderboard): the tag holds the title itself — a game name or summary — so it takes the heading ink bare, and the controls beside it keep to the right edge. */ .panel--hero > .panel-head, #lb-panel > .panel-head { justify-content: space-between; } .panel--hero .panel-head .tag, #lb-panel .panel-head .tag { border: none; padding: 0; color: var(--text); font-size: 15px; } .panel-body { padding: 18px 16px; } h1, h2, h3 { font-family: var(--mono); font-weight: 700; letter-spacing: 1px; } h1 { font-size: 24px; margin: 0 0 6px; } h2 { font-size: 17px; color: var(--blue-200); margin: 0 0 12px; } .page-intro { color: var(--text-dim); font-size: 15px; margin: 0 0 26px; max-width: 70ch; } .isp-asn { color: var(--blue-200); font-weight: 600; letter-spacing: 1px; } /* ---- admin subnav ---- */ .admin-subnav { display: flex; gap: 20px; margin-bottom: 22px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; } .admin-subnav a { color: var(--text-dim); } .admin-subnav a:hover { color: var(--blue-200); } .admin-subnav a.active { color: var(--blue-400); } /* Eligibility badges: intensity, not hue — confirmed reads strongest, a diagnostic-only endpoint recedes. Keeps the monochrome-blue brand. */ .elig { display: inline-block; border-radius: 3px; padding: 1px 7px; font-size: 11px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; } .elig-confirmed { background: var(--blue-700); color: var(--text-on-accent); } .elig-probable { background: transparent; color: var(--blue-200); border: 1px solid var(--blue-500); } .elig-diagnostic-only { background: transparent; color: var(--text-faint); border: 1px solid var(--border); } /* Diagnostic-only rows recede so the eye lands on real servers first. */ table.lb tr.muted-row td { color: var(--text-faint); } /* Last-hop detector: last-hop share as a bar so 100%-vs-0% reads at a glance. */ .share { display: flex; align-items: center; gap: 9px; min-width: 128px; } .share-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-inset); border: 1px solid var(--border); overflow: hidden; } .share-bar span { display: block; height: 100%; background: var(--blue-500); } .share b { color: var(--text); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } /* Verdict badges. Steady states stay monochrome (intensity, not hue); the two verdicts that ask an operator to act borrow one restrained amber so they can't be missed — promote filled, review outlined. */ .verdict { display: inline-block; border-radius: 3px; padding: 1px 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; } .verdict-promote { background: var(--amber); color: var(--text-on-amber); } .verdict-demote { background: transparent; color: var(--amber); border: 1px solid var(--amber); } .verdict-ok { background: transparent; color: var(--blue-200); border: 1px solid var(--blue-500); } .verdict-direct { background: transparent; color: var(--text-dim); border: 1px solid var(--border); } .verdict-insufficient { background: transparent; color: var(--text-faint); border: 1px solid var(--border); } .verdict-note { display: block; margin-top: 3px; font-size: 10px; color: var(--text-faint); letter-spacing: .3px; } table.lb tr.muted-row td code { color: var(--text-dim-2); } td.num.muted { color: var(--text-faint); } /* ---- stat strip ---- */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 36px; } .stat { background: var(--bg-panel); padding: 16px 18px; } .stat b { display: block; font-size: 26px; font-weight: 700; color: var(--blue-100); line-height: 1.15; } .stat span { font-size: 12px; letter-spacing: 2px; color: var(--text-dim-2); text-transform: uppercase; } /* A worded value (a game name) sits lower than the numeric tiles so long names fit the same tile. */ .stat b.words { font-size: 17px; padding-top: 6px; line-height: 1.3; } /* ---- filters ---- */ .filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13px; font-weight: 400; color: var(--text-dim); } .filters label { letter-spacing: 1px; } select, input[type="search"], input[type="text"] { font-family: var(--mono); font-size: 14px; color: var(--text); background: var(--surface-box); border: 1px solid var(--border); padding: 7px 10px; border-radius: 0; } select:focus, input:focus { outline: none; border-color: var(--blue-700); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.35); } /* ---- tables ---- */ .table-scroll { overflow-x: auto; } table.lb { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; } table.lb th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); padding: 10px 9px; border-bottom: 1px solid var(--border); } table.lb td { padding: 10px 9px; border-bottom: 1px solid var(--row-border); color: var(--text-dim); } table.lb td.net { max-width: 230px; overflow: hidden; text-overflow: ellipsis; } table.lb tr:hover td { background: var(--row-hover); } table.lb td.rank { color: var(--text-faint); width: 1%; } table.lb td.region { color: var(--text); width: 1%; } /* rank badge + lit podium: the top three get weight so a long table has a head */ .rk { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 5px; font-size: 12px; font-weight: 700; border-radius: 3px; font-variant-numeric: tabular-nums; } table.lb tr.top td { background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.07), transparent 60%); } table.lb tr.top:hover td { background: linear-gradient(90deg, rgba(var(--glow-rgb), 0.12), var(--row-hover) 60%); } tr.top1 .rk { background: var(--blue-700); color: var(--text-on-accent); } tr.top2 .rk { background: transparent; color: var(--blue-100); border: 1px solid var(--blue-500); } tr.top3 .rk { background: transparent; color: var(--blue-200); border: 1px solid var(--blue-700); } table.lb td .game-link { color: var(--text); } table.lb td .game-link:hover { color: var(--blue-200); } table.lb td.num { text-align: right; font-variant-numeric: tabular-nums; } table.lb td.p50 { color: var(--blue-100); font-weight: 700; } table.lb td.p95 { color: var(--blue-300); } th.num { text-align: right !important; } .empty-row td { color: var(--text-faint); padding: 26px 12px; text-align: center; } /* in-cell signal meter */ .sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 8px; vertical-align: -2px; } .sig span { width: 3px; background: var(--sig-off); display: block; } .sig span:nth-child(1) { height: 26%; } .sig span:nth-child(2) { height: 50%; } .sig span:nth-child(3) { height: 74%; } .sig span:nth-child(4) { height: 100%; } .sig[data-bars="1"] span:nth-child(-n+1), .sig[data-bars="2"] span:nth-child(-n+2), .sig[data-bars="3"] span:nth-child(-n+3), .sig[data-bars="4"] span:nth-child(-n+4) { background: var(--blue-300); } .sig[data-bars="4"] span:nth-child(4) { background: var(--blue-100); } /* ---- table header tooltips ---- Triggers are real links to the FAQ column glossary; popovers provide a hover/focus summary. */ .tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; font-weight: 700; vertical-align: 1px; } .tip:hover, .tip:focus-visible { border-color: var(--blue-700); color: var(--blue-200); box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.35); } /* invisible outer hit area so the 15px trigger doesn't demand precision */ .tip::before { content: ""; position: absolute; inset: -6px; } /* word variant: the header label itself is the trigger — no badge box, just a dotted underline signalling "hover me" */ .tip-word { width: auto; height: auto; margin-left: 0; border: none; border-bottom: 1px dotted var(--text-dim-2); color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; vertical-align: baseline; } .tip-word:hover, .tip-word:focus-visible { border: none; border-bottom: 1px dotted var(--blue-200); color: var(--blue-200); box-shadow: none; } .tip-pop { visibility: hidden; opacity: 0; /* fixed so the box escapes .table-scroll's overflow clipping (which would cut it off on short tables); left/top are set by the layout script */ position: fixed; z-index: 5; transform: translateX(-50%); width: 260px; padding: 10px 12px; background: var(--surface-box); border: 1px solid var(--blue-700); box-shadow: 0 0 12px rgba(var(--glow-rgb), 0.3); font-size: 13px; font-weight: 400; line-height: 1.55; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; color: var(--text-dim); /* grace period: linger ~300ms after hover leaves so the pointer can come back without the tooltip vanishing underneath it */ transition: opacity 120ms ease 200ms, visibility 0s linear 320ms; } /* safe triangle: an invisible collar bridging the gap up to the trigger, clipped to the path a cursor takes from the trigger apex to the popover's top corners — diagonal travel toward the popover never drops :hover (the popover is a DOM child of .tip, so hovering it keeps .tip:hover) */ .tip-pop::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; clip-path: polygon(var(--tip-apex, 50%) 0, 0 100%, 100% 100%); } .tip-pop b { color: var(--blue-200); font-weight: 600; } .tip:hover .tip-pop, .tip:focus-visible .tip-pop { visibility: visible; opacity: 1; transition: opacity 120ms ease, visibility 0s; } /* ---- games grid ---- */ .game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .game-card { display: flex; align-items: flex-start; gap: 13px; border: 1px solid var(--border); background: var(--bg-panel); padding: 16px; color: var(--text); } .game-body { min-width: 0; } .game-card:hover { border-color: var(--blue-700); color: var(--text); box-shadow: 0 0 12px rgba(var(--glow-rgb), 0.25); } .game-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; font-size: 15px; letter-spacing: 0; } .p2p-badge { display: inline-block; background: var(--blue-900); color: var(--text-on-accent); border-radius: 3px; padding: 1px 6px; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: 1px; vertical-align: 2px; } /* ---- game page header: icon + title + state badges ---- */ .game-top { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .game-heading { min-width: 0; } .game-heading .kick { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim-2); margin-bottom: 5px; } .game-heading h1 { font-size: 26px; } .badges { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 3px; padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: 1px; border: 1px solid var(--blue-700); color: var(--blue-200); background: var(--surface-box); } /* Heads-up badge: the one fact that changes how every number on the page reads — an estimate floor, or a player host — so it takes the amber accent instead of fading out. */ .badge--warn { border-color: var(--amber); color: var(--amber); } /* Floor marker on estimated figures ("103+ ms"): real in-game ping runs higher. Amber ties it to the estimate badge and note. */ .lh-plus { color: var(--amber); font-weight: 700; cursor: help; } /* Heads-up note: the plain-words version of the warn badge, always visible above the board on last-hop and player-hosted games — never folded into the caveat. */ .game-note { border: 1px solid var(--amber); border-radius: 6px; background: var(--bg-panel); padding: 10px 14px; font-size: 13px; line-height: 1.55; color: var(--text-dim); margin-bottom: 16px; } .game-note .lh-plus { cursor: inherit; } /* ---- readout: the game's answer at a glance, replacing the intro prose ---- */ .readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 16px; } .ro { background: var(--bg-panel); padding: 13px 16px; } .ro .k { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim-2); } .ro .v { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; margin-top: 3px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 7px; min-width: 0; } .ro .v .ro-net { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ro .v .u { font-size: 12px; font-weight: 400; color: var(--text-dim-2); letter-spacing: 1px; flex: none; } .ro.hi .v { color: var(--blue-100); } /* ---- caveat: one collapsible line folding every methodology/privacy note ---- */ .caveat { border: 1px solid var(--border); border-radius: 6px; background: var(--bg-panel); margin-bottom: 24px; overflow: hidden; } .caveat summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--text-dim-2); } .caveat summary::-webkit-details-marker { display: none; } .caveat summary b { color: var(--text-dim); font-weight: 600; } .caveat summary .i { flex: none; width: 16px; height: 16px; border: 1px solid var(--border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--blue-200); } .caveat summary .chev { margin-left: auto; color: var(--text-faint); transition: transform 0.15s ease; } .caveat[open] summary .chev { transform: rotate(90deg); } .caveat:hover summary { color: var(--text-dim); } .caveat .body { display: grid; gap: 10px; padding: 14px 16px 16px 40px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-dim); max-width: 82ch; } .caveat .body b { color: var(--blue-100); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .caveat summary .chev { transition: none; } } /* secondary-section footnote (e.g. MaxMind attribution under locations) */ .secnote { font-size: 12.5px; color: var(--text-dim-2); padding: 12px 16px; border-top: 1px solid var(--border); background: var(--note-bg); } .secnote b { color: var(--blue-200); font-weight: 600; } /* strip above a ranking table: the visitor's region has no rows yet, the board fell back to worldwide (lives inside the htmx-swapped fragment) */ .region-note { font-size: 12.5px; color: var(--text-dim-2); padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--note-bg); } /* region chips: one-click regional views of the board, busiest countries first, plain links so the regional pages are crawlable */ .region-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--border); } .region-chips .chip { font-size: 12px; letter-spacing: 0.5px; padding: 3px 9px; border: 1px solid var(--border); color: var(--text-dim-2); white-space: nowrap; } .region-chips .chip:hover { color: var(--blue-200); border-color: var(--blue-300); } .region-chips .chip.active { color: var(--blue-100); border-color: var(--blue-400); background: var(--panel-head-hero-bg); } /* Game logos vary wildly — square emblems, wide wordmarks, transparent and opaque. A fixed inset tile with the art contained inside makes the grid read as one system regardless of the source art. Hard-edged per the brand. */ .game-icon { flex: none; width: 52px; height: 52px; object-fit: contain; background: var(--icon-tile); border: 1px solid var(--border); padding: 4px; } .game-card:hover .game-icon { border-color: var(--blue-700); } .game-icon.lg { width: 64px; height: 64px; padding: 6px; } .game-title { display: flex; align-items: center; gap: 14px; } /* On the leaderboard the logo is a marker beside a label that already names the game, so it drops the tile — at this size the border and padding would eat the art rather than frame it. */ .game-icon.xs, .game-icon.tag-icon { border: 0; background: none; padding: 0; } .game-icon.xs { width: 20px; height: 20px; } .game-icon.tag-icon { width: 14px; height: 14px; } table.lb td .game-link { display: flex; align-items: center; gap: 8px; } .panel-head .tag { display: inline-flex; align-items: center; gap: 7px; } .game-card .meta { font-size: 13px; color: var(--text-dim-2); } .game-card .meta b { color: var(--blue-200); font-weight: 600; } .game-card.nodata { opacity: 0.55; } .game-card.nodata:hover { opacity: 0.85; } /* ---- CLI banner lockup (spec: CSS borders, never box-drawing chars) ---- */ .cli-banner { border: 1px solid var(--blue-700); box-shadow: inset 0 0 0 3px var(--bg-inset), inset 0 0 0 4px rgba(var(--glow-rgb), 0.35); background: var(--surface-box); padding: 18px 22px; font-size: 14px; line-height: 1.7; color: var(--blue-400); overflow-x: auto; } .cli-banner .t { color: var(--text); font-weight: 700; letter-spacing: 2px; } .cli-banner .d { color: var(--text-dim-2); } .cursor { display: inline-block; width: 8px; height: 14px; background: var(--blue-400); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } pre.code { background: var(--surface-box); border: 1px solid var(--border); padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--blue-200); overflow-x: auto; margin: 0; } pre.code .c { color: var(--text-dim-2); } .admin-json { max-height: 70vh; white-space: pre; font-size: 12px; } code { color: var(--blue-200); overflow-wrap: anywhere; } /* ---- section label: a heading + one-line gloss above a demoted section ---- */ .section-label { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 12px; } .section-label h2 { font-size: 15px; color: var(--blue-200); letter-spacing: 1px; margin: 0; } .section-label span { font-size: 13px; color: var(--text-dim-2); } /* ---- how it works: one terse cell per step (a real detect→measure→rank pipeline) ---- */ .pipe { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 24px; } .pipe .step { flex: 1; min-width: 190px; padding: 16px 18px; border-right: 1px solid var(--border); background: var(--bg-panel); } .pipe .step:last-child { border-right: 0; } .pipe .step .n { font-size: 11px; color: var(--blue-400); letter-spacing: 3px; } .pipe .step h3 { margin: 6px 0 4px; font-size: 14px; color: var(--blue-100); letter-spacing: 0; } .pipe .step p { margin: 0; font-size: 13px; color: var(--text-dim-2); line-height: 1.5; } @media (max-width: 760px) { .pipe { flex-wrap: wrap; } .pipe .step { border-right: 0; border-bottom: 1px solid var(--border); } .pipe .step:last-child { border-bottom: 0; } } /* ---- definition lists (agent page) ---- */ dl.kv { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; font-size: 14px; } dl.kv dt { color: var(--text-dim-2); letter-spacing: 1px; text-transform: uppercase; font-size: 12px; padding-top: 2px; } dl.kv dd { margin: 0; color: var(--text); } dl.kv dd ul { margin: 0; padding-left: 18px; } .note { font-size: 13px; color: var(--text-dim-2); max-width: 76ch; } .nodes-copy { margin: 0 0 14px; } .nodes-copy:last-child { margin-bottom: 0; } /* ---- faq ---- */ .faq-a p, .faq-a ul { font-size: 15px; color: var(--text-dim); max-width: 76ch; margin: 0 0 12px; } /* Answer ink sits one step above the dim caption tier: whole paragraphs of technical copy need more light than a label. The color-mix line wins where supported; the dim line above is the fallback. */ .faq-a p, .faq-a ul, .faq-a dl.kv dd { color: color-mix(in oklab, var(--text) 55%, var(--text-dim)); } .faq-a p:last-child, .faq-a ul:last-child { margin-bottom: 0; } /* Definition lists keep the same measure as the prose — the label column eats some of it, so the total is a little wider than 76ch. */ .faq-a dl.kv { max-width: 86ch; margin: 0 0 12px; } .faq-a dl.kv:last-child { margin-bottom: 0; } .faq-a ul { padding-left: 20px; } .faq-a li { margin-bottom: 4px; } .faq-a b { color: var(--blue-100); font-weight: 600; } /* deep links (e.g. the leaderboard tooltip → #access-detection) land with breathing room and light the target panel up */ .panel[id] { scroll-margin-top: 18px; } .panel:target { border-color: var(--blue-700); box-shadow: 0 0 14px rgba(var(--glow-rgb), 0.3); } @media (max-width: 640px) { :root { --gutter: 16px; } .site-nav { margin-left: 0; width: 100%; } main { padding-top: 24px; padding-bottom: 56px; } dl.kv { grid-template-columns: 1fr; gap: 2px 0; } dl.kv dd { margin-bottom: 10px; } }