/* Neon Arena base: fonts (vendor proxy), reset-lite, background scene, scrollbars, focus, motion preferences. */ /* Brand fonts via /chess/vendor proxy (fontsource, pinned). Sora + Space Grotesk cover latin; Manrope (body) + Unbounded (display) add full Cyrillic coverage so the RU-first UI renders in brand faces, not system fallback. */ /* Manrope — Cyrillic-capable body font (variable, all weights in one file) */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/chess/arena/vendor/@fontsource/manrope/1.0.0/files/manrope-cyrillic-variable.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/chess/arena/vendor/@fontsource/manrope/1.0.0/files/manrope-latin-variable.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; } /* Unbounded — Cyrillic-capable display font (variable, all weights in one file) */ @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/chess/arena/vendor/@fontsource/unbounded/1.0.0/files/unbounded-cyrillic-variable.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; } @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/chess/arena/vendor/@fontsource/unbounded/1.0.0/files/unbounded-latin-variable.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; } /* Sora — latin display (kept for EN mode + digits) */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-400-normal.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: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-ext-400-normal.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: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-600-normal.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: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-ext-600-normal.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: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-700-normal.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: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-ext-700-normal.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: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-800-normal.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: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("/chess/vendor/@fontsource/sora/5.2.8/files/sora-latin-ext-800-normal.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: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/chess/vendor/@fontsource/space-grotesk/5.2.10/files/space-grotesk-latin-400-normal.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: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/chess/vendor/@fontsource/space-grotesk/5.2.10/files/space-grotesk-latin-ext-400-normal.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: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/chess/vendor/@fontsource/space-grotesk/5.2.10/files/space-grotesk-latin-600-normal.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: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/chess/vendor/@fontsource/space-grotesk/5.2.10/files/space-grotesk-latin-ext-600-normal.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: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/chess/vendor/@fontsource/space-grotesk/5.2.10/files/space-grotesk-latin-700-normal.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: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/chess/vendor/@fontsource/space-grotesk/5.2.10/files/space-grotesk-latin-ext-700-normal.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; } /* JetBrains Mono — every QUANTITY in the console rides this face: clocks, ratings, scores, ply counters, deltas, pips, coordinates, timers. Vendored from @fontsource/jetbrains-mono 5.2.8, latin + latin-ext only. The Cyrillic subset is deliberately NOT shipped — nothing Russian should be set in mono, and leaving the range out means a stray word falls back to Manrope instead of rendering in a face that was never designed for it. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-400-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-ext-400-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-600-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-ext-600-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-700-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-ext-700-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-800-normal.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: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("/chess/arena/vendor/@fontsource/jetbrains-mono/5.2.8/files/jetbrains-mono-latin-ext-800-normal.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; } /* --- reset-lite --- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* The document itself never scrolls. The shell is exactly 100dvh and only panel interiors scroll inside it (#scene, .panel-body). This is the single rule the whole console layout rests on — see shell.css. */ html { -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; } body { height: 100dvh; font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden; } img, svg, video { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } a { color: var(--cool); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; } ul, ol { padding: 0; list-style: none; } ::selection { background: rgba(241, 193, 82, 0.32); color: inherit; } /* Prose gets a balanced last line for free. Cheapest readability win in the redesign: no markup, no JS, degrades to nothing where unsupported. */ p, li, h1, h2, h3, h4, .sub, .hero-sub, .stub-sub, .login-sub { text-wrap: pretty; } /* --- background scene: three drifting aurora fields + a ruled grid, fixed behind everything. The mechanism (four fixed pointer-events:none layers inside .bg-scene) is unchanged; only the tint and the geometry move to the console's violet/gold. --- */ .bg-scene { position: fixed; inset: 0; z-index: var(--z-bg); overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); } .bg-aurora { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; } .bg-aurora-a { left: -18vw; top: -26vw; width: 70vw; height: 70vw; background: radial-gradient(circle, rgba(124, 58, 237, 0.34), transparent 62%); filter: blur(30px); animation: ac-drift 26s ease-in-out infinite alternate; } .bg-aurora-b { right: -16vw; bottom: -24vw; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(241, 193, 82, 0.16), transparent 62%); filter: blur(36px); animation: ac-drift 34s ease-in-out infinite alternate-reverse; } .bg-aurora-c { left: 38vw; top: 24vh; width: 44vw; height: 44vw; background: radial-gradient(circle, rgba(236, 72, 153, 0.13), transparent 62%); filter: blur(40px); animation: ac-drift 30s ease-in-out 3s infinite alternate; } .bg-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(167, 139, 250, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, 0.045) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000, transparent); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000, transparent); } /* --- motion library (ac-*) --- The console's shared vocabulary of movement. Keyframes only: every screen attaches them, none of them redefines one. All are covered by the prefers-reduced-motion guard at the foot of this file. */ @keyframes ac-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes ac-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } @keyframes ac-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(3%, 4%, 0); } } @keyframes ac-scan { from { transform: translateY(-100%); } to { transform: translateY(300%); } } @keyframes ac-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes ac-sheen { from { background-position: -220% 0; } to { background-position: 220% 0; } } @keyframes ac-spin { to { transform: rotate(360deg); } } @keyframes ac-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } } @keyframes ac-key { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(2px) scale(0.94); } 100% { transform: translateY(0) scale(1); } } @keyframes ac-halo { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--t-gold), 0.34); } 60% { box-shadow: 0 0 0 9px rgba(var(--t-gold), 0); } } @keyframes ac-caret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } } /* --- scrollbars --- THIS APP HAS NO DOCUMENT SCROLL. The console frame is exactly 100dvh with `overflow: hidden` (shell.css), so every scroll in the product happens inside a nested box, and the scrollbar is the only standing signal that a box is one — there is no page scrollbar to fall back on and no rubber-band at the end of the document. The thumb was `--stroke-strong`, `rgba(167,139,250,.3)`: violet at 30% over panels that are themselves near-black. Composited on the context column's `rgba(12,8,24,.56)` over `--bg` #08060f it lands at 1.5:1 against its own track, which is why the reported screenshot of a list cut through the middle has no visible scrollbar anywhere in it. .52 puts it at 3.1:1 — a hairline still, not a Windows 95 gutter, but one that is there when you look for it. Track stays transparent: a filled track on a 78px rail reads as a second border. */ * { scrollbar-width: thin; scrollbar-color: rgba(167, 139, 250, 0.52) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.52); border-radius: var(--r-pill); } *::-webkit-scrollbar-thumb:hover { background: var(--gold2); } /* --- focus --- */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); } /* --- layout primitives --- */ .container { position: relative; z-index: var(--z-content); width: 100%; max-width: var(--container); margin: 0 auto; /* Bottom padding used to clear the fixed marquee + tabbar. Both are real grid rows now (shell.css), so this is breathing room, not compensation. */ padding: calc(var(--topbar-h) + 18px) 16px 24px; } .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .wrap { flex-wrap: wrap; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .grow { flex: 1 1 auto; } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .hidden { display: none !important; } /* The `hidden` attribute must actually hide. Any component rule that sets `display` (e.g. .icon-btn { display: inline-flex }) beats the UA stylesheet's [hidden] { display: none }, which is why guests were still shown the profile/push/logout buttons the auth chrome had already hidden. */ [hidden] { display: none !important; } .center { text-align: center; } /* --- 44px touch floor --- Compact and medium windows are phones and small tablets, where every control has to be thumb-sized. Ported from the mock WITHOUT its `!important`: the mock needed that because its buttons carry inline styles, ours do not, so a plain rule wins and stays overridable. [data-tight] is the escape hatch for chips and inline filter rows, which are read-often / tapped-rarely and would swallow the screen at 44px. THE SECOND CLAUSE IS THE PHONE HELD SIDEWAYS, and it is not a nicety: width alone answers «is this a thumb?» wrongly for every large phone in landscape. An iPhone 14/15/16 Pro Max is 932x430 there, a 16 Pro Max 956x440 — all past 904 — so the floor simply switched off on the device that needs it most. Measured at 926x428 before this clause, on EVERY route: the notification bell 34x34, the store pill 38.2x24; and per screen the clan kick button 22x22, the profile marks 28x28, the training row 42.1x14.5, the hub capsule filters 28.6x25.9. All of them are 44px at 844x390, where the width clause happens to fire, which is what made the gap look like screen bugs instead of one query. A viewport height is a property of the window and nothing else — no container query can ask for it — so this is one of the two honest media queries in the arena, alongside the orientation block in views/game.css. 500px is that block's own threshold, reused rather than re-invented: it is above every phone-landscape height and below every laptop's. */ @media (max-width: 904px), (max-height: 500px) { button:not([data-tight]), .btn:not([data-tight]), [role="button"]:not([data-tight]) { min-height: 44px; } /* Round buttons take the floor on both axes, or they stop being round. */ .icon-btn:not([data-tight]) { min-width: 44px; min-height: 44px; } [data-tight] { min-height: 0; } } /* --- reduced motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }