:root { color-scheme: dark; --bg: #0B1118; --s1: #101923; --s2: #121C27; --s3: #192532; --s4: #202F3D; --bd-1: #1D2A36; --bd-2: #243241; --bd-3: #2A3948; --bd-4: #3B4C5D; --bd-ctl: #64768A; --tx-1: #EDF2F7; --tx-2: #A5B1BE; --tx-3: #8291A2; --tx-4: #526171; --tx-inv: #101923; --acc: #FFC747; --acc-hover: #FFD36A; --acc-press: #E5AD32; --acc-sub: #332B1A; --acc-bd: #6B5428; --ok: #39B98A; --ok-sub: #142F29; --bad: #F05252; --bad-sub: #351D23; --warn: #F39A42; --warn-sub: #34271B; --info: #4D9EFF; --info-sub: #192C40; --ct: #6CB8FF; --ct-sub: #16273A; --t: #F0A04B; --t-sub: #33261A; --ev-kill: #F05252; --ev-util: #A78BFA; --ev-obj: #FFC747; --ev-player: #6CB8FF; --ev-mate: #39B98A; --ev-opp: #F39A42; --faceit: #FF4B00; --faceit-sub: #2E1A10; --tg: #2AABEE; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; --shadow-pop: 0 12px 32px -8px rgba(3, 7, 12, 0.72), 0 2px 6px rgba(3, 7, 12, 0.5); --shadow-lift: 0 6px 18px -6px rgba(3, 7, 12, 0.6); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --rail-w: 232px; --topbar-h: 60px; --aside-w: 320px; --tabbar-h: 0px; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } html { scroll-padding-top: var(--topbar-h); } body { background: var(--bg); color: var(--tx-1); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "calt", "kern"; } 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: inherit; text-decoration: none; } @media (hover: hover) and (pointer: fine) { a:where(:not(.btn)):hover { color: var(--tx-1); } } p { margin: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.012em; text-wrap: balance; } hr { border: 0; height: 1px; background: var(--bd-1); margin: 0; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--acc-sub); color: var(--acc-hover); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r-sm); } dialog[tabindex="-1"]:focus-visible { outline: none; } input, textarea { caret-color: var(--acc); } * { scrollbar-width: thin; scrollbar-color: var(--bd-3) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--bd-3); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--bd-4); background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background: transparent; } .i { --i-size: 18px; width: var(--i-size); height: var(--i-size); flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; } .i-xxs { --i-size: 12px; } .i-xs { --i-size: 14px; } .i-sm { --i-size: 16px; } .i-md { --i-size: 18px; } .i-lg { --i-size: 20px; } .i-xl { --i-size: 24px; } .i-inline { display: inline-block; vertical-align: -0.15em; } .i-fill { fill: currentColor; stroke: none; } .i-solid { fill: currentColor; } .i-tint { fill: currentColor; fill-opacity: .32; stroke: none; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: fixed; z-index: 200; left: 12px; top: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--acc); color: var(--tx-inv); font-weight: 700; font-size: 13.5px; transform: translateY(-160%); transition: transform 160ms var(--ease-out); } .skip-link:focus-visible { transform: none; outline-offset: 3px; } h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; } .nick-trunc { display: inline-block; max-width: var(--nick-max, 16ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; min-width: 0; } .h-display { font-size: 32px; line-height: 40px; font-weight: 650; letter-spacing: -0.02em; } .h-page { font-size: 26px; line-height: 34px; font-weight: 650; letter-spacing: -0.016em; } .h-section { font-size: 18px; line-height: 26px; font-weight: 600; } .h-sub { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.005em; } .t-body { font-size: 14px; line-height: 21px; } .t-strong { font-weight: 550; color: var(--tx-1); } .t-compact { font-size: 13px; line-height: 19px; } .t-label { font-size: 12px; line-height: 16px; font-weight: 550; } .t-meta { font-size: 12px; line-height: 16px; font-weight: 450; color: var(--tx-3); } .t-caps { font-size: 12px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tx-3); } .t-2 { color: var(--tx-2); } .t-3 { color: var(--tx-3); } .t-4 { color: var(--tx-4); } .t-acc { color: var(--acc); } .t-ok, .up { color: var(--ok); } .t-bad, .down { color: var(--bad); } .t-warn { color: var(--warn); } .t-info { color: var(--info); } .t-ct { color: var(--ct); } .t-t { color: var(--t); } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "calt"; } .code { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; } .tnum { font-variant-numeric: tabular-nums; } .metric { font-size: 28px; line-height: 34px; font-weight: 650; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .metric-sm { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .prose { max-width: 68ch; color: var(--tx-2); font-size: 15px; line-height: 1.7; } .prose h2 { color: var(--tx-1); font-size: 20px; line-height: 28px; margin: 36px 0 12px; } .prose h3 { color: var(--tx-1); font-size: 16px; line-height: 24px; margin: 28px 0 8px; } .prose p + p { margin-top: 14px; } .prose ul, .prose ol { padding-left: 20px; margin: 12px 0; } .prose li + li { margin-top: 6px; } .prose a { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .delta.up::before { content: ""; content: "" / "oshdi"; width: 0; height: 0; border: 4px solid transparent; border-bottom: 5px solid currentColor; margin-top: -4px; } .delta.down::before { content: ""; content: "" / "kamaydi"; width: 0; height: 0; border: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 4px; } .viewport { container: app / inline-size; min-height: 100vh; } .app { min-height: 100vh; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); background: var(--bg); } .app.is-chromeless { grid-template-columns: minmax(0, 1fr); } .app.is-chromeless > .rail, .app.is-chromeless .topbar, .app.is-chromeless .tabbar, .app.is-chromeless .testbar { display: none; } .app.is-guest { grid-template-columns: minmax(0, 1fr); } .app.is-guest > .rail, .app.is-guest .tabbar, .app.is-guest .member-only, .app.is-guest .crumbs { display: none !important; } .app:not(.is-guest) .guest-only { display: none !important; } .app.is-guest .topbar-brand { display: block; } .guest-cta { display: none; } .main { min-width: 0; display: flex; flex-direction: column; } .content { flex: 1; min-width: 0; } .page { width: 100%; max-width: 1376px; margin: 0 auto; padding: var(--sp-6) var(--sp-6) var(--sp-16); } .page--wide { max-width: 1600px; } .page--narrow { max-width: 880px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); } .page-head .lead { color: var(--tx-2); margin-top: 4px; font-size: 14px; } .page-actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: var(--sp-4); } .stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); } .stack-3 { display: flex; flex-direction: column; gap: var(--sp-3); } .stack-5 { display: flex; flex-direction: column; gap: var(--sp-5); } .stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); } .row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .row-2 { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; } .row-4 { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; } .row.wrap, .row-2.wrap, .row-4.wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .grow { flex: 1; min-width: 0; } .ml-auto { margin-left: auto; } .with-aside { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: var(--sp-5); align-items: start; } .with-aside > aside { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(var(--topbar-h) + var(--sp-4)); } .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } .auto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); } .rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--s1); border-right: 1px solid var(--bd-1); overflow-y: auto; } .rail-brand { display: flex; align-items: center; height: var(--topbar-h); padding: 0 var(--sp-5); flex: none; } .rail-brand img { height: 15px; width: auto; } .rail-nav { padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-5); } .rail-group { display: flex; flex-direction: column; gap: 2px; } .rail-group-title { padding: 0 var(--sp-3) var(--sp-2); } .rail-link { display: flex; align-items: center; gap: var(--sp-3); height: 38px; padding: 0 var(--sp-3); border-radius: var(--r-md); border: 1px solid transparent; color: var(--tx-3); font-size: 13.5px; font-weight: 500; transition: background-color 140ms ease, color 140ms ease; } .rail-link .i { color: var(--tx-3); transition: color 140ms ease; } @media (hover: hover) and (pointer: fine) { .rail-link:hover { background: var(--s3); color: var(--tx-1); } .rail-link:hover .i { color: var(--tx-1); } } .rail-link.is-active { background: var(--acc-sub); border-color: var(--acc-bd); color: var(--tx-1); } .rail-link.is-active .i { color: var(--acc); } .rail-link .rail-badge { margin-left: auto; } .rail-foot { margin-top: auto; padding: var(--sp-3); border-top: 1px solid var(--bd-1); display: flex; flex-direction: column; gap: var(--sp-2); } .rail-promo { padding: var(--sp-3); border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--bd-2); } .rail-promo .meta { margin-top: 6px; } .rail-promo .link { display: inline-block; margin-top: 10px; } .usercard { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); transition: background-color 140ms ease; } @media (hover: hover) and (pointer: fine) { .usercard:hover { background: var(--s3); } } .usercard .name { font-size: 13px; font-weight: 600; } .usercard .t-meta { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .usercard .row-2 { flex-wrap: wrap; row-gap: 2px; overflow: hidden; } .usercard .row-2 > .t-meta { max-width: 100%; } .rail-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 2px var(--sp-2) 0; color: var(--tx-3); font-size: 12px; line-height: 1.4; } .rail-legal a { color: var(--tx-3); transition: color 140ms ease; } @media (hover: hover) and (pointer: fine) { .rail-legal a:hover { color: var(--tx-1); } } .rail-legal .rail-social { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px -3px; border-radius: var(--r-sm); color: var(--tx-3); } .rail-legal .rail-social .i { --i-size: 14px; } .rail-legal .rail-social:active { transform: scale(0.94); } .topbar { position: sticky; top: 0; z-index: 30; height: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--bd-1); } .topbar-brand { display: none; } .topbar-brand img { height: 13px; width: auto; } .crumbs { display: flex; align-items: center; flex: none; gap: var(--sp-2); color: var(--tx-3); font-size: 13px; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--tx-1); } } .crumbs .sep { color: var(--tx-4); } .search { display: flex; align-items: center; gap: var(--sp-2); height: 36px; width: min(420px, 100%); padding: 0 var(--sp-3); background: var(--s1); border: 1px solid var(--bd-ctl); border-radius: var(--r-md); color: var(--tx-3); font-size: 13px; text-align: left; transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; } .search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--tx-1); } .search input::placeholder { color: var(--tx-3); } .search .ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { button.search:hover { border-color: var(--tx-3); color: var(--tx-2); } } .search:focus-within, button.search:focus-visible { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); background: var(--s2); outline: none; } .kbd { font-family: var(--mono); font-size: 12px; color: var(--tx-3); padding: 1px 6px; border: 1px solid var(--bd-3); border-bottom-width: 2px; border-radius: var(--r-xs); } .icon-btn { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); color: var(--tx-3); transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--s3); color: var(--tx-1); } } .icon-btn:active { transform: scale(0.94); } .icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px var(--bg); } .icon-btn .dot[data-bell-count] { top: 2px; right: 0; width: auto; min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill); background: var(--tx-1); color: var(--tx-inv); font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; } .topbar-end { margin-left: auto; } .lang-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: var(--r-md); color: var(--tx-2); font-size: 12px; font-weight: 650; letter-spacing: 0.03em; transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--ease-out); } .lang-btn .i { --i-size: 18px; color: var(--tx-3); } @media (hover: hover) and (pointer: fine) { .lang-btn:hover { background: var(--s3); color: var(--tx-1); } .lang-btn:hover .i { color: var(--tx-2); } } .lang-btn:active { transform: scale(0.97); } .lang-btn[aria-expanded="true"] { background: var(--s3); color: var(--tx-1); } .app.is-guest .lang-btn { display: none; } .lang-pills { display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin-right: var(--sp-2); border: 1px solid var(--bd-2); border-radius: var(--r-md); } .lang-pills button { position: relative; height: 30px; min-width: 36px; padding: 0 8px; border-radius: var(--r-sm); color: var(--tx-3); font-size: 12px; font-weight: 650; letter-spacing: 0.03em; transition: background-color 140ms ease, color 140ms ease; } @media (hover: hover) and (pointer: fine) { .lang-pills button:hover { color: var(--tx-1); background: var(--s3); } } .lang-pills button[aria-pressed="true"] { color: var(--tx-1); } .lang-pills button[aria-pressed="true"]::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--acc); } .lang-pills button:focus-visible { outline-offset: -2px; } .app.no-upsell [data-upsell] { display: none; } .tabbar { display: none; position: sticky; bottom: 0; z-index: 30; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--s1) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--bd-1); } .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 50px; padding: 6px 0; border-radius: var(--r-md); color: var(--tx-3); font-size: 12px; font-weight: 550; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease, color 120ms ease; } .tabbar a.is-active { color: var(--tx-1); font-weight: 700; } .tabbar a.is-active::before { content: ""; position: absolute; top: -6px; left: 50%; width: 32px; height: 2px; margin-left: -16px; border-radius: 0 0 var(--r-xs) var(--r-xs); background: var(--acc); } .tabbar a .i { --i-size: 24px; transition: transform 120ms var(--ease-out); } .tabbar a.is-active .i { color: var(--acc); } .tabbar .ic-on, .tabbar a.is-active .ic-off { display: none; } .tabbar a.is-active .ic-on { display: inline; } .tabbar a:active { background: var(--s3); } .tabbar a:active .i { transform: scale(.92); } .tabbar a:focus-visible { outline-offset: -2px; } .panel { background: var(--s2); border: 1px solid var(--bd-2); border-radius: var(--r-lg); min-width: 0; } .panel-pad { padding: var(--sp-5); } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); min-height: 56px; } .panel-head:not(.has-rule) + .panel-body { padding-top: 0; } .panel-head.has-rule { border-bottom: 1px solid var(--bd-1); } .panel-title { font-size: 15px; line-height: 22px; font-weight: 600; display: flex; align-items: center; gap: var(--sp-2); } .panel-title .count { font-variant-numeric: tabular-nums; color: var(--tx-3); font-weight: 500; font-size: 13px; } .panel-body { padding: var(--sp-5); } .panel-foot { padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--bd-1); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .panel-link { font-size: 13px; font-weight: 550; color: var(--tx-2); display: inline-flex; align-items: center; gap: 4px; transition: color 140ms ease; } @media (hover: hover) and (pointer: fine) { .panel-link:hover { color: var(--tx-1); } } .inset { background: var(--s1); border: 1px solid var(--bd-1); border-radius: var(--r-md); } .inset-pad { padding: var(--sp-3) var(--sp-4); } .is-me, .is-selected, .is-active, .board-row.is-me { --tx-3: #93A1B1; } .panel.is-selected, .inset.is-selected { border-color: var(--acc-bd); background: color-mix(in srgb, var(--acc-sub) 55%, var(--s2)); } .divider-v { width: 1px; align-self: stretch; background: var(--bd-1); } .btn { --btn-bg: var(--s3); --btn-bd: var(--bd-3); --btn-tx: var(--tx-1); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 38px; padding: 0 var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-tx); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 160ms var(--ease-out); user-select: none; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .btn:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):hover { --btn-bg: var(--s4); --btn-bd: var(--bd-4); } } .btn:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):active { transform: scale(0.97); } .btn:disabled, .btn.is-disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .btn-primary { --btn-bg: var(--acc); --btn-bd: var(--acc); --btn-tx: var(--tx-inv); font-weight: 700; } @media (hover: hover) and (pointer: fine) { .btn-primary:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):hover { --btn-bg: var(--acc-hover); --btn-bd: var(--acc-hover); } } .btn-primary:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):active { --btn-bg: var(--acc-press); } .btn-primary:is(:disabled, .is-disabled, [aria-disabled="true"]):not(.is-loading), .btn-steam:is(:disabled, .is-disabled, [aria-disabled="true"]):not(.is-loading) { --btn-bg: var(--s3); --btn-bd: var(--bd-3); --btn-tx: var(--tx-3); opacity: 1; } .btn.is-loading:is(:disabled, .is-disabled, [aria-disabled="true"]) { opacity: 1; } .btn-ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-tx: var(--tx-2); } @media (hover: hover) and (pointer: fine) { .btn-ghost:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):hover { --btn-bg: var(--s3); --btn-bd: transparent; --btn-tx: var(--tx-1); } } .btn-danger { --btn-bg: var(--bad-sub); --btn-bd: color-mix(in srgb, var(--bad) 40%, transparent); --btn-tx: #FF8A8A; } @media (hover: hover) and (pointer: fine) { .btn-danger:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):hover { --btn-bg: color-mix(in srgb, var(--bad) 22%, var(--s2)); --btn-bd: var(--bad); } } .btn-steam { --btn-bg: var(--acc); --btn-bd: var(--acc); --btn-tx: var(--tx-inv); font-weight: 700; } @media (hover: hover) and (pointer: fine) { .btn-steam:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):hover { --btn-bg: var(--acc-hover); --btn-bd: var(--acc-hover); } } .btn-steam:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):active { --btn-bg: var(--acc-press); } .btn-steam--quiet { --btn-bg: var(--s3); --btn-bd: var(--bd-3); --btn-tx: var(--tx-1); font-weight: 600; } @media (hover: hover) and (pointer: fine) { .btn-steam--quiet:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):hover { --btn-bg: var(--s4); --btn-bd: var(--bd-4); } } .btn-steam--quiet:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):active { --btn-bg: var(--s4); } .btn-faceit { --btn-bg: var(--s2); --btn-bd: color-mix(in srgb, var(--faceit) 70%, var(--bd-3)); --btn-tx: var(--tx-1); } .btn-faceit .i { color: var(--faceit); } @media (hover: hover) and (pointer: fine) { .btn-faceit:where(:not(:disabled, .is-disabled, [aria-disabled="true"])):hover { --btn-bg: color-mix(in srgb, var(--faceit) 10%, var(--s2)); --btn-bd: var(--faceit); } } .btn-steam .i, .btn-faceit .i { --i-size: 18px; } .btn-sm:is(.btn-steam, .btn-faceit) .i { --i-size: 16px; } .btn-lg:is(.btn-steam, .btn-faceit) .i { --i-size: 20px; } .auth-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .auth-row > .btn { flex: 0 1 auto; } .auth-row.is-equal > .btn { flex: 1 1 0; min-width: max-content; } .btn-tg { --btn-bg: color-mix(in srgb, var(--tg) 16%, var(--s2)); --btn-bd: color-mix(in srgb, var(--tg) 45%, transparent); --btn-tx: #8CD4FF; } .btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: 12.5px; gap: 6px; } .btn-xs { height: 26px; padding: 0 var(--sp-2); font-size: 12px; gap: 5px; border-radius: var(--r-xs); } .btn-lg { height: 46px; padding: 0 var(--sp-6); font-size: 15px; border-radius: var(--r-md); } .btn-block { width: 100%; } .btn-icon { width: 38px; padding: 0; } .btn-icon.btn-sm { width: 32px; } .btn.is-loading { color: transparent !important; position: relative; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--btn-tx); border-right-color: transparent; animation: spin 600ms linear infinite; } .btn.is-loading[data-loading-label] { color: var(--btn-tx) !important; } .btn.is-loading[data-loading-label]::after { position: static; order: -1; flex: none; } .btn.is-loading[data-loading-label] > .i { display: none; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .btn-group .btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .btn-group .btn + .btn { margin-left: -1px; } .link { color: var(--tx-1); font-weight: 550; text-decoration: underline; text-decoration-color: var(--bd-4); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 140ms ease; } @media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: var(--tx-2); } } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .label { font-size: 12.5px; font-weight: 550; color: var(--tx-2); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); } .help { font-size: 12px; color: var(--tx-3); line-height: 1.45; } .error-text { font-size: 12px; color: #FF8A8A; display: flex; align-items: flex-start; gap: 6px; line-height: 1.45; } .input, .select, .textarea { width: 100%; height: 40px; padding: 0 var(--sp-3); background: var(--s1); border: 1px solid var(--bd-ctl); border-radius: var(--r-sm); color: var(--tx-1); font-size: 14px; transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease; } .textarea { height: auto; min-height: 96px; padding: 10px var(--sp-3); resize: vertical; line-height: 1.5; } .input::placeholder, .textarea::placeholder { color: var(--tx-3); } @media (hover: hover) and (pointer: fine) { .input:hover, .select:hover, .textarea:hover { border-color: var(--tx-3); } } .input:focus, .select:focus, .textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); outline: none; background: var(--s2); } .input.is-invalid, .is-invalid .input { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); } .input.is-valid { border-color: color-mix(in srgb, var(--ok) 70%, transparent); } .input:disabled { opacity: 0.5; } .input.num, .input-num { font-variant-numeric: tabular-nums; } .input.code { font-family: var(--mono); letter-spacing: 0.04em; } .select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238291A2' stroke-width='2' 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 10px center; } .select-sm, .input-sm { height: 32px; font-size: 13px; } .input-group { display: flex; align-items: center; height: 40px; background: var(--s1); border: 1px solid var(--bd-ctl); border-radius: var(--r-sm); transition: border-color 140ms ease, box-shadow 140ms ease; } .input-group:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); } .input-group .input { border: 0; background: transparent; box-shadow: none; height: 100%; } .input-group .addon { padding: 0 var(--sp-3); color: var(--tx-3); font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; height: 100%; } .input-group .addon + .input { padding-left: 0; } .input-group .btn { height: 30px; margin-right: 4px; } .check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13.5px; color: var(--tx-2); cursor: pointer; user-select: none; } .check input { appearance: none; width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--bd-ctl); background: var(--s1); display: grid; place-content: center; transition: background-color 120ms ease, border-color 120ms ease; flex: none; margin: 0; cursor: pointer; } .check input[type="radio"] { border-radius: 50%; } .check input:checked { background: var(--acc); border-color: var(--acc); } .check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--tx-inv); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); } .check input[type="radio"]:checked::after { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--tx-inv); transform: none; } .switch { position: relative; display: inline-flex; flex: none; } .switch input { appearance: none; width: 38px; height: 22px; border-radius: var(--r-pill); background: var(--s4); border: 1px solid var(--bd-ctl); transition: background-color 160ms ease, border-color 160ms ease; cursor: pointer; margin: 0; } .switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--tx-2); transition: transform 200ms var(--ease-out), background-color 160ms ease; } .switch input:checked { background: var(--acc); border-color: var(--acc); } .switch input:checked::after { transform: translateX(16px); background: var(--tx-inv); } .switch input:disabled { opacity: 0.45; cursor: not-allowed; } .otp { display: flex; gap: var(--sp-2); } .otp input { width: 46px; height: 54px; text-align: center; font-family: var(--mono); font-size: 22px; font-weight: 600; background: var(--s1); border: 1px solid var(--bd-ctl); border-radius: var(--r-md); color: var(--tx-1); transition: border-color 140ms ease, box-shadow 140ms ease; } .otp input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); outline: none; } .otp input.is-filled { border-color: var(--tx-3); } .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--s1); border: 1px solid var(--bd-2); border-radius: var(--r-md); } .seg-item { height: 30px; padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--tx-3); font-size: 13px; font-weight: 550; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: background-color 140ms ease, color 140ms ease, transform 160ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .seg-item:hover { color: var(--tx-1); } } .seg-item.is-active { background: var(--s4); color: var(--tx-1); box-shadow: 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px var(--bd-ctl); } .seg-item:active { transform: scale(.97); } .seg-sm .seg-item { height: 26px; padding: 0 10px; font-size: 12px; } .filters { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; } .filters .field { min-width: 150px; } .tabs { display: flex; gap: var(--sp-1); box-shadow: inset 0 -1px 0 var(--bd-1); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .tabs::-webkit-scrollbar { display: none; } .tabs.is-overflow { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); } .tabs.is-overflow.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); } .tabs.is-overflow.is-scrolled.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); } .tabs.is-pinned, .tabs.is-pinned.is-overflow, .tabs.is-pinned.is-overflow.is-scrolled, .tabs.is-pinned.is-overflow.is-scrolled.is-end { -webkit-mask-image: none; mask-image: none; } .tabs.is-pinned.is-overflow::before, .tabs.is-pinned.is-overflow::after { content: ""; flex: none; position: sticky; width: 28px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 140ms ease; } .tabs.is-pinned.is-overflow::before { left: 0; margin-right: calc(-28px - var(--sp-1)); background: linear-gradient(270deg, transparent, var(--tabs-fade, var(--bg))); } .tabs.is-pinned.is-overflow::after { right: 0; margin-left: calc(-28px - var(--sp-1)); background: linear-gradient(90deg, transparent, var(--tabs-fade, var(--bg))); } .tabs.is-pinned.is-overflow.is-scrolled::before { opacity: 1; } .tabs.is-pinned.is-overflow:not(.is-end)::after { opacity: 1; } .tab { position: relative; height: 44px; padding: 0 var(--sp-3); display: inline-flex; align-items: center; gap: 7px; color: var(--tx-3); font-size: 13.5px; font-weight: 550; white-space: nowrap; transition: color 140ms ease; } .tab::after { content: ""; position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--acc); transform: scaleX(0); } .tab:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); } @media (hover: hover) and (pointer: fine) { .tab:hover { color: var(--tx-1); } } .tab.is-active { color: var(--tx-1); } .tab.is-active::after { transform: scaleX(1); } .tab .count { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tx-3); background: var(--s3); padding: 1px 6px; border-radius: var(--r-pill); } .tab.is-active .count { color: var(--acc); background: var(--acc-sub); } .tab-panel[hidden] { display: none !important; } .chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-xs); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--s3); color: var(--tx-2); border: 1px solid var(--bd-3); } .chip .i { --i-size: 12px; } .chip-pill { border-radius: var(--r-pill); } .chip-lg { height: 26px; padding: 0 10px; font-size: 12.5px; } .chip--acc { background: var(--acc-sub); color: var(--acc); border-color: var(--acc-bd); } .chip--ok, .chip--win { background: var(--ok-sub); color: #5FD3A6; border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .chip--bad, .chip--loss { background: var(--bad-sub); color: #FF8A8A; border-color: color-mix(in srgb, var(--bad) 35%, transparent); } .chip--warn { background: var(--warn-sub); color: #FFB877; border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .chip--info { background: var(--info-sub); color: #8BC0FF; border-color: color-mix(in srgb, var(--info) 35%, transparent); } .chip--ct { background: var(--ct-sub); color: var(--ct); border-color: color-mix(in srgb, var(--ct) 35%, transparent); } .chip--t { background: var(--t-sub); color: var(--t); border-color: color-mix(in srgb, var(--t) 35%, transparent); } .chip--premier { background: color-mix(in srgb, #8EA6FF 12%, var(--s2)); color: #AFC0FF; border-color: color-mix(in srgb, #8EA6FF 35%, transparent); } .chip--faceit { background: var(--faceit-sub); color: #FF8A4C; border-color: color-mix(in srgb, var(--faceit) 40%, transparent); } .chip--tie { background: var(--s3); color: var(--tx-2); } .chip--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip--ghost { background: transparent; } .side-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: var(--r-xs); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .side-tag.ct { background: var(--ct-sub); color: var(--ct); } .side-tag.t { background: var(--t-sub); color: var(--t); } .result { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--r-xs); font-size: 12px; font-weight: 800; } .result.w { background: var(--ok-sub); color: #5FD3A6; } .result.l { background: var(--bad-sub); color: #FF8A8A; } .result.d { background: var(--s3); color: var(--tx-2); } .count-badge { font-variant-numeric: tabular-nums; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--acc); color: var(--tx-inv); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .count-badge.muted { background: var(--s4); color: var(--tx-2); } .new-badge { height: 18px; padding: 0 6px; border-radius: var(--r-xs); background: var(--s3); color: var(--tx-2); border: 1px solid var(--bd-4); font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; } .brand { display: inline-block; flex: none; width: auto; max-width: none; height: calc(var(--brand-h, 16px) * var(--brand-k, 1)); vertical-align: middle; object-fit: contain; } .brand-12 { --brand-h: 12px; } .brand-14 { --brand-h: 14px; } .brand-16 { --brand-h: 16px; } .brand-18 { --brand-h: 18px; } .brand-20 { --brand-h: 20px; } .brand-24 { --brand-h: 24px; } .brand-28 { --brand-h: 28px; } .brand[data-brand="click"] { --brand-k: .9; } .brand[data-brand="payme"] { --brand-k: .8; } .brand[data-brand="paylov"] { --brand-k: .82; } .brand[data-brand="uzcard"] { --brand-k: 1.08; } .brand[data-brand="humo"] { --brand-k: .96; border-radius: 2px; } .brand[data-brand="visa"] { --brand-k: .56; } .brand[data-brand="mastercard"] { --brand-k: .92; } .brand[data-brand="faceit"] { --brand-k: 1.2; } .brand[data-brand="youtube"] { --brand-k: .76; } .brand[data-brand="steam-word"] { --brand-k: .9; } .brand-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; color: var(--tx-1); } .brand-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .paycard { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; --brand-h: 16px; } .paycard .digits { letter-spacing: 0.02em; } .paytile { display: inline-grid; place-items: center; flex: none; width: 56px; height: 36px; border-radius: var(--r-sm); background: var(--s3); border: 1px solid var(--bd-3); overflow: hidden; --brand-h: 22px; } .paytile > .brand { max-width: 44px; max-height: 24px; } .paytile > .brand[data-brand="humo"] { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; } .paytile > .i { --i-size: 20px; color: var(--tx-2); } .paytile.is-off { filter: grayscale(1); opacity: .45; } .paytile.is-sel { border-color: var(--acc-bd); } .brand-tile { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); background: var(--s3); border: 1px solid var(--bd-3); --brand-h: 22px; } .brand-tile > .i { --i-size: 20px; color: var(--tx-2); } .brand-tile--steam { background: #171A21; border-color: #2A3542; color: #fff; } .brand-tile--faceit { background: var(--faceit-sub); border-color: color-mix(in srgb, var(--faceit) 35%, transparent); } .brand-tile--tiktok { background: #000; border-color: #2A2F36; } .brand-tile--bare { background: transparent; border-color: transparent; } .brand-tile-sm { width: 32px; height: 32px; border-radius: var(--r-sm); --brand-h: 18px; } .brand-tile-lg { width: 48px; height: 48px; border-radius: var(--r-lg); --brand-h: 26px; } .brand-badge { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--s2); } .brand-tile-lg .brand-badge { right: -4px; bottom: -4px; width: 14px; height: 14px; } .fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill); border: 1px solid var(--bd-3); background: transparent; color: var(--tx-2); font-size: 12.5px; font-weight: 550; white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; } .fchip .i { --i-size: 14px; } .fchip .n { font-variant-numeric: tabular-nums; color: var(--tx-3); font-size: 12px; font-weight: 600; } @media (hover: hover) and (pointer: fine) { .fchip:hover { border-color: var(--bd-ctl); color: var(--tx-1); } } .fchip:active { transform: scale(.97); } .fchip:is([aria-pressed="true"], .is-active) { background: var(--acc-sub); border-color: var(--acc-bd); color: var(--tx-1); } .fchip:is([aria-pressed="true"], .is-active) .n { color: var(--acc); } .fchip-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .premier { --pr-slant: 8px; display: inline-flex; align-items: center; white-space: nowrap; flex: none; height: 24px; padding: 0 calc(var(--pr-slant) + 4px) 0 23px; position: relative; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: color-mix(in srgb, var(--pr, #B8C2D0) 72%, #fff); background: color-mix(in srgb, var(--pr, #B8C2D0) 22%, var(--s2)); clip-path: polygon(var(--pr-slant) 0, 100% 0, calc(100% - var(--pr-slant)) 100%, 0 100%); font-variant-numeric: tabular-nums; } .premier::before, .premier::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 2px; border-radius: 1px; background: var(--pr, #B8C2D0); transform: skewX(-18.4deg); } .premier::before { left: 8px; } .premier::after { left: 12px; } .premier.b0 { --pr: #B8C2D0; } .premier.b1 { --pr: #8CC6FF; } .premier.b2 { --pr: #5E8BFF; } .premier.b3 { --pr: #B884FF; } .premier.b4 { --pr: #F27BD9; } .premier.b5 { --pr: #FF6767; } .premier.b6 { --pr: #FFD24C; } .premier-lg { --pr-slant: 10px; height: 32px; font-size: 17px; padding: 0 calc(var(--pr-slant) + 5px) 0 28px; } .premier-lg::before, .premier-lg::after { top: 5px; bottom: 5px; width: 3px; transform: skewX(-17.4deg); } .premier-lg::before { left: 10px; } .premier-lg::after { left: 15px; } .premier-xs { --pr-slant: 6px; height: 18px; font-size: 12px; padding: 0 9px; } .premier-xs::before, .premier-xs::after { content: none; } .lvl { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 800; color: var(--lv); border: 2px solid var(--lv); background: color-mix(in srgb, var(--lv) 12%, var(--s1)); flex: none; } .lvl.l1 { --lv: #EEEEEE; } .lvl.l2, .lvl.l3 { --lv: #1CE400; } .lvl.l4, .lvl.l5, .lvl.l6, .lvl.l7 { --lv: #FFC800; } .lvl.l8, .lvl.l9 { --lv: #FF6309; } .lvl.l10 { --lv: #FE1F00; color: #FF5A40; } .lvl-lg { width: 36px; height: 36px; font-size: 15px; border-width: 2.5px; } .table-wrap { overflow-x: auto; } .table th { position: sticky; top: 0; text-align: left; padding: 10px var(--sp-3); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tx-3); border-bottom: 1px solid var(--bd-1); background: var(--s2); white-space: nowrap; } .table td { padding: 0 var(--sp-3); height: 48px; font-size: 13.5px; border-bottom: 1px solid var(--bd-1); white-space: nowrap; } .table tr:last-child td { border-bottom: 0; } .table th.n, .table td.n { text-align: right; font-variant-numeric: tabular-nums; } .table th.c, .table td.c { text-align: center; } .table th:first-child, .table td:first-child { padding-left: var(--sp-5); } .table th:last-child, .table td:last-child { padding-right: var(--sp-5); } .table tbody tr { transition: background-color 120ms ease; } @media (hover: hover) and (pointer: fine) { .table tbody tr:hover { background: var(--s3); } } .table tbody tr.is-me { background: color-mix(in srgb, var(--acc-sub) 70%, var(--s2)); } .table tbody tr.is-me td:first-child { box-shadow: inset 2px 0 0 var(--acc); } .table tbody tr.is-selected { background: var(--s3); } .table.compact td { height: 40px; font-size: 13px; } .table.loose td { height: 56px; } .table .row-link { cursor: pointer; } .table td.sticky-col, .table th.sticky-col { position: sticky; left: 0; background: inherit; z-index: 1; } .table tbody tr td.sticky-col { background: var(--s2); } .rating-hi { color: var(--ok); font-weight: 700; } .rating-mid { color: var(--tx-1); font-weight: 650; } .rating-lo { color: var(--bad); font-weight: 650; } .rating-hi::after { content: ""; content: "" / ", yuqori"; } .rating-lo::after { content: ""; content: "" / ", past"; } .player { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; } .player .nick { font-weight: 600; font-size: 13.5px; min-width: 0; max-width: var(--nick-max, 24ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player.is-me .nick { color: var(--acc); } .me-tag { height: 18px; padding: 0 6px; border-radius: var(--r-xs); background: transparent; color: var(--tx-1); border: 1px solid var(--bd-ctl); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; flex: none; } .pager { display: flex; align-items: center; gap: 4px; } .pager a, .pager span { font-variant-numeric: tabular-nums; min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: 13px; color: var(--tx-2); } @media (hover: hover) and (pointer: fine) { .pager a:hover { background: var(--s3); color: var(--tx-1); } } .pager .is-active { background: var(--acc-sub); color: var(--acc); border: 1px solid var(--acc-bd); } .pager .pager-gap { min-width: 20px; padding: 0 2px; color: var(--tx-4); } .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: var(--tx-1); background: linear-gradient(140deg, hsl(var(--h, 212) 32% 30%), hsl(var(--h, 212) 28% 16%)); overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); } .avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; color: transparent; } .avatar.is-anon { background: var(--s4); color: var(--tx-2); } .avatar-xs { width: 22px; height: 22px; font-size: 12px; } .avatar-sm { width: 26px; height: 26px; font-size: 12px; } .avatar-md { width: 40px; height: 40px; font-size: 14px; } .avatar-lg { width: 56px; height: 56px; font-size: 19px; } .avatar-xl { width: 88px; height: 88px; font-size: 30px; } .avatar.is-online::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px var(--s2); } .avatar-stack { display: flex; } .avatar-stack .avatar { box-shadow: 0 0 0 2px var(--s2); } .avatar-stack .avatar + .avatar { margin-left: -8px; } .flag { width: 18px; height: 13px; border-radius: 2px; flex: none; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--s1); isolation: isolate; } .thumb > img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms var(--ease-out); } .thumb-9x16 { aspect-ratio: 9 / 16; } .thumb-1x1 { aspect-ratio: 1 / 1; } .thumb-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,18,0) 45%, rgba(8,12,18,.82) 100%); pointer-events: none; z-index: 1; } .thumb .tl, .thumb .tr, .thumb .bl, .thumb .br { position: absolute; z-index: 2; display: flex; gap: 4px; } .thumb .tl { top: 8px; left: 8px; } .thumb .tr { top: 8px; right: 8px; } .thumb .bl { bottom: 8px; left: 8px; } .thumb .br { bottom: 8px; right: 8px; } .duration { font-variant-numeric: tabular-nums; height: 20px; padding: 0 6px; border-radius: var(--r-xs); background: rgba(6,10,15,.78); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; backdrop-filter: blur(4px); } .overlay-chip { height: 20px; padding: 0 7px; border-radius: var(--r-xs); background: rgba(6,10,15,.72); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(4px); } .play-btn { position: absolute; z-index: 2; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(8,12,18,.55); border: 1px solid rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px); transition: transform 200ms var(--ease-out), background-color 160ms ease; } .play-btn .i { --i-size: 18px; fill: currentColor; stroke: none; margin-left: 2px; } .play-btn.lg { width: 64px; height: 64px; } .play-btn.lg .i { --i-size: 24px; } @media (hover: hover) and (pointer: fine) { .media-hover:hover .thumb > img { transform: scale(1.035); } .media-hover:hover .play-btn { transform: scale(1.06); background: rgba(255,199,71,.92); color: var(--tx-inv); border-color: transparent; } } .map-img { width: 100%; height: 100%; object-fit: cover; } .mapchip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; } .mapchip img { width: 20px; height: 20px; object-fit: contain; } .maplead { width: 72px; height: 44px; border-radius: var(--r-sm); overflow: hidden; position: relative; flex: none; background: var(--s1); } .maplead img.bg { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.85); } .maplead img.ico { position: absolute; left: 6px; bottom: 5px; width: 18px; height: 18px; } .clip-card { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .clip-card .meta { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; } .clip-card .title { font-size: 13.5px; font-weight: 600; color: var(--tx-1); } .clip-card .sub { font-size: 12px; color: var(--tx-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .clip-card .sub .dotsep::before { content: "·"; margin-right: 6px; color: var(--tx-4); } .clip-card .actions { display: flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 2px; } .clip-card.compact .actions { display: none; } .clip-card .thumb .overlay-chip .i { --i-size: 12px; } .clip-card .tgmark { color: #8CD4FF; } .clip-card.is-pending .thumb > img { object-fit: contain; background: #0A1017; filter: saturate(.55) brightness(.78); } .clip-card.is-rendering .thumb > img { filter: grayscale(.4) brightness(.55); } .render-progress { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; height: 4px; border-radius: var(--r-xs); background: rgba(255,255,255,.16); overflow: hidden; } .render-progress > i { display: block; height: 100%; background: var(--acc); border-radius: var(--r-xs); } .roundstrip { --cell: 14px; --gap: 3px; display: flex; align-items: stretch; gap: var(--gap); min-width: 0; max-width: 100%; } .roundstrip .rs-half { display: flex; gap: var(--gap); } .roundstrip .rs-sep { width: 1px; margin: 0 4px; background: var(--bd-4); align-self: stretch; } .rs-cell { position: relative; width: var(--cell); height: calc(var(--cell) * 1.55); border-radius: var(--r-xs); flex: none; background: var(--s4); } .rs-cell.ct { background: color-mix(in srgb, var(--ct) 26%, var(--s3)); } .rs-cell.t { background: color-mix(in srgb, var(--t) 26%, var(--s3)); } .rs-cell.w.ct { background: var(--ct); } .rs-cell.w.t { background: var(--t); } .rs-cell.l::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: rgba(8,12,18,.45); } .rs-cell.w::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: rgba(8,12,18,.55); } .rs-cell.is-current { outline: 2px solid var(--tx-1); outline-offset: 2px; } .rs-cell:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; border-radius: var(--r-xs); } .rs-cell.is-key::before { content: ""; position: absolute; left: 50%; top: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--acc); } .roundstrip.lg { --cell: 22px; --gap: 4px; } .roundstrip.sm { --cell: 9px; --gap: 2px; } .roundstrip.sm .rs-cell { border-radius: 2px; } .roundstrip.sm .rs-cell::after { display: none; } .roundstrip.fluid { width: 100%; } .roundstrip.fluid .rs-half { flex: var(--n, 1) 1 0; min-width: 0; } .roundstrip .rs-sep.ot { background: none; border-left: 1px dashed var(--bd-4); } .roundstrip .rs-ot::before { content: attr(data-ot); flex: none; align-self: center; font-size: 12px; line-height: 1; font-weight: 650; letter-spacing: 0.02em; color: var(--tx-3); font-variant-numeric: tabular-nums; } .roundstrip:is(.fluid, .sm) .rs-ot::before { content: none; } .roundstrip.is-overflow { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 8px 4px; margin-block: -8px -4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .roundstrip.is-overflow::-webkit-scrollbar { display: none; } .roundstrip.is-overflow.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); } .roundstrip.is-overflow.is-scrolled.is-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); } .roundstrip.is-overflow .rs-half, .roundstrip.is-overflow .rs-sep { flex: none; } .roundstrip.fluid .rs-cell { flex: 1; width: auto; } button.rs-cell { cursor: pointer; transition: transform 140ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { button.rs-cell:hover { transform: translateY(-2px); } } .rs-legend { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: 12px; color: var(--tx-3); } .rs-legend .sw { width: 10px; height: 14px; border-radius: 2px; display: inline-block; vertical-align: middle; margin-right: 6px; } .roundstrip[data-interactive]:not(.is-overflow) { touch-action: pan-y; } .rs-peek { position: fixed; z-index: 60; top: 0; left: 0; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--s3); border: 1px solid var(--bd-4); box-shadow: var(--shadow-pop); font-size: 13px; color: var(--tx-2); white-space: nowrap; pointer-events: none; } .rs-peek.is-below { transform: translate(-50%, 0); } .rs-peek[hidden] { display: none; } .rs-peek b { color: var(--tx-1); font-weight: 650; } .kv { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 9px 0; font-size: 13.5px; border-bottom: 1px solid var(--bd-1); } .kv:last-child { border-bottom: 0; } .kv .k { color: var(--tx-3); } .kv .v { color: var(--tx-1); font-weight: 600; text-align: right; } .stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .stat .label { font-size: 12px; color: var(--tx-3); font-weight: 500; } .stat .value { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--tx-1); } .stat .foot { font-size: 12px; color: var(--tx-3); display: flex; align-items: center; gap: 6px; } .stat-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .stat-row > .stat { padding: var(--sp-4) var(--sp-5); } .stat-row > .stat + .stat { border-left: 1px solid var(--bd-1); } .barh { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); font-size: 13px; } .barh .track { height: 6px; border-radius: var(--r-pill); background: var(--s4); overflow: hidden; } .barh .track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--fill, var(--acc)); } .meter { display: flex; flex-direction: column; gap: 6px; } .meter .track { height: 6px; border-radius: var(--r-pill); background: var(--s4); overflow: hidden; } .meter .track > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--fill, var(--tx-2)); } .meter.is-warn .track > i { background: var(--warn); } .meter.is-full .track > i { background: var(--bad); } .legend { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: 12px; color: var(--tx-3); } .legend .sw { display: inline-block; width: 10px; height: 3px; border-radius: var(--r-pill); margin-right: 6px; vertical-align: middle; background: var(--c); } .legend .sw.dot { width: 8px; height: 8px; border-radius: 50%; } .chart { position: relative; width: 100%; } .chart svg { width: 100%; height: 100%; overflow: visible; } .chart .gridline { stroke: var(--bd-1); stroke-width: 1; } .chart .axis { font-variant-numeric: tabular-nums; fill: var(--tx-3); font-size: 12px; } .chart-tip { position: absolute; pointer-events: none; z-index: 5; padding: 8px 10px; border-radius: var(--r-sm); background: var(--s4); border: 1px solid var(--bd-4); box-shadow: var(--shadow-pop); font-size: 12px; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity 120ms ease, transform 120ms var(--ease-out); } .chart-tip.is-on { opacity: 1; transform: none; } .chart-tip .t { color: var(--tx-3); font-size: 12px; margin-bottom: 4px; } .chart-tip .r { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .map { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: #0A1017; isolation: isolate; } .map > img.radar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: saturate(.55) brightness(.78) contrast(1.05); } .map .layer { position: absolute; inset: 0; } .map svg.paths { position: absolute; inset: 0; width: 100%; height: 100%; } .mk { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; font-weight: 800; line-height: 1; } .mk-p { width: 22px; height: 22px; border: 2px solid #0A1017; box-shadow: 0 2px 6px rgba(0,0,0,.5); } .mk-p.ct { background: var(--ct); color: #062033; } .mk-p.t { background: var(--t); color: #2E1804; } .mk-p.is-me { outline: 2px solid var(--acc); outline-offset: 2px; } .mk-p.is-dead { opacity: .5; filter: grayscale(.6); } .mk-p .dir { position: absolute; width: 8px; height: 7px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); top: -9px; } .mk-x { width: 16px; height: 16px; color: var(--ev-kill); } .mk-x::before, .mk-x::after { content: ""; position: absolute; width: 14px; height: 3px; border-radius: 2px; background: currentColor; box-shadow: 0 0 0 1.5px #0A1017; } .mk-x::before { transform: rotate(45deg); } .mk-x::after { transform: rotate(-45deg); } .mk-bomb { width: 18px; height: 18px; border-radius: var(--r-xs); background: var(--ev-obj); color: #2A1E03; border: 2px solid #0A1017; } .mk-smoke { width: 34px; height: 34px; background: radial-gradient(circle, rgba(200,210,225,.55), rgba(200,210,225,.18) 65%, transparent 70%); z-index: 2; } .mk-flash { width: 14px; height: 14px; background: #FFF6C8; border: 2px solid #0A1017; } .mk-molly { width: 28px; height: 28px; background: radial-gradient(circle, rgba(255,120,50,.6), rgba(255,90,30,.18) 65%, transparent 70%); z-index: 2; } .mk-util { width: 12px; height: 12px; border-radius: var(--r-xs); background: var(--ev-util); border: 2px solid #0A1017; } .map-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: 12px; color: var(--tx-2); } .map-legend span { display: inline-flex; align-items: center; gap: 6px; } .player-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #05080C; } .player-frame > img { width: 100%; height: 100%; object-fit: cover; } .player-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 28px 14px 12px; background: linear-gradient(180deg, transparent, rgba(5,8,12,.9)); display: flex; flex-direction: column; gap: 8px; } .scrub { position: relative; height: 4px; border-radius: var(--r-xs); background: rgba(255,255,255,.2); cursor: pointer; } .scrub > i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: var(--r-xs); background: var(--acc); } .scrub > b { position: absolute; left: var(--p, 0%); top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.5); } .scrub .mark { position: absolute; top: -3px; width: 3px; height: 10px; border-radius: 2px; background: var(--ev-kill); } .player-row { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 12px; } .player-row .icon-btn { color: #fff; width: 32px; height: 32px; } .tl { position: relative; background: var(--s1); border: 1px solid var(--bd-2); border-radius: var(--r-lg); overflow: hidden; } .tl-ruler { font-variant-numeric: tabular-nums; height: 26px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--bd-1); font-size: 12px; color: var(--tx-3); } .tl-track { position: relative; display: flex; align-items: center; height: 56px; border-bottom: 1px solid var(--bd-1); } .tl-track:last-child { border-bottom: 0; } .tl-head { width: 120px; flex: none; height: 100%; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-right: 1px solid var(--bd-1); font-size: 12px; color: var(--tx-2); background: var(--s2); } .tl-lane { position: relative; flex: 1; height: 100%; } .tl-item { position: absolute; top: 7px; bottom: 7px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid rgba(255,255,255,.12); display: flex; align-items: flex-end; padding: 4px 6px; font-size: 12px; font-weight: 600; color: #fff; } .tl-item.video { background: #1E2B38; } .tl-item.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; } .tl-item.video span { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.8); } .tl-item.audio { background: color-mix(in srgb, var(--ok) 22%, var(--s2)); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: #A6F0D0; } .tl-item.text { background: color-mix(in srgb, var(--ev-util) 22%, var(--s2)); border-color: color-mix(in srgb, var(--ev-util) 45%, transparent); color: #D6C9FF; } .tl-item.fx { background: color-mix(in srgb, var(--acc) 18%, var(--s2)); border-color: var(--acc-bd); color: var(--acc); } .tl-item.is-selected { outline: 2px solid var(--acc); outline-offset: 1px; } .tl-item .handle { position: absolute; top: 0; bottom: 0; width: 6px; background: rgba(255,255,255,.35); cursor: ew-resize; } .tl-item .handle.l { left: 0; } .tl-item .handle.r { right: 0; } .tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--acc); z-index: 4; pointer-events: none; } .tl-playhead::before { content: ""; position: absolute; top: 0; left: -5px; width: 12px; height: 10px; background: var(--acc); clip-path: polygon(0 0, 100% 0, 50% 100%); } .wave { position: absolute; inset: 6px 4px; display: flex; align-items: center; gap: 2px; opacity: .8; } .wave i { flex: 1; background: currentColor; border-radius: 2px; min-height: 2px; } .banner { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border-radius: var(--r-md); border: 1px solid; font-size: 13px; line-height: 1.45; } .banner .i { flex: none; } .banner .grow { color: var(--tx-2); } .banner b { color: var(--tx-1); font-weight: 600; } .banner--warn { background: var(--warn-sub); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .banner--warn .i { color: var(--warn); } .banner--info { background: var(--info-sub); border-color: color-mix(in srgb, var(--info) 40%, transparent); } .banner--info .i { color: var(--info); } .banner--bad { background: var(--bad-sub); border-color: color-mix(in srgb, var(--bad) 40%, transparent); } .banner--bad .i { color: var(--bad); } .banner--ok { background: var(--ok-sub); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .banner--ok .i { color: var(--ok); } .banner--acc { background: var(--acc-sub); border-color: var(--acc-bd); } .banner--acc .i { color: var(--acc); } .testbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px var(--sp-4); background: #1D1709; border-bottom: 1px solid #4A3A14; color: #E8C877; font-size: 12px; line-height: 1.4; text-align: center; } .testbar a { display: inline-flex; align-items: center; gap: 4px; vertical-align: bottom; color: var(--acc); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .testbar a .i { --i-size: 14px; } .testbar { position: relative; z-index: 31; } .testbar a { position: relative; } .testbar a::before { content: ""; position: absolute; inset: -14px -8px; } .shell-banners { display: flex; flex-direction: column; background: var(--bg); } .shell-banners .banner { gap: var(--sp-3); padding: 8px var(--sp-6); border-radius: 0; border-width: 0 0 1px; } .shell-banners .banner .icon-btn { margin: -4px -8px -4px 0; } .shell-banners .banner-more { display: inline-flex; align-items: center; justify-content: center; gap: 4px; align-self: flex-start; height: 28px; margin: 6px var(--sp-6); padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--bd-3); background: var(--s2); color: var(--tx-2); font-size: 12px; font-weight: 600; } @media (hover: hover) and (pointer: fine) { .shell-banners .banner-more:hover { background: var(--s3); color: var(--tx-1); } } .shell-banners .banner-more .i { color: var(--tx-3); } .app.is-chromeless .shell-banners { display: none; } .app.has-banners .testbar:not(:focus-within) { position: relative; height: 4px; min-height: 0; padding: 0; border: 0; background: #9C7B26; overflow: hidden; font-size: 0; line-height: 0; gap: 0; } .app.has-banners .testbar:not(:focus-within) > * { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @container app (max-width: 760px) { .shell-banners .banner { padding: 8px var(--sp-4); } .shell-banners .banner .long { display: none; } .shell-banners .banner-more { margin: 6px var(--sp-4); height: 32px; } } .topbar-back { display: none; } dialog.bell-pop { position: fixed; inset: auto; margin: 0; width: 400px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100dvh - 120px)); padding: 0; flex-direction: column; background: var(--s2); color: var(--tx-1); border: 1px solid var(--bd-4); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); overflow: hidden; } dialog.bell-pop[open] { display: flex; } dialog.bell-pop::backdrop { background: rgba(4, 7, 11, 0.5); } .bell-pop-head { display: flex; align-items: center; gap: var(--sp-2); padding: 10px 8px 10px 16px; border-bottom: 1px solid var(--bd-1); flex: none; } .bell-pop-title { flex: 1; font-size: 15px; font-weight: 650; } .bell-pop-title:focus { outline: none; } .bell-pop-list { flex: 1; min-height: 0; overflow-y: auto; } .bell-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--bd-1); color: inherit; transition: background-color 120ms ease; } @media (hover: hover) and (pointer: fine) { .bell-item:hover { background: var(--s3); } } .bell-item .ico { position: relative; width: 32px; height: 32px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; background: var(--s3); color: var(--tx-2); } .bell-item .ico .i { --i-size: 16px; } .bell-item .bell-ico-warn { color: var(--warn); background: var(--warn-sub); } .bell-item .bell-ico-bad { color: var(--bad); background: var(--bad-sub); } .bell-item.is-unread .ico::after { content: ""; position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--tx-1); box-shadow: 0 0 0 2px var(--s2); } .bell-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bell-ttl { font-size: 13px; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bell-item.is-unread .bell-ttl { font-weight: 600; } .bell-sub { font-size: 12px; line-height: 17px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bell-pop-foot { display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; flex: none; border-top: 1px solid var(--bd-1); font-size: 13px; font-weight: 600; color: var(--tx-1); transition: background-color 120ms ease; } @media (hover: hover) and (pointer: fine) { .bell-pop-foot:hover { background: var(--s3); } } .ph-field, .lg-ph { display: inline; padding: 1px 6px; border: 1px dashed var(--bd-4); border-radius: var(--r-sm); background: var(--s1); color: var(--tx-2); font-weight: 500; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-6); } .empty .ico { color: var(--tx-3); margin-bottom: var(--sp-1); } .empty .ico .i { --i-size: 24px; } .empty h3 { font-size: 16px; font-weight: 600; } .empty p { color: var(--tx-2); font-size: 13.5px; max-width: 46ch; line-height: 1.55; } .empty .row { justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); } .empty-ghost { display: flex; flex-direction: column; gap: 8px; width: min(420px, 100%); margin-bottom: var(--sp-4); opacity: .55; } .empty-ghost i { display: block; height: 40px; border-radius: var(--r-md); border: 1px dashed var(--bd-4); background: color-mix(in srgb, var(--s3) 40%, transparent); } .empty-ghost i:nth-child(2) { width: 86%; } .empty-ghost i:nth-child(3) { width: 64%; } .skeleton, .sk { position: relative; overflow: hidden; background: var(--s3); border-radius: var(--r-sm); } .sk { animation: skpulse 1.6s ease-in-out infinite; } .sk-line { height: 12px; border-radius: var(--r-xs); } .sk-line.lg { height: 18px; } .sk-circle { border-radius: 50%; } .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bd-4); border-top-color: var(--acc); animation: spin 650ms linear infinite; flex: none; } .progress { height: 4px; border-radius: var(--r-xs); background: var(--s4); overflow: hidden; } .progress > i { display: block; height: 100%; background: var(--acc); border-radius: var(--r-xs); } .progress.indeterminate > i { width: 100%; animation: skpulse 1.4s ease-in-out infinite; } .steps { display: flex; flex-direction: column; gap: 0; } .step { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); position: relative; padding-bottom: var(--sp-5); } .step:last-child { padding-bottom: 0; } .step::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--bd-2); border-radius: 2px; } .step:last-child::before { display: none; } .step .dot { font-variant-numeric: tabular-nums; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--s3); border: 1px solid var(--bd-3); font-size: 12px; font-weight: 700; color: var(--tx-2); } .step.is-done .dot { background: var(--ok-sub); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok); } .step.is-done::before { background: color-mix(in srgb, var(--ok) 45%, transparent); } .step.is-current .dot { background: var(--acc-sub); border-color: var(--acc-bd); color: var(--acc); } .step .body { padding-top: 3px; } .step .title { font-size: 14px; font-weight: 600; } .step .desc { font-size: 13px; color: var(--tx-2); margin-top: 2px; line-height: 1.5; } .toast-host { position: fixed; z-index: 90; inset: auto 20px 20px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); height: auto; pointer-events: none; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 12px 12px 14px; border-radius: var(--r-md); background: var(--s4); border: 1px solid var(--bd-4); box-shadow: var(--shadow-pop); font-size: 13px; color: var(--tx-1); transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); } @starting-style { .toast { opacity: 0; transform: translateY(12px) scale(.98); } } .toast.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); transition-duration: 160ms; } .toast > .i { margin-top: 1px; } .toast .body { flex: 1; min-width: 0; } .toast.ok > .i { color: var(--ok); } .toast.bad > .i { color: var(--bad); } .toast.info > .i { color: var(--info); } .toast.acc > .i { color: var(--acc); } .toast.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--bd-4)); } .toast .sub { color: var(--tx-2); font-size: 12.5px; margin-top: 2px; } .toast .toast-act { display: inline-flex; margin-top: 8px; height: 28px; padding: 0 10px; align-items: center; border-radius: var(--r-sm); border: 1px solid var(--bd-ctl); color: var(--tx-1); font-size: 12.5px; font-weight: 600; } @media (hover: hover) and (pointer: fine) { .toast .toast-act:hover { background: var(--s3); } } .toast .toast-x { flex: none; width: 28px; height: 28px; margin: -4px -4px 0 0; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-3); } .toast .toast-x .i { --i-size: 14px; } @media (hover: hover) and (pointer: fine) { .toast .toast-x:hover { background: var(--s3); color: var(--tx-1); } } dialog.modal { padding: 0; border: 1px solid var(--bd-3); border-radius: var(--r-xl); background: var(--s2); color: var(--tx-1); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: var(--shadow-pop); opacity: 1; transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } dialog.modal[open] { display: flex; flex-direction: column; } @starting-style { dialog.modal[open] { opacity: 0; transform: translateY(8px) scale(.98); } } dialog.modal::backdrop { background: rgba(4, 7, 11, .68); backdrop-filter: blur(3px); transition: opacity 200ms ease; } @starting-style { dialog.modal[open]::backdrop { opacity: 0; } } dialog.modal.is-closing { opacity: 0; transform: translateY(4px) scale(.98); transition-duration: 150ms; transition-timing-function: ease-in; } dialog.modal.is-closing::backdrop, dialog.drawer.is-closing::backdrop { opacity: 0; transition-duration: 150ms; } dialog.modal.is-dragging { transition: none; } dialog.modal.lg { width: min(760px, calc(100vw - 32px)); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3); } .modal-head h2, .modal-head h3 { font-size: 17px; font-weight: 650; } .modal-body { padding: 0 var(--sp-5) var(--sp-5); overflow-y: auto; } .modal-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--bd-1); display: flex; justify-content: flex-end; gap: var(--sp-2); } dialog.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(460px, 100vw); padding: 0; border: 0; border-left: 1px solid var(--bd-3); background: var(--s2); color: var(--tx-1); box-shadow: var(--shadow-pop); transition: transform 320ms var(--ease-drawer); } dialog.drawer[open] { display: flex; flex-direction: column; } @starting-style { dialog.drawer[open] { transform: translateX(100%); } } dialog.drawer.is-closing { transform: translateX(100%); transition-duration: 200ms; } dialog.drawer::backdrop { background: rgba(4, 7, 11, .6); transition: opacity 200ms ease; } .menu { position: absolute; z-index: 50; min-width: 220px; padding: 6px; border-radius: var(--r-md); background: var(--s3); border: 1px solid var(--bd-4); box-shadow: var(--shadow-pop); transform-origin: var(--origin, top right); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); } .menu[hidden] { display: block; opacity: 0; transform: scale(.97); pointer-events: none; visibility: hidden; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--tx-2); text-align: left; transition: background-color 120ms ease, color 120ms ease; } @media (hover: hover) and (pointer: fine) { .menu-item:hover { background: var(--s4); color: var(--tx-1); } } .menu-item:focus-visible { background: var(--s4); color: var(--tx-1); outline-offset: -2px; } .menu-item:active { background: var(--s4); } .menu-item .chk { --i-size: 16px; flex: none; color: var(--acc); visibility: hidden; } .menu-item[aria-checked="true"] .chk { visibility: visible; } .menu-item[aria-checked="true"] { color: var(--tx-1); } .menu-item .ext { --i-size: 14px; margin-left: auto; color: var(--tx-3); } .menu-item.danger { color: #FF8A8A; } .menu-sep { height: 1px; background: var(--bd-3); margin: 6px 4px; } .menu-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; min-width: 0; } .menu-lang { display: flex; align-items: center; gap: 2px; padding: 0 2px 0 10px; } .menu-lang-label { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--tx-2); font-size: 13.5px; } .menu-lang-label .i { color: var(--tx-3); } .menu-lang .menu-item { position: relative; width: auto; min-width: 40px; justify-content: center; padding: 0 8px; font-size: 12px; font-weight: 650; letter-spacing: 0.03em; color: var(--tx-3); } .menu-lang .menu-item[aria-checked="true"] { color: var(--tx-1); background: var(--s4); } .menu-lang .menu-item[aria-checked="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--acc); } .tooltip { position: relative; } .tooltip[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 280px; padding: 6px 9px; border-radius: var(--r-sm); background: var(--s4); border: 1px solid var(--bd-4); color: var(--tx-1); font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center; white-space: normal; text-transform: none; letter-spacing: 0; z-index: 60; box-shadow: var(--shadow-pop); pointer-events: none; animation: tipin 120ms var(--ease-out) both; } @media (hover: hover) and (pointer: fine) { .tooltip[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 280px; padding: 6px 9px; border-radius: var(--r-sm); background: var(--s4); border: 1px solid var(--bd-4); color: var(--tx-1); font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center; white-space: normal; text-transform: none; letter-spacing: 0; z-index: 60; box-shadow: var(--shadow-pop); pointer-events: none; animation: tipin 120ms var(--ease-out) 400ms both; } .tips-warm .tooltip[data-tip]:hover::after { animation-delay: 0ms; } } [data-ns-disabled]:not(.btn) { opacity: .45; cursor: not-allowed; } .tooltip[data-tip]:is(.is-disabled, [aria-disabled="true"], :disabled) { opacity: 1; } .btn.tooltip[data-tip]:is(.is-disabled, [aria-disabled="true"], :disabled) { background: color-mix(in srgb, var(--btn-bg) 45%, transparent); background-clip: padding-box; border-color: color-mix(in srgb, var(--btn-bd) 45%, transparent); color: color-mix(in srgb, var(--btn-tx) 45%, var(--s2)); } .tooltip[data-tip][data-ns-disabled]:not(.btn) { color: color-mix(in srgb, currentColor 45%, transparent); } @keyframes tipin { from { opacity: 0; } to { opacity: 1; } } dialog.cmdk { padding: 0; margin: 12vh auto auto; width: min(640px, calc(100vw - 32px)); max-height: min(560px, 76dvh); border: 1px solid var(--bd-4); border-radius: var(--r-xl); background: var(--s2); color: var(--tx-1); box-shadow: var(--shadow-pop); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); } dialog.cmdk[open] { display: flex; flex-direction: column; } @starting-style { dialog.cmdk[open] { opacity: 0; transform: translateY(-6px) scale(.985); } } dialog.cmdk.is-closing { opacity: 0; transform: translateY(-4px) scale(.985); transition-duration: 120ms; } dialog.cmdk::backdrop { background: rgba(4, 7, 11, .6); transition: opacity 160ms ease; } dialog.cmdk.is-closing::backdrop { opacity: 0; } .cmdk-head { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); height: 56px; border-bottom: 1px solid var(--bd-2); flex: none; } .cmdk-head > .i { color: var(--tx-3); } .cmdk-head input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: none; color: var(--tx-1); font-size: 15px; } .cmdk-head input::placeholder { color: var(--tx-3); } .cmdk-head input::-webkit-search-cancel-button { display: none; } .cmdk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; overscroll-behavior: contain; } .cmdk-group + .cmdk-group { margin-top: 6px; } .cmdk-group-title { padding: 8px 10px 4px; } .cmdk-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 6px 10px; border-radius: var(--r-md); color: var(--tx-2); cursor: pointer; } .cmdk-item .ico { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--s3); display: inline-flex; align-items: center; justify-content: center; color: var(--tx-2); overflow: hidden; } .cmdk-item .ico img { width: 20px; height: 20px; object-fit: contain; } .cmdk-item .ttl { color: var(--tx-1); font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; } .cmdk-item .ttl > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk-item .sub { font-size: 12px; color: var(--tx-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk-item .aside { display: flex; align-items: center; gap: 8px; } .cmdk-item .cmdk-strip { width: 156px; flex: none; } .cmdk-item mark { background: none; color: var(--tx-1); text-decoration: underline; text-decoration-color: var(--tx-3); text-decoration-thickness: 1px; text-underline-offset: 3px; } .cmdk-item[aria-selected="true"] { background: var(--s4); } @media (hover: hover) and (pointer: fine) { .cmdk-item:hover { background: var(--s3); } .cmdk-item[aria-selected="true"]:hover { background: var(--s4); } } .cmdk-empty { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-8) var(--sp-6) var(--sp-10); text-align: center; color: var(--tx-2); font-size: 13.5px; } .cmdk-empty > .i { color: var(--tx-3); margin-bottom: 6px; } .cmdk-empty b { color: var(--tx-1); font-size: 15px; font-weight: 600; } .cmdk-suggs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; } .cmdk-sugg { height: 30px; padding: 0 12px; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 160ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .cmdk-sugg:hover { border-color: var(--bd-ctl); color: var(--tx-1); } } .cmdk-sugg:active { transform: scale(0.97); } .cmdk-item.is-query { min-height: 40px; } .cmdk-item.is-query .ico { background: transparent; color: var(--tx-3); } .cmdk-item .ico.is-frame img { width: 100%; height: 100%; object-fit: cover; } .cmdk-sk { display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 6px 10px; } .cmdk-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--bd-4); border-top-color: var(--tx-2); opacity: 0; animation: spin 700ms linear infinite; transition: opacity 120ms ease; } dialog.cmdk.is-loading .cmdk-spin { opacity: 1; } dialog.cmdk.is-loading .cmdk-item { opacity: 0.5; transition: opacity 120ms ease; } .cmdk-foot { display: flex; align-items: center; gap: var(--sp-4); padding: 10px var(--sp-4); border-top: 1px solid var(--bd-2); color: var(--tx-3); font-size: 12px; flex: none; } .cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; } .cmdk-close { display: none; } .guest-cta { position: sticky; bottom: 0; z-index: 30; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--s1) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--bd-2); } .guest-cta p { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--tx-2); } .guest-cta p b { color: var(--tx-1); font-weight: 600; } .feed-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-xl); overflow: hidden; background: #05080C; } .reel > img { width: 100%; height: 100%; object-fit: cover; } .reel-side { position: absolute; right: 10px; bottom: 90px; z-index: 3; display: flex; flex-direction: column; gap: 16px; align-items: center; } .reel-act { font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; font-size: 12px; font-weight: 600; } .reel-act .bubble { width: 44px; height: 44px; border-radius: 50%; background: rgba(8,12,18,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; transition: transform 160ms var(--ease-out); } .reel-act .bubble:active { transform: scale(.92); } .reel-act.is-on .bubble { background: rgba(240,82,82,.9); border-color: transparent; } .reel-meta { position: absolute; left: 14px; right: 70px; bottom: 16px; z-index: 3; color: #fff; display: flex; flex-direction: column; gap: 6px; } .dot-sep::before { content: "·"; margin: 0 6px; color: var(--tx-4); } .key-moment { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bd-1); } .key-moment:last-child { border-bottom: 0; } .feed-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 0; } .killfeed { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: var(--r-xs); background: rgba(8,12,18,.62); font-size: 12px; font-weight: 600; white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; } .killfeed .ct, .killfeed .t { display: inline-block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; min-width: 0; flex: 0 1 auto; } .killfeed .ct { color: var(--ct); } .killfeed .t { color: var(--t); } .killfeed .hs { color: var(--tx-2); } .lock { display: inline-flex; align-items: center; gap: 6px; color: var(--acc); font-size: 12px; font-weight: 600; } .lock .i { flex: none; } .upsell { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--acc-bd); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 55%), var(--s2); padding: var(--sp-5); } .code-box { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 12px 14px; border-radius: var(--r-md); background: var(--s1); border: 1px dashed var(--bd-4); font-family: var(--mono); font-size: 18px; font-weight: 700; letter-spacing: 0.12em; color: var(--acc); } .price { display: flex; align-items: baseline; gap: 6px; } .price .amt { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .price .per { color: var(--tx-3); font-size: 13px; } .price .was { font-variant-numeric: tabular-nums; color: var(--tx-4); font-size: 14px; text-decoration: line-through; } .feature-list { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; list-style: none; } .feature-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--tx-2); line-height: 1.45; } .feature-list li .i { color: var(--ok); margin-top: 1px; } .feature-list li.off { color: var(--tx-4); } .feature-list li.off .i { color: var(--tx-4); } .notif { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--bd-1); align-items: start; transition: background-color 120ms ease; } .notif.is-unread { background: color-mix(in srgb, var(--acc-sub) 30%, var(--s2)); } .notif.is-unread .ttl::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); margin-left: 8px; vertical-align: middle; } .notif .ico { width: 40px; height: 40px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; background: var(--s3); color: var(--tx-2); } .backrow { display: none; } .app.is-chromeless .backrow { display: none !important; } .backrow-link { display: inline-flex; align-items: center; gap: 2px; height: 44px; margin-left: -10px; padding: 0 10px 0 6px; border-radius: var(--r-md); color: var(--tx-2); font-size: 14px; font-weight: 550; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease, color 120ms ease; } .backrow-link .i { --i-size: 16px; color: var(--tx-3); } @media (hover: hover) and (pointer: fine) { .backrow-link:hover { background: var(--s3); color: var(--tx-1); } } .backrow-link:active { background: var(--s3); } .backrow-link:focus-visible { outline-offset: -2px; } .toast-host.is-docked { inset: auto auto 20px var(--dock-x); transform: translateX(-50%); } .toast .toast-n { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 2px; border-radius: var(--r-pill); background: var(--s3); color: var(--tx-2); font-size: 12px; font-weight: 700; vertical-align: 1px; } .toast.is-bumped { animation: toastbump 220ms var(--ease-out); } @keyframes toastbump { 40% { transform: scale(1.02); } } .menu-cancel, .menu-cancel-sep { display: none; } .menu.is-sheet { position: fixed !important; inset: auto 0 0 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(100dvh - 24px); margin: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px calc(8px + env(safe-area-inset-bottom)); border: 1px solid var(--bd-3); border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--s2); color: var(--tx-1); box-shadow: var(--shadow-pop); transform: none; opacity: 1; transform-origin: bottom center; transition: transform 240ms var(--ease-drawer), opacity 160ms ease; } @starting-style { .menu.is-sheet:popover-open { transform: translateY(100%); } } .menu.is-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 6px auto 8px; border-radius: 4px; background: var(--bd-ctl); } .menu-scrim { position: fixed; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: rgba(4, 7, 11, .6); opacity: 1; transition: opacity 160ms ease; } @starting-style { .menu-scrim:popover-open { opacity: 0; } } .menu.is-sheet .menu-item { min-height: 52px; height: auto; padding: 0 12px; font-size: 15px; } .menu.is-sheet .menu-item .i { --i-size: 18px; } .menu.is-sheet .menu-cancel, .menu.is-sheet .menu-cancel-sep { display: flex; } .menu.is-sheet .menu-cancel-sep { display: block; } .menu.is-sheet .menu-cancel { justify-content: center; color: var(--tx-1); font-weight: 600; } .rnd-events { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .rnd-ev-btn { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 36px; padding: 4px 8px; border-radius: var(--r-sm); color: var(--tx-2); font-size: 13px; text-align: left; transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease; } @media (hover: hover) and (pointer: fine) { .rnd-ev-btn:hover { background: var(--s3); color: var(--tx-1); } } .rnd-ev-btn:active { background: var(--s3); } .rnd-ev-t { flex: none; width: 34px; color: var(--tx-3); font-size: 12px; } .rnd-ev-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .rnd-ev-text .i { color: var(--tx-3); } .rnd-ev .killfeed { background: transparent; padding: 0; height: 24px; } .rnd-ev.is-me .rnd-ev-btn { color: var(--tx-1); } .rnd-ev.is-plant .rnd-ev-text .i, .rnd-ev.is-explode .rnd-ev-text .i { color: var(--ev-obj); } .rnd-ev.is-end .rnd-ev-btn { color: var(--tx-1); font-weight: 600; } .rnd-events.is-timed .rnd-ev:not(.is-past) .rnd-ev-btn { opacity: .5; } .rnd-ev.is-now .rnd-ev-btn { background: var(--s3); color: var(--tx-1); } .rnd-roster { display: grid; gap: var(--sp-4); } .rnd-team { display: flex; flex-direction: column; gap: 2px; } .rnd-team-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 4px; color: var(--tx-3); font-size: 12px; font-weight: 600; } .rnd-p { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 4px; border-radius: var(--r-sm); font-size: 13px; } .rnd-p .nick { color: var(--tx-1); font-weight: 600; } .rnd-p.is-me .nick { color: var(--acc); } .rnd-p-kd { color: var(--tx-1); font-weight: 600; } .rnd-p-st { min-width: 64px; text-align: right; color: var(--tx-3); font-size: 12px; } .rnd-p.is-dead { opacity: .55; } .rnd-p.is-dead .rnd-p-st { color: var(--bad); } .list-chips { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } .list-chip { gap: 6px; cursor: pointer; } .list-chip .i { --i-size: 12px; color: var(--tx-3); } @media (hover: hover) and (pointer: fine) { .list-chip:hover .i { color: var(--tx-1); } } .list-chip:active { transform: scale(.97); } .screen[hidden] { display: none !important; } [hidden]:not(.menu) { display: none !important; } [data-state][hidden] { display: none !important; } @container app (max-width: 1180px) { .with-aside { grid-template-columns: minmax(0, 1fr); } .with-aside > aside { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container app (max-width: 980px) { .app { grid-template-columns: 76px minmax(0, 1fr); } .rail-brand img { display: none; } .rail-brand::before { content: ""; width: 32px; height: 32px; background: url("img/logo-mark.svg") center / contain no-repeat; } .rail-group-title, .rail-link .rail-badge, .rail-promo, .rail-legal { display: none; } .rail-link > span:not(.rail-badge), .rail-foot .usercard > div { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rail-link { justify-content: center; padding: 0; } .rail-nav { padding: var(--sp-2); } .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container app (max-width: 760px) { .app { grid-template-columns: minmax(0, 1fr); --topbar-h: 56px; --tabbar-h: calc(67px + env(safe-area-inset-bottom)); } .app.is-chromeless, .app.is-guest { --tabbar-h: 0px; } .app > .rail { display: none; } .tabbar { display: grid; } .topbar { padding: 0 var(--sp-3) 0 var(--sp-4); height: 56px; gap: var(--sp-2); } .topbar-brand { display: block; padding-block: 15px; } .topbar .search, .topbar .crumbs, .topbar .d-only { display: none; } .topbar-end { gap: 2px; } .topbar-end > * { flex: none; } .app:not(.is-guest) .lang-btn { display: none; } .app.is-guest .lang-btn { display: inline-flex; height: 44px; } .app.is-guest .topbar-end .btn-sm { min-height: 40px; } .page { padding: var(--sp-4) var(--sp-4) var(--sp-10); } .page-head { margin-bottom: var(--sp-4); } .h-page { font-size: 22px; line-height: 28px; } .h-display { font-size: 26px; line-height: 32px; } .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); } .with-aside > aside { grid-template-columns: minmax(0, 1fr); } .stat-row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-row > .stat + .stat { border-left: 0; } .stat-row > .stat:nth-child(even) { border-left: 1px solid var(--bd-1); } .stat-row > .stat:nth-child(n+3) { border-top: 1px solid var(--bd-1); } .panel-body, .panel-pad { padding: var(--sp-4); } .panel-head { padding: var(--sp-3) var(--sp-4); min-height: 50px; } .table th:first-child, .table td:first-child { padding-left: var(--sp-4); } .table th:last-child, .table td:last-child { padding-right: var(--sp-4); } .d-only { display: none !important; } .cta-row, .auth-row { flex-direction: column; align-items: stretch; } .auth-row > .btn { width: 100%; } .cta-row .btn { width: 100%; } .empty .row { flex-direction: column; align-items: stretch; width: min(360px, 100%); } .empty .row > .btn { width: 100%; } .testbar { font-size: 12px; padding: 6px 12px; } .toast-host, .toast-host.is-docked { inset: auto 16px calc(var(--tabbar-h) + var(--actionbar-h, 0px) + 12px) 16px; width: auto; transform: none; } .guest-cta { display: none; } .app.is-guest.has-guest-cta .guest-cta { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .guest-cta p { display: none; } .guest-cta { gap: var(--sp-2); padding-block: 10px calc(10px + env(safe-area-inset-bottom)); } .guest-cta .btn { min-width: 0; padding-inline: 10px; } .pager .pager-gap { min-width: 24px; } .app.is-tabbar-hidden { --tabbar-h: 0px; } .app.is-tabbar-hidden .tabbar { display: none; } .app[data-shell="reels"] .testbar:not(:focus-within) { position: relative; height: 4px; min-height: 0; padding: 0; border: 0; background: #9C7B26; overflow: hidden; font-size: 0; line-height: 0; gap: 0; } .app[data-shell="reels"] .testbar:not(:focus-within) > * { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .app[data-shell="reels"] { --topbar-h: 48px; } .app[data-shell="reels"] .topbar { height: 48px; padding: 0 var(--sp-2); border-bottom: 0; background: linear-gradient(180deg, rgba(5, 8, 12, .86), rgba(5, 8, 12, .55)); backdrop-filter: none; -webkit-backdrop-filter: none; } .app[data-shell="reels"] .topbar-brand, .app[data-shell="reels"] .topbar-end > :not([data-cmdk]) { display: none !important; } .app[data-shell="reels"] .topbar-back { display: inline-flex; color: var(--tx-1); } .icon-btn { width: 44px; height: 44px; } .btn, .btn-sm, .btn-xs, .seg-item, .fchip, .tab, button.chip-lg, a.chip-lg, .mx-link, .mx-rchip, .ntf-chip, .rp-lg, .fm-where, .fm-list-row, .psocial, .soc, .lib-switch a, .input, .select, .select-sm, .input-sm, .input-group { min-height: 44px !important; } .btn-icon, .btn-icon.btn-sm { min-width: 44px; } .seg { padding: 2px; } .seg-item { min-width: 44px; justify-content: center; } .input-group .btn { height: 36px; min-height: 36px; } .pager a { position: relative; } .pager a::before { content: ""; position: absolute; inset: -3px 0; } .pager a, .pager span { min-width: 44px; height: 44px; } :where(.link, .panel-link, a.more, a.bare, .lan-more, .fm-link, .fm-tg, .fm-room, .tmeta-author, .lg-brand, .lg-anchor) { position: relative; } :is(.link, .panel-link, a.more, a.bare, .lan-more, .fm-link, .fm-tg, .fm-room, .tmeta-author, .lg-brand, .lg-anchor)::before { content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); } a.nick, .vs-name { padding: 12px 8px; margin: -12px -8px; } .lg-anchor { min-width: 44px; min-height: 44px; margin: -8px; justify-content: center; } .testbar { min-height: 44px; } .menu-item { height: 44px; } .roundstrip[data-interactive] { padding-block: 12px; margin-block: -12px; } .check { position: relative; } .check::before { content: ""; position: absolute; inset: -6px 0; } label.switch::before, label .switch::before { content: ""; position: absolute; inset: -11px -3px; } .app input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), .app textarea, .app select { font-size: 16px !important; } .app .otp input { font-size: 22px !important; } dialog.modal, dialog.modal.lg, dialog.modal[class] { width: 100vw !important; max-width: 100vw !important; max-height: calc(100dvh - 24px); margin: auto 0 0 !important; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0; } .backrow:not([hidden]) { display: flex; align-items: center; height: 45px; padding: 0 var(--sp-4); border-bottom: 1px solid var(--bd-1); } @starting-style { dialog.modal[open] { transform: translateY(100%); opacity: 1; } } dialog.modal.is-closing { transform: translateY(100%); opacity: 1; transition-duration: 200ms; transition-timing-function: var(--ease-drawer); } dialog.modal:modal::before { content: ""; flex: none; width: 36px; height: 4px; margin: 8px auto -4px; border-radius: 4px; background: var(--bd-ctl); } dialog.modal:modal:has(.sheet-grab, .sheet-handle)::before { content: none; } dialog > .toast-host { inset: calc(12px + env(safe-area-inset-top)) 16px auto 16px; width: auto; } @starting-style { dialog > .toast-host .toast { opacity: 0; transform: translateY(-12px) scale(.98); } } dialog > .toast-host .toast.is-leaving { transform: translateY(-8px) scale(.98); } dialog.modal:modal { touch-action: pan-y; } .modal-foot { padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); } dialog.cmdk { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; } @starting-style { dialog.cmdk[open] { transform: translateY(16px); opacity: 0; } } .cmdk-head { height: 60px; padding: 0 var(--sp-2) 0 var(--sp-4); } .cmdk-close { display: inline-flex; } .cmdk-foot { display: none; } .cmdk-item .roundstrip { display: none; } } @container app (min-width: 761px) { .m-only { display: none !important; } } @media (orientation: landscape) and (max-height: 520px) { .app.is-immersive-landscape { grid-template-columns: minmax(0, 1fr); --tabbar-h: 0px; } .app.is-immersive-landscape > .rail, .app.is-immersive-landscape .testbar, .app.is-immersive-landscape .topbar, .app.is-immersive-landscape .tabbar, .app.is-immersive-landscape .backrow, .app.is-immersive-landscape .shell-banners, .app.is-immersive-landscape .guest-cta { display: none !important; } } @media (orientation: landscape) and (max-height: 500px) { .app:not([data-shell="reels"]) { --topbar-h: 44px; } .app .testbar { display: none; } .app:not([data-shell="reels"]) .topbar { height: var(--topbar-h); padding-inline: var(--sp-4); } .app .topbar-end .btn-sm { min-height: 32px; } .app .rail-brand::before { width: 26px; height: 26px; } } @media (pointer: coarse) { .icon-btn::before { content: ""; position: absolute; inset: min(0px, calc((100% - 44px) / 2)); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes skpulse { 50% { opacity: .55; } } @keyframes pulse { 50% { opacity: .35; } } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .screen.is-entering > .page, .screen.is-entering > .screen-body { animation: rise 240ms var(--ease-out) both; } .screen.is-switching > .page, .screen.is-switching > .screen-body { animation: fadein 140ms ease-out both; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-property: opacity, color, background-color, border-color, box-shadow, outline-color, visibility !important; transition-duration: 120ms !important; } .sk { animation: none; } .spinner, .btn.is-loading::after { animation-duration: 1.2s !important; animation-iteration-count: infinite !important; } .progress.indeterminate > i { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; } }