/* DonutStats. Black and white: near-black page, glass panels with hairline borders,
   white as the accent. A slow starfield sits behind everything.
   Colour appears in three places only: the money card on a player page (tiers),
   announcement banners (tones), and the small online dot. */

/* Stand-ins for Inter while it loads: Arial, resized per weight to Inter's widths
   and line metrics, so text barely moves when Inter arrives. */
@font-face { font-family: 'Inter Fallback'; font-weight: 400; src: local('Arial'); size-adjust: 106%; ascent-override: 91.4%; descent-override: 22.8%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 500; src: local('Arial'); size-adjust: 107%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 600; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 101.3%; ascent-override: 95.6%; descent-override: 23.8%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 700; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 102.7%; ascent-override: 94.3%; descent-override: 23.5%; line-gap-override: 0%; }
@font-face { font-family: 'Inter Fallback'; font-weight: 800; src: local('Arial Bold'), local('Arial-BoldMT'); size-adjust: 104.6%; ascent-override: 92.6%; descent-override: 23.1%; line-gap-override: 0%; }

:root {
  --bg: #050507;
  --panel: rgba(255, 255, 255, 0.028);
  --panel-2: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.17);
  --text: #f4f4f5;
  --text-2: #a1a1aa;
  --text-3: #6b6b74;
  --r: 16px;
  --r-sm: 10px;
  --font: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* The space left and right of the content. On a phone held sideways it grows to clear the notch. */
  --gutter: 20px;
  --edge: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  font-feature-settings: 'tnum' 1, 'cv11' 1, 'ss01' 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
main { flex: 1; position: relative; min-width: 0; }
html, body { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.1; }
p { margin: 0; }
small { font-size: 12px; }
code { font: 0.9em ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace; }
pre { margin: 12px 0 0; padding: 14px 16px; background: #000; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow-x: auto; }
pre code { font-size: 13px; color: var(--text); user-select: all; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }
.i-sm { width: 15px; height: 15px; }
.dim { color: var(--text-3); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 78px; }
.text-link { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-3); transition: text-decoration-color 0.15s; }
.text-link:hover { text-decoration-color: #fff; }
.qa-num { font-family: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace; }

/* ---------- online dot ---------- */
.on-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #55555e; flex: none; }
.on-dot.is-on { background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.18); }
.row-name .on-dot, .show-name .on-dot { margin-left: 8px; vertical-align: middle; }
.presence { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.presence.is-on { color: var(--text-2); }

/* ---------- announcement banners ---------- */
.banner { --tone: 212, 212, 216; background-color: rgba(var(--tone), 0.09); border-bottom: 1px solid rgba(var(--tone), 0.24); color: #e4e4e7; font-size: 13.5px; line-height: 1.45; }
.banner-in { position: relative; padding: 9px 36px; text-align: center; }
.banner-dot { display: inline-block; width: 7px; height: 7px; margin: 0 11px 1px 0; border-radius: 50%; background: rgb(var(--tone)); box-shadow: 0 0 0 3px rgba(var(--tone), 0.18); vertical-align: middle; }
.banner p { min-width: 0; overflow-wrap: anywhere; }
.banner a { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-weight: 600; color: #fff; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--tone), 0.6); }
.banner a:hover { text-decoration-color: #fff; }
.banner a svg { width: 13px; height: 13px; }
.banner-x { position: absolute; right: -6px; top: 50%; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -13px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--text-2); cursor: pointer; transition: background 0.15s, color 0.15s; }
.banner-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tone-success { --tone: 74, 222, 128; }
.tone-warning, .tone-maintenance { --tone: 251, 191, 36; }
.tone-danger { --tone: 248, 113, 113; }
.tone-maintenance { background-image: repeating-linear-gradient(-45deg, rgba(251, 191, 36, 0.11) 0 10px, transparent 10px 20px); }

.wrap { width: min(1160px, 100% - 2 * var(--edge)); margin-inline: auto; }
.fade { background: linear-gradient(180deg, #d4d4d8 0%, #63636b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- header and footer ---------- */
.top { position: sticky; top: 0; z-index: 5; view-transition-name: site-top; border-bottom: 1px solid var(--line); background: rgba(5, 5, 7, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.top-in { position: relative; display: flex; align-items: center; gap: 22px; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; flex: none; }
.mark { display: block; border-radius: 4px; }
.nav { display: flex; gap: 2px; margin-right: auto; min-width: 0; }
.nav a, .menu-list a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid transparent; border-radius: 10px; color: var(--text-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: color 0.15s, background 0.15s; }
.nav a svg, .menu-list a svg { width: 15px; height: 15px; opacity: 0.8; flex: none; }
.nav a:hover, .menu-list a:hover { color: var(--text); background: var(--panel-2); }
.nav a[aria-current], .menu-list a[aria-current] { color: var(--text); background: var(--panel-2); border-color: var(--line-2); }
.icon-btn, .menu summary { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); flex: none; transition: border-color 0.15s, color 0.15s; }
.icon-btn:hover, .menu summary:hover { border-color: var(--line-2); color: var(--text); }
/* The menu: the same links behind a button. It opens without scripts (it is a <details>). */
.menu { display: none; flex: none; }
.menu summary { list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .i-x, .menu[open] summary .i-bars { display: none; }
.menu[open] summary .i-x { display: block; }
.menu[open] summary { border-color: var(--line-2); background: var(--panel-2); color: var(--text); }
.menu-list { position: absolute; top: calc(100% + 8px); right: 0; width: min(380px, 100%); max-height: calc(100vh - 86px); max-height: calc(100dvh - 86px); overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; padding: 8px; border: 1px solid var(--line-2); border-radius: 14px; background: #0b0b0e; box-shadow: 0 28px 60px -18px #000; }
.menu-list a { gap: 11px; min-height: 48px; padding: 0 13px; font-size: 14.5px; }
.menu-list a svg { width: 17px; height: 17px; }
/* Between the two: the links without their icons. */
@media (max-width: 1119px) {
  .top-in { gap: 16px; }
  .nav a { padding: 7px 10px; }
  .nav a svg { display: none; }
}
.foot { border-top: 1px solid var(--line); margin-top: 80px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; padding: 24px 0 max(24px, env(safe-area-inset-bottom, 0px)); color: var(--text-3); font-size: 13px; }
.foot-copy { display: flex; align-items: center; gap: 10px; }
.foot-copy .mark { flex: none; }
.foot nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.foot nav a { transition: color 0.15s; }
.foot nav a:hover { color: var(--text); }
.foot-sep { width: 1px; height: 12px; background: var(--line-2); }

/* ---------- search ---------- */
.search { display: flex; align-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 14px; transition: border-color 0.15s, background 0.15s; }
.search:focus-within { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.search-icon { display: grid; place-items: center; padding-left: 16px; color: var(--text-3); }
.search input { flex: 1; min-width: 0; align-self: stretch; background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 0 12px; }
.search input::placeholder { color: var(--text-3); }
.search button { border: 0; cursor: pointer; font: 600 14px var(--font); background: #fff; color: #000; border-radius: 10px; transition: transform 0.15s, background 0.15s; }
.search button:hover { background: #d4d4d8; }
.search button:active { transform: scale(0.97); }
.search.big { height: 58px; width: min(540px, 100%); padding: 6px; margin-inline: auto; }
.search.big input { font-size: 16px; }
.search.big button { height: 100%; padding: 0 22px; }

/* ---------- buttons, pills, segmented controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 17px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text); font: 600 14px var(--font); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.btn:hover { background: var(--panel-2); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.solid { background: #fff; color: #000; border-color: #fff; }
.btn.solid:hover { background: #d4d4d8; border-color: #d4d4d8; }
.btn.small { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.actions form, form.inline { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; color: var(--text-2); background: var(--panel); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.seg a { padding: 6px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--text-2); transition: color 0.15s, background 0.15s; }
.seg a:hover { color: var(--text); background: var(--panel-2); }
.seg a[aria-current] { background: #fff; color: #000; }
.chip-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; background: var(--panel); color: var(--text); }
.chip-icon.big { width: 64px; height: 64px; }
.chip-icon.big svg { width: 28px; height: 28px; }
.tag { display: inline-block; padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12px; }
.tag.off { color: var(--text-3); border-style: dashed; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px; padding: 76px 0 60px; }
.hero-mark .mark { width: 72px; height: 72px; border-radius: 10px; }
.hero h1 { font-size: clamp(44px, 7.4vw, 88px); font-weight: 800; letter-spacing: -0.045em; margin-top: 10px; }
.hero-sub { font-size: clamp(17px, 2.200vw, 21px); font-weight: 600; color: #e4e4e7; }
/* Text widths are in em, not ch: ch follows the digit 0, which is wider in Inter than in its stand-in. */
.lede { color: var(--text-2); font-size: 16px; max-width: 36.6em; }
.lede.small { font-size: 14px; margin-top: 14px; }
.hero .search { margin-top: 12px; }
.hero .actions { justify-content: center; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); gap: 12px; margin-top: 18px; justify-content: center; }
.stats3.wide3 { grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; }
.stats3.n4 { grid-template-columns: repeat(4, minmax(0, 190px)); }
.stats3.n2 { grid-template-columns: repeat(2, minmax(0, 190px)); }
.stats3.n1 { grid-template-columns: minmax(0, 190px); }
.stats3 > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); text-align: center; transition: border-color 0.2s, transform 0.2s; }
.stats3 > div:hover { border-color: var(--line-2); transform: translateY(-2px); }
.stats3 strong { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; }
.stats3 span { color: var(--text-3); font-size: 12.5px; }
.stats3 small { color: var(--text-3); }

/* ---------- panels, rows, features ---------- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-bottom: 16px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cols .panel { margin-bottom: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-title { margin-right: auto; }
.panel-title h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.panel-title p { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.more { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 13px; font-weight: 500; transition: color 0.15s, gap 0.15s; }
.more:hover { color: var(--text); gap: 9px; }
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 32px 1fr auto 72px; align-items: center; gap: 12px; padding: 9px 10px; margin: 0 -10px; border-radius: var(--r-sm); transition: background 0.15s; }
.row + .row { border-top: 1px solid var(--line); }
.row:hover { background: var(--panel-2); }
.head { border-radius: 6px; image-rendering: pixelated; background: rgba(255, 255, 255, 0.05); }
.row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-val { font-weight: 600; }
.row-meta { color: var(--text-3); font-size: 12.5px; text-align: right; }
.empty { color: var(--text-3); padding: 18px 0; text-align: center; }
.block { margin: 64px 0 16px; }
.section-title { font-size: clamp(28px, 4.400vw, 44px); font-weight: 800; letter-spacing: -0.04em; text-align: center; margin-bottom: 26px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.feature:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-3px); }
.feature-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.feature h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.feature p { color: var(--text-2); font-size: 14px; }

/* ---------- questions ---------- */
/* A heading that stays put on the left, numbered cards on the right. Each card
   lifts when pointed at. */
.qa { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 80px; }
.qa-side { position: sticky; top: 88px; display: grid; gap: 12px; justify-items: start; }
.qa-side h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; letter-spacing: -0.04em; }
.qa-side p { color: var(--text-2); }
.qa-side .btn { margin-top: 4px; }
.qa-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qa-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 20px 22px; transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.qa-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.36); background: #101014; box-shadow: 0 18px 44px -20px rgba(255, 255, 255, 0.22), 0 12px 26px -12px rgba(0, 0, 0, 0.9); }
.qa-num { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-3); }
.qa-card h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 10px 0 8px; }
.qa-card p { color: var(--text-2); font-size: 14px; }

/* ---------- page heads ---------- */
.page-head { padding: 46px 0 22px; }
.page-head h1 { font-size: clamp(36px, 5.400vw, 60px); font-weight: 800; letter-spacing: -0.045em; margin-bottom: 12px; }
.page-head .seg { margin-top: 6px; }
.page-head .lede { max-width: 40em; }
.center-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; }
.center-head h1 { margin: 0; overflow-wrap: anywhere; }
.center-head .actions { justify-content: center; }
.eyebrow { color: var(--text-3); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }
.center { text-align: center; padding: 90px 0 40px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
.center h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.04em; }
.center .actions { justify-content: center; }
.notice { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-2); color: #e4e4e7; border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.hint { color: var(--text-3); font-size: 14px; margin-top: 10px; max-width: 42em; }

/* ---------- player ---------- */
.crumbs { display: flex; gap: 8px; color: var(--text-3); font-size: 13px; padding: 22px 0 14px; }
.crumbs a:hover { color: var(--text); }
.profile { display: grid; grid-template-columns: 250px 1fr; gap: 20px; margin-bottom: 16px; }
.skin { position: relative; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(120% 80% at 50% 100%, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 70%); display: grid; place-items: end center; min-height: 380px; overflow: hidden; }
.skin img { height: 300px; width: auto; margin-bottom: 26px; }
.skin canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; }
.skin canvas:active { cursor: grabbing; }
.skin.has-3d img { visibility: hidden; }
.skin-hint { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; color: var(--text-3); font-size: 12px; display: none; pointer-events: none; }
.skin.has-3d .skin-hint { display: block; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.profile-head h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -0.045em; overflow-wrap: anywhere; }
.name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.name-line .presence { padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--text-3); font-size: 13px; margin: 12px 0; }
.sentence { color: var(--text-2); max-width: 40em; margin-bottom: 16px; }
.on-boards { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; color: var(--text-3); font-size: 12.5px; }
.on-boards span { margin-right: 4px; }
.on-boards a { padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text-2); font-weight: 500; transition: border-color 0.15s, color 0.15s; }
.on-boards a:hover { border-color: var(--line-2); color: var(--text); }
.on-boards b { color: var(--text); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); transition: border-color 0.2s, background 0.2s, transform 0.2s; }
a.tile:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-2px); }
.tile.is-active { border-color: rgba(255, 255, 255, 0.55); }
.tile-label { color: var(--text-2); font-size: 12.5px; font-weight: 500; }
.tile-val { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.25; }
.tile-rank { color: var(--text-3); font-size: 12px; }
/* The money card. --t is the tier colour as "r, g, b"; white until a tier sets it. */
.hero-tile { --t: 244, 244, 245; grid-column: span 2; grid-row: span 2; justify-content: space-between; padding: 18px 20px; background: linear-gradient(135deg, rgba(var(--t), 0.11), rgba(var(--t), 0.02) 62%); border-color: rgba(var(--t), 0.36); box-shadow: 0 0 36px -16px rgba(var(--t), 0.6); }
a.hero-tile:hover { background: linear-gradient(135deg, rgba(var(--t), 0.16), rgba(var(--t), 0.04) 62%); border-color: rgba(var(--t), 0.62); }
.hero-tile.is-active { border-color: rgba(var(--t), 0.7); }
.hero-tile .tile-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.hero-tile .tile-val { font-size: clamp(38px, 4.6vw, 58px); letter-spacing: -0.04em; line-height: 1.1; color: rgb(var(--t)); width: fit-content; }
.tier-chip { padding: 2px 10px; border: 1px solid rgba(var(--t), 0.36); border-radius: 999px; background: rgba(var(--t), 0.08); color: rgb(var(--t)); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tier-chip span { font-weight: 500; opacity: 0.72; margin-left: 3px; }
.tier-green { --t: 74, 222, 128; }
.tier-teal { --t: 45, 212, 191; }
.tier-blue { --t: 96, 165, 250; }
.tier-violet { --t: 167, 139, 250; }
.tier-magenta { --t: 232, 121, 249; }
.tier-orange { --t: 251, 146, 60; }
.tier-red { --t: 248, 113, 113; }
.tier-gold { --t: 250, 204, 21; }
.tier-gold .tile-val { background: linear-gradient(100deg, #f2b90f 0%, #f7cf45 35%, #fff6c9 50%, #f7cf45 65%, #f2b90f 100%); background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { background-position: 100% 0; } 100% { background-position: -40% 0; } }

.summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 14px 0; }
.summary div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.summary dt { color: var(--text-3); font-size: 12px; }
.summary dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.summary small { color: var(--text-3); font-weight: 500; }
.summary.three { grid-template-columns: repeat(3, 1fr); }
.stat-seg { margin-top: 2px; }
.chart { position: relative; margin-top: 12px; border-radius: var(--r-sm); overflow: hidden; }
.chart svg { display: block; width: 100%; height: auto; }
/* Each chart is in the page twice (pages.js): drawn 860 wide for wide screens, and 480
   wide for narrow ones, where the first would shrink its labels too far to read. The
   narrow one is never drawn smaller than 524px (labels at 12px); on a phone it is
   wider than the screen and scrolls sideways inside its own box. */
.chart-narrow { display: none; max-width: 720px; margin-inline: auto; overflow-x: auto; scrollbar-width: none; }
.chart-narrow::-webkit-scrollbar { display: none; }
.chart-narrow svg { min-width: 524px; }
@media (max-width: 1023px) {
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
}
.chart .cross { position: absolute; top: 0; width: 1px; background: rgba(255, 255, 255, 0.25); pointer-events: none; }
.chart .mark-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 2px solid #0b0b0e; pointer-events: none; }
.tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: #fff; color: #000; padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; text-align: center; }
.tip b { display: block; font-size: 14px; font-weight: 700; }
.table-view { margin-top: 14px; color: var(--text-2); font-size: 14px; }
.table-view summary { cursor: pointer; width: fit-content; }
.table-view table { margin-top: 10px; border-collapse: collapse; }
.table-view th, .table-view td { text-align: left; padding: 5px 24px 5px 0; border-bottom: 1px solid var(--line); }

/* ---------- leaderboards and tables ---------- */
.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; color: var(--text-3); font-size: 12px; font-weight: 500; padding: 0 10px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.board td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.board tr:last-child td { border-bottom: 0; }
.board tbody tr { transition: background 0.15s; }
.board tbody tr:hover { background: var(--panel-2); }
.board .num { text-align: right; }
.board .rank { color: var(--text-3); width: 74px; text-align: left; }
.board .strong { font-weight: 700; }
.board .podium .rank { color: #fff; font-weight: 800; }
.board .podium td { background: rgba(255, 255, 255, 0.025); }
.who { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.who:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The leaderboard page: filter box, top 5 as cards, then a rounded table. */
.lb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.lb-search { height: 46px; width: min(340px, 100%); }
.lb-search input { height: 100%; font-size: 15px; }
.lb-count { color: var(--text-3); font-size: 13px; }
.showcase { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.show { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.show:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-3px); }
.show-rank { display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; font-weight: 700; }
.show-rank svg { width: 16px; height: 16px; }
.show:not(.show-first) .show-rank { justify-content: space-between; }
.show-who { display: flex; align-items: center; gap: 11px; min-width: 0; }
.show-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; min-width: 0; }
.show-val { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.show-first { grid-row: span 2; flex-direction: row; justify-content: flex-start; align-items: center; gap: 24px; padding: 22px 26px; overflow: hidden; border-color: var(--line-2); background: radial-gradient(110% 100% at 0% 100%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 70%); }
.show-first:hover { background: radial-gradient(110% 100% at 0% 100%, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.04) 70%); border-color: rgba(255, 255, 255, 0.34); }
.show-body { width: 100px; height: 200px; flex: none; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); }
.show-info { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.show-first .show-rank { color: var(--text); font-size: 13px; }
.show-first .show-name { font-size: clamp(24px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; }
.show-first .show-val { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.045em; line-height: 1.1; }
.show-first .presence { margin-top: 4px; }
.lb.is-filtering .showcase { display: none; }
.lb:not(.is-filtering) .board tr.in-showcase { display: none; }
.board-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.board-wrap .board th { padding: 12px 18px; background: rgba(255, 255, 255, 0.03); }
.board-wrap .board td { padding: 10px 18px; }
.board-wrap .board { table-layout: fixed; }
.board-wrap .board th.num { width: 130px; }
.board-wrap .board td { overflow: hidden; }
.board-wrap .who { display: flex; gap: 10px; min-width: 0; width: fit-content; max-width: 100%; }
.board-wrap .who span:not(.on-dot) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-wrap .who .head { flex: none; }
.board-none { padding: 36px 18px; text-align: center; color: var(--text-2); }
.board-none a { margin-left: 6px; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: var(--text-3); font-size: 13px; }
.scroll { overflow-x: auto; }

/* ---------- compare ---------- */
.compare-form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 6px; }
.compare-form input, .admin-form input, .admin-form select { height: 44px; padding: 0 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 11px; color: var(--text); font: inherit; outline: 0; min-width: 0; }
.compare-form input { width: 210px; }
.compare-form input:focus, .admin-form input:focus, .admin-form select:focus { border-color: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.compare-form .btn { height: 44px; }
.vs { color: var(--text-3); font-weight: 700; font-size: 13px; }
.vs.big { font-size: 20px; }
.cmp-heads { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.cmp-player { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cmp-player.right { flex-direction: row-reverse; text-align: right; }
.cmp-player strong { display: block; font-size: 20px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.cmp-player small { color: var(--text-3); }
.cmp-player:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cmp-row { display: grid; grid-template-columns: 110px 1fr 110px; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cmp-val { font-weight: 600; color: var(--text-3); }
.cmp-val.right { text-align: right; }
.cmp-val.win { color: #fff; font-weight: 800; }
.cmp-label { display: block; text-align: center; color: var(--text-2); font-size: 12.5px; margin-bottom: 6px; }
.cmp-bar { display: block; width: 100%; height: 8px; }
.cmp-bar rect { fill: #3f3f46; }
.cmp-bar rect.win { fill: #fff; }
.cmp-verdict { padding-top: 16px; font-weight: 600; }
.cmp-verdict span { color: var(--text-3); font-weight: 400; font-size: 13px; margin-left: 6px; }

/* ---------- server ---------- */
.leader { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.leader:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-3px); }
.leader-label { color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.leader-who { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.leader-val { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
.leader-cut { color: var(--text-3); font-size: 12.5px; }

.leader-who .on-dot { margin-left: 2px; }
.online-now { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text-3); font-size: 13px; }
.online-now strong { font-size: 26px; font-weight: 800; letter-spacing: -0.04em; color: var(--text); }
.online-now .on-dot { align-self: center; }

/* ---------- discord ---------- */
.dc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 450px); gap: 44px; align-items: center; padding: 56px 0 26px; }
.dc-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; }
.dc-copy h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 800; letter-spacing: -0.045em; }
.ticks { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--text-2); font-size: 13.5px; }
.ticks li { display: inline-flex; align-items: center; gap: 7px; }
.ticks svg { width: 15px; height: 15px; color: var(--text); flex: none; }
/* The example reply: a chat message drawn in our own greys. */
.dc { margin: 0; min-width: 0; }
.dc-msg { background: #0c0c0f; border: 1px solid var(--line-2); border-radius: 18px; padding: 16px 18px 18px; box-shadow: 0 34px 90px -46px rgba(255, 255, 255, 0.3); }
.dc-used { display: flex; align-items: center; gap: 7px; margin: 0 0 6px 19px; color: var(--text-3); font-size: 12.5px; }
.dc-elbow { width: 28px; height: 11px; margin-top: 9px; border-left: 2px solid #3a3a42; border-top: 2px solid #3a3a42; border-top-left-radius: 7px; flex: none; }
.dc-used code { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); color: var(--text-2); font-size: 12px; }
.dc-row { display: flex; gap: 12px; }
.dc-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; background: #000; }
.dc-avatar .mark { width: 24px; height: 24px; }
.dc-main { flex: 1; min-width: 0; }
.dc-author { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 6px; font-size: 14px; }
.dc-app { padding: 0 5px; border-radius: 4px; background: #fff; color: #000; font-size: 12px; line-height: 1.4; font-weight: 700; letter-spacing: 0.02em; }
.dc-time { color: var(--text-3); font-size: 12px; }
.dc-embed { padding: 12px 14px 12px 13px; border-left: 3px solid #e8e8ec; border-radius: 5px 8px 8px 5px; background: rgba(255, 255, 255, 0.045); }
.dc-embed-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dc-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.dc-head { border-radius: 6px; flex: none; }
.dc-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; font-size: 13.5px; }
.dc-lines li { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-2); }
.dc-lines code { padding: 1px 7px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: var(--text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dc-chart { margin-top: 12px; padding: 8px 10px 0; border: 1px solid var(--line); border-radius: 8px; background: #0b0b0e; overflow: hidden; }
.dc-chart span { color: var(--text-3); font-size: 12px; }
.dc-chart svg { display: block; width: calc(100% + 20px); height: 60px; margin: 2px -10px 0; }
.dc-foot { margin-top: 10px; color: var(--text-3); font-size: 12px; }
.dc-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dc-buttons span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.07); color: var(--text-2); font-size: 12.5px; font-weight: 600; }
.dc-buttons .is-main { background: #fff; border-color: #fff; color: #000; }
.dc-live { margin-top: 30px; }
.dc-live .stats3 { margin-top: 0; }
.dc-live .hint, .center-hint { margin-inline: auto; text-align: center; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.way { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); transition: border-color 0.2s, background 0.2s; }
.way:hover { border-color: var(--line-2); background: var(--panel-2); }
.way .feature-head { margin-bottom: 0; }
.way h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.way p { flex: 1; color: var(--text-2); font-size: 14px; }
.cmds { list-style: none; max-width: 880px; margin: 0 auto; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cmds li { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: center; gap: 6px 18px; padding: 13px 20px; transition: background 0.15s; }
.cmds li + li { border-top: 1px solid var(--line); }
.cmds li:hover { background: var(--panel-2); }
.cmds code { color: var(--text-3); font-size: 13px; }
.cmds code b { color: var(--text); font-weight: 700; }
.cmds span { color: var(--text-2); font-size: 14px; }
.cmds + .hint { margin-top: 14px; }
.cta { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; margin-top: 64px; padding: 44px 20px; text-align: center; border: 1px solid var(--line-2); border-radius: 22px; background: radial-gradient(90% 150% at 50% 0%, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 70%); }
.cta h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.04em; }
.cta p { color: var(--text-2); }
.cta .actions { justify-content: center; margin-top: 6px; }

/* ---------- contact ---------- */
.page-head.tight { padding: 6px 0 24px; }
.contact { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.contact .panel { margin-bottom: 0; padding: 24px; }
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; position: relative; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; min-width: 0; align-content: start; }
.field label { font-size: 13px; font-weight: 600; }
.field label span { margin-left: 6px; color: var(--text-3); font-weight: 400; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; height: 46px; padding: 0 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 11px; color: var(--text); font: inherit; outline: 0; transition: border-color 0.15s, background 0.15s; }
.field textarea { height: auto; min-height: 150px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field select { cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1aa' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field select option { background: #111114; color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(255, 255, 255, 0.7); background-color: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-note { display: flex; justify-content: flex-end; gap: 12px; color: var(--text-3); font-size: 12.5px; }
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.form-end .btn { height: 44px; }
.form-end p { flex: 1; min-width: 200px; color: var(--text-3); font-size: 12.5px; }
.form-error { padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.07); font-size: 14px; font-weight: 500; }
.contact-done { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; text-align: center; }
.contact .contact-done { padding: 52px 24px; }
.contact-done h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.contact-done p { color: var(--text-2); max-width: 29em; }
.contact-done .actions { justify-content: center; margin-top: 6px; }
.contact-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.side-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 12px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.side-card .feature-head { margin-bottom: 0; }
.side-card h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.side-card p { color: var(--text-2); font-size: 14px; }
.side-card.quiet { border-style: dashed; }
.side-list { display: grid; gap: 10px; width: 100%; margin: 0; }
.side-list div + div { padding-top: 10px; border-top: 1px solid var(--line); }
.side-list dt { font-size: 13px; font-weight: 600; }
.side-list dd { margin: 2px 0 0; color: var(--text-2); font-size: 13.5px; }

/* ---------- terms and privacy ---------- */
.updated { margin-top: 10px; color: var(--text-3); font-size: 13px; }
.doc { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-short { position: sticky; top: 88px; padding: 20px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); }
.doc-short h2 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.doc-short ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: var(--text-2); font-size: 14px; }
.doc-short li { display: flex; align-items: flex-start; gap: 9px; }
.doc-short li svg { width: 15px; height: 15px; margin-top: 3px; flex: none; color: var(--text); }
.doc-body { padding: 4px 26px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.doc-sec { padding: 22px 0; }
.doc-sec + .doc-sec { border-top: 1px solid var(--line); }
.doc-sec h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.doc-sec p, .doc-sec li { color: var(--text-2); max-width: 40em; overflow-wrap: anywhere; }
.doc-sec p + p, .doc-sec p + ul, .doc-sec ul + p, .doc-sec pre + p, .doc-sec pre + ul { margin-top: 10px; }
.doc-sec :not(pre) > code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 0.86em; overflow-wrap: anywhere; }
.doc-sec pre { max-width: 100%; }
.doc-sec strong { color: var(--text); }
.doc-sec ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* ---------- admin ---------- */
.admin-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.admin-bar form { margin: 0; }
.admin-cards { grid-template-columns: repeat(6, 1fr); }
.admin-table td, .admin-table th { white-space: nowrap; font-size: 13.5px; }
.admin-table th:first-child, .admin-table td:first-child { text-align: left; }
.admin-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.admin-form label { display: flex; flex-direction: column; gap: 6px; color: var(--text-2); font-size: 13px; }
.admin-form input, .admin-form select { width: 220px; }
.admin-form.login { justify-content: center; }
.key-once { border-color: rgba(255, 255, 255, 0.5); }
.key-once h2 { font-size: 17px; margin-bottom: 4px; }
.key-once p { color: var(--text-2); }

/* ---------- Christmas mode ---------- */
/* The snowman button is always there. It turns on falling snow, drawn on a canvas
   by xmas.js. A little pale ice blue marks the button while the snow is on. */
.snow-btn { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 7; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(12, 12, 15, 0.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; view-transition-name: snow-btn; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; }
.snow-btn:hover { border-color: rgba(255, 255, 255, 0.42); transform: translateY(-2px); }
.snow-btn[aria-pressed="true"] { border-color: rgba(190, 225, 255, 0.65); box-shadow: 0 0 0 3px rgba(190, 225, 255, 0.14); }
.snow-btn svg { display: block; }
.sn-scarf { fill: #8d8d97; }
html.xmas .sn-scarf { fill: #a9d4f5; }
.snow-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.7s ease; }
html.xmas .snow-sky { opacity: 1; }
/* Under 1281px the page has no empty margin for a floating button: the top-bar toggle takes over. */
.snow-top { display: none; background: none; cursor: pointer; padding: 0; }
.snow-top[aria-pressed="true"] { border-color: rgba(190, 225, 255, 0.65); }
.snow-top svg { display: block; }
@media (max-width: 1280px) { .snow-btn { display: none; } .snow-top:not([hidden]) { display: grid; } }
/* The button steps aside while an ad passes under its corner (ads.js), so it never covers one. */
html.ad-under .snow-btn { visibility: hidden; opacity: 0; }

/* ---------- ads ---------- */
/* Two places, both outside the content: the empty margin on each side of it on wide
   screens, and the end of the page above the footer. A unit takes no room and shows
   nothing until its ad has arrived: Google marks the <ins> with data-ad-status, and
   ads.js sets the same state as a class for browsers without :has(). No ad (not
   approved yet, nothing to show, an ad blocker, no scripts): the unit stays away. */
.ad ins { display: block; }
.ad-label { margin: 0 0 6px; color: var(--text-3); font-size: 12px; line-height: 1; letter-spacing: 0.04em; text-align: center; visibility: hidden; }
.ad.is-filled .ad-label { visibility: visible; }
.ad:has(ins[data-ad-status="filled"]) .ad-label { visibility: visible; }
.ad.is-empty { display: none; }
.ad:has(ins[data-ad-status="unfilled"]) { display: none; }
/* The end of the page. Fixed standard sizes per screen width, so the ad is never
   edge to edge and its height is known: 300x250 on phones (320x100 on a phone held
   sideways), 728x90 from 768px, 970x90 from 1200px. */
.ad-bottom { position: relative; z-index: 4; height: 0; overflow: hidden; }
.ad-bottom.is-filled { height: auto; overflow: visible; margin-top: 56px; }
.ad-bottom:has(ins[data-ad-status="filled"]) { height: auto; overflow: visible; margin-top: 56px; }
.ad-wide { width: 300px; height: 250px; margin-inline: auto; }
@media (max-width: 767px) and (max-height: 480px) and (orientation: landscape) { .ad-wide { width: 320px; height: 100px; } }
@media (min-width: 768px) { .ad-wide { width: 728px; height: 90px; } }
@media (min-width: 1200px) { .ad-wide { width: 970px; height: 90px; } }
/* The sides: one 160x600 unit in each margin, 24px clear of the content, only on a
   screen wide enough to hold content + 2 x (24px + 160px + a little air): 1560px.
   They are placed against .page (the content and the end-of-page unit, between the
   header and the footer): a unit follows the page down 12px under the header and
   stops 16px above the footer, so it never reaches the header, the banners or the
   footer. 780px of height is what that takes at the very end of a page. Keep the
   condition the same as RAILS in ads.js. */
.page { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; }
.ad-rail { display: none; }
.ad-160x600 { width: 160px; height: 600px; }
@media (min-width: 1560px) and (min-height: 780px) {
  .ad-rail { display: block; position: absolute; z-index: 4; top: 16px; bottom: -64px; width: 160px; }
  .ad-rail-l { right: calc(50% + 604px); }
  .ad-rail-r { left: calc(50% + 604px); }
  .ad-rail-in { position: sticky; top: 74px; }
  .ad-rail.is-off { visibility: hidden; }
}

/* ---------- page changes ---------- */
/* A short cross-fade from one page to the next (the header and the snow button hold
   still), and cards that rise a few pixels into place as a page opens. Only opacity
   and transform move, so nothing changes size or position. The rise is switched off
   once the page has settled (app.js adds "is-settled"), so showing a card again
   later does not replay it. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.2s; animation-timing-function: ease; }
  ::view-transition-group(site-top), ::view-transition-group(snow-btn) { animation-duration: 0.2s; }

  html:not(.is-settled) :is(.panel, .feature, .qa-card, .stats3 > div, .tile, .show, .leader, .way, .side-card, .board-wrap, .skin, .dc-msg, .cmds, .cta, .doc-short, .doc-body) { animation: rise 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
  html:not(.is-settled) :is(.grid3, .qa-grid, .stats3, .tiles, .showcase, .ways, .cols, .contact-side, .contact, .doc, .profile) > :nth-child(2) { animation-delay: 0.04s; }
  html:not(.is-settled) :is(.grid3, .qa-grid, .stats3, .tiles, .showcase, .ways, .contact-side) > :nth-child(3) { animation-delay: 0.08s; }
  html:not(.is-settled) :is(.grid3, .qa-grid, .stats3, .tiles, .showcase, .ways, .contact-side) > :nth-child(4) { animation-delay: 0.12s; }
  html:not(.is-settled) :is(.grid3, .qa-grid, .stats3, .tiles, .showcase, .ways, .contact-side) > :nth-child(5) { animation-delay: 0.16s; }
  html:not(.is-settled) :is(.grid3, .qa-grid, .stats3, .tiles, .showcase, .ways, .contact-side) > :nth-child(n + 6) { animation-delay: 0.2s; }
  html:not(.is-settled) .profile .tiles > * { animation-delay: 0.06s; }
  html:not(.is-settled) .profile .tiles > :nth-child(n + 2) { animation-delay: 0.1s; }
  html:not(.is-settled) .profile .tiles > :nth-child(n + 4) { animation-delay: 0.14s; }
  html:not(.is-settled) .profile .tiles > :nth-child(n + 8) { animation-delay: 0.18s; }
  html:not(.is-settled) .board-wrap { animation-delay: 0.14s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ---------- touch ---------- */
/* Fingers need bigger targets than a mouse: everything you can press is at least
   44px, and form fields use 16px text so a phone does not zoom in on them. */
@media (max-width: 900px), (pointer: coarse) {
  .btn, .compare-form .btn, .form-end .btn { height: 44px; }
  .icon-btn, .menu summary { width: 44px; height: 44px; }
  .brand { min-height: 44px; }
  .nav a { min-height: 44px; }
  .seg a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
  .more { min-height: 44px; }
  .crumbs { padding: 10px 0 4px; align-items: center; }
  .crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-inline: -4px; padding-inline: 4px; }
  .on-boards a { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 14px; }
  .table-view summary { padding: 11px 0; }
  .board-wrap .board td { padding-block: 2px; }
  .board-wrap .who { align-items: center; min-width: 44px; min-height: 44px; }
  .foot nav { gap: 0 8px; margin-left: -6px; }
  .foot nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 6px; }
  .banner-in { display: grid; align-items: center; min-height: 44px; padding-inline: 42px; }
  .banner-x { right: -10px; width: 44px; height: 44px; margin-top: -22px; }
  .banner a { padding-block: 6px; }
  .search input, .compare-form input, .field input, .field select, .field textarea { font-size: 16px; }
}

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; }
  .brand { margin-right: auto; }
  .top-in { gap: 10px; }
  .cols, .grid3, .ways, .contact, .doc { grid-template-columns: minmax(0, 1fr); }
  .qa { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 56px; }
  .qa-side, .doc-short { position: static; }
  .dc-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 36px 0 20px; }
  .dc { width: min(480px, 100%); margin-inline: auto; }
  .showcase { grid-template-columns: 1fr 1fr; }
  .show-first { grid-column: span 2; grid-row: auto; }
  .cmds li { grid-template-columns: minmax(0, 1fr); }
  .profile { grid-template-columns: 220px minmax(0, 1fr); }
  .skin { min-height: 300px; align-self: start; }
  .skin img { height: 240px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .hero-tile { grid-row: auto; gap: 6px; padding: 14px 16px; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .summary:not(.three) > div:last-child:nth-child(odd) { grid-column: span 2; }
  .admin-cards { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 48px 0 40px; }
}
/* Tablets held upright: cards go two across, not one. */
@media (min-width: 620px) and (max-width: 900px) {
  .grid3, .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .profile { grid-template-columns: minmax(0, 1fr); }
  .skin { min-height: 250px; }
  .skin img { height: 210px; margin-bottom: 20px; }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .stats3, .stats3.wide3 { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .stats3.n4, .stats3.n2 { grid-template-columns: 1fr 1fr; }
  .stats3.n1 { grid-template-columns: 1fr; }
  .stats3 > div { padding: 12px 8px; }
  .stats3 strong { font-size: 18px; }
  .row { grid-template-columns: 32px 1fr auto; }
  .row-meta { display: none; }
  .cmp-row { grid-template-columns: 76px 1fr 76px; gap: 8px; }
  .cmp-player strong { font-size: 15px; }
  /* Two players side by side on a phone: the head sits above the name, so the name has the width. */
  .cmp-heads { align-items: start; }
  .cmp-player, .cmp-player.right { flex-direction: column; gap: 8px; }
  .cmp-player { align-items: flex-start; }
  .cmp-player.right { align-items: flex-end; }
  .cmp-player .head { width: 44px; height: 44px; }
  .cmp-heads .vs { margin-top: 12px; }
  .compare-form input { width: 100%; }
  .hero-tile .tile-val { font-size: 34px; }
  .qa-grid, .field-row { grid-template-columns: minmax(0, 1fr); }
  .foot-in { flex-direction: column; align-items: flex-start; }
  .show { padding: 14px; }
  .show-first { gap: 16px; padding: 16px; }
  .show-body { width: 75px; height: 150px; }
  .show-val { font-size: 19px; }
  .show-who { gap: 9px; }
  .show-who .head { width: 34px; height: 34px; }
  .show:not(.show-first) .show-name { font-size: 14px; }
  .board-wrap .board th, .board-wrap .board td { padding-inline: 12px; }
  .board-wrap .board .rank { width: 50px; padding-right: 4px; }
  .board-wrap .board th.num { width: 96px; }
  .dc-msg { padding: 14px 12px 16px; }
  .dc-row { gap: 9px; }
  .dc-avatar { width: 34px; height: 34px; }
  .dc-lines { grid-template-columns: minmax(0, 1fr); }
  .doc-body { padding: 2px 18px; }
  .contact .panel { padding: 18px; }
  .summary.three dd { font-size: 15px; }
  .online-now { width: 100%; }
}
/* The smallest phones: the leaderboard gives the room to the name. */
@media (max-width: 359px) {
  .board-wrap .who .head { display: none; }
  .show:not(.show-first) .show-who { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-tile .tile-val { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .qa-card:hover, .show:hover { transform: none; }
}