/* style.css, the stylesheet every page links, is these files one after another in their names' order
   (statics.go, sheets). The order is the cascade's — a rule outweighs those before it of the same weight —,
   so a part's rules go into its own file, after what they build on. */
/* The page: the fonts, the colours of the two themes, the top bar — the mark, the sections, the search, who signed
   in, the theme —, the footer, a phone's edges. */
/* Cybesports: the "Панель" look chosen by the owner on 2026-10-07. */
/* The fonts are preloaded (layout.html) and shown only when they are there at the first paint
   (font-display: optional): a page never changes its face under the reader — drawn in the system's
   font first and in Plex a moment later, it jumped on every refresh of a page on the desktop (owner
   2026-10-09: «всё равно прыгает при обновлении или клике по логотипу»). The first visit over a slow
   link may be drawn in the system's font; from the next page on, in Plex. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(fonts/plex-sans-400-700-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(fonts/plex-sans-400-700-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(fonts/plex-sans-400-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: optional; src: url(fonts/plex-sans-400-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/plex-mono-400-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/plex-mono-400-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/plex-mono-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: optional; src: url(fonts/plex-mono-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/plex-mono-600-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/plex-mono-600-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/plex-mono-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: optional; src: url(fonts/plex-mono-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --acc: #5a35c9; --acc-fill: #5a35c9; --acc2: #ece7fb; --live: #d7263d; --ink: #1b1f27; --ink2: #3e4450; --muted: #5f6673;
  /* the ground a shade darker and the white of the panels a little off-white (owner 2026-10-18: «основную подложку сайте
     немного чуть темнее но что бы мягко. и другие чуть тише наш белый»; it was #eceff3 and #fff — probe «ground» 1) */
  --line: #dde1e7; --ground: #e5e8ed; --panel: #fafbfc; --chip: #eef0f4; --win: #16884a; --loss: #d23b3b; --flag-edge: rgba(0, 0, 0, .18); --region: #687590;
  /* --acc-fill: the accent under white text (buttons, chips picked): in the dark the accent is a light lilac, and white
     on it read at 2,7:1 (the launch audit of 2026-10-17) — a deeper one there, 5,5:1 */
  /* the two sides of a prediction: the left sea green, the right orange (owner 2026-10-16: «одна команда оранжевая правая а
     левая морская волна. И график цвет соответствующий»), as the tiles «Свободно» and «В игре» of «Мои фишки» */
  --side-a: #127887; --side-b: #d4700a;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
/* The dark theme (owner, 2026-10-08: «Системная», «Светлая», «Тёмная»): the system's dark unless the
   reader picked the light theme, and the dark one when picked — html[data-theme], put by early.js before
   the first paint. So every dark rule stands twice: under the system's dark with :not([data-theme="light"]),
   then the same with [data-theme="dark"] (static_test.go holds them together); :where() keeps each rule's
   weight as it was. color-scheme takes the scrollbars and the form controls along. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) { color-scheme: dark; --acc: #a98cff; --acc-fill: #7050d8; --acc2: #2b2347; --live: #ff6b7a; --ink: #e6e8ee; --ink2: #c3c8d2; --muted: #9aa1ad; --line: #2b303a; --ground: #14161b; --panel: #1d2026; --chip: #2a2e37; --win: #46c97a; --loss: #f06a6a; --region: #7d89a4; --flag-edge: rgba(255, 255, 255, .16); --side-a: #4fbdcb; --side-b: #df8c6c; }
}
:root:where([data-theme="dark"]) { color-scheme: dark; --acc: #a98cff; --acc-fill: #7050d8; --acc2: #2b2347; --live: #ff6b7a; --ink: #e6e8ee; --ink2: #c3c8d2; --muted: #9aa1ad; --line: #2b303a; --ground: #14161b; --panel: #1d2026; --chip: #2a2e37; --win: #46c97a; --loss: #f06a6a; --region: #7d89a4; --flag-edge: rgba(255, 255, 255, .16); --side-a: #4fbdcb; --side-b: #df8c6c; }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 14.5px; line-height: 1.45; }
/* The footer at the window's foot on a short page (owner 2026-10-20, the footer remade): the page a column, .pg growing
   and the footer after it; inside .pg the flow is as it was. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc); }
h1 { font-size: 22px; margin: 0 0 12px; letter-spacing: -.02em; }
h1 .sub2 { font-size: 14px; font-weight: 400; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
h2 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
h2:first-child, h1 + h2 { margin-top: 0; }
h2 span { font-weight: 400; color: var(--muted); font-size: 12.5px; }
h3.day { font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 14px 0 4px; }
.pg { flex: 1 0 auto; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
/* The top bar (chosen by the owner on 2026-10-07, «Плашка»): a rounded card like the panels below;
   the games are one segmented switch, the pages are pills. */
.bar { position: relative; display: flex; align-items: center; gap: 6px; min-height: 74px; flex-wrap: wrap; background: var(--panel); margin: 14px 0 0; padding: 0 12px 0 16px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(16, 24, 40, .06); }
/* The site mark (chosen by the owner on 2026-10-07): an accent tile with a playoff bracket; beside it a small tracked ESPORTS over a large «hub». */
.bar .logo { display: inline-flex; align-items: center; gap: 10px; margin-right: 22px; white-space: nowrap; font-weight: 700; }
.bar .logo i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--acc); }
.bar .logo i::before { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10 12h8v16h-8M18 20h12' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M10 12h8v16h-8M18 20h12' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bar .logo .wm { display: flex; flex-direction: column; line-height: 1; }
.bar .logo .wm b { font-size: 11.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ink2); margin-left: .06em; }
.bar .logo .wm span { font-size: 27px; letter-spacing: -.03em; color: var(--acc); margin-top: 1px; }
.bar .logo .wm em { font-style: normal; color: var(--muted); letter-spacing: -.02em; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .bar .logo i::before { background: var(--ground); } }
:where(:root[data-theme="dark"]) .bar .logo i::before { background: var(--ground); }
.games { display: flex; gap: 2px; padding: 4px; border-radius: 13px; background: var(--chip); }
.gm { display: flex; flex-direction: column; justify-content: center; padding: 6px 12px; border-radius: 10px; line-height: 1.25; min-width: 0; }
.gm b { font-size: 15px; font-weight: 600; white-space: nowrap; }
.gm span { font-size: 12px; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.gm span i { min-width: 0; overflow: hidden; font-style: normal; text-overflow: ellipsis; }
.gm span i:empty { display: none; }
/* Wider than a phone's layout (900px) the bar keeps one line whatever the counters say (owner 2026-10-11: on a busy evening
   the avatar fell under the logo): the counters give way, cut with «…», a tab never narrower than its
   title (the grid's auto minimum leaves the clipped counter out). The longest, that of «Все игры», gives
   way first: it takes what the other tabs leave, up to its whole width, and they shrink only once it is
   down to its title. */
@media (min-width: 901px) {
  .bar { flex-wrap: nowrap; }
  .nav { flex: none; }
  .games { min-width: 0; }
  .gm { display: grid; grid-template-columns: minmax(auto, max-content); align-content: center; min-width: auto; }
  .gm span { overflow: hidden; }
  .gm:first-child { flex: 1 1 0; max-width: max-content; }
}
.gm em { font-style: normal; color: var(--live); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.gm em::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--live); }
.gm:hover { background: rgba(255, 255, 255, .65); color: inherit; }
.gm.on { background: var(--panel); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 3px 10px rgba(16, 24, 40, .07); }
.gm.on b { color: var(--acc); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; margin-left: auto; font-size: 14px; font-weight: 500; color: var(--ink2); }
.nav a { padding: 8px 9px; border-radius: 10px; }
.nav a:hover { background: var(--chip); color: var(--ink); }
/* the section on now not marked in the bar, nor under «Ещё» (owner 2026-10-23: «не надо там выделять вверху страницу»): aria-current tells it to a screen reader alone */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .bar { box-shadow: none; }
  :where(:root:not([data-theme="light"])) .gm:hover { background: rgba(255, 255, 255, .05); }
  :where(:root:not([data-theme="light"])) .gm.on { background: #383d49; box-shadow: none; }
}
:where(:root[data-theme="dark"]) .bar { box-shadow: none; }
:where(:root[data-theme="dark"]) .gm:hover { background: rgba(255, 255, 255, .05); }
:where(:root[data-theme="dark"]) .gm.on { background: #383d49; box-shadow: none; }
.mk, img.logo { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--chip); font-size: 9px; font-weight: 700; color: var(--ink2); margin-right: 8px; flex: none; font-style: normal; object-fit: contain; }
img.logo { background: #fff; padding: 2px; }
img.logo.dk { background: #23262d; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; }
.panel.one { margin-top: 14px; }
.c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c3 { grid-column: span 3; }
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.empty { color: var(--muted); margin: 6px 0; }
.empty.big { font-size: 22px; font-weight: 600; text-align: center; opacity: .55; margin: 0; padding: 26px 0 18px; } /* an empty tab says so plainly (owner 2026-10-12: «просто крупным серым бледным») */
.btn.danger { background: var(--loss); }

/* The footer (layout.html "foot"; owner 2026-10-20: «подвал переделать»), «Плашка»: a card like the top bar at the
   page's foot — «Главная» and the sections, the papers at the right end, and in its corner the credits PandaScore's
   terms ask for on every page with its data, small and pale as the blocks' own (p.src). Outside .pg: at the window's
   foot on a short page. */
.foot { flex: none; width: 100%; max-width: 1280px; margin: 0 auto; padding: 14px 20px 18px; }
.foot .sf-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 3px; padding: 11px 18px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(16, 24, 40, .06); }
.foot .sf-home, .foot .sf-nav { grid-row: 1 / span 3; }
.foot .sf-nav, .foot .sf-docs { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot .sf-docs { grid-column: 3; justify-content: flex-end; align-self: end; }
.foot .sf-home, .foot .sf-nav a { font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.foot .sf-docs a { font-size: 13px; color: var(--muted); }
.foot .sf-home:hover, .foot .sf-nav a:hover, .foot .sf-docs a:hover { color: var(--acc); }
.foot .sf-src { grid-column: 3; align-self: start; justify-self: end; margin: 0; font-size: 11px; line-height: 1.4; color: color-mix(in srgb, var(--muted) 75%, transparent); text-align: right; white-space: nowrap; }
.foot .sf-src span + span::before { content: "· "; }
.foot .sf-src a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
.foot .sf-src a:hover { color: var(--ink2); }
/* the site's addresses (owner 2026-10-20: «адреса добавь в подвал»): under the papers, a size smaller */
.foot .sf-mail { grid-column: 3; justify-self: end; margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
.foot .sf-mail span + span { margin-left: 14px; }
.foot .sf-mail a { color: var(--ink2); }
.foot .sf-mail a:hover { color: var(--acc); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .foot .sf-in { box-shadow: none; } }
:where(:root[data-theme="dark"]) .foot .sf-in { box-shadow: none; }
@media (max-width: 600px) { /* «Главная» and the papers in a row, the sections three a row and a size larger for a finger, the credits under them */
  .foot { padding: 10px 6px 12px; }
  .foot .sf-in { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 12px 12px 11px; }
  .foot .sf-home { grid-row: 1; font-size: 14px; }
  .foot .sf-docs { grid-column: 2; grid-row: 1; align-self: center; gap: 4px 14px; }
  .foot .sf-docs a { font-size: 12.5px; }
  .foot .sf-nav { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; margin: 4px -12px 0; padding: 6px 4px 0; border-top: 1px solid var(--line); }
  .foot .sf-nav a { padding: 9px 8px; border-radius: 8px; font-size: 14px; }
  .foot .sf-mail { grid-column: 1 / -1; grid-row: 3; justify-self: start; display: flex; flex-wrap: wrap; gap: 2px 14px; white-space: normal; }
  .foot .sf-mail span + span { margin-left: 0; }
  .foot .sf-src { grid-column: 1 / -1; grid-row: 4; justify-self: start; display: flex; flex-direction: column; text-align: left; white-space: normal; }
  .foot .sf-src span + span::before { content: none; }
}
/* The theme switch (layout.html "theme"; owner, 2026-10-08: «Системная · Светлая · Тёмная»): an icon in the top bar by
   the magnifier — the sun in the light theme, the moon in the dark, the system's as it comes out — and under it the three
   in lines with their icons, the theme on <html> lit right from the first paint (owner 2026-10-23: «выбор темы нужно
   сделать значком и вверху в шапке»; till then pills in the avatar's menu, a guest's under the sections'). app.js keeps
   the radios' states; without scripts there is nothing to switch, and no icon. */
.bar .thb { --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M5.3 18.7l1.6-1.6M17.1 6.9l1.6-1.6'/%3E%3C/svg%3E"); --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M20.2 14.6A8.4 8.4 0 0 1 9.4 3.8a8.4 8.4 0 1 0 10.8 10.8z'/%3E%3C/svg%3E"); --i-sys: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.2' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M12 3.8a8.2 8.2 0 0 0 0 16.4z'/%3E%3C/svg%3E"); position: relative; flex: none; }
html:not(.js) .bar .thb { display: none; }
.bar .thb summary { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--ink2); cursor: pointer; list-style: none; }
.bar .thb summary::-webkit-details-marker { display: none; }
.bar .thb summary:hover, .bar .thb[open] summary { background: var(--chip); color: var(--ink); }
.bar .thb summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.bar .thb summary i { --ic: var(--i-sun); width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar .thb summary i { --ic: var(--i-moon); } }
:root[data-theme="dark"] .bar .thb summary i { --ic: var(--i-moon); }
.bar .thb .menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 172px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 32px rgba(16, 24, 40, .14); }
.bar .thb[open] .menu { animation: menu-in .14s ease-out; }
.theme { display: flex; flex-direction: column; gap: 2px; }
.theme button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px var(--sans); text-align: left; white-space: nowrap; cursor: pointer; }
.theme button::before { content: ""; flex: none; width: 17px; height: 17px; background: var(--muted); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.theme [value="system"] { --ic: var(--i-sys); }
.theme [value="light"] { --ic: var(--i-sun); }
.theme [value="dark"] { --ic: var(--i-moon); }
.theme button:hover { background: var(--chip); }
.theme button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
:root:not([data-theme]) .theme [value="system"], :root[data-theme="light"] .theme [value="light"], :root[data-theme="dark"] .theme [value="dark"] { background: var(--acc2); color: var(--acc); font-weight: 600; cursor: default; }
:root:not([data-theme]) .theme [value="system"]::before, :root[data-theme="light"] .theme [value="light"]::before, :root[data-theme="dark"] .theme [value="dark"]::before { background: var(--acc); }
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .c7, .c5, .c4, .c3 { grid-column: auto; }
  .bar { margin: 10px 0 0; padding: 12px 12px 12px 14px; gap: 8px 16px; }
  .bar .logo { margin-right: 0; }
  .games { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .games::-webkit-scrollbar { display: none; }
  .gm { flex: none; min-width: 0; }
  .rosters { grid-template-columns: 1fr; gap: 22px; }
}

/* the top bar: «Войти», or who signed in */
/* the search (search.go; owner 2026-10-16: «добавь поиск на сайт»): a magnifier in the head; the field and its list
   under the head at its right, on a phone the head's width; the page's own form the same field with a button */
.srb { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: 4px; border-radius: 10px; color: var(--ink2); }
.srb:hover, .srb[aria-expanded="true"] { background: var(--chip); color: var(--ink); }
.srb i { position: relative; width: 14px; height: 14px; margin: -3px 0 0 -3px; border: 2px solid currentColor; border-radius: 50%; }
.srb i::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.srp { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: min(520px, 100%); padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 12px 32px rgba(16, 24, 40, .16); }
.srp[hidden] { display: none; }
.srp input, .srf input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground); color: var(--ink); font: inherit; font-size: 15px; }
.srp input:focus, .srf input:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.srr { max-height: min(70vh, 560px); overflow-y: auto; }
.srr:empty { display: none; }
.srh { margin: 12px 6px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sri { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 6px 8px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.sri:hover, .sri:focus-visible { background: var(--chip); color: var(--ink); outline: none; }
.sri .logo, .sri .mk { flex: none; width: 24px; height: 24px; margin: 0; }
.sri .nm { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.sri .nm, .sri .nm small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sri .nm small { font-size: 12px; font-weight: 400; color: var(--muted); }
.sri .gb { margin: 0; width: 18px; height: 18px; border-radius: 4px; }
.sri .fl { margin: 0; width: 18px; height: 12px; padding: 2px; border-radius: 4px; }
.srn, .srm { margin: 10px 6px 0; font-size: 13px; color: var(--muted); }
.srr .more { margin: 10px 6px 2px; }
.srf { display: flex; gap: 8px; max-width: 640px; margin: 4px 0 18px; }
.srf button { flex: none; padding: 0 18px; border: 0; border-radius: 10px; background: var(--acc-fill); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.srf button:hover { filter: brightness(1.08); }
@media (max-width: 600px) { .srp { left: 0; width: auto; } }
@media (max-width: 900px) { /* the magnifier at the right with the sign-in or the avatar, not by the logo */
  .bar .srb { margin-left: auto; }
  .bar .srb ~ .bank, .bar .srb ~ .me, .bar .srb ~ .in { margin-left: 0; }
}
.bar .in { margin-left: 6px; padding: 8px 16px; border-radius: 10px; background: var(--acc-fill); color: #fff; font-weight: 600; font-size: 14px; flex: none; }
.bar .in:hover { color: #fff; filter: brightness(1.08); }
/* who signed in: the avatar, and under it a menu (who, a new topic, my topics, sign out) */
.bar .me { position: relative; margin-left: 6px; flex: none; }
.bar .me summary { list-style: none; cursor: pointer; border-radius: 50%; display: block; }
.bar .me summary::-webkit-details-marker { display: none; }
.bar .me summary .ava { --s: 34px; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px transparent; transition: box-shadow .15s; }
.bar .me summary:hover .ava, .bar .me[open] summary .ava { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--acc2); }
.bar .me summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.bar .me .menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 210px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(16, 24, 40, .14); display: flex; flex-direction: column; }
.bar .me .menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.bar .me .menu .who b { font-size: 14px; }
.bar .me .menu .who span { font-size: 12px; color: var(--acc); font-weight: 600; }
.bar .me .menu a, .bar .me .menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.bar .me .menu a:hover, .bar .me .menu button:hover { background: var(--chip); color: var(--ink); }
.bar .me .menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--line); }
.bar .me .menu button { color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-radius: 10px; background: var(--acc-fill); color: #fff; font: 600 14px var(--sans); cursor: pointer; }
.btn:hover { color: #fff; filter: brightness(1.08); }
/* phones: «Войти» or the chips and the avatar at the right of the logo, the menu button after them */
@media (max-width: 900px) { .bar .in, .bar .me { order: 1; margin-left: auto; } }
.bar .bank { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; padding: 7px 13px 7px 10px; border-radius: 999px; background: var(--chip); font-weight: 700; font-size: 14px; color: var(--ink2); font-variant-numeric: tabular-nums; flex: none; }
.bar .bank:hover { background: var(--acc2); color: var(--acc); }
@media (max-width: 900px) { .bar .bank { order: 1; margin-left: auto; } .bar .bank + .me { margin-left: 0; } }

/* The sections of the top bar (2026-10-08): four in the bar, the rest under «Ещё», a menu of its own
   that unfolds under the button. Below 1220 px the four go under it too and the button says «Меню»;
   on a phone it is a square with three lines at the right end of the logo's row, the menu as wide as
   the bar. */
.bar .sections { position: relative; flex: none; margin-left: 2px; }
.bar .sections summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--ink2); user-select: none; }
.bar .sections summary::-webkit-details-marker { display: none; }
.bar .sections summary::after { content: ""; width: 6px; height: 6px; margin: -3px 1px 0 1px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform .15s, margin .15s; }
.bar .sections[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.bar .sections summary:hover, .bar .sections[open] summary { background: var(--chip); color: var(--ink); }
.bar .sections summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.bar .sections .burger, .bar .sections .ln { display: none; }
.bar .burger { position: relative; width: 16px; height: 12px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; box-sizing: border-box; }
.bar .burger::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; background: currentColor; }
.bar .sections .menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 190px; padding: 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(16, 24, 40, .14); display: flex; flex-direction: column; }
.bar .sections[open] .menu { animation: menu-in .14s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.bar .sections .menu a { padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.bar .sections .menu a:hover { background: var(--chip); color: var(--ink); }
.bar .sections .menu a.main { display: none; }
@media (max-width: 1220px) { /* below, the links and the games' strip no longer share one line */
  .bar .nav { display: none; }
  .bar .sections { margin-left: auto; }
  .bar .sections .lw { display: none; }
  .bar .sections .ln, .bar .sections .burger { display: inline-block; }
  .bar .sections summary::after { display: none; }
  .bar .sections .menu a.main { display: block; }
}
@media (max-width: 900px) {
  .bar .sections { order: 2; position: static; margin-left: -8px; }
  .bar .sections summary { width: 40px; height: 40px; padding: 0; justify-content: center; background: var(--chip); }
  .bar .sections .ln { display: none; }
  .bar .sections .burger { width: 18px; height: 14px; }
  .bar .sections .burger::before { top: 4px; }
  .bar .sections .menu { left: 8px; right: 8px; top: calc(100% + 6px); min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px; }
  .bar .sections .menu a { padding: 12px 14px; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .bar .sections[open] .menu, .bar .thb[open] .menu { animation: none; } }
/* A phone with someone signed in: the logo, the chips, the avatar and the menu button in one row
   (owner 2026-10-08: the button fell to a row of its own at 390 px) — closer, and a size smaller
   on the narrowest screens. */
@media (max-width: 900px) { .bar { column-gap: 10px; } .bar .bank, .bar .me, .bar .in { margin-left: auto; } .bar .bank + .me { margin-left: 0; } .bar .sections { margin-left: -2px; } }
@media (max-width: 420px) {
  .bar { padding-left: 12px; padding-right: 10px; }
  .bar .logo { gap: 8px; }
  .bar .logo i { width: 36px; height: 36px; border-radius: 9px; }
  .bar .logo .wm b { font-size: 10px; letter-spacing: .2em; }
  .bar .logo .wm span { font-size: 23px; }
  .bar .bank { gap: 5px; padding: 6px 10px 6px 8px; font-size: 13px; }
  .bar .me summary .ava { --s: 32px; }
  .bar .in { padding: 8px 12px; }
  .bar .sections summary { width: 38px; height: 38px; }
}
/* A phone's top bar in one row whatever the chips (owner 2026-10-16: «шапка поехала на телефоне из-за количества очков»
   — at 360–412 px, once the magnifier came, «200,4» sent the menu button to a row of its own): the logo gives up its
   margin, the gaps close a little, the wordmark is smaller on the narrowest screens; and should the row still be short,
   the logo gives way — it takes the room left (its basis nothing, so the row never breaks for it), not the button. */
@media (max-width: 900px) { .bar .logo { flex: 1 1 0; min-width: 0; margin-right: 0; } .bar .logo .wm { min-width: 0; overflow: hidden; } }
@media (max-width: 420px) { .bar { column-gap: 8px; } .bar .srb, .bar .thb summary { width: 36px; } }
@media (max-width: 350px) { .bar .logo i { width: 32px; height: 32px; } .bar .logo .wm b { font-size: 9px; } .bar .logo .wm span { font-size: 20px; } }
/* … and the wordmark goes rather than be cut («ESPOR / hub.» at 320 px): with less room than the plate and the whole
   wordmark take — 130 px over 420, 112 px to it, 99 px to 350, as measured — only the plate stays. */
@media (max-width: 900px) { .bar .logo { container-type: inline-size; } }
@media (min-width: 421px) and (max-width: 900px) { @container (max-width: 129.5px) { .bar .logo .wm { display: none; } } }
@media (min-width: 351px) and (max-width: 420px) { @container (max-width: 111.5px) { .bar .logo .wm { display: none; } } }
@media (max-width: 350px) { @container (max-width: 98.5px) { .bar .logo .wm { display: none; } } }
/* the nick (2026-10-08) — one thing to do, so a page of its own (owner 2026-10-20: «сделай вариант страницы где она
   на весь экран… больше шрифт и так далее» — «Давай, делаем»): the card in the middle of the screen, larger type, the
   field and the buttons tall; not scaled by the window (fonts in px, the width bounded) */
.panel.one.nick { max-width: 720px; margin: max(14px, calc(50vh - 310px)) auto 40px; padding: 44px 52px 40px; border-radius: 22px; box-shadow: 0 18px 50px rgb(16 24 40 / .08); }
@media (max-width: 600px) {
  .panel.one.nick { margin: 14px 0; padding: 26px 20px 24px; border-radius: 16px; }
}

/* a phone's edges closer (owner 2026-10-08: «отступы от краёв экрана меньше в телефоне»; 2026-10-09: «ещё
   чуток меньше полей от края»): the page's edge, the boxes' insides and the top bar alike */
@media (max-width: 600px) {
  .pg { padding: 0 6px; }
  .panel { padding: 12px 10px; }
  .bar { margin-top: 6px; padding: 10px 10px 10px 12px; }
}
.bar .bank[aria-current] { background: var(--acc2); color: var(--acc); box-shadow: inset 0 0 0 1.5px var(--acc); }
/* Pieces of many pages: the flags and the games' badges, the way back over a page and the ways on under a list,
   the sources' credits, an outside link's arrow, the tabs over a panel's lists, a view fading in. */
/* a team's flag as an element (cards), the same plate and lettering as the lines draw as ::before/::after */
.fl { display: inline-block; flex: none; box-sizing: content-box; width: 24px; height: 16px; padding: 3px; border-radius: 5px; margin-right: 6px; font-style: normal; background: var(--flag) 0 0 / 100% 100% no-repeat content-box border-box, linear-gradient(var(--fill, transparent), var(--fill, transparent)) 0 0 / 100% 100% no-repeat content-box border-box, linear-gradient(var(--flag-edge), var(--flag-edge)) -1px -1px / calc(100% + 2px) calc(100% + 2px) no-repeat content-box border-box, var(--panel); box-shadow: 0 0 0 1px var(--line); }
/* the regions in words on the plate, cut short on two lines where a word will not fit (owner 2026-10-12: «Сев. Вверху
   Америка ниже»); the lettering follows the plate's height, whatever size a place gives it */
.fl.f-cis, .fl.f-mena, .fl.f-tbd { --flag: none; --fill: var(--region); container-type: size; font: 600 7.5px/16px var(--mono); color: #fff; text-align: center; letter-spacing: 0; }
.fl:is(.f-cis, .f-mena, .f-tbd)::before { display: block; font-size: 44cqh; line-height: 100cqh; white-space: pre; }
/* the continents are drawn (flags.css); the CIS, a union of states, and the Middle East keep their letters, on a colour of
   their own (owner 2026-10-16: «Сделаем цветными») */
.fl.f-cis { --fill: #b07d22; }
.fl.f-mena { --fill: #8c6a3a; }
.fl.f-cis::before { content: "СНГ"; }
.fl.f-mena::before { content: "БЛИЖ.\A ВОСТОК"; font-size: 36cqh; line-height: 48cqh; padding-top: 2cqh; }
.fl.f-tbd::before { content: "?"; font-size: 62cqh; font-weight: 400; }
/* the game of a card: its short name on its colour (static/games; the publishers' logos need a licence) */
.gb { display: inline-block; vertical-align: middle; margin-left: auto; flex: none; width: 20px; height: 20px; border-radius: 5px; font-size: 0; background: var(--chip) center / 100% 100% no-repeat; }
.gb.g-cs2 { background-image: url(/static/games/cs2.svg?v=2); }
.gb.g-hub { background-image: url(/static/favicon.svg); } /* a story of all the games: the site's mark */
.gb.g-dota2 { background-image: url(/static/games/dota2.svg?v=2); }
.gb.g-valorant { background-image: url(/static/games/valorant.svg?v=2); }
/* the games' own marks, each its own shape (owner 2026-10-19, of eight sets: «Силуэт»; design/game-marks-2026-10-19):
   CS2 a hexagon, Dota 2 a circle, Valorant a square with two corners cut — the shape is the picture's, so no ground
   and no rounding of the box wherever a place sizes it (the site's mark, «Все игры», stays a rounded square) */
.gb:is(.g-cs2, .g-dota2, .g-valorant) { border-radius: 0 !important; background-color: transparent !important; }
.more { margin: 12px 0 0; }
/* the ways on — «Все новости», «Все матчи», «Обсуждение целиком», «Ещё N…» — one look everywhere (owner 2026-10-16:
   «Сделай все переходы. Такие как все новости и внутри. В нашем стиле во все местах» — «Ссылки «Все …» в одном стиле»):
   a plate of the chips' grey with an arrow on, as the way back over a tournament has one back; violet under the pointer.
   What opens in place («Ещё N трансляций», «Раньше — N прогнозов») — the same plate, its arrow down, up once open. */
.more a, .stmore > summary, .bk6-more > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 11px 4px 12px; border-radius: 8px; background: var(--chip); color: var(--ink2); font-size: 13px; font-weight: 600; line-height: 1.3; list-style: none; cursor: pointer; }
.more a::after, .stmore > summary::after, .bk6-more > summary::after { content: ""; flex: none; width: 5px; height: 5px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.stmore > summary::after, .bk6-more > summary::after { margin-top: -3px; transform: rotate(135deg); }
.stmore[open] > summary::after, .bk6-more[open] > summary::after { margin-top: 3px; transform: rotate(-45deg); }
.more a:hover, .stmore > summary:hover, .bk6-more > summary:hover { background: var(--acc2); color: var(--acc); }
.stmore > summary::-webkit-details-marker, .bk6-more > summary::-webkit-details-marker { display: none; }
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.crumbs a { color: var(--acc); }
.stages { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; font-size: 13px; }
.stages a, .stages .on { padding: 4px 10px; border-radius: 8px; background: var(--chip); font-weight: 600; color: var(--ink2); }
.stages a:hover { background: var(--acc2); color: var(--acc); }
.stages .on, .stages a.on:hover { background: var(--acc-fill); color: #fff; }
/* the way back over a page — «Новости», «Команды», «Турниры», «Обсуждения», a player's team — and the game beside it,
   one look everywhere (owner 2026-10-16, of «Обсуждения CS2» over a topic: «так же такие ссылки слева вверху нужно по
   нашему оформлять. на сайте уже есть примеры»): a plate of the chips' grey with an arrow back, the game's plate in its
   colour */
:where(.crumbs:has(.back)) { align-items: center; gap: 6px 8px; }
:where(.crumbs) .back { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 11px; border-radius: 8px; background: var(--chip); color: var(--ink2); font-weight: 600; }
:where(.crumbs) .back::before { content: ""; width: 5px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
:where(.crumbs) .back:hover { background: var(--acc2); color: var(--acc); }
:where(.crumbs) a.back { color: var(--ink2); } /* not the crumbs' links' violet */
:where(.crumbs) a.back:hover { color: var(--acc); }
.crumbs a.gp { color: var(--gi); }
.crumbs a.gp:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--gc) / .45); }
.gp { --gc: 95 102 115; --gi: var(--ink2); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 8px; background: rgb(var(--gc) / .16); color: var(--gi); font-weight: 700; letter-spacing: .03em; }
.gp .gb { margin: 0; width: 18px; height: 18px; border-radius: 5px; }
.gp.g-cs2 { --gc: 211 139 31; --gi: #8a5304; }
.gp.g-dota2 { --gc: 184 53 42; --gi: #a2302a; }
.gp.g-valorant { --gc: 253 69 86; --gi: #be2639; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .gp { background: rgb(var(--gc) / .22); }
  :where(:root:not([data-theme="light"])) .gp.g-cs2 { --gi: #f2b75a; }
  :where(:root:not([data-theme="light"])) .gp.g-dota2 { --gi: #ff8b7e; }
  :where(:root:not([data-theme="light"])) .gp.g-valorant { --gi: #ff8795; }
}
:where(:root[data-theme="dark"]) .gp { background: rgb(var(--gc) / .22); }
:where(:root[data-theme="dark"]) .gp.g-cs2 { --gi: #f2b75a; }
:where(:root[data-theme="dark"]) .gp.g-dota2 { --gi: #ff8b7e; }
:where(:root[data-theme="dark"]) .gp.g-valorant { --gi: #ff8795; }
/* Tabs over a panel's lists (home.html, home-pc.html; app.js switches them by a tap and by a swipe): without a script the
   bar is hidden and the lists stand one under another. The tabs as small capitals (owner 2026-10-19, of the variants of
   the probe «tabs»: «сделай вкладки в5 но без точки и делай основой»; the twelve in design/archive/home-tabs-2026-10-19):
   no plates, the words in capitals spaced out, the open one in our violet, the others grey; during a swipe the tab ahead
   (.lead) violet, the one left (.away) grey. The segmented switch they were before, with its gliding pill, gone with its
   rules and the script's pill 2026-10-24. */
.tabbar { display: none; gap: 0 22px; max-width: 100%; margin: -2px 0 12px; overflow-x: auto; scrollbar-width: none; }
.tabbar::-webkit-scrollbar { display: none; }
.js .tabs .tabbar { display: flex; }
.tabbar button { flex: none; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; color: var(--muted); cursor: pointer; }
.tabbar button:hover { color: var(--ink2); }
.tabbar button[aria-selected="true"], .tabbar button.lead { color: var(--acc); }
.tabbar button.away { color: var(--muted); }
.tabbar button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (max-width: 600px) { .tabbar { gap: 0 18px; } }
@media (max-width: 380px) { .tabbar { gap: 0 14px; } .tabbar button { font-size: 11.5px; letter-spacing: .06em; } }
/* «Топ-20 CS2» (owner 2026-10-09: «переименуй рейтинг в топ20 cs2»); narrower than 340 px, «Топ-20» */
@media (max-width: 340px) { .tabbar .tcs { display: none; } }
/* the list under the tabs follows a swipe's finger a little (app.js) */
.js .tabs { overflow-x: clip; }
.pane.snap { transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .22s; }
@media (prefers-reduced-motion: reduce) { .pane.snap { transition: none; } }
.js .tabs .pane > h2 { display: none; }
.tabs .pane + .pane { margin-top: 18px; }
.js .tabs .pane + .pane { margin-top: 0; }
.js .tabs .pane.off { display: none; } /* the panes not shown first, till app.js takes over */
.pane h3.day:first-of-type { margin-top: 0; }
.more .rdt { margin-left: 10px; font-size: 12px; color: var(--muted); } /* the rating's edition beside its link */
/* The sources' credits their terms ask for — Liquipedia (CC BY-SA 3.0, the article), Steam, OpenDota, STRATZ, the
   rosters' source, Valve's rating — by what they gave, small and pale in the block's corner (owner 2026-10-20: «Уточни про
   приписки panda и liquid, где они должны быть. и если нужно делай серым бледным поменьше в углу»); PandaScore's in the
   foot of every page. */
p.src { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: color-mix(in srgb, var(--muted) 75%, transparent); text-align: right; }
p.src a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 2px; }
p.src a:hover { color: var(--ink2); }
/* an outside link's arrow */
.ext { display: inline-block; flex: none; width: 13px; height: 13px; background: currentColor; opacity: .75; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3h7v7M13 3 4 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3h7v7M13 3 4 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sect { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 12px; }
.sect a { padding: 5px 11px; border-radius: 8px; background: var(--chip); font-size: 13px; font-weight: 600; color: var(--ink2); }
.sect a:hover, .sect a.on { background: var(--acc2); color: var(--acc); }
/* A map's tables while they are on their way: two outlines breathing, a word after a while; a view
   picked fades in. */
/* a view, a list or a pane just shown fades in and rises a little (app.js: flash); a number or a word
   that just changed under the reader (.up: the live head's scores and boards, the cards' rounds) the same.
   A game picked in the top bar (.gv.in) keeps the frames standing — the panels, their headings and tab
   bars, the chips — and only what is in them fades in (owner 2026-10-10: «чтобы менялся только контент
   внутри… сами вкладки… на месте») */
.mp .tbs.in, .pane.in, .tl.in, [data-chip].in, .up,
.gv.in > :not(.grid, .panel), .gv.in :is(.panel, .pane) > :not(:first-child, .pane, .thead, .sect) { animation: fade-in .22s ease-out; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* a tab reached by a swipe comes in from the side it was swiped from (app.js) */
@keyframes sw-l { from { transform: translateX(18px); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes sw-r { from { transform: translateX(-18px); opacity: .35; } to { transform: none; opacity: 1; } }
.pane.sw-l { animation: sw-l .18s ease-out; }
.pane.sw-r { animation: sw-r .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .pane.sw-l, .pane.sw-r { animation: none; } }
.bk6-more > summary { margin: 10px 0 8px; }
/* Players' moves (moves.go): a move as a line, the page /transfers as a table, the home page's narrow column. */
/* the page of all moves as a table (owner 2026-10-20: «переходы тяжело сейчас читаются. страница неочень сделана»;
   transfers.html, mvr): the player, where from, an arrow, where to — in their columns, a line each */
.mvpg { width: fit-content; min-width: min(640px, 100%); max-width: 100%; margin-inline: auto; box-sizing: border-box; }
.mvt { display: grid; grid-template-columns: minmax(150px, max-content) minmax(0, max-content) 28px minmax(0, max-content); margin: 0 0 18px; }
.mvt-d { grid-column: 1 / -1; margin: 18px 0 0; padding: 0 0 6px; border-bottom: 1px solid var(--line); }
.mvt > .mvt-d:first-child { margin-top: 2px; }
.mvt .mvr-s { padding-right: 28px; }
.mvr { display: contents; }
.mvr > * { display: flex; align-items: center; min-height: 44px; min-width: 0; padding: 4px 0; border-bottom: 1px solid var(--line); }
.mvr-p { gap: 9px; padding-right: 14px; font-size: 15px; font-weight: 600; }
.mvr-p a, .mvr-p b { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.mvr-p a:hover { color: var(--acc); }
.mvr-p .fl { flex: none; margin: 0; }
.mvr-s { gap: 8px; padding-right: 10px; font-size: 14px; color: var(--ink2); }
.mvr-s .logo, .mvr-s .mk { flex: none; width: 24px; height: 24px; margin: 0; border-radius: 6px; font-size: 9px; }
.mvr-s img.logo { padding: 2px; }
.mvr-s b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
a.mvr-s:hover b { color: var(--acc); }
.mvr-r { flex: none; padding: 1px 7px; border-radius: 6px; background: var(--chip); font-size: 12px; font-weight: 600; color: var(--muted); }
.mvr-s.mvr-n { color: var(--muted); }
.mvr-a { justify-content: center; }
.mvr-a::before { content: ""; width: 6px; height: 6px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); }
/* the home page's narrow column (owner 2026-10-20: «впихнуть трансферы под все турниры в столбик»; hl01-moves): a move
   in two lines — the flag, the nick and the day; under them where from › where to */
.mvl { margin: 0 0 4px; border-top: 1px solid var(--line); }
.mvs { padding: 8px 0 7px; border-bottom: 1px solid var(--line); }
.mvs-h { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; }
.mvs-h .fl { flex: none; margin: 0; }
.mvs-h a, .mvs-h b { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.mvs-h a:hover { color: var(--acc); }
.mvs-h time { flex: none; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--muted); }
.mvs-c { display: grid; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); align-items: center; margin-top: 5px; }
.mvs-c .mvr-s { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.mvs-c .mvr-s .logo, .mvs-c .mvr-s .mk { width: 20px; height: 20px; border-radius: 5px; }
.mvs-c .mvr-a { display: flex; justify-content: center; }
@media (max-width: 600px) {
  .mvpg { width: auto; min-width: 0; }
  .mvt { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .mvt .mvr-s { padding-right: 8px; }
  .mvr-p { grid-column: 1 / -1; min-height: 0; padding: 9px 0 2px; border-bottom: 0; font-size: 14.5px; }
  .mvr > .mvr-s, .mvr > .mvr-a { min-height: 34px; padding: 0 0 8px; }
  .mvr-s { font-size: 13.5px; }
}

/* Players' moves (moves.go; owner 2026-10-16, with a picture of a list of moves: «сделай трансферы на подобии что в
   скриншоте. только наш вариант без фото игрока»): a line — the flag, the nick, the day under it; the club left and
   the club come to as logo tiles, an arrow between, under each what the player is there or the club's short name; a side
   with no club a grey shield. One column in the home page's plate and the team's panel; /transfers is a table (mvr). */
.mvi { display: flex; flex-direction: column; }
/* a move a line in three equal parts (owner 2026-10-19: «Сделай красивее и плотнее. Что бы не было большого разброса с
   лева от середины. И делай основой»): the player, the club left, the club come to — a club its logo with the name
   beside it, so the line is full from edge to edge; 44px high where it was 58 */
.mvc { display: grid; grid-template-columns: 36px minmax(0, .9fr) minmax(0, 1fr) 12px minmax(0, 1fr); align-items: center; gap: 0 8px; min-height: 44px; padding: 6px 2px; border-top: 1px solid var(--line); }
/* the move's day: a small square, the number and under it the month and the year (owner 2026-10-19: «слева квадрат в
   котором число и внизу месяц.год красиво просто минималистично») */
.mvc-d { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--chip); line-height: 1; font-variant-numeric: tabular-nums; }
.mvc-d b { font-size: 15px; font-weight: 700; color: var(--ink2); }
.mvc-d small { margin-top: 2px; font-size: 9px; font-weight: 500; letter-spacing: .02em; color: var(--muted); }
.mvi .mvc:first-child { border-top: 0; }
.mvc-w { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mvc-n { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 600; }
.mvc-n .fl { flex: none; width: 20px; height: 13px; margin: 0; padding: 2px; border-radius: 4px; }
.mvc-n .gb { flex: none; margin: 0; }
.mvc-n a, .mvc-n b { overflow: hidden; font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.mvc-n a:hover { color: var(--acc); }
.mvc-w small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.2; color: var(--muted); }
.mvc-w small .gb { flex: none; width: 14px; height: 14px; margin: 0; border-radius: 3px; } /* the game, when the list mixes them, by the day: the nick keeps its room */
.mvc-t { display: flex; align-items: center; gap: 7px; min-width: 0; color: inherit; }
.mvc-t .logo, .mvc-t .mk, .mvc-c { flex: none; width: 28px; height: 28px; margin: 0; border-radius: 7px; }
.mvc-t .mk { font-size: 10px; }
.mvc-t small { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--ink2); text-overflow: ellipsis; white-space: nowrap; }
.mvc-t small.r { font-size: 12px; font-weight: 600; color: var(--muted); }
a.mvc-t:hover small { color: var(--acc); }
.mvc-c { display: grid; place-items: center; background: var(--chip); }
.mvc-c svg { width: 13px; height: 15px; fill: color-mix(in srgb, var(--muted) 55%, var(--chip)); }
.mvc-t.blank .mvc-c { background: none; border: 1.5px dashed var(--line); }
.mvc-t.none small { white-space: normal; text-overflow: clip; }
.mvc-a { justify-self: center; width: 7px; height: 7px; margin-left: -3px; border-top: 1.8px solid color-mix(in srgb, var(--muted) 70%, var(--panel)); border-right: 1.8px solid color-mix(in srgb, var(--muted) 70%, var(--panel)); transform: rotate(45deg); }
@media (max-width: 560px) {
  .mvc { grid-template-columns: 32px minmax(0, .8fr) minmax(0, 1fr) 8px minmax(0, 1fr); gap: 0 5px; }
  .mvc-d { width: 32px; height: 32px; border-radius: 7px; }
  .mvc-d b { font-size: 14px; }
  .mvc-t { gap: 5px; }
  .mvc-t .logo, .mvc-t .mk, .mvc-c { width: 24px; height: 24px; border-radius: 6px; }
  .mvc-t small { font-size: 12.5px; }
  .mvc-t small.r { font-size: 11px; letter-spacing: -.01em; }
}
@media (max-width: 380px) { /* a narrow phone: the logos and the flag a size smaller, «без команды» whole */
  .mvc { grid-template-columns: 30px minmax(0, .85fr) minmax(0, 1fr) 7px minmax(0, 1fr); gap: 0 4px; }
  .mvc-d { width: 30px; height: 30px; }
  .mvc-n { gap: 4px; font-size: 13.5px; }
  .mvc-n .fl { width: 16px; height: 11px; }
  .mvc-t { gap: 4px; }
  .mvc-t .logo, .mvc-t .mk, .mvc-c { width: 20px; height: 20px; border-radius: 5px; }
  .mvc-c svg { width: 11px; height: 13px; }
  .mvc-t small { font-size: 12px; }
}
/* Lists of series and events: the match lines, the events in the look of the lines, teams in a grid, the
   tournaments beside «Матчи». */
/* a side of a series not known yet */
.tbd { color: var(--muted); font-weight: 400; }

/* matches one line each: team, score or start, team */
.ml { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 50px; margin: 0 0 4px; border-radius: 8px; background: var(--chip); font-size: 14px; position: relative; isolation: isolate; overflow: hidden; }
.ml:hover { background: var(--acc2); color: inherit; }
/* the teams' flags, each on its own little plate at its end of the line (flags.css, .fl), with a hairline round the flag
   so a white stripe at its edge keeps its shape; the line keeps room for both even without them, so scores stand in one
   column. Elements, not drawn by the line, so that pointing at one names its country (owner 2026-10-16: «И подсказки при
   наведении мышкой на флаг»). */
.ml > .fl.mlf { position: absolute; top: 50%; left: 10px; margin: -11px 0 0; opacity: var(--flag-m, 1); }
.ml > .fl.mlf.r { left: auto; right: 10px; }
.ml .mk { background: var(--panel); }
.ml .tm { display: flex; align-items: center; min-width: 0; font-weight: 500; }
.ml .tm.a { justify-content: flex-end; }
.ml .tm.a .logo, .ml .tm.a .mk { margin: 0 0 0 8px; }
.ml .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml .sc { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; white-space: nowrap; }
.ml .sc b.w { color: var(--win); }
.ml .sc b.l { color: var(--loss); }
.ml .sc i { font-style: normal; font-weight: 500; color: var(--muted); margin: 0 4px; }

.ml .sc time { font-size: 14.5px; font-weight: 600; color: var(--ink2); }
.evh { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--muted); margin: 14px 0 4px; }
.evh .gb { margin: 0; width: 16px; height: 16px; border-radius: 4px; } /* the event's game */
h2 + .evh { margin-top: 0; }
h3.rday { font-size: 14px; font-weight: 600; color: var(--ink); margin: 22px 0 0; }
h2 + h3.rday { margin-top: 4px; }
h3.rday + .evh { margin-top: 6px; }
/* events on the home page, in the look of the match lines: a grey plate each, the logo on a white
   square, the game as its lettered square, the host country's flag, the prize on a white chip */
.tcard { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px 8px 8px; margin: 0 0 4px; border-radius: 10px; background: var(--chip); color: inherit; }
.tcard:hover { background: var(--acc2); color: inherit; }
.tcard .ev { width: 40px; height: 40px; margin: 0; border-radius: 9px; }
.tcard img.logo.ev { padding: 4px; background: #fff; }
.tcard img.logo.ev.dk { background: #23262d; }
.tcard .mk.ev { font-size: 12px; letter-spacing: .02em; background: var(--panel); }
.tcard .tc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tcard .tc b { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .tmeta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; }
.tcard .tmeta .gb { margin: 0; width: 18px; height: 18px; border-radius: 4px; }
.tcard .tmeta .fl { width: 18px; height: 12px; padding: 2px; margin: 0; border-radius: 4px; }
.tcard .tmeta > span:not(.gb) { overflow: hidden; text-overflow: ellipsis; }
.tcard .tmeta > span:not(.gb) + span::before { content: "· "; }
.tcard .pz { font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; background: var(--panel); border-radius: 7px; padding: 3px 8px; }
/* teams (and players) in a grid: each on a grey plate, the logo on white, the flag at the end */
.teamgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.teamgrid a { display: flex; align-items: center; padding: 7px 10px 7px 7px; border-radius: 10px; background: var(--chip); font-weight: 600; font-size: 14px; min-width: 0; color: var(--ink); }
.teamgrid a:hover { background: var(--acc2); color: var(--ink); }
.teamgrid a:not([href]):hover { background: var(--chip); } /* one only the roster's source names: no page of ours */
.teamgrid a .nm small { display: block; overflow: hidden; font-weight: 400; font-size: 12px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.teamgrid a .nm { display: flex; flex-direction: column; line-height: 1.25; }
.teamgrid.one { grid-template-columns: 1fr; }
.teamgrid a .mk { background: var(--panel); }
.teamgrid a .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teamgrid a .fl { margin: 0 0 0 auto; width: 18px; height: 12px; padding: 2px; border-radius: 4px; }
.teamgrid a .gb { margin: 0 0 0 auto; width: 18px; height: 18px; border-radius: 4px; }
.teamgrid a .gb + .fl { margin-left: 6px; }
.teamgrid a .meta { margin: 0 0 0 6px; font-weight: 400; font-size: 12.5px; }

@media (max-width: 600px) {
  .ml { padding: 7px 12px; gap: 8px; }
  .ml > .fl.mlf { display: none; }
}
.ml .sc small { margin-left: 5px; font-size: 13.5px; font-weight: 600; color: var(--muted); vertical-align: 1px; }

/* «Матчи» and «Результаты»: the tournaments beside the list on a computer alone, as the side columns elsewhere (owner
   2026-10-16: «это на ПК») */
@media (max-width: 900px) { .mtside { display: none; } }
/* The reader's own: signing in and the consent, the avatars, the nick, the site's papers and the account. */
/* the site's papers (legal.html): a story's column, numbered sections, the operator's gaps marked */
.legal { max-width: 760px; margin-left: auto; margin-right: auto; }
.legal .ed { font-size: 13px; color: var(--muted); margin: -6px 0 18px; }
.legal h2 { font-size: 18px; line-height: 1.3; margin: 24px 0 8px; }
.legal ul, .legal ol { margin: 0 0 14px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.55; margin: 0 0 8px; }
.legal code { font: 600 14px var(--mono); background: var(--chip); padding: 1px 5px; border-radius: 5px; }
.legal p a, .legal li a, .login .small a, .agree a { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal .todo { background: color-mix(in srgb, var(--loss) 14%, transparent); color: inherit; padding: 0 3px; border-radius: 4px; }
.legal .agreed { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal .note { margin: 18px 0 4px; }
.legal .acct { list-style: none; padding: 0; }
/* the papers short (owner 2026-10-20: «максимально простую, без лишних объяснений»): who and where as a key and its
   value a line, what is kept and why as a term and its line, the documents as plates, the account's head */
.lg-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.lg-kv dt { color: var(--muted); }
.lg-kv dd { margin: 0; }
.lg-rows { margin: 0 0 14px; border-top: 1px solid var(--line); }
.lg-rows dt { padding: 10px 0 2px; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.lg-rows dd { margin: 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink2); }
.lg-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.legal .lg-docs a { padding: 7px 12px; border-radius: 9px; background: var(--chip); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.legal .lg-docs a:hover { color: var(--acc); }
/* the cookies: the name and its line side by side */
.lg-ck { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; }
.lg-ck dt, .lg-ck dd { padding: 9px 0; border-bottom: 1px solid var(--line); }
.lg-ck dt { padding-right: 16px; }
@media (max-width: 600px) { .lg-kv { grid-template-columns: 1fr; gap: 0; } .lg-kv dd { margin-bottom: 8px; } }

/* avatars: the picked picture (static/ava, drawn by design/avatars/gen.mjs) or the initials on one
   of eight colours (db.User.Hue); --s is the size, the letters keep to it, the capitals trimmed to
   their own height so they stand in the very middle */
.ava { --s: 28px; width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; flex: none; font: 700 calc(var(--s) * .38)/1 var(--sans); text-box: trim-both cap alphabetic; color: #fff; background: var(--region); overflow: hidden; }
.ava.n1 { font-size: calc(var(--s) * .44); }
img.ava { display: inline-block; }
/* /avatar: the initials and the pictures in one grid — eighty, so the rows come out even at ten, eight or
   five to a row; the admin's own picture stands above it; a click keeps one, the kept one ringed */
.avatars { max-width: 980px; }
.avatars .lead { color: var(--ink2); margin: 0; }
.avatars .own { margin: 16px 0 0; }
.avatars .own button { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border: 0; border-radius: 999px; background: var(--chip); color: var(--ink2); font: 500 14px var(--sans); cursor: pointer; }
.avatars .own button:hover { background: var(--acc2); color: var(--ink); }
.avatars .own .ava { --s: 36px; outline: 2px solid transparent; outline-offset: 2px; }
.avatars .own small { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.avatars .own button.on { background: var(--acc2); color: var(--acc); font-weight: 600; }
.avatars .own button.on .ava { outline-color: var(--acc); }
.avatars .own button:focus-visible, .avatars .picks button:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.avatars .picks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 16px 0 0; }
.avatars .picks button { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 2px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink2); font: 500 13px/1.25 var(--sans); text-align: center; cursor: pointer; }
.avatars .picks button:hover { background: var(--chip); color: var(--ink); }
.avatars .picks .ava { --s: 64px; outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .15s; }
.avatars .picks button.on { color: var(--acc); font-weight: 600; }
.avatars .picks button.on .ava { outline-color: var(--acc); }
@media (max-width: 940px) { .avatars .picks { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (max-width: 720px) { .avatars .picks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .avatars .picks { gap: 2px; }
  .avatars .picks button { gap: 7px; padding: 10px 0 8px; font-size: 11.5px; }
  .avatars .picks .ava { --s: 52px; outline-width: 2.5px; outline-offset: 2.5px; }
}
@media (max-width: 360px) {
  .avatars .picks button { font-size: 10.5px; }
  .avatars .picks .ava { --s: 46px; }
}
.ava.h0 { background: #5a35c9; } .ava.h1 { background: #c27c12; } .ava.h2 { background: #16884a; } .ava.h3 { background: #b8352a; }
.ava.h4 { background: #d63b52; } .ava.h5 { background: #0b7fae; } .ava.h6 { background: #687590; } .ava.h7 { background: #9b4dca; }
.note { padding: 10px 12px; border-radius: 10px; background: var(--chip); color: var(--ink2); font-size: 13.5px; }
.err { display: block; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--loss) 12%, var(--panel)); color: var(--loss); font-size: 13.5px; font-weight: 600; }
.small { font-size: 12.5px; color: var(--muted); }

/* signing in */
.login { max-width: 480px; }
.login .lead { color: var(--ink2); }
.vias { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.via { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 12px; background: var(--chip); font-weight: 600; color: inherit; }
.via:hover { background: var(--acc2); color: var(--acc); }
.via i { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font: normal 700 12px var(--sans); }
button.via { border: 0; width: 100%; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
/* the consent's tick before the sign-in, the deletion's and the like (legal.go): a box of a good size, the
   words beside it */
.agree { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink2); margin: 2px 0 6px; cursor: pointer; }
.agree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acc); }
.v-vk { background: #0077ff; }
.v-yandex { background: #fc3f1d; }
.dev { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px; border-radius: 12px; border: 1px dashed var(--line); margin: 6px 0 12px; }
.dev b { flex-basis: 100%; font-size: 13px; color: var(--ink2); }
.dev input[name="name"] { width: auto; flex: 1 1 160px; }
.dev label { font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
.nick h1 { margin: 0 0 14px; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; }
.nick p { font-size: 17px; }
.nick .lead { margin: 0; color: var(--ink2); font-size: 19px; line-height: 1.55; }
.nick .small { font-size: 15px; }
.nick .err { font-size: 16px; }
.nick .nickf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; margin: 30px 0 10px; }
.nick .nickf label { display: grid; gap: 8px; font-size: 15px; font-weight: 600; color: var(--muted); }
.nick .nickf input[name="nick"] { box-sizing: border-box; width: 100%; height: 60px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--ink); font: 600 24px var(--sans); }
.nick .nickf input[name="nick"]:focus { outline: 2px solid var(--acc2); border-color: var(--acc); }
.nick .nickf .btn { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 30px; border-radius: 14px; font-size: 18px; }
/* the change asked once more (owner 2026-10-20: «просто меняем ник с подтверждением») */
.nick .nickf .nick-back { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 26px; border-radius: 14px; background: var(--chip); font-size: 18px; font-weight: 600; color: var(--ink); }
.nick .nickf .nick-back:hover { color: var(--acc); }
@media (max-width: 600px) {
  .nick h1 { font-size: 30px; }
  .nick .lead { font-size: 17px; }
  .nick .nickf { grid-template-columns: 1fr; }
  .nick .nickf input[name="nick"], .nick .nickf .btn, .nick .nickf .nick-back { height: 54px; font-size: 19px; }
}

/* The account (legal.go, owner 2026-10-27: «положи ник и аватар в "учетная запись". сделай чуть красивее»): who the
   reader is in a strip, the nick and the avatar as two boxes side by side (one under the other on a phone), the papers,
   the deletion folded away. */
.acc-page { max-width: 1040px; }
.acc-hero { display: flex; align-items: center; gap: 16px; margin: 6px 0 18px; padding: 16px 18px; border-radius: 14px; background: var(--chip); }
.acc-hero .ava { --s: 64px; }
.acc-hero > div { flex: 1; min-width: 0; }
.acc-hero b { display: block; font-size: 21px; line-height: 1.25; color: var(--ink); }
.acc-hero span { font-size: 14px; color: var(--muted); }
.legal .acc-cur { padding: 8px 14px; border-radius: 10px; background: var(--panel); font: 600 14px var(--sans); color: var(--ink); text-decoration: none; }
.legal .acc-cur:hover { color: var(--acc); }
.acc-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px; align-items: start; }
.acc-box { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; }
.legal .acc-box h2 { margin: 0 0 10px; font-size: 16px; }
.acc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; }
.acc-row input[name="nick"] { flex: 1 1 180px; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--ink); font: 600 17px var(--sans); }
.acc-row input[name="nick"]:focus { outline: 2px solid var(--acc2); border-color: var(--acc); }
.acc-row .btn { height: 44px; }
.legal .acc-row a { font-size: 14px; color: var(--muted); }
.acc-now { margin: 0 0 4px; font-size: 18px; font-weight: 600; }
.legal .acc-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.acc-ava .avatars { max-width: none; }
.acc-ava .avatars .picks { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); max-height: 340px; overflow-y: auto; margin-top: 10px; padding-right: 4px; }
.acc-ava .avatars .picks button { gap: 6px; padding: 8px 2px 6px; font-size: 11.5px; }
.acc-ava .avatars .picks .ava { --s: 44px; outline-width: 2.5px; outline-offset: 2.5px; }
.acc-ava .avatars .own { margin-top: 10px; }
.legal .acct { margin: 18px 0 0; }
.acc-del { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.acc-del summary { font-size: 14px; color: var(--muted); cursor: pointer; }
.acc-del summary:hover { color: var(--loss); }
.acc-del[open] summary { margin-bottom: 8px; }
@media (max-width: 760px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-hero { flex-wrap: wrap; }
}

/* The reader's settings (settings.go): a card a game — its switch, then its parts as plates to tick, faded while the game
   is off; the scores and the points as switches with a line under each. */
.stp { max-width: 880px; }
.stp .stp-l { margin: 0 0 14px; color: var(--ink2); font-size: 14.5px; line-height: 1.55; }
.stp-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stp-c { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.stp-c:has(.stp-h input:checked) { border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); }
.stp-h { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.stp-h .gb { width: 24px; height: 24px; margin: 0; }
.stp-h b { flex: 1; font-size: 16px; }
.stp input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stp-sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--line); transition: background .15s; }
.stp-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s; }
.stp :is(.stp-h, .stp-t) input:checked ~ .stp-sw { background: var(--acc-fill); }
.stp :is(.stp-h, .stp-t) input:checked ~ .stp-sw::after { transform: translateX(16px); }
.stp :is(.stp-h, .stp-t) input:focus-visible ~ .stp-sw { outline: 2px solid var(--acc); outline-offset: 2px; }
.stp-p { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.stp-c:has(.stp-h input:not(:checked)) .stp-p { opacity: .4; pointer-events: none; }
.stp-p label { cursor: pointer; }
.stp-p span { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.stp-p input:checked + span { border-color: var(--acc); background: var(--acc2); color: var(--acc); }
.stp-p input:focus-visible + span { outline: 2px solid var(--acc); }
.stp-t { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.stp-t > span:first-of-type { flex: 1; }
.stp-t b { display: block; font-size: 15px; }
.stp-t small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.stp .btn { margin-top: 20px; }
@media (max-width: 760px) { .stp-g { grid-template-columns: minmax(0, 1fr); } }
/* The match cards and the home page's strip of them. */
/* the site's scrollbars quiet at rest, the thumb a half-seen grey, the track barely there (owner 2026-10-16: «сделай на
   главной ее чуть прозрачнее\серее что бы не так в глаза бросалась», then «сделай тише везде ее. в прогнозах тоже»);
   ours (.tbar, .emo-bar) violet under the pointer as before */
:root { --sb: color-mix(in srgb, #aab1bd 50%, transparent); --sb-track: color-mix(in srgb, var(--line) 55%, transparent); }
.tiles { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 2px 0 10px 2px; scrollbar-width: thin; scrollbar-color: var(--sb) var(--sb-track); cursor: grab; }
.tiles.drag { cursor: grabbing; user-select: none; }
.tiles.drag .tile { pointer-events: none; }
.tiles::-webkit-scrollbar { height: 8px; }
.tiles::-webkit-scrollbar-track { background: var(--sb-track); border-radius: 4px; }
.tiles::-webkit-scrollbar-thumb { background: var(--sb); border-radius: 4px; }
.tiles::-webkit-scrollbar-thumb:hover { background: var(--acc); }
.js .tiles { scrollbar-width: none; padding-bottom: 0; }
.js .tiles::-webkit-scrollbar { display: none; }
html:not(.js) .tbar { display: none; }
.tbar { position: relative; height: 24px; margin-top: 2px; cursor: pointer; touch-action: none; user-select: none; }
/* a little narrower at rest, as wide as before under the pointer (owner 2026-10-16: «на главной чуть чуть уже, но что бы
   расширялся так же»); quiet at rest (--sb), violet under the pointer as before */
.tbar::before { content: ""; position: absolute; left: 0; right: 0; top: 8.5px; height: 7px; background: var(--sb-track); border-radius: 3.5px; }
.tbar i { position: absolute; left: 0; top: 8.5px; height: 7px; background: var(--sb); border-radius: 3.5px; transition: background-color .15s, top .15s, height .15s, border-radius .15s; }
.tbar:hover i, .tbar.on i { background: var(--acc); top: 5px; height: 14px; border-radius: 7px; }
html.tbar-drag, html.tbar-drag * { cursor: pointer !important; user-select: none; }
/* on a phone the finger moves the strip and the card cut at the edge says there is more: no bar
   (owner 2026-10-08: «убрать горизонтальный скролл на телефоне, не саму прокрутку, а этот элемент») */
@media (max-width: 900px), (pointer: coarse) {
  .js .tiles, .js .hls { padding-bottom: 10px; }
  /* a finger scrolls the strip itself; the bar, thin over the strip's foot, only says how far it goes and where it
     stands, shown while the strip is touched or moving (owner 2026-10-15: «на главной непонятно сколько мотать. Может
     добавлять видимый индикатор на время мотания»; app.js, cardStrip) */
  .tbar, .hls + .tbar { height: 4px; margin-top: -7px; opacity: 0; pointer-events: none; transition: opacity .45s; }
  .tbar::before { top: 0; height: 4px; border-radius: 2px; background: var(--line); } /* the phone's sign as it was */
  .tbar i, .tbar.on i { top: 0; height: 4px; border-radius: 2px; background: var(--acc); }
  .tbar.moving { opacity: 1; transition: opacity .1s; }
}
/* on a phone the strip of cards a little closer to the bar over it and to the panel under it (owner 2026-10-11, with a
   phone's shot: «Чуть меньше отступ сверху и снизу»; 2026-10-16: «А сделай 15 и 18 пикселей соответственно отступы» —
   from the bar's foot to the cards, from the cards to the panel) */
@media (max-width: 600px) {
  .tiles { margin-top: 13px; }
  .tiles + .tbar { margin-bottom: -3px; }
}
/* Match cards (chosen by the owner on 2026-10-08: «Плашка», flags before the logo, the game as a
   lettered square, a skull for a match whose loser goes home): soft rounded cards like the top bar,
   each team on a grey row of its own, the leader's score on an accent chip. */
.tile { background: var(--panel); border: 1px solid transparent; border-radius: 14px; padding: 11px 11px 10px; display: flex; flex-direction: column; gap: 5px; min-width: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 18px rgba(16, 24, 40, .07); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .tile { border-color: var(--line); box-shadow: none; } }
:where(:root[data-theme="dark"]) .tile { border-color: var(--line); box-shadow: none; }
.tile .ev { font-size: 12px; color: var(--muted); display: flex; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .ev > span:not(.lvt) { overflow: hidden; text-overflow: ellipsis; } /* a long event ends in dots, not cut through a letter */
.tile.live .ev { color: var(--ink2); }
.lvt { color: var(--live); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; flex: none; }
.lvt i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); display: inline-block; animation: live-beat 1.6s ease-in-out infinite; }
@keyframes live-beat { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .lvt i { animation: none; } }
.lvt.end { color: var(--muted); } /* the maps won settle the series, PandaScore not told yet: over, not on */
.lvt.end i { display: none; }
/* the two teams of a card share one grey plate with their scores (the owner, 2026-10-09) */
.tile .teams { display: flex; flex-direction: column; gap: 2px; background: var(--chip); border-radius: 10px; padding: 3px 0; }
.trow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; line-height: 1.25; padding: 3px 5px 3px 6px; }
.trow > span { white-space: nowrap; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.trow .nm { overflow: hidden; text-overflow: ellipsis; }
.trow .mk { background: var(--panel); }
/* a playoff match whose loser goes home: a skull; a final: a cup (static/marks) */
.ko { flex: none; width: 16px; height: 16px; font-size: 0; background: center / 100% 100% no-repeat; }
.ko.out { background-image: url(/static/marks/out.svg); }
.ko.final { background-image: url(/static/marks/final.svg); }
.ko.third { background-image: url(/static/marks/third.svg); }
/* a card's score: the side ahead green, the one behind red, level as it is */
.trow b { font-weight: 700; font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; padding: 0 2px; color: var(--ink); }
.trow b.w { color: var(--win); }
.trow b.l { color: var(--loss); }
.trow b.t { font-size: 14px; color: var(--acc); min-width: 0; padding: 1px 2px; }
.trow em.d { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.tile .sub { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; margin-top: 1px; }
.dots { display: inline-flex; gap: 4px; }
/* maps of a series: played ones filled, the one on now hollow, the rest grey */
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); opacity: .35; display: inline-block; }
.dots i.done { background: var(--acc); opacity: 1; }
.dots i.now { background: var(--panel); box-shadow: inset 0 0 0 2px var(--acc); opacity: 1; }
.tile .sub em { font-style: normal; }
/* The home strip's cards (owner 2026-10-11, from the probe «mtile» 5 «плотно»: «1. и убери смену вида этого из
   панели у меня»): narrower and lower, so more of them are in view — the game's square opens the caption,
   the marks close it, the foot row keeps the maps of the series as dots («сделай кружочки вместо палок
   внизу») and, in its right corner, the pin («Может закрепить?»; pins.js). Each card stands in a frame
   (.tw, home.html) that takes its place in the row, the pin beside the card's link, not inside it. */
.tiles > .tw { flex: 0 0 214px; position: relative; display: flex; min-width: 0; }
/* the cards 5.5 % larger, all of them in proportion (owner 2026-10-24) */
.tiles > .tw { zoom: 1.055; }
.tiles .tile { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 5px 0; padding: 9px 10px 7px; }
.tiles .tile .ev { grid-column: 2; grid-row: 1; }
.tiles .tile .sub { display: contents; }
.tiles .tile .sub .gb { grid-column: 1; grid-row: 1; width: 18px; height: 18px; border-radius: 4px; margin: 0 7px 0 0; }
.tiles .tile .sub .ko { grid-column: 3; grid-row: 1; margin-left: 6px; }
.tiles .tile .sub em.d { grid-column: 4; grid-row: 1; margin-left: 6px; font-size: 11.5px; color: var(--muted); }
.tiles .tile .teams { grid-column: 1 / -1; grid-row: 2; }
.tiles .tile .trow { font-size: 13.5px; padding: 2px 0; }
.tiles .tile .trow b { font-size: 16px; }
.tiles .tile .trow .mk, .tiles .tile .trow img.logo { width: 20px; height: 20px; margin-right: 7px; border-radius: 5px; }
.tiles .tile .trow .fl { width: 20px; height: 13px; padding: 2px; border-radius: 4px; margin-right: 6px; }
.tiles .tile .sub .dots { grid-column: 1 / -1; grid-row: 3; height: 20px; align-items: center; justify-self: start; }
.tiles .tile .sub .vw { grid-column: 1 / -1; grid-row: 3; justify-self: end; }
/* the corner the pin had (hidden for now, stripPins; owner 2026-10-19: «Вместо нее там будет через 3 часа... А когда
   матч там зрители число»): a series to come — how soon, counted down by app.js; one on now — its viewers; with the pin
   back, room for it beside them */
.tin { display: none; }
.tiles .tile .sub .tin { display: block; grid-column: 1 / -1; grid-row: 3; justify-self: end; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.tiles .tw:has(> .pin) .tile .sub :is(.vw, .tin) { margin-right: 26px; }
/* the pin: a drawing pin at a slant («Сделай значок стильней и под углом»), outlined; a hover straightens it
   a little, pinned it is filled in the accent and the card framed in it */
.tiles .pin { position: absolute; right: 7px; bottom: 6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); opacity: .8; cursor: pointer; }
.tiles .pin::before { content: ""; position: absolute; inset: 2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(45 12 12)'%3E%3Cpath d='M9 2H15A1.5 1.5 0 0 1 15 5H14V9.6L17.4 13A1.5 1.5 0 0 1 16.3 15.5H7.7A1.5 1.5 0 0 1 6.6 13L10 9.6V5H9A1.5 1.5 0 0 1 9 2Z'/%3E%3Cpath d='M12 15.5V21.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(45 12 12)'%3E%3Cpath d='M9 2H15A1.5 1.5 0 0 1 15 5H14V9.6L17.4 13A1.5 1.5 0 0 1 16.3 15.5H7.7A1.5 1.5 0 0 1 6.6 13L10 9.6V5H9A1.5 1.5 0 0 1 9 2Z'/%3E%3Cpath d='M12 15.5V21.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; transition: transform .15s ease-out; }
.tiles .pin:hover, .tiles .pin:focus-visible { color: var(--acc); opacity: 1; background: var(--chip); }
.tiles .pin:hover::before { transform: rotate(-15deg); }
.tiles .tw.pinned .pin { color: var(--acc); opacity: 1; }
.tiles .tw.pinned .pin::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(45 12 12)'%3E%3Cpath fill='%23000' d='M9 2H15A1.5 1.5 0 0 1 15 5H14V9.6L17.4 13A1.5 1.5 0 0 1 16.3 15.5H7.7A1.5 1.5 0 0 1 6.6 13L10 9.6V5H9A1.5 1.5 0 0 1 9 2Z'/%3E%3Cpath d='M12 15.5V21.5'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(45 12 12)'%3E%3Cpath fill='%23000' d='M9 2H15A1.5 1.5 0 0 1 15 5H14V9.6L17.4 13A1.5 1.5 0 0 1 16.3 15.5H7.7A1.5 1.5 0 0 1 6.6 13L10 9.6V5H9A1.5 1.5 0 0 1 9 2Z'/%3E%3Cpath d='M12 15.5V21.5'/%3E%3C/g%3E%3C/svg%3E"); }
.tiles .tw.pinned .tile { border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.tiles.drag .pin { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tiles .pin::before { transition: none; } }
.tile .sub .vw { font-size: 11.5px; }
@media (max-width: 900px) {
  .tiles > .tw { flex-basis: 64vw; }
}

/* A CS2 series on now shows the rounds of its map, the maps won in brackets: on the cards, in the
   rows and in the head of the match page. */
.trow b.rs { display: inline-flex; align-items: baseline; gap: 4px; }
.trow b.rs small { font-size: inherit; font-weight: 600; line-height: 1; color: var(--muted); } /* the digits' size (owner 2026-10-09: «чтоб совпадал с основным»), on their baseline; set apart by the colour and the brackets */
.tile .ev .rnd { display: none; }

/* The match cards (probe «tiles» 1, settled 2026-10-14): inside a card the two teams lose their grey plates; the card is one piece,
   the rows stand on its white with a little air, the logo keeps its tile. */
.tile .teams { background: none; padding: 0; gap: 0; }
.tile .trow { background: none; border-radius: 0; padding: 3px 0; }
.tile .trow .mk { background: var(--chip); }
.tile .trow + .trow { margin-top: -2px; }

/* a thin strip filled (strip.go; owner 2026-10-18: «Если нет то карточка турнира и результаты»): a series over says «итог»,
   the main tournament is a card of its own — on now or how soon, the logo and the name, the dates and the prize */
.tiles .tile .tdn { flex: none; font-weight: 600; color: var(--muted); }
.tiles .tile.done .ev > span:not(.tdn) { color: var(--muted); }
.tiles .tile.tev { display: flex; flex-direction: column; gap: 7px; }
.tiles .tile.tev .ev { gap: 6px; justify-content: flex-start; }
.tiles .tile.tev .tev-in { flex: none; font-weight: 600; color: var(--ink2); }
.tiles .tile.tev .tev-b { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tiles .tile.tev .tev-b .logo, .tiles .tile.tev .tev-b .mk { flex: none; width: 34px; height: 34px; margin: 0; border-radius: 8px; }
.tiles .tile.tev .tev-b img.logo { padding: 3px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tiles .tile.tev .tev-b img.logo.dk { background: #23262d; }
.tiles .tile.tev .tev-b b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; line-height: 1.25; }
.tiles .tile.tev .sub { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 11.5px; color: var(--muted); }
.tiles .tile.tev .sub em { font-style: normal; }
.tiles .tile.tev .sub .gb { margin-left: auto; }

/* The main tournament's card in the strip by its state (owner 2026-10-18, of VCT Champions after its final: «Когда турнир
   идет но матчей вживу нет нужно как то по другому. Нет красной точки. Может оранжевый… И этот турнир окончен»): a series
   of it on now — the red beating dot, «идёт»; on, nothing played now — an amber ring standing still and when its next
   series starts, «матч в 19:00»; over — «завершён» grey with the day, the winner with the crown in place of the dates, the
   card sunk as a series over */
.tiles .tile.tev { --idle: #b45f06; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .tiles .tile.tev { --idle: #f2a649; } }
:where(:root[data-theme="dark"]) .tiles .tile.tev { --idle: #f2a649; }
.tiles .tile.tev .tev-on { display: inline-flex; flex: none; align-items: center; gap: 5px; font-weight: 600; color: var(--idle); }
.tiles .tile.tev .tev-on i { flex: none; box-sizing: border-box; width: 8px; height: 8px; border: 2px solid var(--idle); border-radius: 50%; }
.tiles .tile.tev .tev-st { flex: none; font-weight: 600; color: var(--muted); }
.tiles .tile.tev .tev-w { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--ink); }
.tiles .tile.tev .tev-w .crown { flex: none; width: 15px; }
.tiles .tile.tev .tev-w .mk, .tiles .tile.tev .tev-w img.logo { flex: none; width: 18px; height: 18px; margin: 0; border-radius: 4px; }
.tiles .tile.tev .tev-w b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

/* A series over in the strip (owner 2026-10-18: «Завершенные матчи тоже как-то по другому делать может серее карточка?»):
   the card sunk into the page — the ground's tint, a hairline, no shadow —, the loser's name grey, the winner's score
   dark and the loser's grey instead of green and red, the maps played grey; «итог» and the day stay */
.tiles .tile.done { background: color-mix(in srgb, var(--panel) 40%, var(--ground)); border-color: var(--line); box-shadow: none; }
.tiles .tile.done .teams { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.tiles .tile.done .trow b.w { color: var(--ink); }
.tiles .tile.done .trow b.l { color: var(--muted); }
.tiles .tile.done .trow:has(b.l) .nm { color: var(--muted); } /* the name only: the flag and the logo as they are */
.tiles .tile.done .dots i.done { background: var(--muted); opacity: .55; }
/* the strip on a phone compacter (2026-10-19: «сделать компактней верхнюю строку… но вся информация котороя есть сейчас
   остается»): two cards and a half to a screen, the same lines in smaller type */
@media (max-width: 600px) {
  .tiles > .tw { flex-basis: 44vw; min-width: 164px; }
  .tiles .tile { padding: 7px 8px 6px; gap: 3px 0; border-radius: 12px; }
  .tiles .tile .ev { font-size: 11px; gap: 6px; }
  .tiles .tile .trow { font-size: 12.5px; padding: 1px 0; }
  .tiles .tile .trow b { font-size: 14px; }
  .tiles .tile .trow .mk, .tiles .tile .trow img.logo { width: 17px; height: 17px; margin-right: 5px; border-radius: 4px; }
  .tiles .tile .trow .fl { width: 16px; height: 11px; padding: 1.5px; margin-right: 4px; border-radius: 3px; }
  .tiles .tile .sub .dots { height: 16px; }
  .tiles .tile .dots i { width: 6px; height: 6px; }
  .tiles .tile .dots i.now { box-shadow: inset 0 0 0 1.5px var(--acc); } /* the ring as hollow as a computer's: 2 px took two thirds of 6 (owner 2026-10-24) */
  .tiles .tile .sub .gb { width: 15px; height: 15px; margin-right: 5px; border-radius: 3px; }
  .tiles .tile .sub em.d, .tiles .tile .sub .vw, .tiles .tile .sub .tin { font-size: 11px; }
}

/* the strip's cards on a computer closer, as layout 11 has them (owner 2026-10-19, with a picture of the strip: «Сделай
   пока карточки вверху плотнее в основе на ПК. как в Р11»): the event's line and the teams closer, the flags and the logos
   smaller, never shrinking; the bottom as it was — the maps' dots, the skull, the viewers, the pin */
@media (min-width: 901px) {
  .tiles .tile { gap: 4px 0; padding: 7px 10px 5px 9px; }
  .tiles .tile .ev { gap: 6px; font-size: 11.5px; }
  .tiles .tile .sub .gb { width: 15px; height: 15px; margin: 0 6px 0 0; border-radius: 4px; }
  .tiles .tile .trow { gap: 6px; padding: 1px 0; font-size: 13.5px; }
  .tiles .tile .trow + .trow { margin-top: 0; }
  .tiles .tile .trow .fl { flex: none; width: 18px; height: 12px; padding: 1.5px; margin-right: 7px; border-radius: 3px; }
  .tiles .tile .trow .mk, .tiles .tile .trow img.logo { flex: none; width: 18px; height: 18px; margin-right: 7px; border-radius: 4px; }
  .tiles .tile .trow .mk { font-size: 7px; }
  .tiles .tile .trow b { min-width: 18px; font-size: 14.5px; }
  .tiles .tile .trow b.t { font-size: 13px; }
  .tiles .tile .trow em.d { font-size: 11px; }
  .tiles .tile .sub .dots { height: 18px; }
}
/* A story's page and its parts, its author, its sides on a wide screen, the embeds — X's posts, the clips, a
   match's highlights —, the news lists, the teams a story names. */
/* a story's page (the owner, 2026-10-09: «переделай страницу внутри новости, по центру»): one column in the
   middle, the story, its discussion and «Ещё по теме» of one width; the game's mark in the top line */
.col { max-width: 760px; margin: 0 auto; }
.story { padding: 22px 28px 22px; }
.story .crumbs { align-items: center; gap: 8px; }
/* the story's head as the tournament's: back to the news, the game, the time; the source with an arrow out */
.story .ncr { gap: 6px 8px; font-size: 13px; }
.story .ncr .back { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 11px; border-radius: 8px; background: var(--chip); color: var(--ink2); font-weight: 600; }
.story .ncr .back::before { content: ""; width: 5px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.story .ncr .back:hover { background: var(--acc2); color: var(--acc); }
.story .ncr .gp { font-size: 12.5px; color: var(--gi); } /* the game's own colour, as at the tournament; not the links' */
.story .ncr .gp:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--gc) / .45); }
.story .ncr .gp .gb { width: 18px; height: 18px; }
.story .ncr .when { color: var(--muted); }
/* the source at the foot, a plate with an arrow out */
.story .srcl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.story .src .srcp { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 10px; border-radius: 8px; background: var(--chip); color: var(--ink2); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; }
.story .src .srcp i { font-style: normal; font-size: 13px; color: var(--acc); }
.story .src .srcp:hover { background: var(--acc2); color: var(--acc); }
/* the story's author at its foot, on the right of the source (authors.go; owner 2026-10-23): «Автор» grey, the avatar and
   the name a link to the author's page */
.story .nau { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--muted); }
.story .nau a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink2); text-decoration: none; }
.story .nau a:hover { color: var(--acc); }
.story .nau .ava { --s: 22px; }
/* an author's page: the avatar large beside the name, what it is, its stories as «Новости» */
.au .au-h { display: flex; align-items: center; gap: 18px; margin: 14px 0 14px; }
.au .au-h .ava { --s: 88px; }
.au .au-h h1 { margin: 0; }
.au .au-h p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.au .au-ab { max-width: 720px; margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink2); }
.au h2 { margin: 24px 0 4px; }
.au h2 span { font-size: 14px; font-weight: 400; color: var(--muted); }
@media (max-width: 600px) { .au .au-h { gap: 14px; } .au .au-h .ava { --s: 64px; } }
.story .crumbs .gb { margin: 0; width: 18px; height: 18px; border-radius: 4px; }
.story .crumbs .gb + span + span::before { content: "· "; }
.story h1 { font-size: 28px; line-height: 1.2; margin: 8px 0 14px; }
.story .clubs { margin: 0 0 16px; }
.story p { font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.story .ctxm { margin: 0 0 16px; }
.story .embs { display: flex; flex-wrap: wrap; gap: 12px; margin: 2px 0 18px; }
.story .em-m { flex: 1 1 100%; min-width: 0; }
.story .em-m .ml { margin: 0; }
.story .em-x { flex: 1 1 100%; max-width: 560px; margin: 0; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--panel); }
.em-x .xh { display: flex; align-items: flex-start; gap: 10px; }
.em-x .xa { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.em-x .xa img, .em-x .xav { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--chip); }
.em-x .xn { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.em-x .xn b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-x .xn span { font-size: 14px; color: var(--muted); }
.em-x .xa:hover b { text-decoration: underline; }
.em-x .xl { width: 20px; height: 20px; margin-left: auto; flex: none; fill: var(--ink); }
.story .em-x .xt { margin: 10px 0 8px; padding: 0; border: 0; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.em-x .xt a { color: var(--acc); text-decoration: none; }
.em-x .xf { display: flex; gap: 14px; font-size: 13.5px; color: var(--muted); }
.em-x .xf a { color: inherit; text-decoration: none; }
.em-x .xf a:hover { text-decoration: underline; }
.em-x .xtr { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 15.5px; line-height: 1.5; }
.em-x .xtr span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
/* a long post and its translation folded to a few lines, one press unfolding both (EmbedView.Fold; owner 2026-10-23:
   «Нужно как то придумать компактней разворачивать»): the text as written, only folded; without scripts too */
.em-x .xfold { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden; }
.em-x:has(> .x-unf[open]) > .xfold { display: block; -webkit-line-clamp: unset; }
.em-x .x-unf { margin-top: 8px; }
.em-x .x-unf[open] { display: none; }
.em-x .x-unf > summary { min-height: 26px; padding: 2px 10px 2px 11px; font-size: 12.5px; }
.story .em-c { flex: 1 1 100%; max-width: 560px; margin: 0; }
.em-c .cplay, .em-c iframe { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: #0e0e10; cursor: pointer; }
.em-c .cplay img { display: block; width: 100%; height: 100%; object-fit: cover; }
.em-c .cpi { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.em-c .cpi svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.em-c .cplay:hover .cpi, .em-c .cplay:focus-visible .cpi { background: #9146ff; }
.em-y .cplay:hover .cpi, .em-y .cplay:focus-visible .cpi { background: #f00; } /* a club video: YouTube's red */
.em-c .cdur { position: absolute; right: 8px; bottom: 8px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 12px; }
.em-c figcaption { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--muted); }
.em-c figcaption b { font-size: 15px; font-weight: 600; color: var(--ink); }
.em-c figcaption small { font-size: 12px; }
/* the owner's and the moderators' «Скрыть» under a clip of the highlights (clipvet.go) */
.chide button { padding: 0; border: 0; background: none; color: var(--muted); font: 600 12px var(--sans); text-decoration: underline; cursor: pointer; }
.chide button:hover { color: var(--loss); }
/* the match page's highlights (owner 2026-10-11): the clips as stills in one row moved sideways, the one
   played grows wide */
.hls { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; cursor: grab; }
.js .hls { scroll-snap-type: none; } /* the script glides it: a snap fought it in jerks (owner 2026-10-12: «рывками») */
.hls.drag { cursor: grabbing; user-select: none; }
.hls.drag .em-c { pointer-events: none; }
.js .hls { scrollbar-width: none; padding-bottom: 0; } /* our bar under it, as the home page's cards (app.js, cardStrip) */
.js .hls::-webkit-scrollbar { display: none; }
.hls + .tbar { margin-top: 6px; }
.hls .em-c { flex: 0 0 200px; margin: 0; min-width: 0; scroll-snap-align: start; }
.hls .em-c .cplay { border-radius: 10px; }
.hls .em-c .cpi { width: 40px; height: 40px; }
.hls .em-c .cpi svg { width: 18px; height: 18px; margin-left: 3px; }
.hls .em-c .cdur { right: 6px; bottom: 6px; font-size: 11.5px; }
.em-c .clg { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 3px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; font-size: 11px; font-weight: 700; line-height: 14px; text-transform: uppercase; } /* the clip's language */
.em-c .clg .fl { width: 16px; height: 11px; padding: 1px; margin: 0; border-radius: 3px; }
.hls .em-c figcaption { margin-top: 6px; font-size: 12.5px; }
.hls .em-c figcaption b { font-size: 13.5px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.story .src { color: var(--muted); font-size: 13px; line-height: 1.5; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
.story .src p { font-size: 13px; line-height: 1.5; margin: 0 0 4px; }
.col .comments { padding: 18px 28px 20px; }
/* A story's sides on a wide screen: the clubs it names (last results, next series) and the events on
   now on the left; the next series and the latest stories on the right. Narrower, the story alone. */
.art3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 700px) minmax(0, 1fr); gap: 14px; align-items: start; }
.art3 > .col { max-width: none; margin: 0; }
.rail { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; min-width: 0; }
.rail .panel { padding: 14px 14px 12px; }
.rail .tcard { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 7px 8px 7px 7px; }
.rail .tcard .ev { width: 32px; height: 32px; border-radius: 8px; }
.rail .tcard .pz, .rail .tcard .tmeta > span:not(.gb):not(:last-child) { display: none; } /* no prize, no place: the name and the dates */
.rail .tcard .tc b { font-size: 13.5px; }
.tf { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 9px; margin: 0 0 6px; border-radius: 10px; background: var(--chip); }
.tf .tn { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.tf .tn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf .tn .logo { width: 28px; height: 28px; margin: 0; border-radius: 7px; }
.tf .tn .fl { margin: 0 0 0 auto; }
/* the form as dots, as the maps under a score (owner 2026-10-16: «Форму сделай кружками»): won green, lost red, a draw grey */
.tf .frm { display: flex; gap: 5px; }
.tf .frm i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.tf .frm i.w { background: var(--win); }
.tf .frm i.l { background: var(--loss); }
.tf .tfl { display: flex; flex-direction: column; }
.tf .tfl h5 { margin: 4px 0 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tf .fm { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; margin: 0 -6px; border-radius: 7px; font-size: 13px; color: var(--ink); }
.tf .fm:hover { background: var(--panel); color: var(--acc); }
.tf .fm .o { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.tf .fm .o b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf .fm .logo, .tf .fm .mk { width: 18px; height: 18px; margin: 0; padding: 1px; border-radius: 4px; font-size: 7px; }
.tf .fm .t { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tf .fm .sc { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.tf .fm .sc.w { color: var(--win); }
.tf .fm .sc.l { color: var(--loss); }
.rtiles { display: flex; flex-direction: column; gap: 8px; }
/* each match of a side column on its own grey card, as «В новости» (owner 2026-10-11: «сделай на сером, что бы
   визуально отличать матчи а то сливается на просто белом фоне») */
.rtiles .tile { padding: 8px 10px 9px; gap: 4px; box-shadow: none; background: var(--chip); border: 0; border-radius: 10px; }
.rtiles .tile:hover { background: var(--acc2); }
.rtiles .tile .teams { background: none; padding: 0; }
.rtiles .tile .trow { padding-left: 0; padding-right: 0; }
@media (max-width: 1180px) { .art3 { display: block; } .art3 > .col { max-width: 760px; margin: 0 auto; } .rail { display: none; } }
@media (max-width: 600px) { .story, .col .comments { padding: 16px 18px; } .story h1 { font-size: 23px; } }
.story .src a { color: var(--acc); }
/* a story's parts drawn apart from its text (news.RU: Facts, Points, Quote): the key numbers as tiles under the lead,
   a list with its marks — what got better green, what got worse red — and one person's words */
.nfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 20px; }
.nfacts > div { min-width: 0; padding: 10px 12px 11px; border-radius: 12px; background: var(--acc2); }
.nfacts b { display: block; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; color: var(--acc); font-variant-numeric: tabular-nums; }
.nfacts span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; color: var(--ink2); }
.nimg { margin: 4px 0 18px; }
.nimg img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--chip); }
.nimg figcaption { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.nimg figcaption a { color: var(--muted); text-decoration: underline; }
.npts { margin: 4px 0 20px; padding: 13px 15px 14px; border-radius: 12px; background: var(--chip); }
.npts h3 { margin: 0 0 9px; font-size: 14.5px; font-weight: 700; }
.npts ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.npts li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.45; }
.npts li::before { content: "•"; position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; font-size: 14px; font-weight: 800; line-height: 1; background: var(--acc2); color: var(--acc); }
.npts li.up::before { content: "+"; background: color-mix(in srgb, var(--win) 16%, transparent); color: var(--win); }
.npts li.dn::before { content: "−"; background: color-mix(in srgb, var(--loss) 14%, transparent); color: var(--loss); }
@media (max-width: 600px) { /* a phone: the key numbers as lines, the number before its words */
  .nfacts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .nfacts > div { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 9px; }
  .nfacts b { flex: none; max-width: 45%; font-size: 18px; }
  .nfacts span { margin: 0; }
}
.nq { margin: 6px 0 20px; padding: 2px 0 2px 16px; border-left: 3px solid var(--acc); }
.nq p { margin: 0; font-size: 17px; line-height: 1.5; font-style: italic; }
.nq cite { display: block; margin-top: 6px; font-size: 13px; font-style: normal; color: var(--muted); }
/* a player the story names, the first time: the flag and the nickname a link to the player (storyplayers.go) */
.story a.npl { font-weight: 600; color: inherit; text-decoration: none; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acc) 45%, transparent); white-space: nowrap; }
.story a.npl:hover { color: var(--acc); }
.story span.npl { font-weight: 600; white-space: nowrap; }
.story a.npl .fl, .story span.npl .fl { width: 18px; height: 12px; padding: 2px; margin: 0 5px 0 1px; border-radius: 3px; vertical-align: -1px; }

/* a story's clubs and its discussion */
.clubs { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 12px; }
.clubs a, .clubs span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 9px; background: var(--chip); font-size: 13px; font-weight: 600; color: var(--ink2); }
.clubs a:hover { background: var(--acc2); color: var(--acc); }
.clubs span { padding-left: 10px; }
.clubs img.logo { margin: 0; }
.talk { margin: 18px 0 6px; }
@media (max-width: 600px) {
  .story, .col .comments { padding: 14px 12px; }
}

/* A highlight playing over the page (app.js, clipBox; owner 2026-10-12: «после увеличение клипа неочень вид и непонятно
   как обратно сделать»): Twitch's player in the middle on the dimmed page, the clip's name under it, the cross above
   at the right, the arrows at its sides; the same in both themes. */
html.clipbox-on { overflow: hidden; }
.clipbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 64px 76px 40px; background: rgba(10, 12, 16, .86); }
.cb-in { position: relative; width: min(1000px, 100%); }
.cb-v { position: relative; aspect-ratio: 16 / 9; max-height: calc(100vh - 170px); margin: 0 auto; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 12px 48px rgba(0, 0, 0, .55); }
.cb-v iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cb-t { margin: 14px 2px 0; color: #eef0f4; }
.cb-t b { display: block; font-size: 16px; font-weight: 700; }
.cb-t span { display: block; margin-top: 3px; font-size: 13.5px; color: #a3aab6; }
.cb-x, .cb-a { position: absolute; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.cb-x:hover, .cb-a:hover { background: rgba(255, 255, 255, .26); }
.cb-x { top: -50px; right: 0; width: 40px; height: 40px; }
.cb-x::before, .cb-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.cb-x::after { transform: rotate(-45deg); }
.cb-a { top: calc(50% - 46px); width: 48px; height: 48px; }
.cb-a::before { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -6px 0 0 -8px; border: solid currentColor; border-width: 2.5px 2.5px 0 0; transform: rotate(45deg); }
.cb-p { left: -66px; }
.cb-p::before { margin-left: -3px; transform: rotate(-135deg); }
.cb-n { right: -66px; }
@media (max-width: 900px) {
  .clipbox { padding: 60px 12px 24px; }
  .cb-a { top: auto; bottom: -58px; width: 44px; height: 44px; }
  .cb-p { left: auto; right: 54px; }
  .cb-n { right: 0; }
  .cb-t { padding-right: 110px; }
}
.tf .dstf h5 { margin: 4px 0 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.tf .dstf p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.tf .dstf b { font-weight: 700; font-variant-numeric: tabular-nums; }
.tf .dstf .dhero { color: var(--muted); }
/* beside the head (in the side columns, or under the head when they are gone): each team's last series
   as a story's side shows them (.tf), the meetings — their count, then each from its winner's side */
.tf .tn .mk { width: 28px; height: 28px; margin: 0; border-radius: 7px; }

/* News lists (layout.html: «nitem», «nrec», «ndays») — the home page, «Новости», the search, the side columns, a
   tournament's story — as a newspaper (owner 2026-10-18: «Стиль новостей и обсуждений с полосками в основу»; denser,
   lighter, greyer 2026-10-19): each story between two rules running to the panel's edges, a stripe on its left edge in
   the game's colour (a story of all the games: our violet; in a game's view what it is about, below), the headline up to
   four lines, at the right the time and under it the comments, one block in the middle of the line. The day's name over
   its stories. A site's result (.rec) a line of its own, its plate before the headline. Earlier looks — plates
   (2026-10-08), one line a story (2026-10-14) — gone, their rules with them (2026-10-24). */
.nl .nday { margin: 14px 0 0; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.nl .nday:first-child { margin-top: 0; }
.nday::first-letter { text-transform: uppercase; }
/* a story to the panel's edges (its padding: 18px, a phone 10px), the time and comments closer to the right edge */
.nl .ni { --gk: var(--acc); --hn-x: 18px; display: grid; margin: 0 calc(var(--hn-x) * -1); padding: 8px calc(var(--hn-x) - 6px) 8px calc(var(--hn-x) + 6px); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: inset 6px 0 0 color-mix(in srgb, var(--gk) 62%, transparent); color: inherit; }
.nl > .ni:first-child { border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  .nl .ni { --hn-x: 10px; }
}
.rail .nl .ni { --hn-x: 14px; }
.nl .ni[data-g="cs2"] { --gk: rgb(211 139 31); }
.nl .ni[data-g="dota2"] { --gk: rgb(184 53 42); }
.nl .ni[data-g="valorant"] { --gk: rgb(253 69 86); }
.nl .ni:not(.rec) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; grid-auto-flow: row dense; align-content: center; align-items: center; gap: 0 12px; min-height: 38px; }
.nl .ni:not(.rec):not(.ph) { column-gap: 0; }
.nl .ni.rec { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: 0 12px; }
/* the line over a headline: of its game, clubs, organiser only the comments' count shows, under the time */
.nl .ni .meta { display: contents; }
.nl .ni .meta .gb, .nl .ni .meta > span:not(.tm):not(.gb):not(.cm), .nl .ni.rec .tm { display: none; }
.nl .ni .meta .nph { grid-column: 1; grid-row: 1 / 3; width: 40px; height: 40px; }
.nl .ni .meta .nph img { width: 40px; height: 40px; border-radius: 8px; }
.nl .ni .meta .cm { display: inline-flex; align-items: center; gap: 4px; grid-column: 3; grid-row: 2; align-self: start; justify-self: end; margin: 0; font-size: 11.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--muted) 88%, var(--panel)); }
.nl .ni .meta .cm::before { content: ""; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H6l-3 3v-3H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H6l-3 3v-3H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.nl .ni .nb { display: flex; flex-direction: column; min-width: 0; }
.nl .ni:not(.rec) .nb { grid-column: 2; grid-row: 1 / 3; }
.nl .ni:not(.rec):not(.ph) .nb { margin-right: 12px; }
.nl .ni.rec .nb { grid-column: 1; grid-row: 1; }
.nl .ni .nt { font-size: 15px; font-weight: 550; line-height: 1.27; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
.nl .ni:not(.rec) .nt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; white-space: normal; }
.nl .ni.rec .nt { display: block; } /* a line of text with its plate, not the column of the new topic's form that shares the name (.nt) */
.nl .ni .nw { grid-column: 3; grid-row: 1; align-self: end; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.nl .ni:not(.rec) .nw { justify-self: end; line-height: 1.25; }
.nl .ni:not(.rec):not(:has(.cm)) .nw { grid-row: 1 / 3; align-self: center; }
.nl .ni.rec .nw { grid-column: 2; grid-row: 1; align-self: center; }
.nl .ni:hover { background: var(--chip); border-bottom-color: var(--line); }
.nl .ni:hover .nt { color: var(--acc); }

/* The stories pinned atop a list (pins.go; owner 2026-10-26: «найти механизм типа закрепления, выделения для таких
   новостей. На часов 12» — «да нравится»): a card each over the lines, larger, the lead under the headline, the game's
   colour along its left and in its ground; the owner's controls under the story. */
.npin { display: grid; gap: 8px; margin: 4px 0 12px; }
.npin > a { --gk: var(--acc); display: grid; gap: 5px; padding: 12px 14px 13px 20px; border-radius: 12px; background: color-mix(in srgb, var(--gk) 9%, var(--panel)); box-shadow: inset 6px 0 0 var(--gk); color: inherit; }
.npin > a[data-g="cs2"] { --gk: rgb(211 139 31); }
.npin > a[data-g="dota2"] { --gk: rgb(184 53 42); }
.npin > a[data-g="valorant"] { --gk: rgb(253 69 86); }
.npin > a:hover b { color: var(--acc); }
.npin-t { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.npin-t .gb { margin-left: 0; }
.npin b { font-size: 18px; line-height: 1.3; font-weight: 650; }
.npin-s { font-size: 14px; line-height: 1.45; color: var(--ink2); }
.npin-m { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }

/* The news lines' stripe in a game's view (owner 2026-10-18: «Когда меняю игру на все, то линии становятся одного цвета.
   Оставлять так или есть варианты?» — 2026-10-19, of the variant «по смыслу»: «Л2 только вместо серого другой цвет»):
   there it says what a story is about — a match teal (a site's result of a series, or a story naming two clubs:
   FeedItem.Kind), an event blue (a site's result of an event), the rest our violet; «Все игры» keeps the games' colours.
   The home page and «Новости», the views a game switches in place (.gv). */
.gv:not([data-g="all"]) .nl .ni { --gk: var(--acc); }
.gv:not([data-g="all"]) .nl .ni[data-k="match"] { --gk: #12808f; }
.gv:not([data-g="all"]) .nl .ni[data-k="tournament"] { --gk: #3a67b0; }
.gv:not([data-g="all"]) .nl .ni[data-k="move"] { --gk: #3d8a3a; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .gv:not([data-g="all"]) .nl .ni[data-k="match"] { --gk: #4fbdcb; }
  :where(:root:not([data-theme="light"])) .gv:not([data-g="all"]) .nl .ni[data-k="tournament"] { --gk: #7aa5ea; }
  :where(:root:not([data-theme="light"])) .gv:not([data-g="all"]) .nl .ni[data-k="move"] { --gk: #7cc47a; }
}
:where(:root[data-theme="dark"]) .gv:not([data-g="all"]) .nl .ni[data-k="match"] { --gk: #4fbdcb; }
:where(:root[data-theme="dark"]) .gv:not([data-g="all"]) .nl .ni[data-k="tournament"] { --gk: #7aa5ea; }
:where(:root[data-theme="dark"]) .gv:not([data-g="all"]) .nl .ni[data-k="move"] { --gk: #7cc47a; }
/* in a side column (owner 2026-10-20: «сделай новости и обсуждения в нашем стиле с цветными линиями»): to the edges of
   its narrower panel, a discussion's title in two lines at most */
.rail .tli { --tl-x: 14px; }
.rail .tli .tln { padding-block: 7px; }
.rail .tli .tt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; line-height: 1.3; }

/* The teams a story names (storyteams.go; owner 2026-10-19: «Для таких новостей может придумать список и\или таблицу?
   Командам можно давать ссылки и флаг. внизу при упоминании матча можно его вставлять» — «в2 плитки»;
   design/news-teams-2026-10-19): a team in the text its logo before the name as written, a link to its page, only the
   word underlined; the event's participants as tiles — flag, logo, short name —, four in a row, two on a phone; the
   series the text names at the foot as the site's lines under their event, round and day. */
.story a.stm { font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
.story a.stm > span { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acc) 45%, transparent); }
.story a.stm:hover { color: var(--acc); }
.story a.stm img.logo { width: 20px; height: 20px; padding: 1px; margin: 0 5px 0 1px; border-radius: 5px; vertical-align: -4px; }
/* the score of a series the text tells right after a team (storyscores.go; owner 2026-10-28, of the text kept and the
   series under the paragraph: «Делай»): a quiet link to the series, as a team's name is one — the series itself stands
   under the paragraph as a line of matches */
.story a.nsc { font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--acc) 45%, transparent); }
.story a.nsc:hover { color: var(--acc); }
.story .spt, .story .smt { margin: 4px 0 20px; }
.story .spt h3, .story .smt h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.story .spt h3 span { font-size: 13px; font-weight: 500; color: var(--muted); }
.spt-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.spt-c { display: flex; align-items: center; min-width: 0; height: 40px; padding: 0 8px 0 9px; border-radius: 10px; background: var(--chip); font-size: 14px; font-weight: 600; color: var(--ink); }
a.spt-c:hover { background: var(--acc2); color: var(--acc); }
.spt-c .fl { flex: none; width: 18px; height: 12px; padding: 2px; margin: 0 6px 0 0; border-radius: 3px; }
.spt-c img.logo, .spt-c .mk { flex: none; width: 24px; height: 24px; margin: 0 8px 0 0; }
.spt-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story .smt { margin-top: 18px; }
.story .smt .evh { margin: 10px 0 6px; }
.story .smt h3 + .evh { margin-top: 0; }
.story .smt .embs { gap: 4px; margin: 0 0 4px; }
@media (max-width: 600px) { .spt-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* X's own card of a post, on the reader's press (owner 2026-10-21: «у многих есть ВПН можно заглушку у кого нет»;
   news.html, app.js): a quiet grey plate under our card; X's card takes its place once it has come, ours stays when
   it has not, with a word under the plate. Without scripts the plate is not there. */
.em-x .xsh { margin: 10px 0 0; }
html:not(.js) .em-x .xsh { display: none; }
.em-x .xshow { padding: 5px 11px; border: 0; border-radius: 8px; background: var(--chip); color: var(--ink2); font: 600 13px var(--sans); cursor: pointer; }
.em-x .xshow:hover { color: var(--acc); }
.em-x .xshow:disabled { cursor: default; color: var(--muted); }
.em-x .xfail { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.em-x .xemb { display: block; width: 100%; max-width: 550px; height: 0; border: 0; color-scheme: normal; }
.em-x.xon > .xh, .em-x.xon > .xt, .em-x.xon > .xf { display: none; }
.story .em-x.xon { padding: 0; border: 0; background: none; } /* X's card has its own frame */
.story .em-x.xon .xtr { padding: 0 2px; }
/* A match's page: the head, the maps, the tables, the streams, a CS2 map's course and its breakdown, a Dota 2
   game's radar and log, a series still to come. */
/* match page */
/* a match's page, in the look of the lines and cards: the teams on white tiles with their flags,
   the score in the site's font (the winner green, the loser red, a series on now red), the maps as
   grey plates with who took each, the streams as plates that open elsewhere */
.mp .crumbs { align-items: center; }
.mp .crumbs .gb { margin: 0; width: 18px; height: 18px; border-radius: 4px; }
.mp .face { display: grid; grid-template-columns: minmax(104px, 1fr) auto minmax(104px, 1fr); align-items: start; gap: 16px; margin: 18px 0 14px; } /* the sides as wide as their tiles at least: the state under the score wraps instead */
.mp .side { display: flex; flex-direction: column; align-items: center; gap: 10px; justify-self: center; max-width: 100%; font-size: 20px; text-align: center; min-width: 0; color: inherit; } /* the link as wide as the logo and the name, not the whole column */
.mp .side:hover { color: var(--acc); }
/* the logo's tile: .lt, for «.tile» is a series' card, whose padding and shadow had pushed the logo off
   centre (owner 2026-10-08: «логотипы на подложке кривоваты») */
.mp .side .lt { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; background: var(--chip); }
.mp .side .logo, .mp .side .mk { width: 72px; height: 72px; border-radius: 16px; font-size: 16px; margin: 0; }
.mp .side img.logo { padding: 6px; }
.mp .side b { font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.mp .side .fl { margin: 0; }
.mp .score { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 14px; }
/* over the time: how long till the start, ticking (owner 2026-10-16: «А сделай выше времени плашку фиолетовую с отчетом
   до начала матча»; once over «матч окончен» under the score says it — «Хотя то что матч окончен у нас уже пишется»; then
   «И плашку выше и фиолетовый мягче»; then «сделай эту надпись на странице матча серой»): grey, the chips' ground */
.mp .mp-cd { margin-bottom: 4px; padding: 4px 12px; border-radius: 999px; background: var(--chip); color: var(--ink2); font-size: 13px; font-weight: 700; line-height: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp .mp-cd:empty { display: none; }
.mp .score .nums { display: flex; align-items: center; gap: 8px; font-size: 60px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mp .score .nums i { font-style: normal; font-weight: 600; color: var(--muted); font-size: 40px; margin-top: -6px; }
.mp .score b.w { color: var(--win); }
.mp .score b.l { color: var(--loss); }

.mp .score b.t { font-size: 44px; color: var(--ink); }
.mp .status { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.mp .status::first-letter { text-transform: uppercase; }
.mp .score .sub { display: flex; align-items: center; gap: 8px; min-height: 16px; }
.mp .score .dots i { width: 10px; height: 10px; }
.mp .mr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--chip); font-size: 14px; }
.mp .mr .n { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.mp .mr .mn { font-weight: 600; }
.mp .mr .mw { display: inline-flex; align-items: center; gap: 0; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mp .mr.done .mw { color: var(--ink); }
.mp .mr .mw .logo, .mp .mr .mw .mk { width: 20px; height: 20px; margin-right: 6px; }
.mp .mr.now { box-shadow: inset 3px 0 0 var(--live); }
/* line-ups: big photos, cut to a 4:5 frame around the face */
.rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.roster .rh { display: inline-flex; align-items: center; gap: 0; font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.roster .rh .fl { margin: 0 0 0 8px; }
.pl .cn { display: flex; align-items: center; gap: 5px; }
.pl .cn .fl { width: 14px; height: 10px; padding: 1px; margin: 0; border-radius: 3px; }
.pl { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pl .ph { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: linear-gradient(180deg, var(--chip), var(--ground)); margin-bottom: 7px; }
.pl .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; transition: transform .2s ease; }
.pl:hover .ph img { transform: scale(1.04); }
.pl .ph svg { width: 100%; height: 100%; display: block; fill: var(--line); padding: 22% 16% 0; }
.pl b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl > span:not(.ph) { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .pl .ph img { transition: none; } }
/* streams of a match: plates that open the stream elsewhere (the arrow says so) */
.stl { display: flex; flex-direction: column; gap: 4px; }
.stl a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--chip); min-width: 0; color: var(--ink); }
.stl a:hover { background: var(--acc2); color: var(--acc); }
.stl b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.stl em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--acc); background: var(--acc2); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.stl .ext { margin-left: auto; }
/* The platform of a broadcast by its icon (owner 2026-10-12: «добавь к трансляциям значок платформы и флаг»); a plain one for another site. */
.plat { display: inline-block; flex: none; width: 18px; height: 18px; border-radius: 6px; background: var(--plat) center / 100% 100% no-repeat; } /* not .pf: that is the prediction form */
.plat-twitch { --plat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%239146FF'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M7.4 4.8 6 8.2v10h3.6V21h2.1l2.8-2.8h3.2L20 15V4.8zm1.3 1.6h9.7v8l-2 2h-3.3l-2.6 2.6v-2.6H8.7zm3.4 2.4h1.5v4.3h-1.5zm3.6 0h1.5v4.3h-1.5z'/%3E%3C/svg%3E"); }
.plat-youtube { --plat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%23FF0033'/%3E%3Cpath fill='%23fff' d='M9.6 7.6v8.8l7.4-4.4z'/%3E%3C/svg%3E"); }
.plat-kick { --plat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%2353FC18'/%3E%3Cpath fill='%230b0e0f' d='M6 5h4v4h2V7h2V5h4v5h-2v1h-2v2h2v1h2v5h-4v-2h-2v-2h-2v4H6z'/%3E%3C/svg%3E"); }
.plat-vk { --plat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%230077FF'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round' d='M9.8 8.1v7.8l6.5-3.9z'/%3E%3C/svg%3E"); }
.plat-tv { --plat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' rx='6' fill='%238b909a'/%3E%3Ccircle cx='12' cy='12' r='1.9' fill='%23fff'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' d='M8.6 8.6a4.8 4.8 0 0 0 0 6.8m6.8-6.8a4.8 4.8 0 0 1 0 6.8M6.2 6.2a8.2 8.2 0 0 0 0 11.6m11.6-11.6a8.2 8.2 0 0 1 0 11.6'/%3E%3C/svg%3E"); }
.stl .fl { margin-right: 0; width: 21px; height: 14px; padding: 2px; border-radius: 4px; }
/* streams past the fifth under «Ещё N трансляций» (owner 2026-10-12) */
.stmore a { margin-top: 4px; }
.stmore > summary { margin-top: 6px; }
/* opened, the same place folds it again (owner 2026-10-16: «список трансляций можно не только развернуть но и свернуть») */
.stmore summary span { color: inherit; font-size: inherit; white-space: normal; } /* not the list's grey .stl span */
.stmore .st-close, .stmore[open] .st-open { display: none; }
.stmore[open] .st-close { display: inline; }
.stmore[open] summary { margin-bottom: 0; }
/* how many watch a Twitch channel now, a person's outline before the number (not an eye: owner 2026-10-12, «не очень
   комфортно когда глазик так смотрит»): the match's streams and its card */
.vw { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.vw::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM4 20.5c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5z' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM4 20.5c0-4 3.6-6.5 8-6.5s8 2.5 8 6.5z' fill='%23000' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 900px) {
  .mp .face { gap: 8px; grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr); }
  .mp .side { font-size: 15px; gap: 8px; }
  .mp .side .lt { width: 64px; height: 64px; border-radius: 16px; }
  .mp .side .logo, .mp .side .mk { width: 48px; height: 48px; border-radius: 10px; font-size: 13px; }
  .mp .score .nums { font-size: 40px; }
  .mp .score .nums i { font-size: 28px; }
  .mp .score b.t { font-size: 30px; }
}
.mp .talk { text-align: center; margin: 16px 0 6px; }
.mp .score .sers { margin: -2px 0 0; font-size: 16px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The match page under the head: the maps as plates (number, who picked it, name, score, winner;
   the map on now framed in red with its round), then the teams one under the other — the flag, the
   nick, the real name, the statistics; on a CS2 map on now the health, weapon, helmet and money. */
/* The maps as tabs in one strip, like the site's other tab bars (owner's choice of probe «mcards» 1):
   a map's name and its score side by side; a map with the players' numbers behind it is a button — a
   light plate with a hairline, white under the pointer, the one shown raised in white; a map to come
   is plain quiet text; the map on now has a red dot. */
.mp .mcards { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: var(--chip); }
.mp .mc { display: flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 8px; min-width: max-content; padding: 9px 10px; border-radius: 10px; text-align: center; white-space: nowrap; color: var(--muted); } /* even widths in a row; a plate never cut, a row too narrow goes on below */
/* a series of five (owner 2026-10-13: «Да сделать» — «Все к…», «Infer…» cut): six plates smaller, «Все» alone, a Dota
   game without its time, so they keep one row */
@media (min-width: 701px) {
	.mp .mcards:has(> .mc:nth-child(6)) .mc { gap: 6px; padding: 9px 8px; }
	.mp .mcards:has(> .mc:nth-child(6)) .mcm, .mp .mcards:has(> .mc:nth-child(6)) .mcs { font-size: 14px; }
	.mp .mcards:has(> .mc:nth-child(6)) .mca, .mp .mcards:has(> .mc:nth-child(6)) .mc .mcd { display: none; }
}
.mp .mc .mcn, .mp .mc .mcw { display: none; }
.mp .mcm { font-size: 15px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mp .mcq { font-size: 17px; font-weight: 800; color: var(--muted); opacity: .6; }
.mp .mcs { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink2); }
.mp .mcs i { margin: 0 1px; font-style: normal; font-weight: 600; color: var(--muted); }
.mp .mcs b.w { color: var(--win); }
.mp .mcs b.l { color: var(--loss); }
.mp .mc.done .mcm, .mp .mc.now .mcm, .mp .mc.all .mcm { color: var(--ink); }
/* a CS2 series' maps by half and side under the plates (cs2halves.go; owner 2026-10-25, Cito blind): CT and T named
   once in their colours, then each map with its halves, each team's rounds in its side's colour, overtime summed */
.mp .mch { --ctx: #2b5db8; --ttx: #9a6411; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: -6px 0 14px; padding: 0 6px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .mp .mch { --ctx: #86abf2; --ttx: #e6b25c; } }
:where(:root[data-theme="dark"]) .mp .mch { --ctx: #86abf2; --ttx: #e6b25c; }
.mp .mch i { font-style: normal; font-weight: 700; }
.mp .mch .ct { color: var(--ctx); }
.mp .mch .t { color: var(--ttx); }
.mp .mch b { font-weight: 600; color: var(--ink2); }
.mp .mch-k { display: inline-flex; gap: 6px; font-size: 12px; }
/* a CS2 series' veto under the plates (cs2veto.go; owner 2026-11-01): each map in order with what was done with it,
   the bans pale — as the line of the halves */
.mp .mvo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: -6px 0 14px; padding: 0 6px; font-size: 13px; color: var(--muted); }
.mp .mvo-k { font-size: 12px; }
.mp .mvo b { font-weight: 600; color: var(--ink2); }
.mp .mvo-b b { font-weight: 400; color: var(--muted); }
.mp .mc.now .mcm::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--live); vertical-align: 2px; }
/* every plate is a plate to press, a map still to come too (owner: «можно было кликнуть, просто
   ничего бы не происходило»): the same ground, frame and hover; only those with numbers switch. */
.mp .mc { cursor: pointer; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--line); transition: background .12s, transform .08s; }
.mp .mc:hover { background: var(--panel); }
.mp .mc:active { transform: translateY(1px); }
.mp .mc[aria-pressed="true"] { background: var(--panel); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 3px 10px rgba(16, 24, 40, .07); }
.mp .mc[aria-pressed="true"] .mcm { color: var(--acc); }
.mp .mc[data-k]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
	:where(:root:not([data-theme="light"])) .mp .mc { background: rgba(255, 255, 255, .04); }
	:where(:root:not([data-theme="light"])) .mp .mc:hover, :where(:root:not([data-theme="light"])) .mp .mc[aria-pressed="true"] { background: #383d49; box-shadow: none; }
}
:where(:root[data-theme="dark"]) .mp .mc { background: rgba(255, 255, 255, .04); }
:where(:root[data-theme="dark"]) .mp .mc:hover, :where(:root[data-theme="dark"]) .mp .mc[aria-pressed="true"] { background: #383d49; box-shadow: none; }
.mp .sd { display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 4px; color: #fff; background: var(--muted); }
.mp .sd.ct { background: #3f6fc4; }
.mp .sd.t { background: #c98a2e; }
.mp .tb { margin: 0 0 12px; padding: 12px 14px 6px; border-radius: 14px; background: var(--chip); }
.mp .tbh { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; }
.mp .tbh a { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; color: var(--ink); }
.mp .tbh a b { font-weight: 800; letter-spacing: -.01em; }
.mp .tbh a:hover { color: var(--acc); }
.mp .tbh .logo, .mp .tbh .mk { width: 28px; height: 28px; margin: 0; }
.mp .tbh .fl { margin: 0; }
.mp .tbm { margin-left: auto; display: flex; gap: 6px; }
.mp .chip { display: inline-flex; align-items: baseline; gap: 3px; padding: 4px 10px; border-radius: 999px; background: var(--panel); font-size: 13px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp .chip i { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); }
.mp .chip b { font-weight: 800; color: var(--ink); }
.mp .chip.mn { color: var(--win); }
.mp .chip.mn i { color: var(--win); opacity: .7; }
/* the table: small capitals over the columns, the numbers set by weight — kills strongest */
.mp .tbt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* the team's coach under its players (owner 2026-10-11) */
.mp .tco { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 8px 0; font-size: 13px; color: var(--muted); }
.mp .tco .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mp .tco .pc { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.mp .tco .fl { margin: 0; }
.mp .tco a, .mp .tco b { font-weight: 700; color: var(--ink); }
.mp .tco a:hover { color: var(--acc); }
.mp .tco small { font-size: 12px; color: var(--muted); }
.mp .tbt th { padding: 6px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: right; white-space: nowrap; }
.mp .tbt th.p, .mp .tbt th.w, .mp .tbt th.r, .mp .tbt th.hp { text-align: left; }
.mp .tbt th.kda, .mp .tbt th.pm { text-align: center; }
.mp .tbt td { padding: 8px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; font-size: 14px; color: var(--ink2); }
@media (min-width: 601px) { .mp .tbt td { padding-top: 5px; padding-bottom: 5px; } } /* denser on a computer (owner 2026-10-12: «чуть плотнее по вертикале (на ПК)») */
.mp .tbt th .hsi { width: 16px; height: 16px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; } /* the headshot's mark */
.mp .tbt th .hsi .d { fill: currentColor; stroke: none; }
.mp .tbt td.p { width: 34%; max-width: 0; text-align: left; }
.mp .tbt td.r { text-align: left; }
.mp .tbt .pc { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp .tbt .fl { flex: none; margin: 0; }
.mp .tbt .fl.nf { visibility: hidden; }
.mp .tbt .pn { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mp .tbt .pn a, .mp .tbt .pn b { font-size: 14.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.mp .tbt .pn a:hover { color: var(--acc); }
.mp .tbt .pn small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mp .tbt .pn .wm { display: none; }
.mp .tbt td.hp { text-align: left; }
.mp .tbt .hpb { display: inline-flex; align-items: center; gap: 7px; }
.mp .tbt .hpb .hl { display: block; width: 46px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.mp .tbt .hpb .hl i { display: block; height: 100%; border-radius: 3px; background: var(--win); }
.mp .tbt .hpb .hl i.mid { background: #d99a2b; }
.mp .tbt .hpb .hl i.low { background: var(--loss); }
.mp .tbt .hpb em { min-width: 24px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--ink2); text-align: right; }
.mp .tbt .eq { display: inline-block; width: 14px; height: 14px; background: var(--ink2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 2.2v4.3c0 3.6-2.6 6.2-6 7.5-3.4-1.3-6-3.9-6-7.5V3.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l6 2.2v4.3c0 3.6-2.6 6.2-6 7.5-3.4-1.3-6-3.9-6-7.5V3.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mp .tbt .eq.none { visibility: hidden; }
.mp .tbt .skull { display: block; width: 16px; height: 16px; margin-left: 2px; background: var(--muted); -webkit-mask: url(/static/marks/dead.svg) center / contain no-repeat; mask: url(/static/marks/dead.svg) center / contain no-repeat; }
.mp .tbt .pc .dk { display: none; } /* a phone has no health column: the skull stands in for the flag */
.mp .tbt td.kda { text-align: center; }
.mp .tbt td.kda b { font-size: 15px; font-weight: 800; color: var(--ink); }
.mp .tbt td.kda span { font-weight: 600; color: var(--ink2); }
.mp .tbt td.kda .a { font-weight: 500; color: var(--muted); }
.mp .tbt td.kda i { margin: 0 5px; font-style: normal; color: var(--muted); opacity: .6; }
.mp .tbt td.pm { text-align: center; }
.mp .tbt .pmv { display: inline-block; min-width: 36px; padding: 2px 7px; border-radius: 7px; background: var(--panel); font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center; }
.mp .tbt .pmv.pos { background: rgba(22, 136, 74, .13); color: var(--win); }
.mp .tbt .pmv.neg { background: rgba(210, 59, 59, .12); color: var(--loss); }
.mp .tbt td.adr b { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.mp .tbt .adrb { display: block; width: 40px; height: 3px; margin: 3px 0 0 auto; border-radius: 2px; background: var(--line); overflow: hidden; }
.mp .tbt .adrb i { display: block; height: 100%; background: var(--acc); opacity: .55; }
.mp .tbt td.hs b { font-weight: 700; color: var(--ink); }
.mp .tbt td.hs i, .mp .tbt td.mn i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted); }
.mp .tbt td.hs .na { color: var(--muted); }
.mp .vtt td.p { width: 30%; } /* Valorant (valorant.go): the combat score, first kills – first deaths */
.mp .vtt td.acs b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.mp .vtt td.fk b { font-weight: 700; color: var(--ink); }
.mp .vtt td.fk i { margin: 0 3px; font-style: normal; color: var(--muted); opacity: .6; }
.mp .vtt td.fk span { color: var(--ink2); }
.mp .tbt td.w { text-align: left; }
.mp .tbt .wp { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--panel); color: var(--ink2); }
.mp .tbt td.mn { font-weight: 700; color: var(--win); }
.mp .tbt td.mn i { margin-right: 1px; color: var(--win); opacity: .7; }
.mp .tbt tr.dead td, .mp .tbt tr.dead .pn a, .mp .tbt tr.dead .pn b, .mp .tbt tr.dead td.kda b, .mp .tbt tr.dead td.kda span, .mp .tbt tr.dead td.adr b, .mp .tbt tr.dead td.mn, .mp .tbt tr.dead td.mn i { color: var(--muted); }
.mp .tbt tr.dead .fl { opacity: .45; }
.mp .tbt tr.dead .pmv { background: none; color: var(--muted); }
.mp .src { margin: 4px 0 0; }
@media (max-width: 700px) {
	.mp .mcards { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mp .mc { min-width: 0; }
	.mp .tb { padding: 8px 8px 2px; }
	.mp .tbh { flex-wrap: wrap; row-gap: 2px; }
	.mp .dt .tbm { flex-basis: calc(100% - 36px); margin: 2px 0 4px 36px; } /* the whole line less the indent: 100% and the margin rode 9 px past the phone (the launch audit of 2026-10-17) */
	.mp .tb:not(.dt) .tbh { flex-wrap: nowrap; } /* CS2: the team's money on the name's line, a long name cut short */
	.mp .tb:not(.dt) .tbh a { min-width: 0; }
	.mp .tb:not(.dt) .tbh a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.mp .tbh .sd, .mp .tbm { flex: none; }
	.mp .tbt { font-size: 13px; }
	.mp .tbt th, .mp .tbt td { padding: 6px 4px; }
	.mp .tbt th.pm, .mp .tbt td.pm, .mp .tbt th.w, .mp .tbt td.w, .mp .tbt th.hp, .mp .tbt td.hp { display: none; }
	.mp .tbt th { font-size: 9.5px; letter-spacing: .04em; }
	.mp .tbt td.kda i { margin: 0 3px; }
	.mp .tbm .chip { padding: 3px 8px; font-size: 12px; }
	.mp .tbt td.p { width: 46%; }
	.mp .tbt .pc { gap: 6px; }
	.mp .tbt .pn small:not(.wm, .ag) { display: none; }
	.mp .vtt th.hs, .mp .vtt td.hs, .mp .vtt th.fk, .mp .vtt td.fk { display: none; } /* Valorant on a phone: the score, the kills, the damage */
	.mp .tbt .pn .wm { display: block; }
	.mp .tbt tr.dead .pc .fl { display: none; }
	.mp .tbt .pc .dk { display: block; flex: none; width: 30px; height: 18px; margin: 0; }
}
/* The match page on a wide screen: the column narrower, the event and its series on the left, the
   streams and the series on now elsewhere on the right; the same lists under the head when narrower. */
.mpg { grid-template-columns: minmax(0, 1fr) minmax(0, 740px) minmax(0, 1fr); }
.mpg .col > .mp { margin-top: 14px; }
.mpg .narrow, .mpg .stn { display: none; }
@media (max-width: 1180px) { .mpg .narrow, .mpg .stn { display: block; } }
.mpg .rail .stl a { flex-wrap: wrap; row-gap: 2px; }
.mpg .rail .stl b { white-space: normal; }
.mpg .rail .stl b { flex: 1 1 calc(100% - 80px); } /* the name fills the first line, the arrow stays on it; the rest goes under */
.mpg .rail .stl .ext { order: 1; }
.mpg .rail .stl em, .mpg .rail .stl span { order: 2; }
.mpg .rail .tile .ev > span:not(.lvt):not(.rnd) { display: none; } /* the event is the page's own: the caption keeps the live mark and the round */
.mpg .rail .tile .ev .rnd { display: inline; overflow: hidden; text-overflow: ellipsis; }
.rel .relh { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.rel .rtiles + .relh { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mpg .rail .h2r .tile .ev > span:not(.lvt) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the two teams' past series: each its own event */
/* The weapons as our own drawings (static/weapons), all of one colour; the name on hover. */
.wi { display: inline-block; width: 44px; height: 14px; vertical-align: middle; background: var(--ink2); -webkit-mask: var(--wi) center / contain no-repeat; mask: var(--wi) center / contain no-repeat; }
.w-ak { --wi: url(/static/weapons/ak.svg); } .w-m4 { --wi: url(/static/weapons/m4.svg); } .w-rifle { --wi: url(/static/weapons/rifle.svg); }
.w-awp { --wi: url(/static/weapons/awp.svg); } .w-scout { --wi: url(/static/weapons/scout.svg); } .w-auto { --wi: url(/static/weapons/auto.svg); }
.w-deagle { --wi: url(/static/weapons/deagle.svg); width: 30px; } .w-pistol { --wi: url(/static/weapons/pistol.svg); width: 30px; } .w-smg { --wi: url(/static/weapons/smg.svg); }
.w-shotgun { --wi: url(/static/weapons/shotgun.svg); } .w-mg { --wi: url(/static/weapons/mg.svg); } .w-knife { --wi: url(/static/weapons/knife.svg); width: 34px; }
.w-nade { --wi: url(/static/weapons/nade.svg); width: 18px; } .w-c4 { --wi: url(/static/weapons/c4.svg); width: 22px; }
.mp .tbt td.w .wi { width: 48px; height: 16px; }
.mp .tbt td.w .wi:is(.w-pistol, .w-deagle) { width: 34px; } /* a Deagle a pistol's size, a little larger by its drawing (owner 2026-10-16: «Это пистолет? Непропорционально большой») */
.mp .tbt td.w .wi.w-knife { width: 38px; }
/* Widths of bars in steps of 5 % (health, damage, the rounds' share): classes, as the page's CSP allows no inline styles. */
.pw0 { width: 0%; } .pw5 { width: 5%; } .pw10 { width: 10%; } .pw15 { width: 15%; } .pw20 { width: 20%; } .pw25 { width: 25%; } .pw30 { width: 30%; } .pw35 { width: 35%; } .pw40 { width: 40%; } .pw45 { width: 45%; } .pw50 { width: 50%; } .pw55 { width: 55%; } .pw60 { width: 60%; } .pw65 { width: 65%; } .pw70 { width: 70%; } .pw75 { width: 75%; } .pw80 { width: 80%; } .pw85 { width: 85%; } .pw90 { width: 90%; } .pw95 { width: 95%; } .pw100 { width: 100%; }
/* Dota 2 on the match page: the sides in the game's own colours, the hero under the nick, the worth
   with a gold bar, a dead hero greyed with a skull before the hero, the bans in small capitals. */
.mp .sd.rad { background: #3f8f3a; }
.mp .sd.dire { background: #b3413a; }
.mp .sers.dn { font-size: 13px; font-weight: 600; color: var(--ink2); }
.mp .mc .mcx { display: inline-flex; }
.mp .mc .mcd { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mp .mc .mcx .logo, .mp .mc .mcx .mk { width: 18px; height: 18px; margin: 0; border-radius: 4px; font-size: 7px; }
.mp .dtt th.lv, .mp .dtt td.lv { text-align: center; }
.mp .dtt td.lv { font-weight: 700; color: var(--ink2); }
.mp .dtt td.lh, .mp .dtt td.gx { color: var(--muted); }
.mp .dtt td.lh b, .mp .dtt td.gx b, .mp .dtt td.nw b, .mp .dtt td.hdm b { font-weight: 700; color: var(--ink); }
.mp .dtt th.hdm, .mp .dtt td.hdm { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } /* the damage to heroes (dota.go) */
.mp .dtt td.lh i, .mp .dtt td.gx i { margin: 0 3px; font-style: normal; opacity: .6; }
.mp .dtt td.nw .adrb i { background: #c99a1e; opacity: .75; }
.mp .dtt .pn small.hr { font-size: 12px; font-weight: 600; color: var(--ink2); }
.mp .dtt .pn small.hr .skull { display: inline-block; width: 12px; height: 12px; margin: 0 4px -2px 0; }
.mp .dtt tr.dead .pn small.hr, .mp .dtt tr.dead td.lv, .mp .dtt tr.dead td.lh b, .mp .dtt tr.dead td.gx b, .mp .dtt tr.dead td.nw b, .mp .dtt tr.dead td.hdm b { color: var(--muted); }
.mp .dt .bans { margin: 4px 2px 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.mp .dt .bans em { margin-right: 6px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
/* The radar of a Dota 2 game on now (radar.go, m-radar; owner 2026-10-17: «Сделай для дота радар карту»): our own ground —
   terrain.png where heroes go at all, paths.png how much (design/radar/gen.py) — tinted through masks in either theme,
   the halves warmed by their sides; buildings as small squares (gone ones hollow), heroes as dots with two letters, the
   dead faded. Beside it on a wide screen, under it on a phone, the legend of the letters. */
.mp .rdr { --rdr-ground: #d3dccf; --rdr-land: #eef2eb; --rdr-path: #93a68d; --rdr-rad: #2f7d2b; --rdr-dire: #b3413a; --rdr-ink: #fff;
  --rdr-river: #7fb1dd; --rdr-lane: #fbf6e3; --rdr-rosh: #7a4fd6; --rdr-sun: #d39a12; --rdr-moon: #5d6ea8;
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; margin: 4px 0 14px; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .mp .rdr { --rdr-ground: #0c1016; --rdr-land: #18202a; --rdr-path: #44586d; --rdr-rad: #4fae49; --rdr-dire: #d9574f; --rdr-ink: #0e1116; --rdr-river: #2c5d8c; --rdr-lane: #8b9aac; --rdr-rosh: #9b7bff; --rdr-sun: #f2c14e; --rdr-moon: #9fb0e8; } }
:where(:root[data-theme="dark"]) .mp .rdr { --rdr-ground: #0c1016; --rdr-land: #18202a; --rdr-path: #44586d; --rdr-rad: #4fae49; --rdr-dire: #d9574f; --rdr-ink: #0e1116; --rdr-river: #2c5d8c; --rdr-lane: #8b9aac; --rdr-rosh: #9b7bff; --rdr-sun: #f2c14e; --rdr-moon: #9fb0e8; }
.mp .rdr-w { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(45deg, color-mix(in srgb, var(--rdr-rad) 14%, var(--rdr-ground)), var(--rdr-ground) 50%, color-mix(in srgb, var(--rdr-dire) 14%, var(--rdr-ground))); }
.mp .rdr-w::before, .mp .rdr-w::after { content: ""; position: absolute; inset: 0; -webkit-mask: url(dota/terrain.png) center / 100% 100% no-repeat; mask: url(dota/terrain.png) center / 100% 100% no-repeat; background: var(--rdr-land); }
.mp .rdr-w::after { -webkit-mask-image: url(dota/paths.png); mask-image: url(dota/paths.png); background: var(--rdr-path); }
.mp .rdr-w svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.mp .rdr-base { stroke: none; opacity: .16; }
.mp .rdr-base.rad { fill: var(--rdr-rad); }
.mp .rdr-base.dire { fill: var(--rdr-dire); }
.mp .rdr-river { fill: none; stroke: var(--rdr-river); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; opacity: .45; }
.mp .rdr-lane { fill: none; stroke: var(--rdr-lane); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.mp .rdr-pit { fill: none; stroke: var(--rdr-lane); stroke-width: .45; stroke-dasharray: .8 .6; opacity: .8; }
/* buildings: a tower a little house, barracks a bar, the Ancient a hexagon — filled in the side's colour with an edge,
   a ruin hollow, faded and struck through */
.mp .rdr-tw path, .mp .rdr-tw rect { stroke: var(--rdr-ink); stroke-width: .4; stroke-linejoin: round; }
.mp .rdr-tw.rad path, .mp .rdr-tw.rad rect { fill: var(--rdr-rad); }
.mp .rdr-tw.dire path, .mp .rdr-tw.dire rect { fill: var(--rdr-dire); }
.mp .rdr-tw.a path { stroke-width: .55; }
.mp .rdr-tw.down path, .mp .rdr-tw.down rect { fill: none; stroke-width: .35; opacity: .55; }
.mp .rdr-tw.rad.down path, .mp .rdr-tw.rad.down rect { stroke: var(--rdr-rad); }
.mp .rdr-tw.dire.down path, .mp .rdr-tw.dire.down rect { stroke: var(--rdr-dire); }
.mp .rdr-tw.down path.rdr-x { fill: none; stroke: var(--muted); stroke-width: .45; opacity: .9; stroke-linecap: round; }
/* Roshan in the pit of the day or of the night: a purple R, faded with the timer under it while he is down */
.mp .rdr-rosh circle { fill: var(--rdr-rosh); stroke: var(--rdr-ink); stroke-width: .5; }
.mp .rdr-rosh text { font: 700 2.5px var(--sans); text-anchor: middle; fill: #fff; }
.mp .rdr-rosh.dead circle { fill: var(--muted); opacity: .55; }
.mp .rdr-rosh .rdr-rt { font: 700 2.4px var(--sans); fill: var(--ink); paint-order: stroke; stroke: var(--rdr-land); stroke-width: .6; font-variant-numeric: tabular-nums; }
.mp .rdr-h circle { stroke: var(--rdr-ink); stroke-width: .55; }
.mp .rdr-h.rad circle { fill: var(--rdr-rad); }
.mp .rdr-h.dire circle { fill: var(--rdr-dire); }
.mp .rdr-h text { font: 700 2.7px var(--sans); text-anchor: middle; fill: #fff; letter-spacing: -.02em; pointer-events: none; }
.mp .rdr-h.dead { opacity: .4; }
.mp .rdr-h.dead circle { fill: var(--muted); }
.mp .rdr-lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 6px 18px;
  align-content: start; min-width: 0; height: 100%; max-height: 340px; }
.mp .rdr-k { min-width: 0; }
.mp .rdr-k > b { display: flex; align-items: center; gap: 6px; font-size: 13.5px; margin-bottom: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp .rdr-k ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.mp .rdr-k li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.mp .rdr-k li.dead { color: var(--muted); }
.mp .rdr-t { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.mp .rdr-t.rad { background: var(--rdr-rad); }
.mp .rdr-t.dire { background: var(--rdr-dire); }
.mp .rdr-k li.dead .rdr-t { background: var(--muted); }
.mp .rdr-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp .rdr-n small { margin-left: 6px; color: var(--muted); font-size: 12px; }
.mp .rdr-k em { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.mp .rdr-c { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; color: var(--muted); }
/* the day or the night and Roshan, over the legend */
.mp .rdr-i { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; font-size: 12.5px; color: var(--ink2); }
.mp .rdr-i > span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border-radius: 999px; background: var(--chip); }
.mp .rdr-i b { font-variant-numeric: tabular-nums; }
.mp .rdr-day i { width: 16px; height: 16px; border-radius: 50%; background: var(--rdr-sun); box-shadow: 0 0 0 2px color-mix(in srgb, var(--rdr-sun) 35%, transparent); }
.mp .rdr-day.night i { background: transparent; box-shadow: inset -5px -3px 0 0 var(--rdr-moon); }
.mp .rdr-ri i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--rdr-rosh); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700; }
.mp .rdr-ri.dead i { background: var(--muted); }
.mp .rdr-rs { font-style: normal; font-variant-numeric: tabular-nums; }
/* the log: the latest first, scrolled within its box */
.mp .rdr-log { grid-column: 1 / -1; display: flex; flex-direction: column; min-height: 0; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 8px; }
.mp .rdr-lh { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.mp .rdr-log ol { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; min-height: 72px; flex: 1 1 auto; overscroll-behavior: contain; scrollbar-width: thin; }
.mp .rdr-log li { display: grid; grid-template-columns: 38px 16px minmax(0, 1fr); gap: 6px; align-items: start; padding: 4px 0; font-size: 13px; line-height: 1.35; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.mp .rdr-log li:last-child { border-bottom: 0; }
.mp .rdr-log time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.mp .rdr-log b.rad { color: var(--rdr-rad); }
.mp .rdr-log b.dire { color: var(--rdr-dire); }
.mp .rdr-log .sd { margin-right: 4px; vertical-align: 1px; }
.mp .rdr-dl { margin: 0; font-size: 13px; color: var(--muted); }
.mp .rdr-ic { width: 14px; height: 14px; margin-top: 2px; background: var(--muted); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.mp .rdr-ic.kill { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2l7.5 7.5M14 2L6.5 9.5M4 12l-2 2M12 12l2 2M3.5 9.5l3 3M12.5 9.5l-3 3' stroke='%23000' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background: var(--ink2); }
.mp .rdr-ic.died { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5C4.4 1.5 2 4 2 7c0 1.9 1 3.2 2.3 4V14h7.4v-3C13 10.2 14 8.9 14 7c0-3-2.4-5.5-6-5.5zM5.7 6.2a1.3 1.3 0 110 2.6 1.3 1.3 0 010-2.6zm4.6 0a1.3 1.3 0 110 2.6 1.3 1.3 0 010-2.6z'/%3E%3C/svg%3E"); }
.mp .rdr-ic.tower { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l5 4V14H3V5.5z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M2 15L14 3' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mp .rdr-ic.rax { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='5' width='12' height='7' rx='1.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M2 15L14 2' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.mp .rdr-ic.rosh, .mp .rdr-ic.roshup { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3C/svg%3E"); background: var(--rdr-rosh); }
.mp .rdr-ic.rosh { opacity: .5; }
.mp .rdr-ic.win { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h8v3a4 4 0 01-8 0zM4 3H1.5c0 2.5 1.2 3.6 3 3.8M12 3h2.5c0 2.5-1.2 3.6-3 3.8M8 9v3M5 14h6' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background: #c9a227; }
/* a game over: the log alone, over the tables */
.mp .rdr.solo { display: block; }
.mp .rdr.solo .rdr-log { margin: 0; border-top: 0; padding-top: 0; }
.mp .rdr.solo .rdr-log ol { max-height: 240px; }
/* on now: under the radar and its key, as wide as both (owner 2026-10-20: «у доты ход игры не влезает») */
.mp .rdr > .rdr-log { grid-column: 1 / -1; margin-top: 0; }
.mp .rdr > .rdr-log ol { max-height: 232px; min-height: 0; }
/* The owner's draft (radarmore.go; owner 2026-10-25: «Да сначала мне»): each hero's trail of the last minute and a half,
   the card a tap opens at the top of the key, the ultimate ready as a mark on the dot, the Aegis, the Cheese, the Rapier
   as badges under it; a hero picked lights his dot and trail and the others fade. */
.mp .rdr-tr path { fill: none; stroke-width: .45; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
.mp .rdr-tr.rad path { stroke: var(--rdr-rad); }
.mp .rdr-tr.dire path { stroke: var(--rdr-dire); }
.mp .rdr-tr.rad circle { fill: var(--rdr-rad); }
.mp .rdr-tr.dire circle { fill: var(--rdr-dire); }
.mp .rdr-h[role="button"] { cursor: pointer; outline: none; }
.mp .rdr-h[role="button"]:focus-visible > circle:first-of-type, .mp .rdr-h.rdr-pick > circle:first-of-type { stroke: var(--ink); stroke-width: .95; }
.mp .rdr.rdr-sel .rdr-h:not(.rdr-pick), .mp .rdr.rdr-sel .rdr-tr:not(.rdr-pick) { opacity: .3; }
.mp .rdr.rdr-sel .rdr-tr.rdr-pick path { opacity: .85; stroke-width: .6; }
.mp .rdr-h > circle.rdr-ult { fill: #49c6ff; stroke: var(--rdr-ink); stroke-width: .35; }
.mp .rdr-bdg path { stroke: var(--rdr-ink); stroke-width: .3; stroke-linejoin: round; }
.mp .rdr-bdg.aegis path { fill: var(--rdr-sun); }
.mp .rdr-bdg.cheese path { fill: #f0cf4f; }
.mp .rdr-bdg.rapier path { fill: none; stroke: #c4ccd6; stroke-width: .6; stroke-linecap: round; }
.mp .rdr-k li[role="button"] { cursor: pointer; margin: -2px -5px; padding: 2px 5px; border-radius: 8px; }
.mp .rdr-k li[role="button"]:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.mp .rdr-k li.rdr-pick { background: var(--chip); }
.mp .rdr-card { grid-column: 1 / -1; display: grid; gap: 5px; padding: 10px 12px; border-radius: 12px; background: var(--chip); font-size: 13px; }
.mp .rdr-card[hidden] { display: none; }
/* beside the map the key is as high as the map: a card open takes the place of the day's and Roshan's line and of the
   caption, and the key grows past the map only for a card longer than they are */
@media (min-width: 701px) {
	.mp .rdr.rdr-sel .rdr-i, .mp .rdr.rdr-sel .rdr-c { display: none; }
	.mp .rdr.rdr-sel .rdr-lg { max-height: none; }
}
.mp .rdr-card p { margin: 0; }
.mp .rdr-hd { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.mp .rdr-hd small { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.mp .rdr-cx { flex: none; width: 26px; height: 26px; margin: -4px -6px -4px 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.mp .rdr-cx::before { content: "\00d7"; font-size: 19px; line-height: 26px; }
.mp .rdr-cx:hover { background: var(--panel); color: var(--ink); }
.mp .rdr-cu { display: flex; align-items: center; gap: 6px; }
.mp .rdr-cu i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.mp .rdr-cu.ready i { background: #49c6ff; }
.mp .rdr-cu.mana i { background: var(--rdr-moon); }
.mp .rdr-cu b { font-variant-numeric: tabular-nums; }
.mp .rdr-its { display: flex; flex-wrap: wrap; gap: 4px; }
.mp .rdr-its span { padding: 1px 8px; border-radius: 999px; background: var(--panel); font-size: 12px; }
.mp .rdr-its span.aegis { background: color-mix(in srgb, var(--rdr-sun) 30%, var(--panel)); }
.mp .rdr-its span b { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
	.mp .rdr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.mp .rdr-w { width: 100%; max-width: 420px; justify-self: center; }
	.mp .rdr-lg { gap: 6px 12px; }
	.mp .rdr-n small { display: block; margin: 0; }
	.mp .rdr-lg { height: auto; max-height: none; }
	.mp .rdr-log ol { max-height: 220px; }
}
@media (max-width: 700px) {
	.mp .dtt th.lv, .mp .dtt td.lv, .mp .dtt th.lh, .mp .dtt td.lh, .mp .dtt th.gx, .mp .dtt td.gx, .mp .dtt th.hdm, .mp .dtt td.hdm { display: none; }
	.mp .dt .tbm { flex-wrap: wrap; row-gap: 4px; }
	.mp .mc .mcd { display: none; } /* two plates a row: the number and the winner; the time on now is under the score */
	.mp .tbt .pn small.hr { display: block; }
}
/* The two teams' earlier series against each other: in the right column on a wide screen (tiles), under
   the teams when the columns are gone — the day and the event over each line. */
.h2h .h2c { margin: 10px 2px 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h .h2c:first-of-type { margin-top: 0; }
/* the health and the damage bars glide to their new length */
.mp .tbt .hpb .hl i, .mp .tbt .adrb i { transition: width .3s ease; }
.mp .skel { display: grid; gap: 12px; }
.mp .skel .sk { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: var(--chip); }
.mp .skel i { display: block; height: 30px; border-radius: 8px; background: linear-gradient(90deg, var(--line) 25%, var(--panel) 50%, var(--line) 75%); background-size: 300% 100%; animation: skel 1.6s ease-in-out infinite; }
.mp .skel i.h { width: 38%; height: 26px; margin-bottom: 4px; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.mp .tbs.wait .nodata { display: none; margin: 0; padding: 18px 16px; border-radius: 14px; background: var(--chip); font-size: 14px; color: var(--muted); text-align: center; }
.mp .tbs.wait.long .skel { display: none; }
.mp .tbs.wait.long .nodata { display: block; }
@media (prefers-reduced-motion: reduce) { .mp .skel i, .mp .tbs.in, .pane.in, .tl.in, [data-chip].in, .up, .gv.in > *, .gv.in :is(.panel, .pane) > * { animation: none; } .mp .tbt .hpb .hl i, .mp .tbt .adrb i { transition: none; } }

/* «Ход карты» (2026-10-08; 2026-10-09: «доработать… иконки красивые, внимание к деталям»): the rounds
   of a CS2 map — a chip for each in its winner's row, the first team's above, the second's below, in
   the winner's side's colour with how the round ended on it in white; each row's team by its logo;
   the lead between the rows with its area and where it is now. The whole regulation is laid out from
   the first round (rounds.go): the columns stretch over the card, the chips keep their size; the
   rounds to come are faint dots, the one on now a ring that breathes. */
.rh { --ct: #3d74d6; --tt: #d4952b; --lw: 28px; --cw: 18px; --bh: 56px; margin: 4px 0 14px; padding: 12px 14px 10px; border-radius: 14px; background: var(--chip); }
@media (max-width: 600px) { .rh { --lw: 22px; --cw: 13px; --bh: 40px; padding: 12px 10px 10px; } }
.rh figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; font-size: 13px; }
.rh figcaption > b { font-weight: 700; color: var(--ink); }
.rh .sc { display: inline-flex; align-items: baseline; gap: 7px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.rh .sc i { font-style: normal; font-size: 12px; }
.rh .sc b { color: var(--ink); font-weight: 700; font-size: 14px; }
.rh .scr { overflow-x: auto; scrollbar-width: none; }
.rh .scr::-webkit-scrollbar { display: none; }
.rh .cv { display: grid; }
.rh .rw { display: grid; align-items: center; min-height: calc(var(--cw) + 4px); }
.rh .c24 > .rw { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)) .5fr repeat(12, minmax(0, 1fr)); }
.rh .c30 > .rw { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)) .5fr repeat(12, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)); }
.rh .c36 > .rw { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)) .5fr repeat(12, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)); }
.rh .c42 > .rw { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)) .5fr repeat(12, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)); }
.rh .c48 > .rw { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)) .5fr repeat(12, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)); }
.rh .c54 > .rw { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)) .5fr repeat(12, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)); }
.rh .c60 > .rw { grid-template-columns: var(--lw) repeat(12, minmax(0, 1fr)) .5fr repeat(12, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)) .5fr repeat(3, minmax(0, 1fr)); }
.rh .rw > span { display: grid; place-items: center; min-width: 0; }
.rh .rw > i { align-self: stretch; justify-self: center; width: 1px; background: var(--line); }
.rh .rw > .lt { justify-items: start; }
.rh .lt .logo, .rh .lt .mk { width: calc(var(--lw) - 6px); height: calc(var(--lw) - 6px); margin: 0; border-radius: 5px; font-size: 7px; }
.rh .lt .mk { background: var(--panel); }
.rh .rw svg.rc { display: block; width: min(var(--cw), 88%); height: auto; aspect-ratio: 1; }
.rh .sl { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
.rh .sl.nx { width: 9px; height: 9px; background: none; box-shadow: inset 0 0 0 1.5px var(--acc); }
@media (prefers-reduced-motion: no-preference) { .rh .sl.nx { animation: rh-now 1.2s ease-in-out infinite alternate; } }
@keyframes rh-now { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.1); } }
.rh .ch { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr); }
.rh .ch svg { display: block; width: 100%; height: var(--bh); overflow: visible; }
.rh .hf { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rh .ev { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rh .ar { fill: var(--acc); opacity: .12; }
.rh .ld { fill: none; stroke: var(--acc); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rh .dr, .rh .dt { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rh .dr { stroke: var(--chip); stroke-width: 10; }
.rh .dt { stroke: var(--acc); stroke-width: 6; }
.rh .tk { min-height: 0; margin-top: 3px; }
.rh .tk > span { font-size: 10px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: visible; }
.rh .tk > i { background: none; }
@media (max-width: 600px) { .rh .tk > span { font-size: 9px; } .rh .c30 { min-width: 378px; } .rh .c36 { min-width: 456px; } .rh .c42 { min-width: 534px; } .rh .c48 { min-width: 612px; } .rh .c54 { min-width: 690px; } .rh .c60 { min-width: 768px; } }
.rh .rc .b { fill: #8a92a3; }
.rh .rc.ct .b { fill: var(--ct); }
.rh .rc.t .b { fill: var(--tt); }
.rh .rc.unknown .b { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 1.6; }
.rh .rc .g { fill: #fff; }
.rh .rc .e { fill: #8a92a3; }
.rh .rc.ct .e { fill: var(--ct); }
.rh .rc.t .e { fill: var(--tt); }
.rh .rc .s { fill: none; stroke: #fff; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.rh .lg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.rh .lg span { display: inline-flex; align-items: center; gap: 6px; }
.rh .lg svg { width: 14px; height: 14px; flex: none; }
.rh .lg i { width: 10px; height: 10px; border-radius: 3px; }
.rh .lg i.ct { background: var(--ct); }
.rh .lg i.t { background: var(--tt); }
/* A played map's breakdown under its course (roundbook.go; owner 2026-10-16, Cito having no kills live: «пока 2»): a
   round's mark opens its page — the round's head (the winner on its side's colour, how it ended, how long), the two
   sides' buys, an ace or a clutch, and the kills as the game's feed: the killer, the weapon, the victim, with the
   second from the end of the buy. The players' names in their side's colour that round, a shade darker (lighter in the
   dark) than the marks for the text to read. */
.rh .rc[data-r] { cursor: pointer; }
.rh .rc[data-r]:hover { filter: brightness(1.12); }
.rh .rc[data-r]:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; border-radius: 4px; }
.rh .rc[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 1px; border-radius: 4px; }
.rbk { --ctx: #2b5db8; --ttx: #9a6411; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 13px; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .rbk { --ctx: #86abf2; --ttx: #e6b25c; } }
:where(:root[data-theme="dark"]) .rbk { --ctx: #86abf2; --ttx: #e6b25c; }
.rbk-p[hidden] { display: none; }
.rbk-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; color: var(--muted); }
.rbk-h b { font-size: 14px; font-weight: 700; color: var(--ink); }
.rbk-w { padding: 1px 8px; border-radius: 6px; background: #8a92a3; color: #fff; font-weight: 700; }
.rbk-w.ct { background: var(--ct); }
.rbk-w.t { background: var(--tt); }
.rbk-e { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 8px; color: var(--muted); }
.rbk-e > span { display: inline-flex; align-items: baseline; gap: 6px; }
.rbk-e i { align-self: center; width: 8px; height: 8px; border-radius: 2px; background: #8a92a3; }
.rbk-e .ct i { background: var(--ct); }
.rbk-e .t i { background: var(--tt); }
.rbk-e b { font-weight: 600; color: var(--ink2); }
.rbk-e .won b { font-weight: 700; color: var(--ink); }
.rbk-e em { font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink2); }
.rbk-e small { font-size: 12px; }
.rbk-m { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.rbk-m span { padding: 2px 9px; border-radius: 999px; background: var(--acc2); color: var(--acc); font-size: 12px; font-weight: 600; }
.rbk-k { margin: 0; padding: 0; list-style: none; }
.rbk-k li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line); }
.rbk-k li:first-child { border-top: 0; }
.rbk-k time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rbk-k li > :nth-child(2) { justify-self: end; }
.rbk-k li > :nth-child(4) { opacity: .72; }
.rbk-u { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; font-weight: 600; color: var(--ink2); }
.rbk-u a, .rbk-u b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-weight: inherit; }
.rbk-u.ct { color: var(--ctx); }
.rbk-u.t { color: var(--ttx); }
.rbk-u .fl { width: 18px; height: 12px; padding: 2px; margin-right: 5px; border-radius: 4px; }
.rbk-x { display: inline-flex; align-items: center; gap: 4px; color: var(--ink2); }
.rbk-x .wi { height: 13px; }
.rbk-x small { font-size: 11px; color: var(--muted); }
.rbk-x .hsi { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.rbk-x .hsi .d { fill: currentColor; stroke: none; }
.rbk-n { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rbk-n em { padding: 1px 6px; border-radius: 5px; background: var(--panel); color: var(--ink2); font-size: 11px; font-style: normal; font-weight: 600; }
.rbk-n small { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .rbk-k li { grid-template-columns: 30px minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .rbk-n { grid-column: 2 / -1; justify-self: center; }
  .rbk-n:empty { display: none; }
}
/* the match page's head over: no mark of the winner (owner 2026-10-23: «Так же убери плашку победа»), the loser's tile
   a little faded */
.mp .side.lost .lt { opacity: .62; filter: grayscale(.55); }
/* the champion's crown on its tile in the head of the series that gave it the event (owner 2026-10-09: «коронка
   небольшая перекошенная над логотипом»; 2026-10-24: «почему нет коронки ?») */
.mp .side .lt { position: relative; }
.mp .side .crown { position: absolute; left: -13px; top: -17px; width: 36px; transform: rotate(-24deg); filter: drop-shadow(0 2px 2px rgba(16, 24, 40, .18)); }
@media (max-width: 600px) { .mp .side .crown { width: 25px; left: -9px; top: -12px; }
  /* the first side's tile stands at the panel's edge: its crown goes on the corner towards the score (owner 2026-10-12: «Коронка на телефоне не помещается») */
  .mp .face > .side:first-child .crown { left: auto; right: -9px; transform: rotate(24deg); } }
.mp .side.lost b { color: var(--ink2); }

/* The match page (probe «mhead» 2, settled 2026-10-14): the event as a plate on top, like an event card: the league's logo, the name,
   the game, the stage and the dates, a chevron; the whole plate leads to the event. */
.mp .mh2 { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--chip); color: var(--ink); }
.mp .mh2:hover { background: var(--acc2); color: var(--ink); }
.mp .mh2 .logo, .mp .mh2 .gb.big { width: 40px; height: 40px; margin: 0; border-radius: 9px; }
.mp .mh2 img.logo { padding: 4px; background: #fff; }
.mp .mh2 img.logo.dk { background: #23262d; }
.mp .mh2 .tc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mp .mh2 .tc b { font-size: 15px; font-weight: 600; line-height: 1.25; }
.mp .mh2 .tmeta { font-size: 12.5px; line-height: 18px; color: var(--muted); }
.mp .mh2 .tmeta .gb { margin: -2px 6px 0 0; width: 18px; height: 18px; border-radius: 4px; }
.mp .mh2 .tmeta > span:not(.gb) + span::before { content: "\00a0· "; } /* the dot stays with what it follows */
.mp .mh2 .chev { width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); margin-right: 6px; }

/* A series not begun (the owner's, 2026-10-11; probe «pre» 4, settled 2026-10-14) — the place in Valve's table a number over
   the logo, the flag before the name; right under the head the rosters without the team's name again,
   both to their left edge, well apart; the form and the meetings in the side columns. */
.mp .pside { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.mp .pre4 .rk { display: block; height: 24px; font-size: 18px; font-weight: 800; line-height: 24px; letter-spacing: -.01em; color: var(--ink2); font-variant-numeric: tabular-nums; }
.mp .pre4 a.rk:hover { color: var(--acc); }
.mp .pre4:not(.rkd) .rk { display: none; }
.mp .pre4.rkd .score { padding-top: 46px; } /* the time beside the logos, not the places */
/* with the countdown (owner 2026-10-16: «И плашку выше и фиолетовый мягче. Время начала по центру между логотипами»): the
   middle in the sides' rows — the countdown in the places' row, the time on the logos' middle, the day and the maps under;
   the places' row kept for it when no side has a place */
.mp .face.pre4:has(.mp-cd) .rk { display: block; }
.mp .face.pre4:has(.mp-cd) .score { display: grid; grid-template-rows: 24px auto auto auto; row-gap: 8px; justify-items: center; align-content: start; padding-top: 0; }
.mp .face.pre4:has(.mp-cd) .score > .mp-cd { grid-row: 1; margin: 0; }
/* the time on the logos' middle by its margin — half the tile less half the time — and the day and the maps right under it
   (owner: «Сегодня и кружки с черепком повыше») */
.mp .face.pre4:has(.mp-cd) .score > .nums { grid-row: 2; margin-top: 26px; }
@media (max-width: 900px) { .mp .face.pre4:has(.mp-cd) .score > .nums { margin-top: 17px; } }
@media (max-width: 700px) { .mp .face.pre4:has(.mp-cd) .score { grid-template-rows: 20px auto auto auto; } .mp .pre4 .mp-cd { padding: 2px 10px; font-size: 12px; } }
/* the flag goes in the line of the name's first word: a long name wraps under them, centred */
.mp .pre4 .tn { display: block; max-width: 100%; }
.mp .pre4 .tn .fl { margin: 0 8px 0 0; vertical-align: -3px; }

/* the rosters side by side, each under its team, well apart */
.mp .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mp .pt { min-width: 0; padding: 4px 12px; border-radius: 14px; background: var(--chip); }
.mp .pl5 { margin: 0; padding: 0; list-style: none; }
.mp .pl5 li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 2px; border-top: 1px solid var(--line); }
.mp .pl5 li:first-child { border-top: 0; }
.mp .pl5 .fl { margin: 0; }
.mp .pl5 .fl.nf { visibility: hidden; }
.mp .pl5 .pn { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mp .pl5 .pn a, .mp .pl5 .pn b { max-width: 100%; overflow: hidden; font-size: 14.5px; font-weight: 700; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.mp .pl5 .pn a:hover { color: var(--acc); }
.mp .pl5 .pn small { max-width: 100%; overflow: hidden; font-size: 11.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.mp .pl5 em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }
/* Dota 2 before a series (dotapre.go; owner 2026-10-22: «Позиция цифрой», «Герои и форма», «Замены в составе», «Команды до
   матча»): the position a figure in a ring, KDA of three months and the favourite heroes under the name, the stand-in of the
   last game under the list, the team's games of three months in its form card. */
.mp .pl5 .dpos { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 700; line-height: 1; }
.mp .pl5 li.dli { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; }
.mp .pl5 li.dli .pn { grid-column: 2; grid-row: 1; }
.mp .pl5 li.dli .dpos { grid-column: 3; grid-row: 1 / 3; align-self: center; }
.mp .pl5 .dfm { grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; font-size: 11.5px; line-height: 1.3; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.mp .pl5 .dfm b { font-weight: 600; color: var(--ink); }
.mp .pl5 .dfm b.hi { color: var(--win); }
.mp .pl5 .dfm b.lo { color: var(--loss); }
.mp .pt .lnsw { margin: 0; padding: 7px 2px 8px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.35; color: var(--muted); }
.pmeet .mets { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 2px 0 4px; font-variant-numeric: tabular-nums; }
.pmeet .mets b { font-size: 24px; font-weight: 800; line-height: 1; color: var(--ink2); }
.pmeet .mets b.w { color: var(--win); }
.pmeet .mets b.l { color: var(--loss); } /* the side behind in the meetings red (owner 2026-10-16: «Здесь "1" тоже красным») */
.pmeet .mets i { font-style: normal; font-size: 18px; font-weight: 600; color: var(--muted); }
.pmeet .mets .logo, .pmeet .mets .mk { width: 28px; height: 28px; margin: 0; border-radius: 7px; }
.pmeet .fm .sc { display: inline-flex; flex: none; align-items: center; gap: 6px; min-width: 58px; color: var(--ink); }
.pmeet .fm .o { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.3; }
.pmeet .fm .o b { max-width: 100%; color: var(--ink2); }
.pmeet .fm .o small { font-size: 11.5px; color: var(--muted); }
.pmeet .fm:hover .o b { color: var(--acc); }
.pfn .pfs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pfn .tf { margin: 0; }
@media (max-width: 700px) {
	.pfn .pfs { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.mp .pre4 .rk { height: 20px; font-size: 15px; line-height: 20px; }
	.mp .pre4.rkd .score { padding-top: 40px; }
	.mp .pre4 .tn .fl { width: 18px; height: 12px; padding: 2px; margin-right: 6px; border-radius: 4px; vertical-align: -1px; }
	.mp .duo { gap: 12px; }
	.mp .pt { padding: 2px 8px; }
	.mp .pl5 li { gap: 7px; padding: 6px 0; }
	.mp .pl5 .fl { width: 18px; height: 12px; padding: 2px; border-radius: 4px; }
	.mp .pl5 .pn a, .mp .pl5 .pn b { font-size: 14px; }
	/* the phone: the real name gives way, KDA and heroes take the row's whole width under the nick */
	.mp .pl5 li.dli { column-gap: 7px; }
	.mp .pl5 li.dli .pn small { display: none; }
	.mp .pl5 li.dli .dpos { grid-row: 1; }
	.mp .pl5 .dfm { grid-column: 1 / 4; }
}
/* An event's page: the head, the stages, the bracket and the tables, the Swiss diagram, the places and the
   prizes, the awards, the crown; an event Liquipedia announces; the event's block over the home page's news and its
   story, which builds on the block (drafts). */
/* group table and bracket */
.standings { width: 100%; border-collapse: collapse; max-width: 640px; }
.standings th { font-weight: 500; color: var(--muted); font-size: 12px; text-align: left; padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.standings td { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.standings tr:last-child td { border-bottom: 0; }
.standings .n { text-align: right; font-family: var(--mono); font-size: 13px; padding-left: 12px; }
.standings .pos { width: 28px; color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.standings td a { display: flex; align-items: center; font-weight: 500; }

/* the crown — the event's champion's alone: in its places, on the card of an event over, the leader of «Прогнозы»
   (owner 2026-10-23: «нужно убрать коронку у победителя матча. ее только победителю турнира»; till then it sat on the
   match winner's tile too) */
.crown { display: block; overflow: visible; }
.crown .cb { fill: #f7b928; stroke: #c98a10; stroke-width: 1; stroke-linejoin: round; }
.crown .cr { fill: #e9a316; stroke: #c98a10; stroke-width: 1; }
.crown .cj { fill: #ffd766; stroke: #c98a10; stroke-width: .8; }
.crown .cg { fill: #e0453a; }

/* places of a playoff stage (owner 2026-10-09: «кто что занял, кто вылетел»): the place, the team, the
   round it went out in with the series; the champion with the crown on a gold-tinted row */
.places .plc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.places .plc li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--chip); }
.places .plc li.ch { background: color-mix(in srgb, #f7b928 16%, var(--chip)); }
.places .pr { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--ink); }
.places .pt { display: flex; align-items: center; gap: 0; min-width: 0; color: var(--ink); font-weight: 600; }
.places .pt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.places .pt .crown { width: 20px; margin-left: 6px; transform: rotate(-14deg); flex: none; }
.places .po { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.places .po b { color: var(--loss); font-variant-numeric: tabular-nums; }
.places li.ch .po { color: color-mix(in srgb, #f7b928 60%, var(--ink)); font-weight: 700; }
.places .still { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) {
  .places .plc li { grid-template-columns: 44px minmax(0, 1fr); row-gap: 2px; }
  .places .po { grid-column: 2; }
}
/* each place's money from Liquipedia's prize pool (prizes.go; owner 2026-10-12: «да давай») */
.places .pz { justify-self: end; font-size: 13.5px; font-weight: 700; color: var(--win); font-variant-numeric: tabular-nums; white-space: nowrap; }
.places .pzsrc { margin: 8px 0 0; }

/* the bracket: fixed columns and rows, the lines drawn over them in the same pixels; wider than the page, it scrolls */
.brx { overflow-x: auto; margin: 0 -18px; padding: 2px 18px 10px; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
.brx-h { display: flex; gap: 36px; width: max-content; margin: 0 0 6px; }
.brx-h b { flex: none; width: 184px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.brx-g { position: relative; display: grid; grid-auto-columns: 184px; grid-auto-rows: 19px; column-gap: 36px; width: max-content; }
.brx-l { position: absolute; top: 0; left: 0; overflow: visible; fill: none; stroke: var(--muted); stroke-opacity: .4; stroke-width: 1.5; pointer-events: none; }
.brc { position: relative; align-self: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 68px; padding: 6px 10px; border-radius: 10px; background: var(--chip); color: var(--ink2); font-size: 13.5px; }
.brc:hover { background: var(--acc2); color: var(--ink2); }
.brc.live { box-shadow: inset 3px 0 0 var(--live); }
.brc .cap { position: absolute; left: 2px; top: -19px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.brc .bt { display: flex; align-items: center; gap: 7px; min-width: 0; line-height: 20px; }
.brc .bt .logo, .brc .bt .mk { width: 18px; height: 18px; margin: 0; padding: 1px; border-radius: 4px; font-size: 7px; }
.brc .bt .mk { background: var(--panel); }
.brc .bt b { flex: 1; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.brc .bt b.tbd { color: var(--muted); font-weight: 400; }
.brc .bt i { flex: none; min-width: 14px; font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.brc .bt.w b, .brc .bt.w i { font-weight: 700; color: var(--ink); }
.brc .bt.l { color: var(--muted); }
.brc .bt.w i { color: var(--win); } /* the scores green and red as everywhere (owner 2026-10-12: «Счета везде зеленым с красным») */
.brc .bt.l i { color: var(--loss); }
.brc .bw { font-size: 11.5px; color: var(--muted); line-height: 15px; }
/* a series takes four rows from its own: .r<first row>; its column: .c<n> */
.brx .c1 { grid-column: 1; } .brx .c2 { grid-column: 2; } .brx .c3 { grid-column: 3; } .brx .c4 { grid-column: 4; } .brx .c5 { grid-column: 5; } .brx .c6 { grid-column: 6; } .brx .c7 { grid-column: 7; } .brx .c8 { grid-column: 8; } .brx .c9 { grid-column: 9; } .brx .c10 { grid-column: 10; } .brx .c11 { grid-column: 11; } .brx .c12 { grid-column: 12; }
.brx .r1 { grid-row: 1 / span 4; } .brx .r2 { grid-row: 2 / span 4; } .brx .r3 { grid-row: 3 / span 4; } .brx .r4 { grid-row: 4 / span 4; } .brx .r5 { grid-row: 5 / span 4; } .brx .r6 { grid-row: 6 / span 4; } .brx .r7 { grid-row: 7 / span 4; } .brx .r8 { grid-row: 8 / span 4; }
.brx .r9 { grid-row: 9 / span 4; } .brx .r10 { grid-row: 10 / span 4; } .brx .r11 { grid-row: 11 / span 4; } .brx .r12 { grid-row: 12 / span 4; } .brx .r13 { grid-row: 13 / span 4; } .brx .r14 { grid-row: 14 / span 4; } .brx .r15 { grid-row: 15 / span 4; } .brx .r16 { grid-row: 16 / span 4; }
.brx .r17 { grid-row: 17 / span 4; } .brx .r18 { grid-row: 18 / span 4; } .brx .r19 { grid-row: 19 / span 4; } .brx .r20 { grid-row: 20 / span 4; } .brx .r21 { grid-row: 21 / span 4; } .brx .r22 { grid-row: 22 / span 4; } .brx .r23 { grid-row: 23 / span 4; } .brx .r24 { grid-row: 24 / span 4; }
.brx .r25 { grid-row: 25 / span 4; } .brx .r26 { grid-row: 26 / span 4; } .brx .r27 { grid-row: 27 / span 4; } .brx .r28 { grid-row: 28 / span 4; } .brx .r29 { grid-row: 29 / span 4; } .brx .r30 { grid-row: 30 / span 4; } .brx .r31 { grid-row: 31 / span 4; } .brx .r32 { grid-row: 32 / span 4; }
.brx .r33 { grid-row: 33 / span 4; } .brx .r34 { grid-row: 34 / span 4; } .brx .r35 { grid-row: 35 / span 4; } .brx .r36 { grid-row: 36 / span 4; } .brx .r37 { grid-row: 37 / span 4; } .brx .r38 { grid-row: 38 / span 4; } .brx .r39 { grid-row: 39 / span 4; } .brx .r40 { grid-row: 40 / span 4; }
.brx .r41 { grid-row: 41 / span 4; } .brx .r42 { grid-row: 42 / span 4; } .brx .r43 { grid-row: 43 / span 4; } .brx .r44 { grid-row: 44 / span 4; } .brx .r45 { grid-row: 45 / span 4; } .brx .r46 { grid-row: 46 / span 4; } .brx .r47 { grid-row: 47 / span 4; } .brx .r48 { grid-row: 48 / span 4; }
.brx .r49 { grid-row: 49 / span 4; } .brx .r50 { grid-row: 50 / span 4; } .brx .r51 { grid-row: 51 / span 4; } .brx .r52 { grid-row: 52 / span 4; } .brx .r53 { grid-row: 53 / span 4; } .brx .r54 { grid-row: 54 / span 4; } .brx .r55 { grid-row: 55 / span 4; } .brx .r56 { grid-row: 56 / span 4; }
.brx .r57 { grid-row: 57 / span 4; } .brx .r58 { grid-row: 58 / span 4; } .brx .r59 { grid-row: 59 / span 4; } .brx .r60 { grid-row: 60 / span 4; } .brx .r61 { grid-row: 61 / span 4; } .brx .r62 { grid-row: 62 / span 4; } .brx .r63 { grid-row: 63 / span 4; } .brx .r64 { grid-row: 64 / span 4; }
.brx .r65 { grid-row: 65 / span 4; } .brx .r66 { grid-row: 66 / span 4; } .brx .r67 { grid-row: 67 / span 4; } .brx .r68 { grid-row: 68 / span 4; } .brx .r69 { grid-row: 69 / span 4; } .brx .r70 { grid-row: 70 / span 4; } .brx .r71 { grid-row: 71 / span 4; } .brx .r72 { grid-row: 72 / span 4; }
.brx .r73 { grid-row: 73 / span 4; } .brx .r74 { grid-row: 74 / span 4; } .brx .r75 { grid-row: 75 / span 4; } .brx .r76 { grid-row: 76 / span 4; } .brx .r77 { grid-row: 77 / span 4; } .brx .r78 { grid-row: 78 / span 4; } .brx .r79 { grid-row: 79 / span 4; } .brx .r80 { grid-row: 80 / span 4; }
.brx .r81 { grid-row: 81 / span 4; } .brx .r82 { grid-row: 82 / span 4; } .brx .r83 { grid-row: 83 / span 4; } .brx .r84 { grid-row: 84 / span 4; } .brx .r85 { grid-row: 85 / span 4; } .brx .r86 { grid-row: 86 / span 4; } .brx .r87 { grid-row: 87 / span 4; } .brx .r88 { grid-row: 88 / span 4; }
.brx .r89 { grid-row: 89 / span 4; } .brx .r90 { grid-row: 90 / span 4; } .brx .r91 { grid-row: 91 / span 4; } .brx .r92 { grid-row: 92 / span 4; } .brx .r93 { grid-row: 93 / span 4; } .brx .r94 { grid-row: 94 / span 4; } .brx .r95 { grid-row: 95 / span 4; } .brx .r96 { grid-row: 96 / span 4; }
.brx .r97 { grid-row: 97 / span 4; } .brx .r98 { grid-row: 98 / span 4; } .brx .r99 { grid-row: 99 / span 4; } .brx .r100 { grid-row: 100 / span 4; } .brx .r101 { grid-row: 101 / span 4; } .brx .r102 { grid-row: 102 / span 4; } .brx .r103 { grid-row: 103 / span 4; } .brx .r104 { grid-row: 104 / span 4; }
.brx .r105 { grid-row: 105 / span 4; } .brx .r106 { grid-row: 106 / span 4; } .brx .r107 { grid-row: 107 / span 4; } .brx .r108 { grid-row: 108 / span 4; } .brx .r109 { grid-row: 109 / span 4; } .brx .r110 { grid-row: 110 / span 4; } .brx .r111 { grid-row: 111 / span 4; } .brx .r112 { grid-row: 112 / span 4; }
.brx .r113 { grid-row: 113 / span 4; } .brx .r114 { grid-row: 114 / span 4; } .brx .r115 { grid-row: 115 / span 4; } .brx .r116 { grid-row: 116 / span 4; } .brx .r117 { grid-row: 117 / span 4; } .brx .r118 { grid-row: 118 / span 4; } .brx .r119 { grid-row: 119 / span 4; } .brx .r120 { grid-row: 120 / span 4; }
.brx .r121 { grid-row: 121 / span 4; } .brx .r122 { grid-row: 122 / span 4; } .brx .r123 { grid-row: 123 / span 4; } .brx .r124 { grid-row: 124 / span 4; } .brx .r125 { grid-row: 125 / span 4; } .brx .r126 { grid-row: 126 / span 4; } .brx .r127 { grid-row: 127 / span 4; } .brx .r128 { grid-row: 128 / span 4; }
.brx .r129 { grid-row: 129 / span 4; } .brx .r130 { grid-row: 130 / span 4; } .brx .r131 { grid-row: 131 / span 4; } .brx .r132 { grid-row: 132 / span 4; } .brx .r133 { grid-row: 133 / span 4; } .brx .r134 { grid-row: 134 / span 4; } .brx .r135 { grid-row: 135 / span 4; } .brx .r136 { grid-row: 136 / span 4; }
.brx .r137 { grid-row: 137 / span 4; } .brx .r138 { grid-row: 138 / span 4; } .brx .r139 { grid-row: 139 / span 4; } .brx .r140 { grid-row: 140 / span 4; } .brx .r141 { grid-row: 141 / span 4; } .brx .r142 { grid-row: 142 / span 4; } .brx .r143 { grid-row: 143 / span 4; } .brx .r144 { grid-row: 144 / span 4; }
.brx .r145 { grid-row: 145 / span 4; } .brx .r146 { grid-row: 146 / span 4; } .brx .r147 { grid-row: 147 / span 4; } .brx .r148 { grid-row: 148 / span 4; } .brx .r149 { grid-row: 149 / span 4; } .brx .r150 { grid-row: 150 / span 4; } .brx .r151 { grid-row: 151 / span 4; } .brx .r152 { grid-row: 152 / span 4; }
.brx .r153 { grid-row: 153 / span 4; } .brx .r154 { grid-row: 154 / span 4; } .brx .r155 { grid-row: 155 / span 4; } .brx .r156 { grid-row: 156 / span 4; } .brx .r157 { grid-row: 157 / span 4; } .brx .r158 { grid-row: 158 / span 4; } .brx .r159 { grid-row: 159 / span 4; } .brx .r160 { grid-row: 160 / span 4; }
.brx .r161 { grid-row: 161 / span 4; } .brx .r162 { grid-row: 162 / span 4; } .brx .r163 { grid-row: 163 / span 4; } .brx .r164 { grid-row: 164 / span 4; } .brx .r165 { grid-row: 165 / span 4; } .brx .r166 { grid-row: 166 / span 4; } .brx .r167 { grid-row: 167 / span 4; } .brx .r168 { grid-row: 168 / span 4; }
.brx .r169 { grid-row: 169 / span 4; } .brx .r170 { grid-row: 170 / span 4; } .brx .r171 { grid-row: 171 / span 4; } .brx .r172 { grid-row: 172 / span 4; } .brx .r173 { grid-row: 173 / span 4; } .brx .r174 { grid-row: 174 / span 4; } .brx .r175 { grid-row: 175 / span 4; } .brx .r176 { grid-row: 176 / span 4; }
.brx .r177 { grid-row: 177 / span 4; } .brx .r178 { grid-row: 178 / span 4; } .brx .r179 { grid-row: 179 / span 4; } .brx .r180 { grid-row: 180 / span 4; } .brx .r181 { grid-row: 181 / span 4; } .brx .r182 { grid-row: 182 / span 4; } .brx .r183 { grid-row: 183 / span 4; } .brx .r184 { grid-row: 184 / span 4; }
.brx .r185 { grid-row: 185 / span 4; } .brx .r186 { grid-row: 186 / span 4; } .brx .r187 { grid-row: 187 / span 4; } .brx .r188 { grid-row: 188 / span 4; } .brx .r189 { grid-row: 189 / span 4; } .brx .r190 { grid-row: 190 / span 4; } .brx .r191 { grid-row: 191 / span 4; } .brx .r192 { grid-row: 192 / span 4; }
.brx .r193 { grid-row: 193 / span 4; } .brx .r194 { grid-row: 194 / span 4; } .brx .r195 { grid-row: 195 / span 4; } .brx .r196 { grid-row: 196 / span 4; } .brx .r197 { grid-row: 197 / span 4; } .brx .r198 { grid-row: 198 / span 4; } .brx .r199 { grid-row: 199 / span 4; } .brx .r200 { grid-row: 200 / span 4; }
.brx .r201 { grid-row: 201 / span 4; } .brx .r202 { grid-row: 202 / span 4; } .brx .r203 { grid-row: 203 / span 4; } .brx .r204 { grid-row: 204 / span 4; } .brx .r205 { grid-row: 205 / span 4; } .brx .r206 { grid-row: 206 / span 4; } .brx .r207 { grid-row: 207 / span 4; } .brx .r208 { grid-row: 208 / span 4; }
.brx .r209 { grid-row: 209 / span 4; } .brx .r210 { grid-row: 210 / span 4; } .brx .r211 { grid-row: 211 / span 4; } .brx .r212 { grid-row: 212 / span 4; } .brx .r213 { grid-row: 213 / span 4; } .brx .r214 { grid-row: 214 / span 4; } .brx .r215 { grid-row: 215 / span 4; } .brx .r216 { grid-row: 216 / span 4; }
.brx .r217 { grid-row: 217 / span 4; } .brx .r218 { grid-row: 218 / span 4; } .brx .r219 { grid-row: 219 / span 4; } .brx .r220 { grid-row: 220 / span 4; } .brx .r221 { grid-row: 221 / span 4; } .brx .r222 { grid-row: 222 / span 4; } .brx .r223 { grid-row: 223 / span 4; } .brx .r224 { grid-row: 224 / span 4; }
.brx .r225 { grid-row: 225 / span 4; } .brx .r226 { grid-row: 226 / span 4; } .brx .r227 { grid-row: 227 / span 4; } .brx .r228 { grid-row: 228 / span 4; } .brx .r229 { grid-row: 229 / span 4; } .brx .r230 { grid-row: 230 / span 4; } .brx .r231 { grid-row: 231 / span 4; } .brx .r232 { grid-row: 232 / span 4; }
.brx .r233 { grid-row: 233 / span 4; } .brx .r234 { grid-row: 234 / span 4; } .brx .r235 { grid-row: 235 / span 4; } .brx .r236 { grid-row: 236 / span 4; } .brx .r237 { grid-row: 237 / span 4; } .brx .r238 { grid-row: 238 / span 4; } .brx .r239 { grid-row: 239 / span 4; } .brx .r240 { grid-row: 240 / span 4; }
.brx .r241 { grid-row: 241 / span 4; } .brx .r242 { grid-row: 242 / span 4; } .brx .r243 { grid-row: 243 / span 4; } .brx .r244 { grid-row: 244 / span 4; } .brx .r245 { grid-row: 245 / span 4; } .brx .r246 { grid-row: 246 / span 4; } .brx .r247 { grid-row: 247 / span 4; } .brx .r248 { grid-row: 248 / span 4; }
.brx .r249 { grid-row: 249 / span 4; } .brx .r250 { grid-row: 250 / span 4; } .brx .r251 { grid-row: 251 / span 4; } .brx .r252 { grid-row: 252 / span 4; } .brx .r253 { grid-row: 253 / span 4; } .brx .r254 { grid-row: 254 / span 4; } .brx .r255 { grid-row: 255 / span 4; } .brx .r256 { grid-row: 256 / span 4; }
/* the teams, Valve's place beside the name (CS2) */
@media (max-width: 700px) {
  .brx { margin: 0 -14px; padding: 2px 14px 10px; }
}

/* A row that scrolls sideways — the stages under the head Ж (app.js, scroller; owner 2026-10-12: «Сделать что было
   понятно что можно прокручивать»): no bar of the system's; the sides with more hidden fade out under a round arrow
   that scrolls it; a mouse drags it. */
.scw { position: relative; min-width: 0; }
.scw > .scr { scrollbar-width: none; }
.scw > .scr::-webkit-scrollbar { display: none; }
.scw.mo-l > .scr { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px); mask-image: linear-gradient(to right, transparent 0, #000 64px); }
.scw.mo-r > .scr { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 64px); mask-image: linear-gradient(to left, transparent 0, #000 64px); }
.scw.mo-l.mo-r > .scr { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.scw > .sx { display: none; position: absolute; top: 50%; z-index: 2; width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink2); box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 3px 10px rgba(16, 24, 40, .12); cursor: pointer; }
.scw > .sx::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -4px 0 0 -5px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.scw > .sx.l { left: 0; }
.scw > .sx.l::before { margin-left: -2px; transform: rotate(-135deg); }
.scw > .sx.r { right: 0; }
.scw > .sx:hover { color: var(--acc); }
.scw.mo-l > .sx.l, .scw.mo-r > .sx.r { display: block; }
@media (hover: hover) and (pointer: fine) { .scw > .scr { cursor: grab; } }
.scw.drag > .scr { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.scw.drag > .scr * { pointer-events: none; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .scw > .sx { background: #343a4a; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); } }
:where(:root[data-theme="dark"]) .scw > .sx { background: #343a4a; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }

/* The event's page (tournament.html; owner 2026-10-13: «"Ж" теперь по умолчанию» — first the probe «thead» 7, the other
   heads and pages in design/archive). A stage's parts (t-seg; owner 2026-10-12: «сделай под этими вариантами следующий
   блок. соедени шапку и что дальше», «нужно переделать саму сетку плейофф и отображение матчей»): the series on now; a
   playoff as the grid with the lines between the rounds (tp-bracket, .brx); a Swiss stage as HLTV draws it while each
   team's way is not known — a column a round, the series by the record both teams bring, the last column the outcome,
   through in green and out in red; the series by day. --pad is the block's side padding, for the rows that run edge to
   edge. */
.seg { --pad: 18px; }
.seg .sgb { margin-top: 12px; }
.seg .sgb > * { margin-top: 18px; }
.seg .sgb > :first-child, .seg .sgb > h3 + * { margin-top: 0; }
.seg .sgb h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.seg .sgl > h3, .seg .sgm > h3, .seg .places > h3 { margin-top: 0; }
.seg .sgb h3 span:not(.lvt) { font-weight: 400; color: var(--muted); }
.seg .sgl .ml:last-child { margin-bottom: 0; }
/* the playoff's grid: the rows of series run to the block's edges and scroll when wider */
.seg .brx { margin: 0 calc(-1 * var(--pad)); padding: 2px var(--pad) 10px; }
/* the Swiss diagram: a column a round, the outcome last; the columns share the width and scroll when it is short */
.seg .swd { display: flex; align-items: flex-start; gap: 12px; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad) 8px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
.seg .swc { flex: 1 0 168px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.seg .swc h4 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.seg .swc h4 span { overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--muted); }
.seg .swb { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 10px; background: var(--chip); }
.seg .swb .rec { align-self: center; margin: 1px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--muted); font-variant-numeric: tabular-nums; }
.seg .swm { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 5px; height: 27px; padding: 0 4px; border-radius: 7px; font-size: 12.5px; color: var(--ink); }
.seg .swm:hover { background: var(--acc2); color: var(--acc); }
.seg .swm .t { display: flex; align-items: center; gap: 5px; min-width: 0; }
.seg .swm .t.r { justify-content: flex-end; }
.seg .swm .t b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.seg .swm .t.l { color: var(--muted); }
.seg .swm .t.l b { font-weight: 500; }
.seg .swm .t.l .logo, .seg .swm .t.l .mk { opacity: .55; }
.seg .swm .t .tbd { color: var(--muted); font-weight: 400; }
.seg .swm .logo, .seg .swm .mk { width: 18px; height: 18px; margin: 0; padding: 1px; border-radius: 4px; font-size: 7px; }
.seg .swm .mk { background: var(--panel); }
.seg .swm .sc { font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--ink2); font-variant-numeric: tabular-nums; }
.seg .swm .sc i { margin: 0 1px; font-style: normal; font-weight: 400; color: var(--muted); }
.seg .swm .sc b.w { color: var(--win); }
.seg .swm .sc b.l { color: var(--loss); }
.seg .swm .sc time { font-weight: 500; color: var(--muted); }
.seg .swm.live { box-shadow: inset 2px 0 0 var(--live); }
.seg .swm.live .sc { color: var(--live); }
.seg .swc.fin .swb { gap: 3px; }
.seg .swc.fin .swb.z-on { background: color-mix(in srgb, var(--win) 14%, var(--chip)); }
.seg .swc.fin .swb.z-out { background: color-mix(in srgb, var(--loss) 11%, var(--chip)); }
.seg .swc.fin .rec { margin-bottom: 0; font-size: 13px; color: var(--ink2); }
.seg .swc.fin .z-on .rec { color: var(--win); }
.seg .swc.fin .z-out .rec { color: var(--loss); }
.seg .swc.fin .swz { align-self: center; margin: 0 0 4px; font-size: 11px; color: var(--muted); }
.seg .swc.fin ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.seg .swc.fin li a { display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 4px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.seg .swc.fin li a:hover { background: var(--acc2); color: var(--acc); }
.seg .swc.fin li a > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg .swc.fin li a em { font-style: normal; font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--muted); }
.seg .swc.fin .z-out li a { color: var(--ink2); }
.seg .swc.fin li .logo, .seg .swc.fin li .mk { width: 18px; height: 18px; margin: 0; padding: 1px; border-radius: 4px; font-size: 7px; }
.seg .swc.fin li .mk { background: var(--panel); }
/* the series by day: a day a fold with its count, the lines inside */
.seg .sgm details { border-top: 1px solid var(--line); }
.seg .sgm details:last-child { border-bottom: 1px solid var(--line); }
.seg .sgm summary { display: flex; align-items: center; gap: 8px; padding: 9px 2px; font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; list-style: none; user-select: none; }
.seg .sgm summary::-webkit-details-marker { display: none; }
.seg .sgm summary::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 6px 0 3px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
.seg .sgm details[open] summary::before { transform: translateY(1px) rotate(225deg); }
.seg .sgm summary span { margin-left: auto; font-weight: 400; color: var(--muted); }
.seg .sgm summary:hover { color: var(--acc); }
.seg .sgm details[open] summary { padding-bottom: 7px; }
.seg .sgm details .ml:last-child { margin-bottom: 10px; }
@media (max-width: 1000px) { /* the columns in rows of three, on a phone one a row, rather than scrolled past the outcome:
  narrower, the teams' names went down to a letter (owner 2026-10-16: «На телефоне странно сжались команды в турнире») */
  .seg .swd { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .seg .swc { flex: 0 0 calc(33.333% - 8px); }
}
@media (max-width: 600px) {
  .seg { --pad: 14px; }
  .seg .swd { gap: 10px; }
  .seg .swc { flex-basis: 100%; }
}
/* The event's head (owner 2026-10-12: «Сделай у лиги логотип. Надпись турниры cs сделай интереснее, типо плашки,
   выделения»; then «давай такой же layout шапки но без эффекта билета… переключения между стадиями давай сделаем ниже
   шапки»): one panel — the league's logo on its plate at the left, its initials when it has none; the name under a chip
   back to the events and the game's plate in the game's colour, the tier under it; the figures as labelled fields at the
   right — the date, the place, the prize in the winners' green, the teams. The stages stand under the head as the site's
   switch over the stage's parts, a panel each (.zbox). The first head's rules, under this one since, gone 2026-10-24. */
.thd { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-rows: auto; column-gap: 22px; align-items: center; padding: 18px 22px; }
.thd > * { min-width: 0; }
.thd > .tlogo { grid-column: 1; grid-row: 1; align-self: center; width: 104px; height: 104px; margin: 0; border-radius: 20px; }
.thd > img.tlogo { padding: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.thd > img.tlogo.dk { box-shadow: none; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .thd > img.tlogo.dk { box-shadow: inset 0 0 0 1px var(--line); }
}
:where(:root[data-theme="dark"]) .thd > img.tlogo.dk { box-shadow: inset 0 0 0 1px var(--line); }
.thd > .mk.tlogo { font-size: 26px; letter-spacing: .02em; }
.thd > .id { grid-column: 2; grid-row: 1; }
.thd .crumbs { align-items: center; gap: 6px; margin-bottom: 8px; font-weight: 600; }
.thd .id h1 { margin: 0 0 6px; font-size: 24px; }
.thd .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; font-size: 13px; color: var(--muted); }
.thd .sub:empty { display: none; }
.thd > .fields { grid-column: 3; grid-row: 1; display: flex; margin: 0; }
.thd .fields > div { padding: 0 22px; border-left: 1px solid var(--line); }
.thd .fields > div:last-child { padding-right: 0; }
.thd .fields dt { margin: 0 0 3px; font-size: 12.5px; font-weight: 500; color: var(--muted); } /* «заглавная только первая буква» */
.thd .fields dd { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 16px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.thd .fields dd.prize { font-size: 19px; font-weight: 700; color: var(--win); }
.thd .fields dd small { font-size: 12px; font-weight: 500; color: var(--muted); }
.thd .fields dd .fl { width: 19px; height: 13px; padding: 2px; border-radius: 4px; margin: 0; }
.thd .fields dd .onl { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-linecap: round; } /* online: a globe for the flag */
@media (max-width: 1100px) { /* the fields a row under the name */
  .thd { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 14px; }
  .thd > .tlogo { grid-row: 1 / span 2; width: 96px; height: 96px; }
  .thd > .fields { grid-column: 2; grid-row: 2; flex-wrap: wrap; row-gap: 10px; }
  .thd .fields > div { padding: 0 18px; }
  .thd .fields > div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) { /* the logo beside the name; the fields two by two under a hairline */
  .thd { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; padding: 14px; }
  .thd > .tlogo { grid-row: 1; width: 64px; height: 64px; border-radius: 14px; }
  .thd > img.tlogo { padding: 7px; }
  .thd > .mk.tlogo { font-size: 17px; }
  .thd .id h1 { font-size: 20px; }
  .thd > .fields { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .thd .fields > div { padding: 0; border-left: 0; }
  .thd .fields dd { font-size: 15px; white-space: normal; } /* a long date breaks, not runs into the place */
  .thd .fields dd.prize { font-size: 17px; }
}
/* The stages (owner 2026-10-12: «Плашки для переключения стадий сделать нашими стандартными как у сайта»; «плашки
   переключения над ними а то они вросли прям»): the site's switch — the home page's .tabbar: a track, the stage open on
   a raised plate in the accent — on the page's ground over the stage's parts, each part on a panel of its own
   («Сделать на отдельной подложке сетку матчи места»). The stage's own line (its days, series, state) goes («Убрать
   внутри вкладки "1–4 окт 14 матчей завершён"»). In one line, scrolled when long. */
.zbox .stages { position: relative; display: flex; flex-wrap: nowrap; gap: 2px; width: max-content; max-width: 100%; margin: 18px 0 0; padding: 4px; border-radius: 13px; background: #e2e5ea; overflow-x: auto; scrollbar-width: none; }
.zbox .stages::-webkit-scrollbar { display: none; }
.zbox .stages a, .zbox .stages .on { flex: none; display: flex; align-items: center; padding: 6px 14px; border-radius: 10px; background: none; font-size: 14px; font-weight: 600; color: var(--ink2); white-space: nowrap; } /* no plate of its own (.stages a's) on the track */
.zbox .stages a:hover { color: var(--ink); background: rgba(255, 255, 255, .65); }
.zbox .stages .on, .zbox .stages a.on:hover { color: var(--acc); background: var(--panel); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 3px 10px rgba(16, 24, 40, .07); }
.zbox .stages small { margin-left: 7px; font-size: 12px; font-weight: 500; color: var(--muted); }
.zbox .stages small.lv { font-weight: 600; color: var(--live); } /* «идёт» for the days of a stage on now */
.zbox .stages .sl { flex: none; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--live); }
/* dark: the track a panel on the ground, the stage open raised above it (owner 2026-10-12: «Плашки сливаются серые») */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .zbox .stages { background: var(--panel); }
  :where(:root:not([data-theme="light"])) .zbox .stages a:hover { background: rgba(255, 255, 255, .05); }
  :where(:root:not([data-theme="light"])) .zbox .stages .on, :where(:root:not([data-theme="light"])) .zbox .stages a.on:hover { background: #343a4a; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
}
:where(:root[data-theme="dark"]) .zbox .stages { background: var(--panel); }
:where(:root[data-theme="dark"]) .zbox .stages a:hover { background: rgba(255, 255, 255, .05); }
:where(:root[data-theme="dark"]) .zbox .stages .on, :where(:root[data-theme="dark"]) .zbox .stages a.on:hover { background: #343a4a; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
@media (hover: none) { .zbox .stages a:hover:not(.on) { color: var(--ink2); background: none; } }
/* the row wider than the page shows it scrolls, with arrows, and a mouse drags it (app.js, scroller; style.css .scw) */
.zbox .scw { width: max-content; max-width: 100%; margin: 18px 0 0; }
.zbox .scw > .stages { margin: 0; }
/* the stage's block bare; its parts — the series on now, the bracket, the places, the Swiss rounds or the table, the
   series by day, the teams — a panel each, their titles in the ink */
.zbox .stv > .seg { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.zbox .seg .sgb { margin-top: 0; }
.zbox .seg .sgb > *, .zbox .seg .sgb > :first-child { margin-top: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.zbox .seg .sgb h3 { margin-top: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.zbox .sgg > .brx + h3 { margin-top: 14px; } /* «Нижняя сетка» under the upper one */
.zbox .sgm details:last-child { border-bottom: 0; }
.zbox .sgm details:last-child .ml:last-child { margin-bottom: 0; }
/* a Swiss stage as each team's way through it (swpath in tournament.html; owner 2026-10-12: «это как то простовато
   и мелко выглядит», then «на швейцарке убери +6. просто счет крупнее… больше css для текста и сделай таблицу чуть
   компактней. при наведении на матч не делай рамку. просто сильнее подсвечивай»): a row a team — the record on a pill
   green through and red out, the series round by round, the opponent's logo and the score from the team's side on green
   won or red lost, brighter under the pointer, the maps won and lost large, green or red by their balance — under the
   zones' titles on their pills; the figures in even widths; the rounds scroll on a phone beside the team held in place */
.zbox .swp { overflow-x: auto; margin: -2px calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 2px; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
.zbox .swt { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 14px; font-variant-numeric: tabular-nums; }
.zbox .swt th { padding: 0 6px 8px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; vertical-align: bottom; }
.zbox .swt th b { display: block; font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.zbox .swt th small { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.zbox .swt th.tm { padding-left: 10px; text-align: left; }
.zbox .swt td { height: 38px; padding: 0 5px; background: var(--chip); text-align: center; white-space: nowrap; vertical-align: middle; }
.zbox .swt td:first-child { position: sticky; left: 0; z-index: 1; padding-left: 10px; border-radius: 10px 0 0 10px; }
.zbox .swt td:last-child { padding-right: 12px; border-radius: 0 10px 10px 0; }
.zbox .swt .zh td { position: static; height: auto; padding: 10px 0 1px; border-radius: 0; background: none; text-align: left; }
.zbox .swt tbody:first-of-type .zh td { padding-top: 6px; }
.zbox .swt .zh span { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; background: var(--chip); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--ink2); }
.zbox .swt .z-on .zh span { background: color-mix(in srgb, var(--win) 14%, var(--panel)); color: var(--win); }
.zbox .swt .z-out .zh span { background: color-mix(in srgb, var(--loss) 12%, var(--panel)); color: var(--loss); }
.zbox .swt td.tm { text-align: left; }
.zbox .swt td.tm a { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ink); }
.zbox .swt td.tm a:hover span { color: var(--acc); }
.zbox .swt td.tm .logo, .zbox .swt td.tm .mk { width: 24px; height: 24px; margin: 0; padding: 2px; border-radius: 6px; font-size: 8px; }
.zbox .swt td.tm .mk, .zbox .swx .mk { background: var(--panel); }
.zbox .swt td.tm .fl { margin: 0; } /* the team by its flag, the opponents by their logos */
.zbox .swt td.tm .ac { display: none; }
.zbox .swt .z-out td.tm a { color: var(--ink2); font-weight: 600; }
.zbox .swt td.rc b { display: inline-block; min-width: 44px; padding: 2px 8px; border-radius: 8px; background: var(--panel); font-size: 15.5px; font-weight: 800; letter-spacing: .02em; color: var(--ink2); }
.zbox .swt .z-on td.rc b { background: color-mix(in srgb, var(--win) 16%, var(--panel)); color: var(--win); }
.zbox .swt .z-out td.rc b { background: color-mix(in srgb, var(--loss) 13%, var(--panel)); color: var(--loss); }
/* a stage's table in the same look (sgtable): the place in its zone's colour, the team as wide as it needs, the record
   and the maps at the right green or red by their balance; the zone titles over their rows (.q-, not the Swiss .z-) */
.zbox .sgt-t th.ps, .zbox .sgt-t td.ps { width: 40px; padding-left: 10px; padding-right: 0; }
.zbox .sgt-t td.ps b { font-size: 14.5px; font-weight: 800; color: var(--muted); }
.zbox .sgt-t .q-on td.ps b { color: var(--win); }
.zbox .sgt-t .q-out td.ps b { color: var(--loss); }
.zbox .sgt-t .zh.q-on span { background: color-mix(in srgb, var(--win) 14%, var(--panel)); color: var(--win); }
.zbox .sgt-t .zh.q-out span { background: color-mix(in srgb, var(--loss) 12%, var(--panel)); color: var(--loss); }
.zbox .sgt-t td.rc b.hi { background: color-mix(in srgb, var(--win) 16%, var(--panel)); color: var(--win); }
.zbox .sgt-t td.rc b.lo { background: color-mix(in srgb, var(--loss) 13%, var(--panel)); color: var(--loss); }
.zbox .sgt-t td.tm { padding-left: 4px; }
.zbox .sgt-t th.rc, .zbox .sgt-t th.mp { width: 84px; }
.zbox .sgt-t td.mp b { font-size: 15px; font-weight: 800; letter-spacing: .02em; color: var(--ink2); }
.zbox .sgt-t td.mp b.hi { color: var(--win); }
.zbox .sgt-t td.mp b.lo { color: var(--loss); }
.zbox .sgt-t td:last-child { padding-right: 14px; }
.zbox .swx { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px; border-radius: 8px; background: var(--panel); font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--muted); transition: background-color .12s, color .12s; }
.zbox .swx .logo, .zbox .swx .mk { width: 20px; height: 20px; margin: 0; padding: 2px; border-radius: 5px; font-size: 7px; }
.zbox .swx span { min-width: 28px; }
.zbox a.swx:hover { background: var(--acc2); color: var(--acc); }
.zbox .swx.w { background: color-mix(in srgb, var(--win) 16%, var(--panel)); color: var(--win); }
.zbox a.swx.w:hover { background: color-mix(in srgb, var(--win) 32%, var(--panel)); }
.zbox .swx.l { background: color-mix(in srgb, var(--loss) 13%, var(--panel)); color: var(--loss); }
.zbox a.swx.l:hover { background: color-mix(in srgb, var(--loss) 28%, var(--panel)); }
.zbox .swx.live { box-shadow: inset 0 0 0 2px var(--live); color: var(--live); }
.zbox a.swx.live:hover { background: color-mix(in srgb, var(--live) 16%, var(--panel)); }
.zbox .swx.none { padding: 0; background: none; }
.zbox .swx.none::before { content: "·"; font-size: 18px; color: var(--muted); }
/* the places: no series nor «чемпион» after the team («Убрать эти надписи внизу… убрать надпись чемпион»), the
   crown on the champion's logo, tilted at its top left as on the match page («Коронку сделать слева на лого») */
.zbox .places .po:not(.adv) { display: none; }
.zbox .places .pt { position: relative; }
/* the event's places (t-places; owner 2026-10-12: «слишком широко между командой и призовыми»): the first three on a
   podium of cards — the place, the logo large, the name, the money — gold, silver, bronze; the rest in two columns read
   down, the money right after the name's room; on a phone the podium as rows over one column */
.zbox .tpod { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.zbox .tpod .pc { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px 16px; border-radius: 12px; background: var(--chip); text-align: center; }
.zbox .tpod .pc.p1 { background: color-mix(in srgb, #f7b928 18%, var(--chip)); }
.zbox .tpod .pc.p2 { background: color-mix(in srgb, #9fb0c4 22%, var(--chip)); }
.zbox .tpod .pc.p3 { background: color-mix(in srgb, #d08a4e 16%, var(--chip)); }
.zbox .tpod .pr { position: absolute; left: 12px; top: 9px; font-size: 13px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.zbox .tpod .p1 .pr { color: color-mix(in srgb, #f7b928 60%, var(--ink)); }
.zbox .tpod .pt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; max-width: 100%; font-size: 15px; font-weight: 700; color: var(--ink); }
.zbox .tpod .pt > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zbox .tpod .pt .logo, .zbox .tpod .pt .mk, .zbox .tpod .ph { width: 52px; height: 52px; margin: 0; padding: 4px; border-radius: 12px; font-size: 14px; }
.zbox .tpod .pt .mk { background: var(--panel); }
.zbox .tplc .tpod .pt .crown { left: calc(50% - 40px); top: -13px; width: 28px; }
.zbox .tpod .pz { font-size: 16px; font-weight: 800; color: var(--win); font-variant-numeric: tabular-nums; }
.zbox .tplc .trest { display: block; columns: 2; column-gap: 12px; margin-top: 10px; }
.zbox .tplc .trest:empty { display: none; }
/* a qualifier's places: a plain list, those going on tinted with where they go (owner 2026-10-15: «Писать тех кто
   прошел… коронка может там неуместна») */
.tq .tqs { margin: 0 0 8px; font-size: 13.5px; color: var(--ink2); }
.tq .tqs b { color: var(--ink); }
.zbox .tq .tql { margin-top: 0; }
.zbox .tq .tql li.on { background: color-mix(in srgb, var(--win) 12%, var(--chip)); }
.tq .tqr { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.tq .tqt { overflow: hidden; font-size: 12.5px; font-weight: 700; color: var(--win); text-overflow: ellipsis; white-space: nowrap; }
.zbox .tplc .trest li { grid-template-columns: 48px minmax(0, 1fr) auto; margin-bottom: 6px; break-inside: avoid; }
.zbox .tplc .ph { flex: none; width: 24px; height: 24px; margin-right: 8px; border: 1.5px dashed color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 6px; } /* the place's team not known yet */
.zbox .tpod .ph { margin: 0; }
.zbox .tplc .pt.tba span { font-weight: 500; color: var(--muted); }
/* the players' awards (awards.go; owner 2026-10-20: «Для игроков найди MVP EVP и так далее»): an event's under its
   places — a line an award, its plate, the players, HLTV's said so or the award's money; a player's in a panel of his
   page — the event and its day, the plates at the right. The plates gold an MVP, silver an EVP, plain another. */
.awl { list-style: none; margin: 0; padding: 0; }
.awb { flex: none; display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 800; line-height: 1.5; letter-spacing: .02em; color: var(--ink2); background: color-mix(in srgb, var(--muted) 16%, var(--panel)); white-space: nowrap; }
.awb.awb-g { color: color-mix(in srgb, #b8860b 60%, var(--ink)); background: color-mix(in srgb, #f7b928 22%, var(--panel)); } /* 5:1 light, 4.6:1 dark */
.awb.awb-s { color: color-mix(in srgb, #7d8ea5 50%, var(--ink)); background: color-mix(in srgb, #9fb0c4 24%, var(--panel)); }
.awg { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }
.awd { margin-top: 16px; }
.awd .awl { display: flex; flex-direction: column; gap: 6px; }
.awd .awl li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 12px; padding: 8px 12px; border-radius: 10px; background: var(--chip); }
.awd .awb { min-width: 44px; text-align: center; }
.awd .awg, .awd .pz { align-self: center; }
.awp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; font-weight: 700; color: var(--ink); }
.awp > a, .awp > span { display: inline-flex; align-items: center; gap: 6px; color: inherit; white-space: nowrap; }
.awp > a:hover { color: var(--acc); }
.awp .fl { margin: 0; }
@media (max-width: 600px) {
  .awd .awl li { grid-template-columns: auto minmax(0, 1fr); }
  .awd .awg, .awd .pz { grid-column: 2; justify-self: start; }
}
.paw .awl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.paw .awl li:last-child { border-bottom: 0; }
.awe { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.awe .logo, .awe .mk { width: 28px; height: 28px; margin: 0; border-radius: 7px; }
a.awe:hover b { color: var(--acc); }
.awn { display: flex; flex-direction: column; min-width: 0; }
.awn b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.awn small { font-size: 12px; color: var(--muted); }
.aws { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; }
.paw .src { margin-top: 8px; }
.zbox .places .pt .crown { position: absolute; left: -9px; top: -12px; width: 21px; margin: 0; transform: rotate(-24deg); filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .2)); }
@media (max-width: 600px) {
  .zbox .tpod { grid-template-columns: 1fr; gap: 6px; }
  .zbox .tpod .pc { flex-direction: row; gap: 10px; padding: 10px 12px; text-align: left; }
  .zbox .tpod .pr { position: static; width: 48px; flex: none; } /* in line with the places under it */
  .zbox .tpod .pt { flex-direction: row; flex: 1; gap: 10px; }
  .zbox .tpod .pt .logo, .zbox .tpod .pt .mk, .zbox .tpod .ph { width: 34px; height: 34px; padding: 3px; border-radius: 8px; }
  .zbox .tplc .tpod .pt .crown { left: -9px; top: -11px; width: 21px; }
  .zbox .tpod .pz { margin-left: auto; font-size: 14.5px; }
  .zbox .tplc .trest { columns: 1; margin-top: 6px; }
  .zbox .stages, .zbox .scw { margin-top: 14px; }
  .zbox .scw > .stages { margin-top: 0; }
  .zbox .swt td.tm .nm { display: none; }
  .zbox .swt td.tm .ac { display: inline; }
  /* the Swiss table in the phone's width, no sideways scroll (owner 2026-10-12: «Сделай что бы швейцарка на телефоне
     умещалась без горизонтального скролла»): the columns share the width — the team by its logo and tag, the record,
     the rounds by their numbers, each series the opponent's logo over the score */
  .zbox .swp { overflow-x: visible; margin: -2px 0 0; padding: 0; }
  .zbox .swt { table-layout: fixed; font-size: 13px; }
  .zbox .swt th { padding: 0 1px 6px; }
  .zbox .swt th.tm { width: 76px; padding-left: 6px; }
  .zbox .swt th.rc { width: 40px; }
  .zbox .swt th b { font-size: 12px; }
  .zbox .swt th .w, .zbox .swt th small { display: none; }
  .zbox .swt td { height: 44px; padding: 0 2px; }
  .zbox .swt td:first-child { position: static; padding-left: 6px; border-radius: 9px 0 0 9px; }
  .zbox .swt td:last-child { padding-right: 4px; border-radius: 0 9px 9px 0; }
  .zbox .swt td.tm a { gap: 6px; font-size: 12.5px; }
  .zbox .swt td.tm a span { overflow: hidden; text-overflow: clip; }
  .zbox .swt td.tm .logo, .zbox .swt td.tm .mk { width: 20px; height: 20px; padding: 1px; border-radius: 5px; }
  .zbox .swt td.tm .fl { width: 20px; height: 13px; padding: 2px; border-radius: 4px; }
  .zbox .swt td.rc b { min-width: 0; padding: 2px 4px; border-radius: 6px; font-size: 12.5px; letter-spacing: 0; }
  .zbox .swx { flex-direction: column; justify-content: center; gap: 1px; width: 100%; max-width: 46px; height: 38px; padding: 0; border-radius: 7px; font-size: 11.5px; letter-spacing: 0; }
  .zbox .swx .logo, .zbox .swx .mk { width: 16px; height: 16px; padding: 1px; border-radius: 4px; }
  .zbox .sgt-t th.tm { width: auto; }
  .zbox .sgt-t th.ps, .zbox .sgt-t td.ps { width: 30px; padding-left: 6px; }
  .zbox .sgt-t th.rc, .zbox .sgt-t th.mp { width: 54px; }
  .zbox .sgt-t td.tm .nm { display: inline; overflow: hidden; text-overflow: ellipsis; }
  .zbox .sgt-t td.mp b { font-size: 13px; letter-spacing: 0; }
  .zbox .swx span { min-width: 0; line-height: 1.1; }
  .zbox .swx.none { height: auto; }
  .zbox .stages a, .zbox .stages .on { padding: 6px 12px; }
  .zbox .seg .sgb > *, .zbox .seg .sgb > :first-child { margin-top: 10px; padding: 12px 14px 14px; }
}
/* an event Liquipedia announces (announce.go): the teams known, then what is still to come, the credit under them */
.sn-p .spt h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font-size: 15px; }
.sn-p .spt h3 span { font-size: 13px; font-weight: 500; color: var(--muted); }
.sn-p .sn-w { margin: 0; font-size: 15px; color: var(--ink2); }
.sn-p .spt + .sn-w { margin-top: 14px; }

/* The main tournament on now over the news of the home page (a draft, eventblock.go, only with -drafts; owner
   2026-10-24, of HLTV's «LIVE: PGL Masters Bucharest groups» over its stories: «вход - баннер турнира»): its banner with
   the state, the name and what it is, a bar of its pages, its stories. */
.hev { margin: 2px 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hev-b { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; box-sizing: border-box; height: 132px; padding: 14px 18px; overflow: hidden; background: #10131c; color: #fff; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.hev.lc .hev-b:not(.pic) { background: color-mix(in srgb, var(--lc) 45%, #10131c); }
.hev-b img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; pointer-events: none; }
.hev-b img.hev-x { left: auto; right: 18px; width: 40%; object-fit: contain; opacity: .22; }
.hev-b.pic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 8 18 / .7) 0%, rgb(6 8 18 / .45) 45%, rgb(6 8 18 / 0) 80%); pointer-events: none; }
.hev-s { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #ff8a8a; }
.hev-s i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff8a8a; animation: live-beat 1.6s ease-in-out infinite; }
.hev-n { font-size: 26px; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; }
.hev-m { font-size: 13px; color: rgb(255 255 255 / .82); }
.hev-b:hover .hev-n { color: #c9d6ff; }
.hev-t { display: flex; background: #171b27; }
.hev-t a { flex: 1; padding: 9px 0; border-left: 1px solid rgb(255 255 255 / .08); font-size: 13px; font-weight: 600; color: rgb(255 255 255 / .85); text-align: center; }
.hev-t a:first-child { border-left: 0; }
.hev-t a:hover { background: #222838; color: #fff; }
.hev-l { padding: 8px 10px 2px; }
.hev-l.empty { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--muted); }

/* The event's story (a draft, tourstory.go; the tournament's tab «Сюжет»): its banner as over the news, a line of where it
   stands, then the days — the main points marked by kind, the series, the stories. */
.zbox .seg.tst .sgb > .hev { padding: 0; border: 0; background: none; } /* each part a card of the stage's own (.sgb), the banner bare */
.tst .nl .ni { --hn-x: 18px; } /* the stories edge to edge of the day's card */
@media (max-width: 600px) {
  .tst .nl .ni { --hn-x: 14px; }
}
.tst-s { margin: 0; padding: 9px 16px; background: #171b27; font-size: 13px; font-weight: 600; color: rgb(255 255 255 / .85); }
.tst-x { color: rgb(255 255 255 / .78); }
.tst-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font-size: 16px; font-weight: 700; }
.tst-h small { font-size: 13px; font-weight: 500; color: var(--muted); }
.tst-n { margin: 0 0 10px; padding: 0; list-style: none; }
.tst-n li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 14px; }
.tst-n a { color: var(--ink); }
.tst-n a:hover { color: var(--acc); }
.tst-k { flex: none; min-width: 74px; padding: 1px 7px; border-radius: 6px; background: var(--chip); font-size: 11.5px; font-weight: 700; color: var(--ink2); text-align: center; }
.tst-n .k-upset .tst-k { background: #fde8e8; color: #b42318; }
.tst-n .k-star .tst-k { background: #e8f1fd; color: #1d5fbf; }
.tst-n .k-ot .tst-k { background: #fdf3e2; color: #a15c07; }
.tst-g { display: grid; gap: 6px; }
.tst-n + .tst-g { margin-top: 2px; }
.tst-w { margin: 12px 0 -16px; }
@media (max-width: 600px) {
  .tst-w { margin-bottom: -14px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tst-n .k-upset .tst-k { background: #4a1f1f; color: #ffb4b4; }
  :root:not([data-theme="light"]) .tst-n .k-star .tst-k { background: #1d2c47; color: #a9c8ff; }
  :root:not([data-theme="light"]) .tst-n .k-ot .tst-k { background: #44321a; color: #f5c77e; }
}
:root[data-theme="dark"] .tst-n .k-upset .tst-k { background: #4a1f1f; color: #ffb4b4; }
:root[data-theme="dark"] .tst-n .k-star .tst-k { background: #1d2c47; color: #a9c8ff; }
:root[data-theme="dark"] .tst-n .k-ot .tst-k { background: #44321a; color: #f5c77e; }
/* A player's page: the card, the statistics, his team's series (his FACEIT account: 17-faceit.css). */

/* A player's page (probe «player» 1, settled 2026-10-14) opens with the photo cut to 4:5 as in the line-ups, the name and real name beside it, the country with its flag, the role and the club as chips. */
.pcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 20px; align-items: start; margin-top: 4px; }
.pcard .ph { display: block; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, var(--chip), var(--ground)); }
.pcard .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.pcard .ph svg { width: 100%; height: 100%; display: block; fill: var(--line); padding: 22% 16% 0; }
.pcard h1 { margin: 2px 0 4px; font-size: 26px; }
.pcard .meta { margin: 0 0 10px; }
.pcard .facts { display: flex; flex-wrap: wrap; gap: 6px; }
.pcard .facts > * { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 9px; background: var(--chip); font-size: 13px; font-weight: 600; color: var(--ink2); }
.pcard .facts a:hover { background: var(--acc2); color: var(--acc); }
.pcard .facts .fl { margin: 0; width: 18px; height: 12px; padding: 2px; border-radius: 4px; }
.pcard .facts .club { padding-left: 5px; }
.pcard .facts .club .mk, .pcard .facts .club img.logo { margin-right: 0; width: 20px; height: 20px; }
@media (max-width: 600px) { .pcard { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; } .pcard h1 { font-size: 22px; } }
/* a player's page at the top (owner 2026-10-16: «В шапке 2 блока. один с фото\любимым оружием. Другой напротив со
   статистикой»): his card in one panel — the photo, the name, the facts, his three favourite weapons («и 3 любимых
   оружия») — and his numbers of three months in another opposite it, of one height. The numbers («Оформи ее красиво и
   текст тоже и ровно, но не громко»): the name, the bar, the number and how far from the average, each in a column of
   its own; the average player one solid grey line down the bars, not captioned («сделай график БАР со сплошной серой
   линией», «Убрать приписки про среднию линию»); the colours softened. */
.pgh { align-items: stretch; }
.psg { display: grid; grid-template-columns: minmax(120px, max-content) minmax(100px, 1fr) 3.4em 3.4em; align-items: center; gap: 12px 14px; margin-top: 14px; }
.psr { display: contents; }
.psn { font-size: 13px; line-height: 1.3; color: var(--ink2); }
.psb { position: relative; display: flex; align-items: center; align-self: stretch; min-height: 20px; }
.psb > i { display: block; height: 10px; border-radius: 0 5px 5px 0; background: color-mix(in srgb, var(--ink2) 22%, var(--chip)); }
.psb > i.up { background: color-mix(in srgb, var(--win) 72%, var(--panel)); }
.psb > i.dn { background: color-mix(in srgb, var(--loss) 66%, var(--panel)); }
.psb::before, .psb::after { content: ""; position: absolute; top: -6px; bottom: -6px; }
.psb::before { left: 0; width: 1px; background: var(--line); }
.psb::after { left: 50%; width: 2px; margin-left: -1px; background: color-mix(in srgb, var(--muted) 75%, transparent); }
.psb > .bf5 { width: 5%; } .psb > .bf10 { width: 10%; } .psb > .bf15 { width: 15%; } .psb > .bf20 { width: 20%; } .psb > .bf25 { width: 25%; } .psb > .bf30 { width: 30%; } .psb > .bf35 { width: 35%; } .psb > .bf40 { width: 40%; } .psb > .bf45 { width: 45%; } .psb > .bf50 { width: 50%; } .psb > .bf55 { width: 55%; } .psb > .bf60 { width: 60%; } .psb > .bf65 { width: 65%; } .psb > .bf70 { width: 70%; } .psb > .bf75 { width: 75%; } .psb > .bf80 { width: 80%; } .psb > .bf85 { width: 85%; } .psb > .bf90 { width: 90%; } .psb > .bf95 { width: 95%; } .psb > .bf100 { width: 100%; }
.psv { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.psd { font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.psd.up { color: var(--win); }
.psd.dn { color: var(--loss); }
.pfav { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.pfav > span { display: block; margin: 0 0 5px; font-size: 12.5px; }
.pfav ol { display: grid; grid-template-columns: 48px max-content max-content; align-items: center; gap: 5px 10px; margin: 0; padding: 0; list-style: none; }
.pfav li { display: contents; }
.pfav .wi { width: 48px; height: 16px; background: var(--ink); }
.pfav .wi:is(.w-pistol, .w-deagle) { width: 34px; }
.pfav .wi.w-knife { width: 38px; }
.pfav b { font-weight: 700; color: var(--ink); }
.pfav small { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }
.pfav.pfh ol { grid-template-columns: minmax(min-content, max-content) max-content max-content; } /* a long name on two lines on a phone: «Nature's Prophet» */
@media (max-width: 600px) {
  .psg { grid-template-columns: minmax(0, 1fr) minmax(64px, 1fr) auto auto; gap: 12px 8px; }
}
/* his team's series, his kills–deaths and damage per round at the right of each, green over his own average, red under
   it (owner 2026-10-16: «внизу где матчи напротив статы в этом матче (красным меньше его среднего, зеленым лучше его
   среднего)»); under the line on a phone */
.pml { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 10px; margin: 0 0 4px; }
.pml > .ml { margin: 0; }
/* … scrolled within the panel, its heading staying (owner 2026-10-16: «Внизу блок с матчами команды (со кроллом)») */
.pms { max-height: 560px; overflow-y: auto; margin: 0 -8px; padding: 0 8px; scrollbar-width: thin; }
.pms:not(:has(.pmx)) .pml { grid-template-columns: minmax(0, 1fr); } /* no numbers of his (not CS2): the lines whole */
@media (min-width: 701px) { .pms.pmd:has(.pmx) .pml { grid-template-columns: minmax(0, 1fr) 172px; } } /* Dota 2: «12/3/15» and «623 золото» (dotastats.go) */
.pmx { display: flex; justify-content: flex-end; gap: 6px; font-size: 13px; font-variant-numeric: tabular-nums; }
.pmx b { padding: 5px 8px; border-radius: 7px; background: var(--chip); font-weight: 700; color: var(--ink2); white-space: nowrap; }
.pmx b small { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--muted); }
.pmx b.up { background: color-mix(in srgb, var(--win) 13%, var(--panel)); color: var(--win); }
.pmx b.dn { background: color-mix(in srgb, var(--loss) 12%, var(--panel)); color: var(--loss); }
@media (max-width: 700px) {
  .pml { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-bottom: 8px; }
  .pmx { justify-content: flex-end; }
}
/* The teams' list by letter, a team's page. */
/* the teams' page by letter and by page (owner 2026-10-16: «Сделать по буквам и по страницам»): the letters a row of
   chips, the chosen filled, on a phone a strip the finger moves; the pages under the grid, the arrows at their ends */
.tabc { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 14px; }
.tabc a, .tpgr a, .tpgr span { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px; border-radius: 8px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tabc a, .tpgr a { background: var(--chip); color: var(--ink2); }
.tabc a:hover, .tpgr a:hover { background: var(--acc2); color: var(--acc); }
.tabc a.on, .tpgr a.on { background: var(--acc-fill); color: #fff; }
.tpgr { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 16px 0 2px; }
.tpgr span { color: var(--muted); }
.tpgr a.ar { font-size: 17px; }
@media (max-width: 600px) {
  .tabc { flex-wrap: nowrap; margin-right: -14px; padding-right: 14px; overflow-x: auto; scrollbar-width: none; }
  .tabc::-webkit-scrollbar { display: none; }
  .tabc a { flex: none; }
}

/* The team's page (probe «tmpage» 1, settled 2026-10-14; owner 2026-10-12: «займись оформлением страницы команды. Сейчас не годится»): the team's page as
   the event page's head Ж — the logo on its plate, «‹ Команды» and the game, the name with its tag, the country; at the
   right the figures as labelled fields: Valve's place, the form of the last five series, the season's series and maps.
   Under it two columns: the series (on now, to come, played by event with a bar of the result for the team) and the
   line-up as cards with the season's numbers, the coach, the maps of the season, the moves, who else played. The
   markup is team-z in teams.html. */
.tmz { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; column-gap: 22px; align-items: center; padding: 18px 22px; }
.tmz > * { min-width: 0; }
.tmz > .tlogo { grid-column: 1; grid-row: 1; width: 104px; height: 104px; margin: 0; border-radius: 20px; }
.tmz > img.tlogo { padding: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.tmz > img.tlogo.dk { box-shadow: none; }
.tmz > .mk.tlogo { font-size: 26px; letter-spacing: .02em; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .tmz > img.tlogo.dk { box-shadow: inset 0 0 0 1px var(--line); } }
:where(:root[data-theme="dark"]) .tmz > img.tlogo.dk { box-shadow: inset 0 0 0 1px var(--line); }
.tmz .crumbs { align-items: center; gap: 6px; font-weight: 600; }
.tmz .crumbs .back { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 11px; border-radius: 8px; background: var(--chip); color: var(--ink2); }
.tmz .crumbs .back::before { content: ""; width: 5px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.tmz .crumbs .back:hover { background: var(--acc2); color: var(--acc); }
.tmz > .id { grid-column: 2; grid-row: 1; }
.tmz .id .crumbs { margin-bottom: 8px; }
.tmz .id h1 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; font-size: 26px; }
.tmz .id h1 small { font-size: 15px; font-weight: 600; color: var(--muted); }
.tmz .sub { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--ink2); }
.tmz .sub .fl { margin: 0; }
.tmz > .fields { grid-column: 3; grid-row: 1; display: flex; margin: 0; }
.tmz .fields > div { padding: 0 22px; border-left: 1px solid var(--line); }
.tmz .fields > div:last-child { padding-right: 0; }
.tmz .fields dt { margin: 0 0 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.tmz .fields dd { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 18px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tmz .fields dd.rank { font-size: 22px; font-weight: 800; color: var(--acc); }
.tmz .fields .wl b { font-weight: 800; }
.tmz .fields .wl i { font-style: normal; color: var(--muted); }
/* the form as dots, no letters (owner 2026-10-16: «Форму просто кружками без букв») */
.tmz .fields .form { gap: 6px; }
.tmz .fields .form a { display: block; width: 14px; height: 14px; border-radius: 50%; }
.tmz .fields .form a.w { background: var(--win); }
.tmz .fields .form a.l { background: var(--loss); }
.tmz .fields .form a.d { background: var(--muted); }
.tmz .fields .form a:hover { filter: brightness(1.12); }
.hi { color: var(--win); } /* not .up: the site fades .up in */
.lo { color: var(--loss); }
/* the two columns, a panel under another (not .col: the story's column) */
.tmzb .tcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tmzb .tcol > .panel { margin: 0; }
/* on a narrow screen the line-up comes first, right under the head (owner 2026-10-16: «сделай на телефоне что бы
   состав команды на странице команды шел сразу под шапкой. Это главное там»): the columns give their panels to the one
   column of the page, the line-up's put before the rest, the others in their order */
@media (max-width: 900px) {
  .tmzb .tcol { display: contents; }
  .tmzb .tcol > .panel:has(.tzr) { order: -1; }
}
.tmzb h2 { font-size: 15px; font-weight: 700; color: var(--ink); }
/* the series: the event over its lines, each line with the bar of its result for the team */
.tmzb .evh { margin: 12px 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tmzb .panel > h2 + .evh { margin-top: 0; }
.tmzb .tres.w .ml { box-shadow: inset 4px 0 0 var(--win); }
.tmzb .tres.l .ml { box-shadow: inset 4px 0 0 var(--loss); }
.tmzb .tres.d .ml { box-shadow: inset 4px 0 0 var(--muted); }
/* the line-up as cards */
.tmzb .tzr { display: flex; flex-direction: column; gap: 6px; }
.tmzb .tzp { display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(3, 52px); align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--chip); color: var(--ink); }
.tmzb a.tzp:hover { background: var(--acc2); }
.tmzb .tzp .fl { margin: 0; }
.tmzb .tzp .nk { min-width: 0; }
.tmzb .tzp .nk b { display: block; overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tmzb .tzp .nk small { display: block; overflow: hidden; font-size: 12px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.tmzb .tzp .st { text-align: center; }
.tmzb .tzp .st b { display: block; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tmzb .tzp .st small { display: block; font-size: 11px; color: var(--muted); }
.tmzb .tzc { display: flex; align-items: baseline; gap: 8px; margin: 10px 2px 0; font-size: 14px; }
.tmzb .tzc span { color: var(--muted); }
.tmzb .tzc a, .tmzb .tzc b { font-weight: 700; }
.tmzb .tzc .fl { margin: 0 6px 0 0; vertical-align: -1px; } /* the coach's country (owner 2026-10-16: «тренер hally без флага») */
.tmzb .tzc small { color: var(--muted); }
/* the maps of the season: the share won as a bar, the record, the share */
.tmzb .tzm { display: flex; flex-direction: column; gap: 8px; }
.tmzb .tzm .mr { display: grid; grid-template-columns: 84px minmax(0, 1fr) 48px 44px; align-items: center; gap: 10px; font-size: 14px; }
.tmzb .tzm .mr > b { font-weight: 700; }
.tmzb .tzm .mbar { height: 8px; border-radius: 4px; background: var(--chip); overflow: hidden; } /* not .bar: the top bar's; the width by class (pct5): the CSP forbids inline styles */
.tmzb .tzm .mbar i { display: block; height: 100%; border-radius: 4px; background: var(--win); }
.tmzb .tzm .wl { text-align: center; font-variant-numeric: tabular-nums; }
.tmzb .tzm .wl b { font-weight: 800; }
.tmzb .tzm .wl i { font-style: normal; color: var(--muted); }
.tmzb .tzm .pc { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.tmzb .tzh .mr { grid-template-columns: 148px minmax(0, 1fr) 48px 44px; } /* a Dota 2 team's heroes (dotastats.go) */
.tmzb .tzh .mr > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) { /* the fields a row under the name */
  .tmz { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 14px; }
  .tmz > .tlogo { grid-row: 1 / span 2; width: 96px; height: 96px; }
  .tmz > .fields { grid-column: 2; grid-row: 2; flex-wrap: wrap; row-gap: 10px; }
  .tmz .fields > div { padding: 0 18px; }
  .tmz .fields > div:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) { /* the logo beside the name; the fields two by two under a hairline */
  .tmz { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 12px; padding: 14px; }
  .tmz > .tlogo { grid-row: 1; width: 64px; height: 64px; border-radius: 14px; }
  .tmz > img.tlogo { padding: 7px; }
  .tmz > .mk.tlogo { font-size: 17px; }
  .tmz .id h1 { font-size: 21px; }
  .tmz > .fields { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--line); }
  .tmz .fields > div { padding: 0; border-left: 0; }
  .tmzb .tzp { grid-template-columns: auto minmax(0, 1fr) repeat(3, 42px); gap: 8px; padding: 8px 10px; }
  .tmzb .tzp .st b { font-size: 13.5px; }
  .tmzb .tzm .mr { grid-template-columns: 74px minmax(0, 1fr) 44px 40px; gap: 8px; }
  .tmzb .tzh .mr { grid-template-columns: 124px minmax(0, 1fr) 44px 40px; }
}
/* Valve's ranking, the race to the major, why a team has its points; the site's own player rating (hidden). */
/* the Valve table */
/* Valve's ranking: each team a grey plate; a place won green, a place lost red */
.vrs { width: 100%; border-collapse: separate; border-spacing: 0 4px; margin: 2px 0 4px; font-size: 14px; }
.vrs th { font-weight: 500; color: var(--muted); font-size: 12px; text-align: left; padding: 0 10px 2px; }
.vrs td { height: 42px; padding: 0 10px; background: var(--chip); vertical-align: middle; }
.vrs td:first-child { border-radius: 10px 0 0 10px; }
.vrs td:last-child { border-radius: 0 10px 10px 0; }
.vrs tr:hover td { background: var(--acc2); }
.vrs .n { text-align: right; font-variant-numeric: tabular-nums; }
.vrs .pos { width: 44px; color: var(--ink); font-weight: 700; }
.vrs .pts { width: 64px; font-weight: 600; }
.vrs .mv { width: 58px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vrs .mv.up { color: var(--win); }
.vrs .mv.down { color: var(--loss); }
.vrs .mv.new { color: var(--acc); }
.vrs .tm a, .vrs .tm span { display: inline-flex; align-items: center; font-weight: 600; }
.vrs .ro { color: var(--muted); font-size: 12.5px; }
/* the page «Рейтинг» (owner 2026-10-16: «переделай страницу рейтинга»): a list, not grey bars — a hairline between the
   lines, the first three on gold, silver and bronze, the team with its five under the name, the points bold; the home
   page's table (.vrs alone) stays as it is */
@media (max-width: 900px) {
  .vrs .ro { display: none; }
}
.vrs .tm a, .vrs .tm span { min-height: 24px; }

/* The site's player rating (ptop.html, playerrating.go; owner 2026-10-12: «свой рейтинг игроков»): the table of the
   best — the place, the player with his flag and team, the rating on a pill green above 1.05 and red below 0.95, the
   numbers of three months — and how it is made; on a player's page the number, the place and its shares against the
   average player, each a bar from the middle. */
.ptop .ptw { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
.ptt { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 14px; font-variant-numeric: tabular-nums; }
.ptt th { padding: 4px 8px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; }
.ptt th.pl { text-align: left; }
.ptt th .hsi { width: 16px; height: 16px; vertical-align: -4px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.ptt th .hsi .d { fill: currentColor; stroke: none; }
.ptt td { padding: 7px 8px; background: var(--chip); text-align: right; white-space: nowrap; }
.ptt td:first-child { border-radius: 9px 0 0 9px; }
.ptt td:last-child { border-radius: 0 9px 9px 0; }
.ptt td.pos { width: 34px; text-align: center; font-weight: 800; color: var(--muted); }
.ptt tbody tr:nth-child(-n+3) td.pos { color: var(--acc); }
.ptt td.pl { text-align: left; }
.ptt td.pl a, .ptt td.pl > span { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.ptt td.pl a:hover b { color: var(--acc); }
.ptt td.pl .fl { margin: 0; }
.ptt td.pl b { font-size: 15px; font-weight: 700; }
.ptt td.pl small { margin-left: 10px; font-size: 12.5px; color: var(--muted); }
.ptt td.rt b { display: inline-block; min-width: 52px; padding: 2px 8px; border-radius: 7px; background: var(--panel); text-align: center; font-size: 15px; font-weight: 800; color: var(--ink2); }
.ptt td.rt b.hi { background: color-mix(in srgb, var(--win) 16%, var(--panel)); color: var(--win); }
.ptt td.rt b.lo { background: color-mix(in srgb, var(--loss) 13%, var(--panel)); color: var(--loss); }
.ptt td.hi { color: var(--win); font-weight: 700; }
.ptt td.lo { color: var(--loss); font-weight: 700; }
.ptop .more { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.ptop .pthow { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink2); }
.ptop .pthow h2 { margin: 0 0 6px; font-size: 15px; }
.ptop .pthow p { margin: 0 0 8px; }
.prt { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.prt .prv { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; color: var(--ink); }
.prt .prv span { font-size: 13px; color: var(--muted); }
.prt .prv b { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.prt .prv b.hi { color: var(--win); }
.prt .prv b.lo { color: var(--loss); }
.prt .prv small { font-size: 13px; color: var(--muted); }
.prt .prv:hover span { color: var(--acc); }
.prt .prp { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.prt .rpp { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 9px; background: var(--chip); }
.prt .rpp small { font-size: 12px; color: var(--muted); }
.prt .rpp b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink2); }
.prt .rpp.hi b { color: var(--win); }
.prt .rpp.lo b { color: var(--loss); }
.prt .rpb { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.prt .rpb::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; background: var(--panel); } /* the average */
.prt .rpb i { display: block; height: 100%; border-radius: 3px; background: var(--muted); }
.prt .rpp.hi .rpb i { background: var(--win); }
.prt .rpp.lo .rpb i { background: var(--loss); }
.prt .src { margin: 8px 0 0; }
@media (max-width: 600px) {
  .ptt th:nth-child(4), .ptt td:nth-child(4), .ptt th:nth-child(n+7), .ptt td:nth-child(n+7) { display: none; } /* the maps, the headshots and the openings off a phone */
  .ptt td:nth-child(6) { border-radius: 0 9px 9px 0; } /* the damage is the last left */
  .ptt td.pl small { display: block; margin: 2px 0 0; }
  .ptt td, .ptt th { padding-left: 5px; padding-right: 5px; }
  .prt .prp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Рейтинг» as a dense table (variant 1 of 2026-10-20; ratingdense.go): a line a team between hairlines to the panel's
   edges — the place, its move, the flag, the logo, the name with its five beside it, the
   points on a bar against the leader's, their move —; beside it the month in short, kept on the screen while the table
   scrolls. A phone has no fives (2026-10-20: «Убрать пункт про составы. Не влазит все равно»). */
.vrd > .vrd-m { grid-column: span 8; }
.vrd > .vrd-s { grid-column: span 4; position: sticky; top: 14px; }
.vrd-bar .sect { margin: 2px 0 10px; }
.vrd-t { margin: 0 -18px; border-top: 1px solid var(--line); }
.vrd-h, .vrd-r { display: grid; grid-template-columns: 40px 48px minmax(0, 1fr) 168px 58px; align-items: center; gap: 0 10px; padding: 0 18px 0 14px; }
.vrd-h { min-height: 32px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 500; color: var(--muted); }
.vrd-h > :first-child { text-align: center; }
.vrd-k { text-align: right; }
.vrd-r { min-height: 42px; border-bottom: 1px solid var(--line); }
.vrd-r:hover { background: var(--chip); }
.vrd-pos { display: grid; place-items: center; }
.vrd-pos b { display: inline-grid; place-items: center; min-width: 28px; height: 26px; padding: 0 4px; border-radius: 999px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vrd-mv { font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vrd-mv[data-d="up"], .vrd-dl[data-d="up"] { color: var(--win); }
.vrd-mv[data-d="down"], .vrd-dl[data-d="down"] { color: var(--loss); }
.vrd-mv[data-d="new"] { color: var(--acc); }
.vrd-tm { min-width: 0; }
.vrd-tm > a, .vrd-tm > span { display: flex; align-items: center; gap: 9px; min-width: 0; color: inherit; }
.vrd-tm .fl { width: 18px; height: 12px; padding: 2px; margin: 0; border-radius: 4px; }
.vrd-nf { visibility: hidden; }
.vrd-tm .logo, .vrd-tm .mk { width: 26px; height: 26px; margin: 0; border-radius: 6px; }
.vrd-nm { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vrd-nm b { flex: none; max-width: 60%; overflow: hidden; font-size: 14.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.vrd-ro { min-width: 0; overflow: hidden; font-size: 12.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.vrd-tm > a:hover b { color: var(--acc); }
.vrd-pt { display: flex; align-items: center; gap: 10px; }
/* the points over the year (owner 2026-10-20: «вместо полоски можно график за год», «давай столбики. последней менее
   насыщенный. и подпись вверху за 12 мес»; ratingyear.go): a bar a month, pale violet, the last month's a little fuller;
   over the column «за 12 месяцев», grey, at the bars' left; no hints (owner 2026-10-20: «убери все подсказки при
   наведении. оставь только на флаги») */
.vrd-y { flex: 1; min-width: 0; height: 24px; }
.vrd-y rect { fill: color-mix(in srgb, var(--acc) 30%, transparent); }
.vrd-y rect.l { fill: color-mix(in srgb, var(--acc) 52%, transparent); }
.vrd-kh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vrd-kh i { font-style: normal; font-weight: 500; color: color-mix(in srgb, var(--muted) 85%, transparent); text-transform: none; letter-spacing: 0; }
.vrd-pt b { min-width: 38px; font-size: 14.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.vrd-dl { font-size: 12.5px; font-weight: 600; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.vrd-m .tpgr { margin-top: 14px; }
.vrd-s h3.day:first-of-type { margin-top: 2px; }
.vrd-x { display: flex; flex-direction: column; margin: 0 -18px; border-top: 1px solid var(--line); }
.vrd-xr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 30px; align-items: center; gap: 0 9px; min-height: 36px; padding: 0 18px; border-bottom: 1px solid var(--line); color: inherit; }
.vrd-xr:hover { background: var(--chip); color: inherit; }
.vrd-xr:hover b { color: var(--acc); }
.vrd-xr .logo, .vrd-xr .mk { width: 22px; height: 22px; margin: 0; border-radius: 5px; }
.vrd-xr b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.vrd-xr em { font-size: 12.5px; font-style: normal; font-weight: 600; text-align: right; color: var(--ink2); font-variant-numeric: tabular-nums; }
.vrd-xr em::before { content: "№"; margin-right: 1px; font-weight: 400; color: var(--muted); }
@media (max-width: 900px) {
  .vrd > .vrd-m, .vrd > .vrd-s { grid-column: auto; position: static; }
}
@media (max-width: 600px) {
  .vrd-t, .vrd-x { margin: 0 -10px; }
  .vrd-h, .vrd-r { grid-template-columns: 30px 38px minmax(0, 1fr) 46px; gap: 0 8px; padding: 0 10px 0 6px; }
  .vrd-h > :nth-child(5), .vrd-r > .vrd-dl, .vrd-y, .vrd-kh i { display: none; }
  .vrd-kh { display: block; }
  .vrd-r { min-height: 44px; padding-block: 6px; }
  .vrd-pos b { min-width: 26px; height: 24px; font-size: 13px; }
  .vrd-mv { font-size: 12px; }
  .vrd-tm > a, .vrd-tm > span { gap: 8px; }
  .vrd-tm .logo, .vrd-tm .mk { width: 24px; height: 24px; }
  .vrd-nm { flex-direction: column; align-items: flex-start; gap: 1px; }
  .vrd-nm b { max-width: 100%; font-size: 14.5px; }
  .vrd-ro { display: none; }
  .vrd-xr { padding: 0 10px; }
}

/* «Гонка за мейджор» (major.go; owner 2026-10-20): the rating's dense table of a region cut by the regions' shares —
   a band over each stage's lines (the stage in capitals, its places beside it), the bubble's grey; at the right the
   five's mark: «цел» green, «изменён» red, «не знаем» grey; a roster Valve gave the region, or one that was in another
   region's table, says so after the name. Beside it how the invitations go and the shares. */
.mjr-t .vrd-h, .mjr-t .vrd-r { grid-template-columns: 40px 48px minmax(0, 1fr) 52px 84px; }
.mjr-t .vrd-pt { justify-content: flex-end; }
.mjr-t .vrd-nm b { max-width: 45%; }
.mjr-g { display: flex; align-items: baseline; min-height: 32px; padding: 7px 18px 5px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--acc) 7%, transparent); font-size: 12.5px; color: var(--muted); }
.mjr-g b { margin-right: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.mjr-g[data-k="edge"], .mjr-g[data-k="open"] { background: var(--chip); }
.mjr-g[data-k="edge"] b, .mjr-g[data-k="open"] b { color: var(--ink2); }
.mjr-ro { justify-self: end; padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.mjr-ro[data-k="ok"] { background: color-mix(in srgb, var(--win) 14%, transparent); color: var(--win); }
.mjr-ro[data-k="changed"] { background: color-mix(in srgb, var(--loss) 13%, transparent); color: var(--loss); }
.mjr-ro[data-k="un"] { padding-inline: 0; font-weight: 500; color: var(--muted); }
.mjr-ch { display: block; overflow: hidden; font-size: 12px; color: var(--loss); text-overflow: ellipsis; white-space: nowrap; } /* who is not in the five now, who instead */
.mjr-as, .mjr-mv { flex: none; padding: 1px 6px; border-radius: 6px; font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.mjr-as { background: var(--acc2); color: var(--acc); }
.mjr-mv { background: color-mix(in srgb, var(--side-b) 15%, transparent); color: var(--side-b); }
.mjr-n { margin: 0 0 10px; color: var(--muted); }
.mjr-s h2 { margin-top: 2px; }
.mjr-l { margin: 0; padding: 0 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.mjr-l li { margin: 0 0 7px; }
.mjr-l li::marker { color: var(--muted); }
.mjr-q { width: 100%; margin: 10px 0 0; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.mjr-q th, .mjr-q td { padding: 6px 4px; border-top: 1px solid var(--line); text-align: center; }
.mjr-q thead th { border-top: 0; font-size: 12px; font-weight: 500; color: var(--muted); }
.mjr-q tbody th { text-align: left; font-weight: 600; }
.mjr-q td { font-weight: 700; color: var(--ink); }
.mjr-u { margin: 12px 0 0; font-size: 13px; color: var(--ink2); }
@media (max-width: 600px) {
  .mjr-t .vrd-h, .mjr-t .vrd-r { grid-template-columns: 24px 30px minmax(0, 1fr) 38px 64px; gap: 0 7px; }
  .mjr-t .vrd-h > :nth-child(5) { display: block; }
  .mjr-t .vrd-nm b { max-width: 100%; }
  .mjr-t .vrd-tm .fl { display: none; } /* room for the five: two lines of them at most, they are who is invited */
  .mjr-t .vrd-ro { display: -webkit-box; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .mjr-g { padding: 7px 10px 5px 8px; }
  .mjr-ro { padding: 2px 6px; font-size: 11.5px; }
}

/* why a team has its Valve points (vrswhy.go; owner 2026-10-20: «Разбор очков Valve»): the points, the base and the
   matches' adjustment as two plates; the four factors as bars of 0 to 1, pale violet; the last matches counted between
   hairlines, each with its result's dot and what it gave */
.vwy-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 14px; }
.vwy-sum > b { margin-right: 6px; font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.vwy-t { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 9px; background: var(--chip); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.vwy-t small { font-size: 12px; font-weight: 500; color: var(--muted); }
.vwy-t.up { color: var(--win); }
.vwy-t.dn { color: var(--loss); }
.vwy-f { display: flex; flex-direction: column; gap: 9px; }
.vwy-f > div { display: grid; grid-template-columns: minmax(0, 136px) minmax(0, 1fr) 36px; align-items: center; gap: 10px; font-size: 14px; }
.vwy-f span { font-weight: 600; }
.vwy-f span small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted); }
.vwy-b { display: block; height: 8px; overflow: hidden; border-radius: 4px; background: var(--chip); }
.vwy-b i { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--acc) 60%, transparent); }
.vwy-f b { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.vwy h3.day { display: flex; gap: 6px; margin-top: 16px; }
.vwy-m { display: flex; flex-direction: column; margin: 0 -18px; border-top: 1px solid var(--line); }
.vwy-m > div { display: grid; grid-template-columns: 50px minmax(0, 1fr) 8px 46px; align-items: center; gap: 10px; min-height: 36px; padding: 0 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.vwy-m small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vwy-m > div > a, .vwy-m > div > span { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: inherit; }
.vwy-m > div > a:hover { color: var(--acc); }
.vwy-m > div > :is(a, span) > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vwy-m .logo, .vwy-m .mk { flex: none; width: 20px; height: 20px; margin: 0; border-radius: 5px; font-size: 9px; }
.vwy-d { width: 8px; height: 8px; border-radius: 50%; background: var(--loss); }
.vwy-d.w { background: var(--win); }
.vwy-m b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.vwy-m b.up { color: var(--win); }
.vwy-m b.dn { color: var(--loss); }
@media (max-width: 600px) {
  .vwy-m { margin: 0 -10px; }
  .vwy-m > div { padding: 0 10px; }
}
/* «Прогнозы»: the chance line, a prediction made in place, «Свободно», «Мои фишки», the page «Прогнозы». */
/* «Прогнозы» (2026-10-10): virtual chips on the winner of a series, priced like a prediction market.
   The chips in the top bar as a pill with a coin; on the match page the two sides as plates to press
   with their chances (the one chosen framed in the accent), the chance bar, the amount with presets;
   on /predict the open series with their bars, the player's purchases, the players' table. */
.coin { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--acc); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--acc) 55%, var(--panel)); }
.pred h2 span { font-weight: 500; }
.pred .hint { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
/* the plaque's teams after predictions close (owner 2026-10-16: «И сделай в матче тоже разломом. Разворачивается даже
   если прогноз не принимается. Видно график и ставки»): the «разлом» with no choice — the chances, the score in the
   medal, «идёт» while a map is on, the winner's «победа» under its chance (with no crown since 2026-10-23: that is the
   event's champion's), the loser faded; a click on it opens and folds
   the rest when there is any */
.pred .fo-x { margin: 2px 0 0; }
.pred .fo-x:not([data-pred-sw]) .fo-s { cursor: default; pointer-events: none; }
.pred .fo-x[data-pred-sw] { border-radius: 16px; cursor: pointer; }
.pred .fo-x[data-pred-sw]:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.pred .fo-x .fo-s.lost { color: var(--muted); } /* faded by colour, not by opacity: a translucent half cut on the slant drew in bands */
.pred .fo-x .fo-s.lost .logo, .pred .fo-x .fo-s.lost .mk { opacity: .6; filter: grayscale(.6); }
.pred .fo-win { display: inline-flex; align-items: center; margin-top: 3px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--win) 16%, transparent); color: var(--win); font-size: 11.5px; font-style: normal; font-weight: 700; }
.pred .fo-x .fo-mid .fo-lv { font-weight: 700; color: var(--live); }
/* the plaque's rest folded under the teams: open with the amount while predictions are taken, by a click on the teams
   after (owner 2026-10-16: «этот блок должен раскрываться после клика на прогноз а не быть открытым сразу») */
.pred .pred-more.fold { display: none; }
.pred:has(input[name="side"]:checked) .pred-more.fold, .pred.pred-on .pred-more.fold { display: block; animation: pv-open .16s ease-out; }
@media (prefers-reduced-motion: reduce) { .pred:has(input[name="side"]:checked) .pred-more.fold, .pred.pred-on .pred-more.fold { animation: none; } }
.pred .mine { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 0; }
.pred .my { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--chip); font-size: 13.5px; }
.pred .my .logo, .pred .my .mk { width: 22px; height: 22px; margin: 0; border-radius: 6px; }
.pred .my .mk { background: var(--panel); }
.pred .my .mt { flex: 1; min-width: 0; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pred .my .mt b { color: var(--ink); }
.pred .my .mr { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.pred .my .mr b { color: var(--ink); font-weight: 800; }
.pred .my.won .mr b { color: var(--win); }
.pred .my.lost .mr b { color: var(--loss); }
.pred .my.void .mr { color: var(--muted); }
/* a line a side held (owner 2026-10-16: «в одну максимум в 2 строки ничего лишнего»): the side, «×N», what went in →
   what it brings should it win in violet, or what it brought; a settled side on the history's wash of its result */
.pred .my1 .mt { display: flex; align-items: center; gap: 6px; }
.pred .my1 .mr { display: inline-flex; align-items: center; gap: 5px; }
.pred .my1 .coin { width: 10px; height: 10px; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--acc) 55%, var(--panel)); }
.pred .my1 .mr b.acc { color: var(--acc); }
.pred .my1 .mr b.pos { color: var(--win); }
.pred .my1 .mr b.neg { color: var(--loss); }
.pred .my1.k-y { background: color-mix(in srgb, var(--win) 9%, var(--chip)); }
.pred .my1.k-n { background: color-mix(in srgb, var(--loss) 8%, var(--chip)); }
.pred .sum { margin: 4px 2px 0; font-weight: 700; font-size: 14px; color: var(--ink2); }
.pred .sum.won { color: var(--win); }
.pred .sum.lost { color: var(--loss); }
/* /predict: the open series — the two teams with the time between, the chance bar, the event under */
.predict .lead { font-size: 16px; line-height: 1.45; color: var(--ink2); margin: 0 0 12px; }
/* the wallet and the table */
.bank .small { margin: 0; }
.how p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.how p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
  .pred .my { flex-wrap: wrap; row-gap: 2px; }
  .pred .my .mt { white-space: normal; flex-basis: calc(100% - 32px); }
  .pred .my .mr { margin-left: 32px; }
  .pred .my1 { flex-wrap: nowrap; } /* a side's line is short: one line on a phone too */
  .pred .my1 .mt { flex-basis: auto; white-space: nowrap; }
  .pred .my1 .mr { margin-left: 0; }
}

/* «Прогнозы» (2026-10-08): the first side's chance over the market's life under the bar — a step for
   each purchase, the even line dashed; a series in a break says so instead of its time. */
/* the chance line (owner 2026-10-16, of the steps it was: «переделай этот график. сделай мультяшным и красевее. без
   резких линий»; then «А можно в графике сделать вторую команду?»): a thick soft wave for each side — the
   first sea green, the second orange, the colours of their halves of the choice («И график цвет соответствующий»), its
   mirror across the dotted 50 % — the band
   from each to 50 % shaded in its colour, a tug of war; a white dot ringed in the side's colour at the start, now a dot
   with a halo — no dots between nor a glow along (owner: «И в графике убери кружки и обводку бледную у линий. Кружки только
   в начале и конце») — breathing while predictions are taken; on the left the start, on the right now, a
   pill for each side with its logo, the higher on top, now's filled in the side's colour and pointing at the line. The
   box is stretched to the width: strokes and dots keep their size (non-scaling strokes; a dot is a zero-length stroke
   with a round cap). */
.pred .pline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 12px 2px 0; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pred .pl-fr, .pred .pl-to { display: flex; flex-direction: column; gap: 4px; }
.pred .pl-fr small, .pred .pl-to small { padding: 0 4px; font-size: 11px; font-weight: 500; color: var(--muted); }
.pred .pl-to small { padding-left: 10px; }
.pred .pl-flip .pl-a { order: 2; }
.pred .pl-fr > span, .pred .pl-to > span { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px; white-space: nowrap; }
.pred .pl-fr > span { background: var(--chip); color: var(--ink2); }
.pred .pl-fr > .pl-a { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--side-a) 55%, transparent); }
.pred .pl-fr > .pl-b { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--side-b) 55%, transparent); }
.pred .pl-to > span { margin-left: 4px; color: #fff; font-size: 12.5px; font-weight: 700; }
.pred .pl-to > .pl-a { background: var(--side-a); }
.pred .pl-to > .pl-b { background: var(--side-b); }
.pred .pl-to > span::before { content: ""; position: absolute; top: 50%; left: -3px; width: 8px; height: 8px; border-radius: 2px; background: inherit; transform: translateY(-50%) rotate(45deg); }
.pred .pl-fr .logo, .pred .pl-fr .mk, .pred .pl-to .logo, .pred .pl-to .mk { width: 18px; height: 18px; margin: 0; border-radius: 50%; }
.pred .pl-fr .mk, .pred .pl-to .mk { font-size: 7px; }
.pred .pline svg { display: block; width: 100%; height: 64px; overflow: visible; }
.pred .pline path, .pred .pline line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pred .pline .pl-ar { stroke: none; }
.pred .pline .pl-ar.pl-a { fill: color-mix(in srgb, var(--side-a) 13%, transparent); }
.pred .pline .pl-ar.pl-b { fill: color-mix(in srgb, var(--side-b) 13%, transparent); }
.pred .pline .pl-ev { stroke: var(--line); stroke-width: 2.5; stroke-dasharray: 0 7; }
.pred .pline .pl-ln { stroke-width: 3.5; }
.pred .pline .pl-ln.pl-a, .pred .pline .pl-dt.pl-a, .pred .pline .pl-nw.pl-a { stroke: var(--side-a); }
.pred .pline .pl-ln.pl-b, .pred .pline .pl-dt.pl-b, .pred .pline .pl-nw.pl-b { stroke: var(--side-b); }
.pred .pline .pl-dt { stroke-width: 9; }
.pred .pline .pl-di { stroke: var(--panel); stroke-width: 4; }
.pred .pline .pl-hl { stroke-width: 22; }
.pred .pline .pl-hl.pl-a { stroke: color-mix(in srgb, var(--side-a) 22%, transparent); }
.pred .pline .pl-hl.pl-b { stroke: color-mix(in srgb, var(--side-b) 22%, transparent); }
.pred .pline .pl-nw { stroke-width: 12; }
.pred .pline .pl-in { stroke: var(--panel); stroke-width: 4.5; }
.pred .pline .pl-on .pl-hl { animation: pl-breathe 2.4s ease-in-out infinite; }
@keyframes pl-breathe { 50% { stroke-width: 30px; opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .pred .pline .pl-on .pl-hl { animation: none; } }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .pred .pl-to > span { color: var(--ground); }
}
:where(:root[data-theme="dark"]) .pred .pl-to > span { color: var(--ground); }

/* Selling a prediction back (2026-10-08): the side held with what it is worth now and the button;
   the players' purchases and sales, open to all, under the game and on /predict. */
.pred .sell { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--chip); font-size: 13.5px; }
.pred .sell .logo, .pred .sell .mk { width: 22px; height: 22px; margin: 0; border-radius: 6px; }
.pred .sell .mk { background: var(--panel); }
.pred .sell .st { flex: 1; min-width: 0; color: var(--ink2); }
.pred .sell .st b { color: var(--ink); font-variant-numeric: tabular-nums; }
.pred .sell .up { color: var(--win); font-weight: 600; }
.pred .sell .down { color: var(--loss); font-weight: 600; }
.pred .sell .sb { flex: none; border: 1px solid var(--line); border-radius: 8px; padding: 7px 14px; background: var(--panel); color: var(--ink); font: 600 13.5px var(--sans); cursor: pointer; }
.pred .sell .sb:hover { border-color: var(--acc); color: var(--acc); }
.pred .my.sold .mr b { color: var(--ink); }
.trades h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.trades .trd { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 2px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink2); }
.trades .trd:first-of-type { border-top: 0; }
.trades a.trd:hover { color: var(--ink); }
.trades .trd .ava { --s: 24px; }
.trades .trd .trw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trades .trd .trw b { color: var(--ink); }
.trades .trd .trp { color: var(--muted); }
.trades .trd .wp-n { margin-left: 5px; }
.trades .trd time { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .trades .trd .trw { white-space: normal; }
  .pred .sell { flex-wrap: wrap; }
}
/* «Прогнозы» are an alpha (owner, 2026-10-08): a quiet mark by the heading */
h1 .alpha { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--acc2); color: var(--acc); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: 5px; }
/* The amount's slider (2026-10-08): a line of its own above the field, from one chip to all the free
   ones; the buttons beside the field are its quick points. */
.rng { flex-basis: 100%; width: 100%; margin: 2px 0 4px; accent-color: var(--acc); cursor: pointer; }
.rng:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* The page «Прогнозы», «Шкала» (2026-10-08; probe «predict» 1, settled 2026-10-14): a series is one line; the chance bar split between the
   teams is the choice, each half as wide as the team's chance (never under a third, for the name). */
/* the head, the amount under a chosen side, the chips, the viewer's
   predictions, the table, the rules */
.pv-lead { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ink2); max-width: 62ch; }
.pv .coin, .pv1-m .coin { width: 10px; height: 10px; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--acc) 55%, var(--panel)); }

.pv-x { display: none; }
form:has(input[name="side"]:checked) .pv-x { display: block; animation: pv-open .16s ease-out; }
@keyframes pv-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { form:has(input[name="side"]:checked) .pv-x { animation: none; } }
/* the amount in one row with the buttons (owner 2026-10-15: «Сделать компактнее это окно. поставить на одном уровне с
   кнопками»), the slider a thin line over it; what the side would bring is the chips' sign and the number. Where the
   row has no room — a phone, a narrow pane — the buttons with that number go under the amount. */
.pv-x .rng { display: block; height: 16px; margin: 0 0 6px; }
.pv-amt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
/* the amount's field as wide as six digits, the most it takes (owner 2026-10-16: «учитывать 1000 и 1000000»), where
   the row has room; narrower — to 72 px — before the presets would leave the row; in a narrow box (the card over «Мои
   фишки», a phone) the presets close up for it (the box is the container) */
.pv-n { position: relative; display: inline-flex; flex: 1 0 72px; align-items: center; max-width: 100px; }
.pv-x { container-type: inline-size; }
@container (max-width: 340px) { .pv-x .pv-pre button { padding-right: 6px; padding-left: 6px; } }
/* the return, «Отмена» and the button in one line down to a box of 274 px — the cards over «Мои фишки» and «Прогнозы»
   (279 px), a phone of 360 px: the buttons closer up; narrower, the return goes on its own line over them */
@container (max-width: 340px) {
  .pv-x .pv-go .pv-no { padding-right: 5px; padding-left: 5px; }
  .pv-x .pv-go .btn[type="submit"] { min-width: 132px; padding-right: 9px; padding-left: 9px; }
  .pv-x .pv-go .pv-pay { margin-right: auto; }
}
@container (max-width: 273px) {
  .pv-x .pv-go { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  .pv-x .pv-go .pv-pay { flex: 1 0 100%; }
}
.pv-n .coin { position: absolute; left: 10px; pointer-events: none; }
.pv-n input { width: 100%; padding: 7px 8px 7px 26px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: 700 16px var(--sans); caret-color: var(--acc); -webkit-appearance: none; appearance: none; font-variant-numeric: tabular-nums; }
.pv-n input:focus { outline: 2px solid var(--acc2); border-color: var(--acc); }
/* the amount's own look (owner 2026-10-15: «Поля и ошибки сделать кастомными»): 16 px, so that a phone does not zoom in
   on it; the number taken whole in violet on a tap (app.js); red with the message under it when it will not do */
.pv-n input::selection { background: color-mix(in srgb, var(--acc) 28%, transparent); color: var(--ink); }
.pv-n.bad input { border-color: var(--loss); outline: 2px solid color-mix(in srgb, var(--loss) 22%, transparent); }
.pv-n.bad .coin { opacity: .5; }
.pv-pre { display: inline-flex; gap: 4px; }
.pv-pre button { border: 0; border-radius: 8px; padding: 7px 9px; background: var(--panel); color: var(--ink2); font: 600 13px var(--sans); cursor: pointer; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); }
.pv-pre button:hover { background: var(--acc2); color: var(--acc); box-shadow: none; }
.pv-go { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pv-pay { margin-right: 6px; font-size: 15px; color: var(--muted); white-space: nowrap; }
.pv-pay > span { display: inline-flex; align-items: center; gap: 4px; }
/* the number's room as wide as its widest, five signs («999,9», «99,9м»; app.js, brief), so that «Отмена» and the button
   stand still while it changes (owner 2026-10-16: «кнопка дергается когда меняется примерный выигрыш») */
.pv-pay b { min-width: 4.8ch; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
form:has(input[value="1"]:checked) .pv-pay .s2, form:has(input[value="2"]:checked) .pv-pay .s1 { display: none; }
.pv-go .btn:disabled { opacity: .6; cursor: progress; filter: none; }
/* «Поставить N» one width, whatever the amount (owner 2026-10-16: «кнопка расширяется при 99 - 100. нужно что бы
   оставалась одной ширины. учитывать 1000 и 1000000»): as wide as «Поставить 99,9к», the widest the amount is written
   (app.js: as it is up to 9999, then short) */
.pv-go .btn[type="submit"] { min-width: 146px; justify-content: center; }
.pv-go .btn [data-amt] { font-variant-numeric: tabular-nums; }
.pv-err { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--loss) 10%, var(--panel)); font-size: 13px; font-weight: 600; color: var(--loss); }
.pv-err::before { content: "!"; display: grid; flex: none; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--loss); color: #fff; font-size: 11.5px; font-weight: 800; }
.pv-err[hidden] { display: none; }
/* the viewer's purchases on the side picked, over the amount (owner 2026-10-15: «при открытии как то компактно
   сделать», then «просто листание пальцем»): violet pills in one line that scrolls sideways under the finger, its end
   fading when there are three or more */
.pv-lots { display: none; gap: 5px; margin: 0 0 8px; overflow-x: auto; overscroll-behavior-x: contain; font-size: 12.5px; scrollbar-width: none; }
form:has(input[name="side"][value="1"]:checked) .pv-lots.s1, form:has(input[name="side"][value="2"]:checked) .pv-lots.s2 { display: flex; }
.pv-lots::-webkit-scrollbar { display: none; }
.pv-lots.many { padding-right: 22px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
/* what went in at the chance, a pill of the points' sign, the same wherever it stands (owner 2026-10-15: «ничего что в
   трех вкладках разные стили?» — «да давай попробуем»): over the amount, in «В игре», in the history */
.lot { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 6px; background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--acc); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lot small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.lot .coin { width: 10px; height: 10px; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--acc) 55%, var(--panel)); }
/* the confirmation (owner 2026-10-15: «сделай подтверждение прогноза»): «Поставить N» asks first — the amount, the side,
   what it would bring — in place of the amount; «Подтвердить» sends it, «Отмена» closes the form (app.js, pfAsk) */
.pv-sure { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pv-sure[hidden], form.asking .pv-x .rng, form.asking .pv-amt { display: none; }
.pv-sq { flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.35; color: var(--ink2); }
.pv-sq b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-sq .coin { display: inline-block; margin-right: 4px; vertical-align: -1px; }
.pv-sb { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
@media (max-width: 600px) {
  .pv-go { flex: 1 0 100%; }
  .pv-pay { margin-right: auto; }
}
/* a prediction made in place (app.js): the side's half and the line of the viewer's chips light up for a moment */
.pv1-m.pv-ok .sd.held { animation: pv-ok-b 1.1s ease-out; }
.pv1-m.pv-ok .pv1-held { animation: pv-ok-t 1.6s ease-out; }
@keyframes pv-ok-b { from { box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc) 35%, transparent); } }
@keyframes pv-ok-t { from { color: var(--acc); transform: translateY(-3px); } 25% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .pv1-m.pv-ok .sd.held, .pv1-m.pv-ok .pv1-held, .fo.pv-ok .fo-vs { animation: none; } }
.pv-no { border: 0; background: none; padding: 8px 10px; border-radius: 10px; font: 500 14px var(--sans); color: var(--muted); cursor: pointer; }
.pv-no:hover { background: var(--chip); color: var(--ink); }
.pv-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--ink2); }
.pv-in > span { flex: 1 1 260px; }
.pv-in .pv-no { margin-left: auto; }

.pv-ldr { width: 100%; border-collapse: collapse; font-size: 14px; }
.pv-ldr th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: left; padding: 0 8px 6px; }
.pv-ldr td { padding: 6px 8px; border-top: 1px solid var(--line); }
.pv-ldr .n { width: 30px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-ldr .u > span { display: inline-flex; align-items: center; gap: 9px; }
.pv-ldr .ava { width: 26px; height: 26px; font-size: 10px; }
.pv-ldr .h, .pv-ldr .s { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pv-ldr td.h { font-size: 13px; color: var(--muted); }
.pv-ldr td.h b { font-weight: 700; color: var(--ink2); }
.pv-ldr td.h b.pos { color: var(--win); }
.pv-ldr td.h b.neg { color: var(--loss); }
.pv-ldr td.s { font-weight: 700; }
.pv-ldr tr.me td { background: var(--acc2); border-top-color: transparent; }
.pv-ldr tr.me + tr td { border-top-color: transparent; }
.pv-ldr tr.me td:first-child { border-radius: 8px 0 0 8px; }
.pv-ldr tr.me td:last-child { border-radius: 0 8px 8px 0; }

.pv-rules { margin: 0; padding: 0; list-style: none; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.pv-rules li { position: relative; padding: 4px 0 4px 16px; }
.pv-rules li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.pv1-m { padding: 12px 0 14px; border-top: 1px solid var(--line); }
h2 + .pv1-m, .hpl > .pv1-m:first-child { border-top: 0; padding-top: 2px; }
.pv1-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.pv1-h time { flex: none; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv1-h .ev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.pv1-h .ev span { color: var(--muted); }
.pv1-h .ev:hover, .pv1-h .ev:hover span { color: var(--acc); }
.pv1-h .gb { margin-left: auto; }
.pv1-bar { display: flex; gap: 3px; }
.pv1-bar .sd { position: relative; flex: 1 1 0; min-width: 32%; display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 14px; cursor: pointer; background: color-mix(in srgb, var(--side-a) 13%, var(--panel)); transition: background .12s, color .12s, opacity .12s; }
.pv1-bar .sd.a { border-radius: 12px 4px 4px 12px; }
.pv1-bar .sd.b { border-radius: 4px 12px 12px 4px; flex-direction: row-reverse; background: color-mix(in srgb, var(--side-b) 15%, var(--panel)); }
.pv1-bar .sd:where(.a):hover { background: color-mix(in srgb, var(--side-a) 24%, var(--panel)); }
.pv1-bar .sd:where(.b):hover { background: color-mix(in srgb, var(--side-b) 24%, var(--panel)); }
.pv1-bar .sd input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pv1-bar .sd:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.pv1-bar .logo, .pv1-bar .mk { margin: 0; width: 28px; height: 28px; border-radius: 7px; }
.pv1-bar .nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv1-bar .b .nm { text-align: right; }
.pv1-bar .pc { flex: none; font-size: 17px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pv1-bar .sd.held { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent); }
.pv1-bar .sd:has(input:checked) { background: var(--acc-fill); color: #fff; box-shadow: none; }
.pv1-bar:has(input:checked) .sd:not(:has(input:checked)) { opacity: .45; }
.pv1-bar .g0 { flex-grow: 0; } .pv1-bar .g5 { flex-grow: 5; } .pv1-bar .g10 { flex-grow: 10; } .pv1-bar .g15 { flex-grow: 15; } .pv1-bar .g20 { flex-grow: 20; } .pv1-bar .g25 { flex-grow: 25; } .pv1-bar .g30 { flex-grow: 30; } .pv1-bar .g35 { flex-grow: 35; } .pv1-bar .g40 { flex-grow: 40; } .pv1-bar .g45 { flex-grow: 45; } .pv1-bar .g50 { flex-grow: 50; }
.pv1-bar .g55 { flex-grow: 55; } .pv1-bar .g60 { flex-grow: 60; } .pv1-bar .g65 { flex-grow: 65; } .pv1-bar .g70 { flex-grow: 70; } .pv1-bar .g75 { flex-grow: 75; } .pv1-bar .g80 { flex-grow: 80; } .pv1-bar .g85 { flex-grow: 85; } .pv1-bar .g90 { flex-grow: 90; } .pv1-bar .g95 { flex-grow: 95; } .pv1-bar .g100 { flex-grow: 100; }
.pv1-held { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12.5px; color: var(--ink2); }
.pv1-m .pv-x { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--chip); }
/* brought into sight (app.js), the amount stops short of the window's edge (owner 2026-10-16, of the last card's amount
   on «Прогнозы»: «нижний прогноз упирается прям») */
.pv1-m .pv-x { scroll-margin: 16px 0; }
.pred .pv1-m { padding: 2px 0 0; border-top: 0; } /* on the series' own page, under the plaque's heading */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .pv1-bar .sd { background: color-mix(in srgb, var(--side-a) 18%, var(--panel)); }
  :where(:root:not([data-theme="light"])) .pv1-bar .sd.b { background: color-mix(in srgb, var(--side-b) 22%, var(--panel)); }
  :where(:root:not([data-theme="light"])) .pv1-bar .sd:has(input:checked) { color: var(--ground); }
}
:where(:root[data-theme="dark"]) .pv1-bar .sd { background: color-mix(in srgb, var(--side-a) 18%, var(--panel)); }
:where(:root[data-theme="dark"]) .pv1-bar .sd.b { background: color-mix(in srgb, var(--side-b) 22%, var(--panel)); }
:where(:root[data-theme="dark"]) .pv1-bar .sd:has(input:checked) { color: var(--ground); }
@media (max-width: 600px) {
  .pv1-bar .sd { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lg pc" "nm nm"; align-items: center; gap: 4px 8px; height: auto; padding: 9px 11px; min-width: 36%; }
  .pv1-bar .sd.b { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "pc lg" "nm nm"; }
  .pv1-bar .logo, .pv1-bar .mk { grid-area: lg; width: 24px; height: 24px; }
  .pv1-bar .pc { grid-area: pc; }
  .pv1-bar .a .pc { text-align: right; }
  .pv1-bar .nm { grid-area: nm; font-size: 13.5px; }
  .pv1-h .ev span { display: none; }
}
.pv1-m { scroll-margin-top: 14px; }

/* «Свободно» in «Мои фишки» (owner 2026-10-15: «Теперь 3 варианта этого блока в свободно. Переосмысли и не боись»;
   «разлом» settled — «ставь дефолтом»; the variants in design/archive, probes-2026-10-15-fopen.patch): one poster for
   the two sides, cut on the slant — sea green on the left, orange on the right — the logo and the chance on a line, the
   name under them, the game, the time and the event over it. Lower, the time out of it, the cut where the chances are
   (owner 2026-10-16: «И давай сделаем разлом меньше по вертикали. И без времени внутри. И разлом движется с процентами
   но не более порога определенного»): at the first team's chance, never past 40 and 60 per cent (cutAt), so that the
   narrow half keeps its logo, chance and name on a phone; a round medal on the cut only for a score. A little lower again
   and no marks of the viewer's chips (owner: «убери отметки поставленных очков с карточек. Разломы по вертикали на 5 -7 %
   меньше»): a prediction made, the poster glows for a moment. */
.fo-h { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 9px; font-size: 12.5px; color: var(--muted); }
.fo-h .gb { margin-left: 0; }
.fo-h time { flex: none; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.fo-h .ev { min-width: 0; overflow: hidden; color: var(--ink2); text-overflow: ellipsis; white-space: nowrap; }
.fo-h .ev:hover { color: var(--acc); }
/* the cut, on the form (the amount's beak points at the half picked) or on the poster itself (the match's, shut) */
.sp40 { --sp: 40; } .sp41 { --sp: 41; } .sp42 { --sp: 42; } .sp43 { --sp: 43; } .sp44 { --sp: 44; } .sp45 { --sp: 45; } .sp46 { --sp: 46; }
.sp47 { --sp: 47; } .sp48 { --sp: 48; } .sp49 { --sp: 49; } .sp51 { --sp: 51; } .sp52 { --sp: 52; } .sp53 { --sp: 53; } .sp54 { --sp: 54; }
.sp55 { --sp: 55; } .sp56 { --sp: 56; } .sp57 { --sp: 57; } .sp58 { --sp: 58; } .sp59 { --sp: 59; } .sp60 { --sp: 60; }
.fo-vs { position: relative; display: grid; grid-template-columns: minmax(0, calc(var(--sp, 50) * 1%)) minmax(0, 1fr); }
.fo-s { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 30px 6px 10px; border-radius: 16px 0 0 16px; background: color-mix(in srgb, var(--side-a) 17%, var(--panel)); text-align: center; cursor: pointer; clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%); transition: background .12s, opacity .12s; }
.fo-s.b { margin-left: -22px; padding: 6px 10px 6px 30px; border-radius: 0 16px 16px 0; background: color-mix(in srgb, var(--side-b) 19%, var(--panel)); clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%); }
.fo-s:where(.a):hover { background: color-mix(in srgb, var(--side-a) 26%, var(--panel)); }
.fo-s:where(.b):hover { background: color-mix(in srgb, var(--side-b) 26%, var(--panel)); }
.fo-s input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fo-s:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.fo-lp { display: flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; }
.fo-s.b .fo-lp { flex-direction: row-reverse; }
.fo-s .logo, .fo-s .mk { flex: none; width: 32px; height: 32px; margin: 0; border-radius: 9px; }
.fo-s .mk { font-size: 12px; }
.fo-s .nm { max-width: 100%; min-width: 0; overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.fo-s .pc { font-size: 21px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fo-s:has(input:checked) { background: var(--acc-fill); color: #fff; box-shadow: none; }
.fo:has(input[name="side"]:checked) .fo-s:not(:has(input:checked)) { opacity: .45; }
.fo.pv-ok .fo-vs { border-radius: 16px; animation: pv-ok-b 1.1s ease-out; }
.fo-mid { position: absolute; top: 50%; left: calc(var(--sp, 50) * 1%); z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--line); transform: translate(-50%, -50%); pointer-events: none; }
.fo-mid b { font-size: 14px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fo-mid span { font-size: 10.5px; color: var(--muted); }
/* a series in a break (owner 2026-10-15: «оранжевым мигает как идет», «Перерыв без точки»; 2026-10-16, of the medal on
   the cut: «убери круг с надписью перерыв там»): the score so far and «перерыв» over the poster, at the right where the
   time till the start stands, the word in the orange of «В игре» beating as «идёт»'s dot does */
.fo-br { flex: none; margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 700; color: var(--ink2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fo-br i { margin-left: 3px; font-style: normal; color: var(--t-play, #d4700a); animation: brk-beat 1.6s ease-in-out infinite; }
@keyframes brk-beat { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .fo-br i { animation: none; } }
.pv1-m.fo .pv-x { margin-top: 10px; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .fo-s:has(input:checked) { color: var(--ground); }
}
:where(:root[data-theme="dark"]) .fo-s:has(input:checked) { color: var(--ground); }

/* «Мои фишки», «Кабинет» (probe «bank» 6, settled 2026-10-14; owner 2026-10-13: «Сделать вариант страницы фишек… шапку. В ней слева фишки, автар ещё что
   нибудь. Далее что-то по центру и что-то справа… Ниже второй блок. Там 2 плашки. Прогнозы и история»; then «Слишком
   крупно. Нужно компактней и с переключением по плашкам на телефоне особенно», «На телефоне убери аватар… График пока
   тоже. Лидеров тоже убрать», «В первой все фишки, отображается история. Вторая свободно в ней прогнозы на что поставить.
   А третьей в игре, что поставлено. Типо плашки как и информация одновременно»; templates/chips.html, chips.go): the
   head in three parts — the player with the chips, the course of the predictions with the form of the last ten, the
   place in the table — then what is in play, the series to put chips on and the history: three panes at once on a wide
   screen; on a narrow one three tiles that are the tabs, on a phone the tiles alone for a head. */

.bk .pos { color: var(--win); }
.bk .neg { color: var(--loss); }
.bk h2 span { font-size: 12.5px; }
/* a prediction as a line: the side's logo, the side against the other, the chips at the chance, the result */
.bk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 0 4px; border-radius: 10px; background: var(--chip); color: inherit; }
.bk-row:hover { background: var(--acc2); color: inherit; }
.bk-row > .logo, .bk-row > .mk { width: 28px; height: 28px; margin: 0; }
.bk-row > .mk { background: var(--panel); }
/* a day of the statement with what it brought */
.bk-day { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bk-day:first-of-type { margin-top: 4px; }
.bk-day b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bk .more { margin: 10px 0 0; }

/* the head: three parts in one panel, split by lines */
.bk6-h { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(200px, .75fr); margin-top: 14px; padding: 0; overflow: hidden; border-radius: 14px; }
.bk6-me, .bk6-run, .bk6-pl { min-width: 0; padding: 14px 18px; }
.bk6-run, .bk6-pl { border-left: 1px solid var(--line); }
.bk6-h .k { font-size: 12px; font-weight: 600; color: var(--muted); }
/* the player and the chips: the site's colour faintly from the corner */
.bk6-me { background: radial-gradient(300px 160px at 0% 0%, var(--acc2), transparent 75%); }
.bk6-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bk6-who .ava { --s: 40px; flex: none; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px color-mix(in srgb, var(--acc) 40%, transparent); }
.bk6-who > div { min-width: 0; }
.bk6-who h1 { margin: 0; overflow: hidden; font-size: 16px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.bk6-who > div > span { font-size: 12px; color: var(--muted); }
.bk6-bal { display: flex; align-items: baseline; gap: 7px; margin: 12px 0 7px; }
.bk6-bal .coin { align-self: center; width: 18px; height: 18px; box-shadow: inset 0 0 0 4.5px color-mix(in srgb, var(--acc) 55%, var(--panel)); }
.bk6-bal b { font-size: 28px; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bk6-bal span { font-size: 13px; font-weight: 600; color: var(--muted); }
.bk6-bal em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; }
.bk6-bar { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: color-mix(in srgb, var(--acc) 22%, var(--panel)); }
.bk6-bar i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }
.bk6-sp { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.bk6-sp span { display: inline-flex; align-items: center; gap: 5px; }
.bk6-sp i { width: 7px; height: 7px; border-radius: 2px; background: var(--acc); }
.bk6-sp i.p { background: color-mix(in srgb, var(--acc) 22%, var(--panel)); }
/* the course: what the predictions brought, a line of it, the last ten as a team's form */
.bk6-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; align-items: baseline; column-gap: 10px; }
.bk6-run > :not(.k):not(.bk6-net) { grid-column: 1 / -1; }
.bk6-net { font-size: 22px; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bk6-g { display: block; width: 100%; height: 44px; margin: 8px 0; overflow: visible; }
.bk6-g .z { stroke: var(--muted); stroke-opacity: .5; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.bk6-g .a { fill: var(--acc); fill-opacity: .12; }
.bk6-g .l { fill: none; stroke: var(--acc); stroke-width: 1.75; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bk6-form { display: flex; align-items: center; gap: 8px; }
.bk6-form .dots { display: flex; gap: 3px; }
.bk6-form .dots a { width: 12px; height: 12px; border-radius: 3px; background: var(--chip); box-shadow: inset 0 0 0 1px var(--line); }
.bk6-form .dots a.k-y { background: var(--win); box-shadow: none; }
.bk6-form .dots a.k-n { background: var(--loss); box-shadow: none; }
.bk6-form .dots a:hover { outline: 2px solid var(--acc); outline-offset: 1px; }
.bk6-form .pc { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.bk6-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
/* the place */
.bk6-pl { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.bk6-rk { display: flex; align-items: baseline; gap: 5px; margin-top: 2px; font-size: 30px; line-height: 1; letter-spacing: -.03em; color: var(--acc); font-variant-numeric: tabular-nums; }
.bk6-rk small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.bk6-gap { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 8px; border-radius: 7px; background: var(--acc2); font-size: 12px; font-weight: 600; color: var(--acc); white-space: nowrap; }
.bk6-gap .crown { width: 14px; height: 12px; }
.bk6-top { font-size: 12px; color: var(--muted); }
.bk6-pl > span:nth-last-of-type(1) { margin-bottom: 10px; }
.bk6-pl .btn { align-self: stretch; justify-content: center; margin-top: auto; padding: 6px 12px; font-size: 13.5px; }
/* the hourly chip, under the three parts */
.bk6-ref { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 7px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.bk6-rb { flex: 0 0 140px; height: 5px; margin-left: auto; overflow: hidden; border-radius: 3px; background: var(--chip); }
.bk6-rb i { display: block; height: 100%; border-radius: 3px; background: var(--acc); }

/* the panes: in play and the series to put chips on on the left, the history on the right */
.bk6-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "w h" "f h"; align-items: start; gap: 14px; margin-top: 14px; }
.bk6-2 > .panel { margin: 0; padding: 14px 16px; }
.bk6-2 > .bk6-w { grid-area: w; }
.bk6-2 > .bk6-f { grid-area: f; }
.bk6-2 > .bk6-hi { grid-area: h; }
.bk6-2 h2 { justify-content: flex-start; margin-bottom: 8px; font-size: 15px; }
.bk6-tt { display: none; }
/* the tiles' colours (owner 2026-10-15): «Всего очков» violet, the free chips a sea wave of our own — not the win's green
   («зеленый - выигрыш и я не знаю уместен ли он там») — those in play orange, in the dark theme terracotta («Давай как
   есть в светлой и терракота в темной») */
.bk6-2 { --t-free: #127887; --t-play: #d4700a; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .bk6-2 { --t-free: #4fbdcb; --t-play: #df8c6c; }
}
:where(:root[data-theme="dark"]) .bk6-2 { --t-free: #4fbdcb; --t-play: #df8c6c; }
/* a wide screen shows the three: no tiles, the panes app.js put away shown with their headings */
@media (min-width: 1001px) {
  .bk6-2.tabs > .pane[hidden], .js .bk6-2.tabs > .pane.off { display: block; }
  .js .bk6-2.tabs > .pane > h2 { display: flex; }
}
/* the lines, tighter than the other variants' */
.bk6-2 .bk-row { gap: 9px; margin-bottom: 3px; padding: 6px 9px; border-radius: 9px; }
.bk6-2 .bk-row > .logo, .bk6-2 .bk-row > .mk { width: 24px; height: 24px; }
/* a prediction in play: when and where on one line, cut with dots */
.bk6-2 .more { margin-top: 8px; font-size: 13px; }
.bk6-2 .bk6-form .k { font-size: 12px; font-weight: 600; color: var(--muted); }
/* the history: the sums in a line, the days, the older days folded */
.bk6-s { display: flex; flex-wrap: wrap; gap: 3px 14px; margin: -2px 0 4px; font-size: 12.5px; color: var(--muted); }
.bk6-s b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bk6-2 .bk-day { margin: 10px 0 4px; font-size: 12.5px; }
.bk6-2 .bk-day:first-of-type { margin-top: 6px; }
/* a day as one card, in the three panes alike (owner 2026-10-15: «сделай день карточкой со счетом»; then «ничего что в
   трех вкладках разные стили?» — «да давай попробуем»): its name, how many, in the history what it brought in a pill; a
   series a card of its own in it, the game and the event over it; on a line the series' score from the side picked */
.bk-dc { margin: 0 0 8px; padding: 0 7px 1px; border-radius: 12px; background: var(--chip); }
.bk6-2 .bk-dc .bk-day { align-items: center; margin: 0; padding: 9px 4px 7px; }
/* the day itself a little stronger than how many, an anchor to scroll by (owner 2026-10-16: «попробуй дату чуть выделить») */
.bk-dc .bk-day > span { color: var(--ink); font-weight: 700; }
.bk-dc .bk-day small { font-size: 12px; font-weight: 500; color: var(--muted); }
.bk-dc .bk-day b { padding: 2px 9px; border-radius: 999px; background: var(--panel); }
.bk6-2 .bk-dc .bk-row { row-gap: 6px; margin: 0 0 6px; padding: 9px 10px 10px; border: 0; border-radius: 10px; background: var(--panel); }
.bk-h { display: flex; grid-column: 1 / -1; align-items: center; gap: 7px; min-width: 0; font-size: 12px; color: var(--muted); }
.bk-h .gb { width: 18px; height: 18px; margin-left: 0; border-radius: 4px; }
.bk-h .ev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a series of the history once (owner 2026-10-15: «Да давай»), «табло» (owner 2026-10-16, of a series held on both sides,
   four purchases on one and two on the other, given back: «придумай более чистый дизайн для этого», then «давай табло
   дефолтом»; probe «hcard» 1, the card before it in design/archive, history-card-2026-10-16.*): the game and the event over
   it with the series' result at the right, once — «возврат» when all came back; under them both teams on one line round
   the score, as the site's match rows — the winner in ink, the other faded; under the team held what went in at the
   chance, in violet, the list of the purchases in its hint. No pills, no «×N», no tinted lines. */
.bk6-2 .bk-dc .bk-past { display: block; }
.bk-past .bk-h { margin-bottom: 9px; }
.bk-dc .bk-past:hover .bk-h .ev { color: var(--acc); }
.bk-h .hc-r { flex: none; margin-left: auto; padding-left: 8px; font-size: 14px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-h .hc-r.pos { color: var(--win); }
.bk-h .hc-r.neg { color: var(--loss); }
.bk-h .hc-r.vd { font-size: 12.5px; font-weight: 600; }
.htb-t { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.htb-tm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.htb-tm.b { justify-content: flex-end; text-align: right; }
.htb-tm .logo, .htb-tm .mk { flex: none; width: 28px; height: 28px; margin: 0; }
.htb-tm .mk { background: var(--chip); }
.htb-tm.lost .logo, .htb-tm.lost .mk { opacity: .6; filter: grayscale(.5); }
.htb-n { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.htb-tm.b .htb-n { align-items: flex-end; }
.htb-n > b { max-width: 100%; overflow: hidden; font-size: 14px; font-weight: 700; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.htb-tm.lost .htb-n > b { font-weight: 500; color: var(--muted); }
.htb-my { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12.5px; font-style: normal; font-weight: 700; color: var(--acc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.htb-my .coin { width: 9px; height: 9px; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--acc) 55%, var(--panel)); }
.htb-my small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.htb-sc { min-width: 26px; font-size: 15px; font-weight: 800; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
/* on a phone a long name is the team's short one, as a scoreboard writes it, the whole in the hint (owner 2026-10-16: «А
   давай коротко на телефоне», probe «tbname» 1; teamAbbr) — the «табло»'s and the «разлом»'s */
.tn-s { display: none; }
@media (max-width: 700px) {
  .tn-f { display: none; }
  .tn-s { display: inline; }
}
/* «В игре» (owner 2026-10-15: «сделай "В игре" по матчам, но дни на подложке и нет 43% -> 57%. и сейчас стрелочка
   говорит что как будто выигрыш подтвержден. нужно фиолетовым»; the variants in design/archive): the days as the
   history's cards (.bk-dc), a series once in each — when and the event, a line a side held: the side, «×N», the score
   from it, against whom, what went in → what it brings should it win in violet, not the win's green; the purchases a
   line the finger scrolls */
/* «Свободно» by the day too: a series a card of its own in the day's, the game and the event over its poster */
.bk6-2 .fd .pv1-m.fo { margin: 0 0 6px; padding: 9px 10px 10px; border-top: 0; border-radius: 10px; background: var(--panel); }
.fd .fo-h { justify-content: flex-start; margin-bottom: 8px; font-size: 12px; }
.fd .fo-h .gb { width: 18px; height: 18px; border-radius: 4px; }
/* how long till the start, small on the right over the card (owner 2026-10-16: «давай просто дублировать мелко сверху справа
   над карточкой. через...»; app.js counts it down) */
.fo-in { flex: none; margin-left: auto; padding-left: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a series on a card of its own in the day's (owner: «попробуй отделить визуально матчи может на отдельной подолжке?»);
   one on now, ringed */
.wd .wp-card { display: block; margin: 0 0 6px; padding: 9px 10px 10px; border-radius: 10px; background: var(--panel); color: inherit; }
.wd .wp-card.live { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--live) 45%, transparent); }
.wd .wp-card:hover { color: inherit; }
.wd .wp-card:hover .wp-h .ev { color: var(--acc); }
.wp-h { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0 0 9px; font-size: 12px; color: var(--muted); }
.wp-h .gb { width: 18px; height: 18px; margin-left: 0; border-radius: 4px; }
.wp-h .lvt, .wp-h .wp-over { flex: none; margin-left: auto; padding-left: 8px; font-size: 12px; }
.wp-over { color: var(--ink2); font-weight: 600; }
.wp-h .ev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-n { flex: none; padding: 0 5px; border-radius: 5px; background: color-mix(in srgb, var(--acc) 13%, transparent); color: var(--acc); font-size: 11.5px; font-style: normal; font-weight: 700; }
/* the «табло» of the history (.htb-*): what went in → what it brings, the second violet, the time with a late series'
   day under it, the score red while it is on */
.wd .htb-my { flex-wrap: wrap; color: var(--ink2); }
.wd .htb-my b { font-weight: 800; color: var(--acc); }
.wd .htb-sc small { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.wd .wp-card.live .htb-sc { color: var(--live); }
.wd .coin { width: 10px; height: 10px; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--acc) 55%, var(--panel)); }

/* a narrow screen: the chips are the tiles, the head keeps the course and the place */
@media (max-width: 1000px) {
  .bk6-h { grid-template-columns: minmax(0, 1fr) minmax(180px, .6fr); }
  .bk6-me, .bk6-ref { display: none; }
  .bk6-run { border-left: 0; }
  .bk6-2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; gap: 10px; }
  .bk6-2 > .bk6-w, .bk6-2 > .bk6-f, .bk6-2 > .bk6-hi { grid-area: auto; }
  /* the tiles: each the tab of its pane, as a folder's (owner 2026-10-13: «Давай папку»): the tiles on a grey strip,
     the one picked white and grown into its list; the tiles and the list one card. On a tile (2026-10-15, the probes
     settled): a word, the chips' sign and a big number in the tile's colour, a line under it, all in the middle; the
     sign faded on the tiles not picked */
  .js .bk6-tt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 8px 8px 0; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--chip); }
  .bk6-tt button { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 9px 8px 11px; border: 1px solid transparent; border-bottom: 0; border-radius: 10px 10px 0 0; background: none; color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
  .bk6-tt button[aria-selected="true"] { z-index: 1; margin-bottom: -1px; padding-bottom: 12px; border-color: var(--line); background: var(--panel); }
  #tab-bka { --tc: var(--acc); }
  #tab-bkf { --tc: var(--t-free); }
  #tab-bkw { --tc: var(--t-play); }
  .bk6-tt button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  .bk6-tt .k { font-size: 13px; color: var(--muted); }
  .bk6-tt button[aria-selected="true"] .k { color: var(--acc); font-weight: 600; }
  .bk6-tt b { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; margin-top: 3px; font-size: clamp(21px, 6.6vw, 30px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tc); }
  .bk6-tt b .coin { width: .6em; height: .6em; background-color: var(--tc); box-shadow: inset 0 0 0 .15em color-mix(in srgb, var(--tc) 55%, var(--panel)); transition: opacity .15s; }
  .bk6-tt button[aria-selected="false"] .coin { opacity: .4; }
  .bk6-tt small { display: block; max-width: 100%; margin-top: 2px; overflow: hidden; font-size: 11.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
  .js .bk6-2 { gap: 0; }
  .js .bk6-2 > .pane { border-top-left-radius: 0; border-top-right-radius: 0; }
}
/* a phone: the tiles are the whole head; over the history the board, no line of the form (owner 2026-10-15: «убери
   этот блок») */
/* the boards over the panes on a phone (owner 2026-10-15: «Переделать этот блок… Без лишних приписок», settled «табло»):
   plates of a number with a word under it — over the history in place of the form's line and the sums */
.bb { display: none; }
@media (max-width: 700px) {
  .bk6-s { display: none; }
  .bb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 12px; }
  .bb > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 8px 4px 7px; border-radius: 10px; background: var(--chip); }
  .bb b { font-size: 18px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
  .bb b.pos { color: var(--win); }
  .bb b.neg { color: var(--loss); }
  .bb b.acc { color: var(--acc); }
  .bb span { font-size: 11.5px; color: var(--muted); }
}
@media (max-width: 700px) {
  .bk6-h { display: none; }
  .bk6-2 { margin-top: 12px; }
  .bk6-2 > .panel { padding: 12px; }
}

/* «Мои фишки» on a wide screen — «пульт» as an app with the chart (owner 2026-10-16: «и с этим закончили. делаем дефолтом
   остальное в архив»; settled from probe «chpc» 5; the other variants in design/archive, probe-chpc-1…4.css,
   chpc-3-statement.html, probe-chpc-1-violet.css, chpc-graph-2026-10-15.patch). What follows was the probe's sheet. */
/* Probe «chpc» 5 — «пульт с графиком» (owner 2026-10-15: «дай еще вариант пульта. с кликами. Вкладка всего очков
   вровень с правым блоком. Скругления неровные, исправь. Без шапки. В свободно карточки меньше по 2 или 3 в ряд +
   скролл. скролл и в остальных. 4 вкладка график. Только сделай другой график… красивый и что там разместить»; «у кнопки
   поставить вид "карточка" как ты делал вариант до этого»): on a wide screen no head; four folders down the left — all
   the chips, the free ones, those in play, the chart — the first level with the list's top; the one open grows into the
   list, its edges bending into the list's as a border does (no drawn rings: those came out uneven); the list in a block
   of the screen's height, scrolled within and paged, its series cards in rows — smaller in «Свободно», two or three a row; a side
   picked opens the amount as a card floating under it. A phone and a tablet keep their own (from 1001px; the chart's
   folder is a wide screen's alone). */
@media (max-width: 1000px) {
  #tab-bkg, #pane-bkg { display: none; }
}
@media (min-width: 1001px) {
  .bkp6 > .bk6-h { display: none; }

  /* the folders */
  .bkp6 .bk6-2 { grid-template-columns: 260px minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "t p"; align-items: stretch; gap: 0; }
  .js .bkp6 .bk6-tt { grid-area: t; display: flex; flex-direction: column; gap: 8px; padding: 0 0 36px; }
  .bkp6 #tab-bka { --tc: var(--acc); }
  .bkp6 #tab-bkf { --tc: var(--t-free); }
  .bkp6 #tab-bkw { --tc: var(--t-play); }
  .bkp6 #tab-bkg { --tc: var(--acc); }
  .bkp6 #tab-bkg b { font-size: 26px; letter-spacing: -.01em; } /* the word alone, violet (owner: «просто надпись График фиолетовым») */
  .bkp6 .bk6-tt button { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "b k" "b s"; align-items: center; column-gap: 14px; min-width: 0; margin-right: 12px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--panel) 50%, var(--ground)); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .12s; }
  .bkp6 .bk6-tt button:hover { background: color-mix(in srgb, var(--tc) 7%, var(--panel)); }
  .bkp6 .bk6-tt button[aria-selected="true"] { z-index: 1; margin-right: -1px; border-right: 0; border-radius: 16px 0 0 16px; background: var(--panel); }
  .bkp6 .bk6-tt button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  /* the joins: a square by the open folder's corner on the list's side, its own rounded corner the bend, drawn by its
     border as every edge here is; its shadow lays the list's colour over what is outside the bend */
  .bkp6 .bk6-tt button[aria-selected="true"]::before, .bkp6 .bk6-tt button[aria-selected="true"]::after { content: ""; position: absolute; right: 0; box-sizing: border-box; width: 16px; height: 16px; border-right: 1px solid var(--line); pointer-events: none; }
  .bkp6 .bk6-tt button[aria-selected="true"]::before { top: -16px; border-bottom: 1px solid var(--line); border-bottom-right-radius: 16px; box-shadow: 5px 5px 0 5px var(--panel); }
  .bkp6 .bk6-tt button[aria-selected="true"]::after { bottom: -16px; border-top: 1px solid var(--line); border-top-right-radius: 16px; box-shadow: 5px -5px 0 5px var(--panel); }
  /* the first folder level with the list's top: open, its top edge runs on into the list's, no bend, no corner */
  .bkp6 #tab-bka[aria-selected="true"]::before { display: none; }
  .bkp6 .bk6-2:has(#tab-bka[aria-selected="true"]) > .pane { border-top-left-radius: 0; }
  .bkp6 .bk6-tt .k { grid-area: k; align-self: end; font-size: 14px; font-weight: 600; color: var(--muted); }
  .bkp6 .bk6-tt button[aria-selected="true"] .k { color: var(--ink); }
  .bkp6 .bk6-tt b { grid-area: b; display: flex; align-items: center; gap: 8px; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--tc); font-variant-numeric: tabular-nums; }
  .bkp6 .bk6-tt b .coin { width: .55em; height: .55em; background-color: var(--tc); box-shadow: inset 0 0 0 .14em color-mix(in srgb, var(--tc) 55%, var(--panel)); }
  .bkp6 .bk6-tt button[aria-selected="false"] b .coin { opacity: .45; }
  .bkp6 .bk6-tt small { grid-area: s; align-self: start; min-width: 0; overflow: hidden; font-size: 12.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

  /* as an app (owner 2026-10-15: «и сделай приложением. скролл справа + страницы если много. можно скроллить можно
     нажать на страницу»; before it the page scrolled, the folders sticking): the block the screen's height under the
     bar (--bk-top, app.js), the folders at its top, the open one's list scrolled within, its bar on the right, grey; pages
     under it when it is longer than the block (.bk-pg, app.js) */
  .js .bkp6 .bk6-tt { align-self: start; }
  /* the list as tall as it is, the screen's height at most (owner 2026-10-15: «сделай что бы подвал увидеть нужно
     страницу прокрутить. И сделай что бы белого меньше пустого было… Где график и где результатов мало»): a short one
     — the chart, a few series — leaves no white under it, a long one scrolls within; the footer under the screen */
  .bkp6 .bk6-2 > .pane { grid-area: p; min-height: 0; max-height: max(480px, calc(100vh - var(--bk-top, 130px) - 16px)); margin: 0; padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; } /* the site's quiet grey (owner: «сделай там скролл серым», «сделай тише везде ее. в прогнозах тоже») */
  .bkp6 .bk6-2:has(.bk-pg:not([hidden])) > .pane:not([hidden]) { padding-bottom: 84px; } /* the list's end clear of the pages */
  /* the pages: room round them, so that their plate does not touch the block's edge (owner: «серый блок с цифрами
     упирается. может чуть поля увеличить там») */
  .bkp6 .bk-pg { grid-area: p; z-index: 3; align-self: end; display: flex; justify-content: center; margin: 0 14px 1px 1px; padding: 30px 0 18px; border-radius: 0 0 16px 16px; background: linear-gradient(color-mix(in srgb, var(--panel) 0%, transparent), var(--panel) 55%); pointer-events: none; }
  .bkp6 .bk-pg[hidden] { display: none; }
  /* a prediction open: no pages over the list's foot, where its card may stand (owner 2026-10-16: «еще баг при попытке
     прогноза в Свободно») */
  .bkp6 .bk6-2:has(form.pv1-m input[name="side"]:checked) > .bk-pg { display: none; }
  .bkp6 .bk-pg > div { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 13px; background: var(--chip); pointer-events: auto; }
  .bkp6 .bk-pg button { min-width: 34px; padding: 5px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink2); font: 600 13.5px var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; }
  .bkp6 .bk-pg button:hover:not(:disabled) { background: rgba(255, 255, 255, .65); color: var(--ink); }
  .bkp6 .bk-pg button[aria-current="page"] { background: var(--panel); color: var(--acc); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 3px 10px rgba(16, 24, 40, .07); }
  .bkp6 .bk-pg button:disabled { opacity: .35; cursor: default; }
  .bkp6 .bk-pg .gap { padding: 0 4px; color: var(--muted); }
  .bkp6 .bk-pg button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  @media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme="light"])) .bkp6 .bk-pg button:hover:not(:disabled) { background: rgba(255, 255, 255, .05); }
    :where(:root:not([data-theme="light"])) .bkp6 .bk-pg button[aria-current="page"] { background: #383d49; box-shadow: none; }
  }
  :where(:root[data-theme="dark"]) .bkp6 .bk-pg button:hover:not(:disabled) { background: rgba(255, 255, 255, .05); }
  :where(:root[data-theme="dark"]) .bkp6 .bk-pg button[aria-current="page"] { background: #383d49; box-shadow: none; }
  .js .bkp6 .bk6-2.tabs > .pane[hidden], .js .bkp6 .bk6-2.tabs > .pane.off { display: none; }
  .js .bkp6 .bk6-2.tabs > .pane > h2 { display: none; }

  /* a day's series in rows: two a row in the history and in play, two or three in «Свободно», smaller there */
  .bkp6 .gv > .bk-dc, .bkp6 .bk6-more > .bk-dc { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; gap: 8px; margin: 0 0 12px; padding: 0 8px 8px; }
  .bkp6 .bk6-f .gv > .bk-dc { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .bkp6 .bk-dc > .bk-day { grid-column: 1 / -1; }
  .bkp6 .bk-dc > .bk-row, .bkp6 .bk-dc > .wp-card, .bkp6 .bk-dc > form.pv1-m { min-width: 0; margin: 0; }
  .bkp6 .fd .fo-h { margin-bottom: 6px; }
  .bkp6 .fd .fo-s { padding: 5px 28px 5px 8px; }
  .bkp6 .fd .fo-s.b { padding: 5px 8px 5px 28px; }
  .bkp6 .fd .fo-s .logo, .bkp6 .fd .fo-s .mk { width: 28px; height: 28px; border-radius: 8px; }
  .bkp6 .fd .fo-s .nm { font-size: 13px; }
  .bkp6 .fd .fo-s .pc { font-size: 18px; }
  .bkp6 .fd .fo-mid { width: 44px; height: 44px; }
  .bkp6 .fd .fo-mid b { font-size: 13.5px; }

  /* the board over the history, as on a phone */
  .bkp6 .bk6-s { display: none; }
  /* the plates as wide as their numbers want, not the list's width (owner 2026-10-16: «эти блоки уже. а то числа в них
     маленькими и пустыми кажутся») */
  .bkp6 .bb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, max-content); justify-content: start; gap: 8px; margin: 0 0 14px; }
  .bkp6 .bb > div { padding-left: 18px; padding-right: 18px; }
  .bkp6 .bb > div { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 10px 6px 9px; border-radius: 12px; background: var(--chip); }
  .bkp6 .bb b { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .bkp6 .bb b.pos { color: var(--win); }
  .bkp6 .bb b.neg { color: var(--loss); }
  .bkp6 .bb b.acc { color: var(--acc); }
  .bkp6 .bb span { font-size: 12px; color: var(--muted); }

  /* the amount as a card under the side picked (the «карточка» of the amount's trial, design/archive,
     probes-2026-10-15-pvpc.patch): the page under it stays, a click beside it or Escape closes it (app.js); the card
     the series' width, so that it stays within the list */
  .bkp6 form.pv1-m { position: relative; }
  .bkp6 form.pv1-m:has(input[name="side"]:checked) { z-index: 2; }
  /* ringed in violet, its beak too, pointing at the side picked (owner 2026-10-16: «и пусть окошко будет с контуром и видно
     на какую команду стрелочка указывает») */
  .bkp6 form.pv1-m:has(input[name="side"]:checked) .pv-x { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1.5px var(--acc), 0 16px 36px -8px rgb(0 0 0 / .28); }
  .bkp6 .pv1-m .pv-x::before { content: ""; position: absolute; top: -9px; left: calc(var(--sp, 50) * .5%); width: 16px; height: 16px; margin-left: -8px; border-radius: 3px 0 0; background: var(--panel); box-shadow: -1.5px -1.5px 0 0 var(--acc); transform: rotate(45deg); }
  .bkp6 .pv1-m:has(input[name="side"][value="2"]:checked) .pv-x::before { left: calc(50% + var(--sp, 50) * .5%); }
  .bkp6 .pv1-m .pv-x .pv-go { flex: 1 0 100%; }
  .bkp6 .pv1-m .pv-x .pv-pay { margin-right: auto; }

  /* the chart (owner: «график не нравится. выглядит несовременным и любительским»; slopalytics.com for an inspiration,
     «не копия»; then «В графике убери все что внизу. ВВерху тоже. Оси назови просто. Очки , дата. Ход , По дням - сделай
     в нашем стиле. текст очков - фиолетовым»): the views' switch and the period's as the site's tabs, nothing more over
     the plot; thin dotted lines for the values, the points' numbers violet; hovering an item, its guides to the axes
     with its values on them, the rest dimmed, its numbers in a line over the plot (app.js) */
  .bkp6 .bk6-gr .gv { max-width: 960px; }
  .cg-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; }
  .cg-tabs, .cg-per { display: flex; gap: 2px; padding: 4px; border-radius: 13px; background: var(--chip); }
  .cg-per[hidden] { display: none; }
  .cg-tabs button, .cg-per button { padding: 6px 14px; border: 0; border-radius: 10px; background: none; color: var(--ink2); font: 600 14px var(--sans); white-space: nowrap; cursor: pointer; }
  .cg-per button { padding: 5px 11px; font-size: 13px; }
  .cg-tabs button:hover, .cg-per button:hover { background: rgba(255, 255, 255, .65); color: var(--ink); }
  .cg-tabs button[aria-pressed="true"], .cg-per button[aria-pressed="true"] { background: var(--panel); color: var(--acc); box-shadow: 0 1px 2px rgba(16, 24, 40, .1), 0 3px 10px rgba(16, 24, 40, .07); }
  .cg-tabs button:focus-visible, .cg-per button:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
  @media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme="light"])) .cg-tabs button:hover, :where(:root:not([data-theme="light"])) .cg-per button:hover { background: rgba(255, 255, 255, .05); }
    :where(:root:not([data-theme="light"])) .cg-tabs button[aria-pressed="true"], :where(:root:not([data-theme="light"])) .cg-per button[aria-pressed="true"] { background: #383d49; box-shadow: none; }
  }
  :where(:root[data-theme="dark"]) .cg-tabs button:hover, :where(:root[data-theme="dark"]) .cg-per button:hover { background: rgba(255, 255, 255, .05); }
  :where(:root[data-theme="dark"]) .cg-tabs button[aria-pressed="true"], :where(:root[data-theme="dark"]) .cg-per button[aria-pressed="true"] { background: #383d49; box-shadow: none; }
  .cg-c { position: relative; }
  .cg-s { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
  .cg-s .gl { stroke: var(--muted); stroke-opacity: .35; stroke-dasharray: 1 5; stroke-linecap: round; }
  .cg-s .z { stroke: var(--muted); stroke-opacity: .55; }
  .cg-s .ty, .cg-s .cg-dt { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  .cg-s .ty, .cg-s .an.y { fill: var(--acc); }
  .cg-s .an { fill: var(--muted); font-size: 12.5px; font-weight: 600; }
  .cg-s .ar { fill: var(--acc); fill-opacity: .07; }
  .cg-s .ln { fill: none; stroke: var(--acc); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
  .cg-s .pt { fill: var(--panel); stroke: var(--acc); stroke-width: 2.25; transition: transform .12s; transform-box: fill-box; transform-origin: center; }
  /* a prediction's dot on the course, small and filled in its result's colour: guessed, missed, given back (owner:
     «кружочки меньше и залитые в первом графике») */
  .k-line .pt { stroke: var(--panel); stroke-width: 1.5; }
  .k-line .y .pt { fill: var(--win); }
  .k-line .n .pt { fill: var(--loss); }
  .k-line .v .pt { fill: var(--muted); }
  .k-dots .y .pt { fill: color-mix(in srgb, var(--win) 70%, transparent); stroke: var(--win); stroke-width: 1.5; }
  .k-dots .n .pt { fill: color-mix(in srgb, var(--loss) 65%, transparent); stroke: var(--loss); stroke-width: 1.5; }
  .k-dots .v .pt { fill: color-mix(in srgb, var(--muted) 50%, transparent); stroke: var(--muted); stroke-width: 1.5; }
  .cg-s .hb { fill: transparent; }
  .cg-s .bv { fill: var(--muted); transition: opacity .12s; }
  .cg-s .y .bv { fill: var(--win); }
  .cg-s .n .bv { fill: var(--loss); }
  .cg-s .vl { fill: var(--acc); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: opacity .12s; }
  .cg-s .bl { fill: var(--ink2); font-size: 12px; font-weight: 600; transition: opacity .12s; }
  .cg-s image { transition: opacity .12s; }
  .cg-s .el { font-size: 15px; font-weight: 800; fill: var(--acc); font-variant-numeric: tabular-nums; }
  .cg-s.dim .ci:not(.on) .bv, .cg-s.dim .ci:not(.on) .pt { opacity: .22; }
  .cg-s.dim .ci:not(.on) .vl, .cg-s.dim .ci:not(.on) .bl, .cg-s.dim .ci:not(.on) image { opacity: .35; }
  .k-dots .on .pt { transform: scale(1.35); }
  /* what hovering shows, violet (owner: «при наведении фиолетовым дату и так далее тоже фиолетовым») */
  .cg-s .gx, .cg-s .gy { display: none; stroke: var(--acc); stroke-opacity: .6; stroke-dasharray: 2 4; pointer-events: none; }
  .cg-s .hd { display: none; fill: none; stroke: var(--acc); stroke-opacity: .75; stroke-width: 1.5; pointer-events: none; }
  .k-line .hd.show { display: inline; }
  .cg-s .gx.show, .cg-s .gy.show { display: inline; }
  .cg-s .ax, .cg-s .ay { display: none; pointer-events: none; }
  .cg-s .ax.show, .cg-s .ay.show { display: inline; }
  .cg-s .ax rect, .cg-s .ay rect { fill: var(--acc); }
  .cg-s .ax text, .cg-s .ay text { fill: var(--panel); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
  /* the item's numbers: one line over the plot, right of the values' name (owner: «окошко мешает может в другое место
     ее?»), nothing of the plot under it; kept by a click, ringed then with its cross */
  .cg-tip { position: absolute; top: 0; right: 0; z-index: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 14px; max-width: calc(100% - 190px); height: 30px; padding: 0 10px 0 12px; overflow: hidden; border-radius: 10px; background: var(--chip); font-size: 13px; white-space: nowrap; pointer-events: none; }
  .cg-tip[hidden] { display: none; }
  .cg-tip.pin { pointer-events: auto; box-shadow: inset 0 0 0 1.5px var(--acc); }
  .cg-tip img { flex: none; width: 20px; height: 20px; margin-right: -6px; border-radius: 5px; }
  .ct-t { flex: none; font-weight: 800; }
  .ct-t.pos { color: var(--win); }
  .ct-t.neg { color: var(--loss); }
  .ct-s { min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
  .ct-r { flex: none; color: var(--muted); }
  .ct-r b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
  .ct-r b.pos { color: var(--win); }
  .ct-r b.neg { color: var(--loss); }
  .ct-r b.m { font-weight: 500; color: var(--muted); }
  .ct-r b.acc { color: var(--acc); } /* the points: what went in, all brought (owner: «поставлено фиолетовым») */
  .ct-x { flex: none; width: 22px; height: 22px; margin-left: -4px; border: 0; border-radius: 6px; background: none; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; }
  .ct-x:hover { background: var(--panel); color: var(--ink); }
  .cg-s .em { fill: var(--muted); font-size: 14px; }
}

/* The page «Прогнозы» — «список и таблица» (owner 2026-10-16, after three variants of the page: «Давай сделаем прогнозы
   слева колонка со списком. справа лидерборд. Без последних прогнозов», then «и сделай прогнозы тоже разломом»; the page
   before and the variants in design/archive): two columns —
   the series on the left, on the ground, by day, as the «разлом» of «Свободно» on cards two in a row, how many made a
   prediction under each, the amount a card under the poster, ringed, its beak at the side picked; the players' table on
   the right. The rules a link by the page's name. A phone: the series one under another, then the table. Everything under
   .pvp-s. */
/* the columns level, as on «Турниры» (owner: «на одной высоте - как тут и везде»); the list spans the right's two rows,
   its height going to the flexible one: the rules' plate keeps its own height */
.pvp-s { display: grid; grid-template-columns: minmax(0, 1fr) 390px; grid-template-areas: "c r"; align-items: start; gap: 14px; margin-top: 14px; }
/* as high as the window on a wide screen, each box scrolling its own (owner 2026-10-16: «левый блок и правые должны
   помещатся на экран. прокрутка»): the list; on the right the rules' plate, the table (up to half of the column) and
   the latest predictions under it, each with its heading standing */
@media (min-width: 1001px) {
  .pvp-s { height: max(560px, calc(100dvh - 143px)); align-items: stretch; }
  .pvp-s .pvp-c { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .pvp-s .pvp-ldb, .pvp-s .pvp-rec { display: flex; flex-direction: column; min-height: 0; }
  .pvp-s .pvp-ldb { flex: 0 1 auto; max-height: 52%; }
  .pvp-s .pvp-rec { flex: 1 1 0; }
  .pvp-s .pvp-sc { flex: 1 1 auto; min-height: 0; margin: 0 -6px; padding: 0 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .pvp-s .pvp-sc .pv-ldr thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
}
.pvp-s .pvp-rec h2 { margin-bottom: 4px; }
.pvp-rl { margin: 0; padding: 0; list-style: none; }
.pvp-rl li + li { border-top: 1px solid var(--line); }
.pvp-rl a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: inherit; }
.pvp-rl .ava { --s: 28px; }
.pvp-rt { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.3; }
.pvp-rt > b { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pvp-rt > span { overflow: hidden; font-size: 12.5px; color: var(--ink2); text-overflow: ellipsis; white-space: nowrap; }
.pvp-rt small { font-size: 12px; color: var(--muted); }
.pvp-rt .coin { width: 9px; height: 9px; margin-right: 4px; vertical-align: 0; box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--acc) 55%, var(--panel)); }
.pvp-rr { display: flex; flex: none; flex-direction: column; align-items: flex-end; font-size: 12px; line-height: 1.3; color: var(--muted); font-variant-numeric: tabular-nums; }
.pvp-rr time { color: var(--ink2); }
.pvp-rl a:hover .pvp-rt > b { color: var(--acc); }
.pvp-s .pvp-c { grid-area: c; }
.pvp-s .pvp-aside { grid-area: r; display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.pvp-s .pvp-c > h1 { margin: 0; }
.pvp-s .pv-lead { margin: 8px 0 0; }
/* the rules: a plate folded, at the top on the right, over the table */
.pvp-s .pvp-rul { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.pvp-s .pvp-rul summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; font-size: 14px; font-weight: 600; list-style: none; cursor: pointer; }
.pvp-s .pvp-rul summary::-webkit-details-marker { display: none; }
.pvp-s .pvp-rul summary::after { content: ""; width: 7px; height: 7px; margin: -4px 2px 0 auto; border: solid var(--muted); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); transition: transform .15s, margin .15s; }
.pvp-s .pvp-rul[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.pvp-s .pvp-rul summary:hover, .pvp-s .pvp-rul summary:hover::after { color: var(--acc); border-color: var(--acc); }
.pvp-s .pvp-rul summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 12px; }
.pvp-s .pvp-rul .pv-rules { padding: 0 18px; }
.pvp-s .pvp-rul .more { margin: 6px 18px 14px; }
.pvp-s .pvp-day { justify-content: flex-start; gap: 10px; margin: 20px 0 10px; font-size: 15px; font-weight: 700; }
.pvp-s .pvp-day span { font-size: 13px; font-weight: 500; color: var(--muted); }
.pvp-s .pvp-c > .empty { margin-top: 14px; }
.pvp-s .pvp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pvp-s .pvp-card { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); transition: box-shadow .15s, border-color .15s; }
.pvp-s .pvp-card:hover { border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); box-shadow: 0 8px 24px -14px rgb(16 24 40 / .35); }
.pvp-s .pvp-card .pv1-m.fo { padding: 0; border-top: 0; }
.pvp-s .pvp-card .fo-s { padding-top: 8px; padding-bottom: 7px; }
.pvp-s .pvp-card .fo-s .logo, .pvp-s .pvp-card .fo-s .mk { width: 36px; height: 36px; }
.pvp-s .pvp-card .fo-s .pc { font-size: 23px; }
.pvp-s .pvp-ldb h2 { margin-bottom: 8px; }
.pvp-s .pv-ldr .u span span { white-space: nowrap; }

/* the amount: a card under the poster, the page under it stays (as in «Мои фишки» on a wide screen) */
@media (min-width: 701px) {
  .pvp-s .pvp-card:has(input[name="side"]:checked) { z-index: 3; border-color: var(--acc); }
  .pvp-s .pvp-card form.pv1-m { position: static; }
  .pvp-s .pvp-card form.pv1-m:has(input[name="side"]:checked) .pv-x { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 12px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1.5px var(--acc), 0 16px 36px -8px rgb(0 0 0 / .28); }
  .pvp-s .pvp-card .pv1-m .pv-x::before { content: ""; position: absolute; top: -9px; left: calc(var(--sp, 50) * .5%); width: 16px; height: 16px; margin-left: -8px; border-radius: 3px 0 0; background: var(--panel); box-shadow: -1.5px -1.5px 0 0 var(--acc); transform: rotate(45deg); }
  .pvp-s .pvp-card .pv1-m:has(input[name="side"][value="2"]:checked) .pv-x::before { left: calc(50% + var(--sp, 50) * .5%); }
  .pvp-s .pvp-card .pv1-m .pv-x .pv-go { flex: 1 0 100%; }
  .pvp-s .pvp-card .pv1-m .pv-x .pv-pay { margin-right: auto; }
  /* the last row's amount over nothing: room under the list while it is open («нижний прогноз упирается прям») */
  .pvp-s .pvp-c:has(.pvp-grid:last-child > .pvp-card:nth-last-child(-n+2) input[name="side"]:checked) { padding-bottom: 210px; }
}
@media (max-width: 1000px) {
  .pvp-s { grid-template-columns: minmax(0, 1fr); grid-template-areas: "r" "c" "t" "f"; } /* the rules first, as at the top on the right (owner 2026-10-16: «На телефоне правила в прогнозах идут первой вкладкой») */
  .pvp-s .pvp-aside { display: contents; }
  .pvp-s .pvp-rul { grid-area: r; }
  .pvp-s .pvp-ldb { grid-area: t; }
  .pvp-s .pvp-rec { grid-area: f; }
  .pvp-s .pvp-rl li:nth-child(n+9) { display: none; } /* a phone: the eight latest */
}
@media (max-width: 700px) {
  .pvp-s .pvp-grid { grid-template-columns: minmax(0, 1fr); }
  .pvp-s .pvp-day { margin-top: 18px; }
}
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .pvp-s .pvp-card:hover { box-shadow: 0 8px 24px -14px rgb(0 0 0 / .8); }
}
:where(:root[data-theme="dark"]) .pvp-s .pvp-card:hover { box-shadow: 0 8px 24px -14px rgb(0 0 0 / .8); }
/* The discussions: the topics as lines, a thread's cards, the reactions, the field and the emoticons, the
   forum's list. */
.meta { color: var(--muted); margin: 0 0 8px; }

/* the discussions' pages */
.fh { display: flex; align-items: center; gap: 12px; }
.fh h1 { margin-right: auto; }
.fh .fnew span { font-size: 18px; font-weight: 500; line-height: 1; } /* «+ Обсудить» (owner 2026-10-23: «"+ новая тема" заменить +обсудить») */
.topic { max-width: 860px; }
.topic h1 { margin: 2px 0 8px; font-size: 24px; line-height: 1.2; }
.ctx { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--chip); margin: 6px 0 4px; font-size: 13.5px; color: inherit; }
.ctx:hover { color: inherit; }
.ctx .go { color: var(--acc); font-weight: 600; }
.ctxm { margin: 10px 0 6px; }
.ctxm .ml { margin: 0; }
.modbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
/* chips everywhere are filled grey like the streams of a match (chosen by the owner on 2026-10-09), a hover turns them the pale accent */
.modbar button { border: 0; border-radius: 8px; background: var(--chip); color: var(--ink2); font: 600 12.5px var(--sans); padding: 6px 11px; cursor: pointer; }
.modbar button:hover { background: var(--acc2); color: var(--acc); }
.role { font-size: 11px; font-weight: 600; color: var(--acc); background: var(--acc2); border-radius: 5px; padding: 0 6px; }
.reply { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.reply.out { flex-direction: row; align-items: center; justify-content: space-between; padding: 14px; border-radius: 12px; background: var(--chip); color: var(--ink2); }
.reply textarea, .nt input, .nt select, .nt textarea, .dev input[name="name"] { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; font-size: 14.5px; resize: vertical; }
.reply textarea:focus, .nt input:focus, .nt select:focus, .nt textarea:focus, .dev input[name="name"]:focus { outline: 2px solid var(--acc2); border-color: var(--acc); }
.nt { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.nt label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.nt .hint { margin: 0; font-size: 13px; color: var(--muted); }
.nt .btn { align-self: flex-start; }
/* the new topic's section: four tiles, not the browser's list (owner 2026-10-23: «мне не нравится стандартный пикер в
   обсудить. нужен наш удобнее и красивее») — the game's mark and the name; the one picked, the section's colour —
   tinted with it, bordered and ticked; the radio under it hidden but there, for the arrows and a screen reader */
.ntp { min-width: 0; margin: 0; padding: 0; border: 0; }
.ntp legend { margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink2); }
.ntp-o { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nt .ntp-o label { --ec: var(--acc); position: relative; flex-direction: row; align-items: center; gap: 10px; min-width: 0; padding: 13px 36px 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font-size: 14.5px; font-weight: 600; color: var(--ink2); cursor: pointer; transition: border-color .12s, background-color .12s; }
.nt .ntp-o label[data-s="cs2"] { --ec: rgb(211 139 31); }
.nt .ntp-o label[data-s="dota2"] { --ec: rgb(184 53 42); }
.nt .ntp-o label[data-s="valorant"] { --ec: rgb(253 69 86); }
.nt .ntp-o input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.nt .ntp-o .gb { margin: 0; width: 22px; height: 22px; border-radius: 6px; }
.nt .ntp-o span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nt .ntp-o label::after { content: ""; position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); }
.nt .ntp-o label:hover { border-color: color-mix(in srgb, var(--ec) 45%, var(--line)); color: var(--ink); }
.nt .ntp-o label:has(:checked) { border-color: var(--ec); background: color-mix(in srgb, var(--ec) 10%, var(--panel)); color: var(--ink); }
.nt .ntp-o label:has(:checked)::after { background: var(--ec) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: none; }
.nt .ntp-o label:has(:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nt .ntp-o label { transition: none; } }
@media (max-width: 600px) { .ntp-o { grid-template-columns: 1fr 1fr; } }

@media (max-width: 600px) {
  .reply.out { flex-direction: column; align-items: flex-start; }
}
.tl[hidden] { display: none; }

/* the discussion at the foot of a story, a match or an event */
.comments h2 { justify-content: flex-start; gap: 8px; }
.comments h2 .cnt { color: var(--muted); font-weight: 600; }
.meta.loc { display: flex; align-items: center; gap: 0; }
.meta.loc .fl { margin-right: 8px; }

/* The discussions (emoji.go, owner 2026-10-12: «придумай смайлики для чата в обсуждениях»; probe «emo», settled 2026-10-14): the site's own
   emoticons in posts, one to three alone shown large, and their picker by a post's field. */

.tx { position: relative; width: 100%; }
.tx textarea { display: block; padding-right: 46px; }
.tx textarea[hidden] { display: none; }
/* the field that shows them as pictures (app.js), in the textarea's looks */
.tx-ed { width: 100%; max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--sb) transparent; padding: 10px 46px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 14.5px; font-weight: 400; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.tx-ed:focus { outline: 2px solid var(--acc2); border-color: var(--acc); }
.tx-ed:empty::before { content: attr(data-ph); color: var(--muted); pointer-events: none; }
.tx-ed .emo { width: 1.45em; height: 1.45em; vertical-align: -.36em; margin: 0 .04em; }
.ntf { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.ntf > span { cursor: default; }
.emo-btn { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.emo-btn svg { width: 21px; height: 21px; }
.emo-btn:hover, .emo-btn[aria-expanded="true"] { color: var(--acc); background: var(--acc2); }

/* above the field, where the page has room for it, else under it (.down), the list as tall as the room
   allows (app.js); the tabs go to a group and show the one in view */
.emo-pick { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 40; width: min(356px, 100%); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: 0 14px 36px rgba(16, 24, 40, .18); font-weight: 400; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.emo-pick.down { top: calc(100% + 6px); bottom: auto; }
.emo-pick[hidden] { display: none; }
.emo-tabs { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.emo-tabs button { flex: 1; display: grid; place-items: center; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.emo-tabs img { width: 22px; height: 22px; opacity: .5; filter: saturate(.3); transition: opacity .15s, filter .15s; }
.emo-tabs button.on { background: var(--chip); }
.emo-tabs button.on img { opacity: 1; filter: none; }
.emo-body { position: relative; }
.emo-list { position: relative; max-height: min(320px, 55vh); overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 8px 8px; }
.js .emo-list { scrollbar-width: none; }
.js .emo-list::-webkit-scrollbar { display: none; }
.emo-list.drag { cursor: grabbing; }
.emo-list.drag button { pointer-events: none; }
.emo-list p { margin: 8px 6px 2px; font-size: 12px; color: var(--muted); }
/* our own scrollbar, as the home page's strip has (.tbar): a thin line in a wide strip that takes the
   pointer; a press glides there, a drag follows. On a touch screen only a sign of where the list is. */
.emo-bar { position: absolute; top: 6px; right: 1px; bottom: 8px; width: 14px; cursor: pointer; touch-action: none; }
.emo-bar[hidden], html:not(.js) .emo-bar { display: none; }
.emo-bar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; width: 4px; border-radius: 2px; background: var(--sb-track); }
.emo-bar i { position: absolute; top: 0; left: 5px; width: 4px; border-radius: 2px; background: var(--sb); transition: background-color .15s, left .15s, width .15s; }
.emo-bar.on i { left: 3px; width: 8px; border-radius: 4px; background: var(--acc); }
@media (pointer: coarse) { .emo-bar { pointer-events: none; } }
.emo-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.emo-row button { display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer; }
.emo-row button:focus-visible, .emo-tabs button:focus-visible { background: var(--chip); }
.emo-row img { width: 28px; height: 28px; transition: transform .12s ease-out; }
.emo-row button:active img { transform: scale(.92); }
@media (hover: hover) {
  .emo-row button:hover, .emo-tabs button:hover { background: var(--chip); }
  .emo-row button:hover img { transform: scale(1.14); }
  .emo-tabs button:hover img { opacity: 1; filter: none; }
  .emo-bar:hover i { left: 3px; width: 8px; border-radius: 4px; background: var(--acc); }
}
html.emo-bar-drag, html.emo-bar-drag * { cursor: pointer !important; user-select: none; }
@media (prefers-reduced-motion: reduce) { .emo-row img, .emo-tabs img, .emo-bar i { transition: none; } }

/* the home page's discussions as lines (2026-10-18, with the news): a topic between two rules to the panel's edges, its
   section's colour on its left edge, the title cut with dots, the replies grey at the right */
.tli { --tl-x: 18px; margin: 0 calc(var(--tl-x) * -1); padding: 0; list-style: none; }
.tli li { border-top: 1px solid var(--line); }
.tli li:last-child { border-bottom: 1px solid var(--line); }
.tli .tln { --ec: var(--acc); display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 10px; min-height: 40px; padding: 0 calc(var(--tl-x) - 6px) 0 calc(var(--tl-x) + 4px); box-shadow: inset 4px 0 0 var(--ec); color: inherit; }
.tli .tln[data-s="cs2"] { --ec: rgb(211 139 31); }
.tli .tln[data-s="dota2"] { --ec: rgb(184 53 42); }
.tli .tln[data-s="valorant"] { --ec: rgb(253 69 86); }
.tli .tln:hover { background: var(--chip); color: inherit; }
.tli .tln:hover .tt { color: var(--acc); }
.tli .tt { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.tli b { font-size: 11.5px; font-weight: 500; color: color-mix(in srgb, var(--muted) 88%, var(--panel)); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .tli { --tl-x: 10px; }
}
/* a side column's heading is the way to the whole list, with the arrow of «Все …» (owner 2026-10-20: «где вверху
   новости и все новости можно оставить только одно» — the heading a link, no plate under the list) */
a.rail-h { display: inline-flex; align-items: center; gap: 7px; color: inherit; }
a.rail-h::after { content: ""; flex: none; width: 5px; height: 5px; margin-top: 1px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .55; }
a.rail-h:hover { color: var(--acc); }
a.rail-h:hover::after { opacity: 1; }

/* What a line leads to, our coloured plate before its title (owner 2026-10-18: «И плашки плашки наши цветные» — the
   palest, «Тогда ц3»; probe «tagc» 3 of layout 14): a match sea green, an event blue, a story steel blue-grey — cool hues, the games' are warm, not our
   violet; a pale ground and the text of the same hue darker, in the dark a deep ground and light text */
.ktg { display: inline-block; margin: 0 8px 0 0; padding: 2px 8px 3px; border-radius: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; vertical-align: 1px; white-space: nowrap; }
.ktg[data-k="match"] { background: #e2f1f2; color: #0f6672; }
.ktg[data-k="tournament"] { background: #e5edf9; color: #2a5596; }
.ktg[data-k="news"] { background: #e8ecf2; color: #44546a; }
.ktg[data-k="move"] { background: #e4f2e2; color: #2e6b2c; } /* a player's move (movenotes.go; 2026-10-21) */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .ktg[data-k="match"] { background: rgb(79 189 203 / .16); color: #86d2dc; }
  :where(:root:not([data-theme="light"])) .ktg[data-k="tournament"] { background: rgb(120 165 235 / .16); color: #a3c2f2; }
  :where(:root:not([data-theme="light"])) .ktg[data-k="news"] { background: rgb(140 160 190 / .16); color: #b4c2d6; }
  :where(:root:not([data-theme="light"])) .ktg[data-k="move"] { background: rgb(110 190 110 / .16); color: #9ad49a; }
}
:where(:root[data-theme="dark"]) .ktg[data-k="match"] { background: rgb(79 189 203 / .16); color: #86d2dc; }
:where(:root[data-theme="dark"]) .ktg[data-k="tournament"] { background: rgb(120 165 235 / .16); color: #a3c2f2; }
:where(:root[data-theme="dark"]) .ktg[data-k="news"] { background: rgb(140 160 190 / .16); color: #b4c2d6; }
:where(:root[data-theme="dark"]) .ktg[data-k="move"] { background: rgb(110 190 110 / .16); color: #9ad49a; }
.tli .tt .ktg { font-size: 11.5px; padding: 1px 7px 2px; }

/* The home page's discussions as the latest activity (owner 2026-10-18: «В обсуждениях нужно сделать 10 последних
   активностей. Другие вкладки внутри убрать»): ten topics, the newest post first; at the right, as the news, when the
   last post came and under it the comments, the bubble and the number */
.tli .tln { grid-template-columns: minmax(0, 1fr) auto; min-height: 42px; }
.tli .tlw { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 1px; font-size: 12px; font-weight: 500; line-height: 1.25; color: color-mix(in srgb, var(--muted) 88%, var(--panel)); white-space: nowrap; }
.tli .tlw b { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1.2; }
.tli .tlw b::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H6l-3 3v-3H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H6l-3 3v-3H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* The discussions denser (owner 2026-10-19: «сделай блоки новостей и обсуждений пополотнее»): a topic 36px high instead
   of 42 */
.tli .tln { min-height: 36px; padding-top: 3px; padding-bottom: 3px; }
.tli .tlw { font-size: 11.5px; line-height: 1.2; }
.tli .tlw b { font-size: 11px; }
/* the home page's topics: their section's stripe 6px, a little lighter (owner 2026-10-19: «в обсуждения сделаем цвет чуть
   светлее в линиях… чуть прозрачности и +1 или 2 пикселя толщины») — told apart from the news' 4px game stripes */
.tli .tln { padding-left: calc(var(--tl-x) + 6px); box-shadow: inset 6px 0 0 color-mix(in srgb, var(--ec) 62%, transparent); }

/* The topics' stripes in a game's view, as the news' (owner 2026-10-19: «Когда проваливаешься в одну игру то линия
   меняется в зависимости от типа… Что бы несло смысл и не было все желтое cs2 новостях и обсуждениях»): a match's teal,
   an event's blue, a story's our violet, a reader's own grey; «Все игры» keeps the sections' colours. The plates keep
   their own palette. */
.gv:not([data-g="all"]) .tli .tln { --ec: var(--muted); }
.gv:not([data-g="all"]) .tli .tln[data-k="match"] { --ec: #12808f; }
.gv:not([data-g="all"]) .tli .tln[data-k="serie"] { --ec: #3a67b0; }
.gv:not([data-g="all"]) .tli .tln[data-k="news"] { --ec: var(--acc); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .gv:not([data-g="all"]) .tli .tln[data-k="match"] { --ec: #4fbdcb; }
  :where(:root:not([data-theme="light"])) .gv:not([data-g="all"]) .tli .tln[data-k="serie"] { --ec: #7aa5ea; }
}
:where(:root[data-theme="dark"]) .gv:not([data-g="all"]) .tli .tln[data-k="match"] { --ec: #4fbdcb; }
:where(:root[data-theme="dark"]) .gv:not([data-g="all"]) .tli .tln[data-k="serie"] { --ec: #7aa5ea; }

/* As cards (owner 2026-10-20: «Аватар внутри сообщения и оно растянуто до конца. Ответы немного другой цвет окошка и
   они недостают до конца»): a message a card across the column, the avatar, the name and the time in its head; a reply
   one level in, of a lighter ground, short of the column's end.
   The discussion as a chat (threads.go, phases.go; owner 2026-10-20: «Да давай. С улучшениями» — Ч4 «Просто»,
   design/forum-chat-2026-10-19, after «нужно что бы было просто и понятно и глаза не разбегались»; then «Давай сделаем
   все же 1 уровень ответов. Но при ответе аватар справа»): a comment on the left in a neutral bubble, its replies under
   it one level in, at the right by their avatars on the right; the reader's own a shade of our colour; one avatar — it
   carries the person's colour — and one name over a person's run; the parts and the days as thin grey lines, a part's held at the top while
   it goes by; ▲ and the reactions only those there are, the reader's own outlined; the actions under the pointer on a
   computer, on a tap on a phone (app.js); the field held at the foot of the topic. Accent in the flow — only @nicks,
   links, «Новые сообщения» and the send button. */
/* the ground settled (owner 2026-10-20: «Давай темно серый, карточки с тенью»; the other grounds of the probe «cvbg» in
   design/archive/cvbg-2026-10-20): every message a white card with a soft shadow on a dark grey ground */
:root { --cv-ground: #d9dde4; --cv-b: #fff; --cv-rb: #fff; --cv-own: color-mix(in srgb, var(--acc) 6%, #fff); --cv-rown: color-mix(in srgb, var(--acc) 6%, #fff); --cv-r: var(--cv-ground); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cv-ground: #0b0c0f; --cv-b: var(--panel); --cv-rb: var(--panel); --cv-own: color-mix(in srgb, var(--acc) 12%, var(--panel)); --cv-rown: color-mix(in srgb, var(--acc) 12%, var(--panel)); --cv-r: var(--cv-ground); }
}
:root[data-theme="dark"] { --cv-ground: #0b0c0f; --cv-b: var(--panel); --cv-rb: var(--panel); --cv-own: color-mix(in srgb, var(--acc) 12%, var(--panel)); --cv-rown: color-mix(in srgb, var(--acc) 12%, var(--panel)); --cv-r: var(--cv-ground); }
.cv-flow { margin: 4px -18px 0; padding: 2px 18px 14px; background: var(--cv-ground); }
.cv-ln { display: block; height: 0; scroll-margin-top: 10px; } /* a part's start: where «Ход обсуждения» leads */
.cv-new { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: var(--acc); white-space: nowrap; }
.cv-new::before, .cv-new::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--acc) 50%, transparent); }
.cv-col > .cv-new { align-self: stretch; margin: 6px 0 3px; }
.cv-rs > .cv-new { margin: 6px 0 2px; }
/* a thread: the comment, its replies one level in, at the right, by their avatars on the right */
.cv-th { margin: 12px 0 0; }
.cv-th > .cv-run { margin: 0; }
.cv-th.cv-c { margin-top: 3px; }
.cv-rs { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 0 72px; } /* pressed to the right edge (owner 2026-10-20: «Ответ прижат к правому краю») */
/* a reply's head the other way round: the time on the left, the name and the avatar on the right */
.cv-rrun .cv-n { flex-direction: row-reverse; }
.cv-rrun .cv-n .ava { margin: 0 0 0 2px; }
.cv-rrun .cv-n .cv-t { margin: 0 auto 0 0; }
.cv-gone { display: block; margin: 0; padding: 5px 12px; border: 1px dashed color-mix(in srgb, var(--muted) 50%, transparent); border-radius: 14px; font-size: 13px; font-style: italic; color: var(--muted); }
.cv-run { margin: 10px 0 0; }
.cv-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cv-m { position: relative; scroll-margin-top: 48px; }
.cv-b { padding: 8px 12px; border-radius: 14px; background: var(--cv-b); box-shadow: 0 1px 2px rgb(16 24 40 / .06), 0 4px 14px -6px rgb(16 24 40 / .16); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.cv-own .cv-b { background: var(--cv-own); }
.cv-rrun .cv-b { background: var(--cv-rb); }
.cv-rrun.cv-own .cv-b { background: var(--cv-rown); }
.cv-n { display: flex; align-items: center; gap: 4px 8px; margin: 0 0 5px; font-size: 13px; line-height: 1.35; }
.cv-n .ava { --s: 26px; margin: 0 2px 0 0; }
.cv-n b { font-weight: 600; }
.cv-n small { font-size: 12px; color: var(--muted); }
.cv-n .cv-t { float: none; top: 0; margin: 0 0 0 auto; }
.cv-x { white-space: pre-wrap; overflow-wrap: anywhere; }
.cv-x::after { content: ""; display: block; clear: both; }
.cv-x .emo { width: 1.4em; height: 1.4em; margin: 0 .04em; vertical-align: -.34em; }
.cv-t { float: right; position: relative; top: 6px; margin: 0 -3px 0 12px; font-size: 11px; line-height: 1.6; color: var(--muted); white-space: nowrap; }
/* one to three emoticons alone: large */
.cv-solo .cv-x { line-height: 1; }
.cv-solo .cv-x .emo { width: 34px; height: 34px; margin: 0 2px 0 0; vertical-align: bottom; }
.cv-solo .cv-x .cv-t { float: none; top: 0; margin: 0 0 0 6px; vertical-align: bottom; }
.cv-solo .cv-x::after { content: none; }
/* what a reply answers: one grey line over its text — whose and the first words; a quote — its words, two lines */
.cv-rp { display: block; max-width: 440px; margin: 1px 0 4px; padding: 0 0 0 8px; border-left: 2px solid color-mix(in srgb, var(--muted) 40%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.4; color: var(--muted); }
.cv-rp b { font-weight: 600; color: var(--ink2); }
.cv-rp .emo { width: 1.2em; height: 1.2em; vertical-align: -.25em; }
a.cv-rp:hover { border-left-color: var(--muted); color: var(--ink2); }
.cv-rq { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.cv-rd { font-style: italic; }
/* the message a line led to, lit for a moment */
.cv-flash > .cv-b { animation: cv-lit 1.6s ease-out; }
@keyframes cv-lit { from { background-color: color-mix(in srgb, var(--acc) 24%, var(--cv-b)); } }
/* the long text folded */
.cv-x.p-fold { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.cv-b:has(> .p-unf[open]) > .cv-x.p-fold { display: block; -webkit-line-clamp: unset; }
.p-unf { margin-top: 6px; }
.p-unf[open] { display: none; }
.p-unf > summary { min-height: 26px; padding: 2px 10px 2px 11px; font-size: 12.5px; }
.cv-b .p-unf > summary { background: var(--cv-r); }
/* the foot: ▲ and the reactions, only those there are; the time beside */
.cv-f { display: flex; align-items: flex-end; gap: 8px; margin: 6px 0 0; }
.cv-f .prx { flex: 1; }
.cv-f .cv-t { float: none; top: 0; margin: 0 -3px 0 auto; }
.cv-f .rep { font-size: 11.5px; font-weight: 600; color: var(--live); white-space: nowrap; }
.prx { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.prx form { display: inline; }
.prx button, .prx > span { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px 0 5px; border: 1px solid transparent; border-radius: 999px; background: var(--cv-r); color: var(--ink2); font: 600 11.5px var(--sans); cursor: pointer; }
.prx > span { cursor: default; }
.prx button:hover { border-color: var(--line); }
.prx button.on { border-color: color-mix(in srgb, var(--ink2) 45%, transparent); }
.prx img { width: 16px; height: 16px; }
.prx b { font-weight: 600; font-variant-numeric: tabular-nums; }
.prx .cv-up { padding-left: 7px; }
/* the actions under the pointer: three small buttons by the bubble's right edge — «Ответить», ☺ with ▲ and our
   emoticons, «⋯» */
.cv-tools { position: absolute; z-index: 4; top: -24px; right: 12px; display: flex; align-items: center; gap: 1px; padding: 2px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); box-shadow: 0 4px 14px rgb(16 24 40 / .08); opacity: 0; pointer-events: none; transition: opacity .12s; }
.cv-m:hover > .cv-tools, .cv-m:focus-within > .cv-tools, .cv-m:has(details[open]) > .cv-tools { opacity: 1; pointer-events: auto; }
.cv-m:has(details[open]) { z-index: 4; }
.cv-menu { display: contents; }
.cv-tools .p-ans { order: 1; }
.cv-tools .prx-add { order: 2; }
.cv-tools .pmn { order: 3; }
.cv-tools .p-ans, .prx-add > summary, .pmn > summary { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 7px; color: var(--muted); list-style: none; cursor: pointer; }
.cv-tools .p-ans span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cv-tools .p-ans:hover, .prx-add > summary:hover, .pmn > summary:hover, .prx-add[open] > summary, .pmn[open] > summary { background: var(--chip); color: var(--ink); }
.prx-add > summary::-webkit-details-marker, .pmn > summary::-webkit-details-marker { display: none; }
.cv-tools svg { width: 16px; height: 16px; }
.prx-add, .pmn { position: relative; }
.prx-pick, .pmn > div { position: absolute; z-index: 5; bottom: calc(100% + 6px); right: -4px; display: flex; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 24px -10px rgb(16 24 40 / .35); }
/* the reactions to give (sixteen and ▲): on a computer two rows; on a phone one row to scroll with a finger, the last
   seen cut in half, for the eye to know there are more (owner 2026-10-20: «Могу мотать на телефоне. один смайлик можно
   наполовину показать для вида») */
.prx-pick { display: grid; grid-template-columns: repeat(9, 34px); }
.prx-pick form { display: contents; }
.prx-pick button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink2); font: 700 15px var(--sans); cursor: pointer; }
.prx-pick button:hover, .prx-pick .cv-up.on { background: var(--chip); }
.prx-pick img { display: block; width: 26px; height: 26px; }
.pmn > div { flex-direction: column; align-items: stretch; min-width: 170px; padding: 4px; }
.pmn > div form { display: block; }
.pmn > div button { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink2); font: 500 13px var(--sans); text-align: left; cursor: pointer; }
.pmn > div button:hover { background: var(--chip); color: var(--ink); }
.p-qb { display: none; }
.js .p-qb { display: block; }
/* on a phone: a tap on a message dims the page and opens its reactions and actions under it (app.js); without
   scripts the three small buttons stand under every message */
@media (hover: none) {
  .cv-tools { position: static; margin: 4px 0 0; width: max-content; opacity: 1; pointer-events: auto; box-shadow: none; }
  .js .cv-tools { display: none; }
  .js .cv-m.cv-tap { z-index: 26; }
  .js .cv-m.cv-tap > .cv-tools { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 8px 0 2px; padding: 0; border: 0; background: none; }
  .cv-tap .prx-add > summary, .cv-tap .pmn > summary { display: none; }
  .cv-tap .cv-menu { order: 3; }
  .cv-tap .prx-add, .cv-tap .pmn { position: static; }
  .cv-tap .prx-pick { position: static; display: flex; gap: 0; width: calc(36px * 7.5 + 6px); max-width: calc(100vw - 60px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 0 4px 6px; border: 0; border-radius: 22px; box-shadow: 0 0 0 1px var(--line), 0 10px 26px -10px rgb(16 24 40 / .35); }
  .cv-tap .prx-pick::-webkit-scrollbar { display: none; }
  .cv-tap .prx-pick button { flex: none; width: 36px; height: 36px; }
  .cv-tap .cv-menu { display: flex; flex-direction: column; min-width: 230px; padding: 4px; border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px var(--line), 0 14px 30px -10px rgb(16 24 40 / .35); }
  .cv-tap .cv-menu .p-ans { display: flex; align-items: center; gap: 12px; width: auto; height: auto; padding: 10px 12px; color: var(--ink); font: 500 15px var(--sans); }
  .cv-tap .cv-menu .p-ans span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .cv-tap .cv-menu .p-ans svg { width: 17px; height: 17px; color: var(--muted); }
  .cv-tap .pmn > div { position: static; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .cv-tap .pmn > div button { padding: 10px 12px; border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 0; color: var(--ink); font-size: 15px; }
  body.cv-dim::before { content: ""; position: fixed; inset: 0; z-index: 25; background: rgb(12 14 20 / .42); }
}
/* «N новых», what the browser has not seen (app.js) */
.thr-bar { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.thr-new { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 8px; background: var(--acc2); color: var(--acc); font-size: 12.5px; font-weight: 600; }
.thr-new:hover { background: var(--acc-fill); color: #fff; }
.thr-new[hidden] { display: none; }
.comments h2 .thr-new { margin-left: 6px; }
/* the field: a line and the round send button; answering — a thin grey strip over it; in a topic held at its foot */
form.reply { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 7px 8px; }
form.reply .rp-to { grid-column: 1 / -1; }
form.reply .cv-err { grid-column: 1 / -1; margin: 0; }
.cv-send { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.cv-send svg { width: 20px; height: 20px; }
.topic form.reply { position: sticky; bottom: 0; z-index: 5; margin: 10px -18px -16px; padding: 10px 18px 14px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--panel); }
.rp-to { display: flex; align-items: center; gap: 8px; padding: 1px 2px 1px 10px; border-left: 2px solid color-mix(in srgb, var(--muted) 40%, transparent); font-size: 13px; color: var(--muted); }
.rp-to[hidden] { display: none; }
.rp-to > svg { flex: none; width: 15px; height: 15px; }
.rp-to span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-to b { font-weight: 600; color: var(--ink2); }
.rp-to .emo { width: 1.2em; height: 1.2em; vertical-align: -.25em; }
.rp-x { flex: none; padding: 0 6px; font-size: 18px; line-height: 1; color: var(--muted); }
.rp-x:hover { color: var(--ink); }
.p-at { font-weight: 600; color: var(--acc); }
@media (max-width: 600px) {
  .cv-flow { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
  .cv-rs { margin: 4px 0 0 36px; }
  .cv-n .ava { --s: 24px; }
  .cv-rp { max-width: 100%; }
  .topic form.reply { margin: 10px -10px -12px; padding: 8px 10px 10px; }
  .prx-pick { grid-template-columns: repeat(6, 34px); }
}

/* «Скрыть счёт» (phases.go; owner 2026-10-19: «давай В7») by the count over the flow: hides the score of the match line
   over the topic (early.js, app.js). The column beside the topic on a computer (owner 2026-10-20: «убери ход рассуждений.
   сделай справа список из 15 обсуждений и новости что бы тоже было прилеплено»; «оставь на ПК только обсуждения справа и
   пусть будет 1 экран что поместиться»): the latest discussions, held on the screen and one screen high, as many as fit
   whole — those that do not wrap into a column out of sight (app.js keeps them out of the keyboard's way). */
.noscore .tpc .ctxm .sc { visibility: hidden; }
.thr-bar .ph-hide { margin-left: auto; }
.ph-hide { padding: 4px 10px; border: 0; border-radius: 8px; background: var(--chip); color: var(--ink2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ph-hide:hover, .ph-hide[aria-pressed="true"] { background: color-mix(in srgb, var(--ink2) 16%, var(--chip)); color: var(--ink); }
.tpc-a { display: none; }
@media (min-width: 1100px) {
  .tpc { display: grid; grid-template-columns: minmax(0, 860px) minmax(0, 300px); gap: 14px; align-items: start; margin-top: 14px; }
  .tpc > .topic { max-width: none; margin-top: 0; } /* the columns level (AGENTS.md: «Колонки — на одной высоте») */
  .tpc-a { display: flex; flex-direction: column; position: sticky; top: 14px; height: calc(100vh - 28px); }
  .tpc-a > .panel { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; margin-top: 0; }
  .tpc-a .tl { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
  .tpc-a .tli { position: relative; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; column-gap: 48px; flex: 0 1 auto; min-height: 0; overflow: clip; }
  .tpc-a .tli > li { flex: none; width: 100%; border-top: 0; border-bottom: 1px solid var(--line); }
  .tpc-a .tli > li:first-child { border-top: 1px solid var(--line); }
  .tpc-a .more { flex: none; }
}

/* The forum's list (owner 2026-10-20, of variant 2 of three: «так но убрать автора и так далее. просто топик выровненный по
   центру вертикально. справа последнее изменение а не дата создания. Сделать одной страницей. перименовать правый блок в
   последние 10»): the home page's lines — a topic between rules to the panel's edges, its section's stripe (in a section's
   list of what it is about, as on the home page), the plate and the title in the middle, at the right how long ago the
   last message came and the bubble; beside the list on a computer the block of the sections, held on the screen,
   switching the lists as the chips did (owner 2026-10-20: «убери плашки переключения. а справа только прилипнутый блок
   разделы работает как плашки быстро + блок все»); the chips on a phone only */
.fvl { --tl-x: 18px; margin: 6px calc(var(--tl-x) * -1) 0; padding: 0; list-style: none; }
.fva .fvl { margin-top: 0; }
.fvl li { border-top: 1px solid var(--line); }
.fvl li:last-child { border-bottom: 1px solid var(--line); }
.fvr, .fvn a { --ec: var(--acc); }
.fvr[data-s="cs2"], .fvn a[data-s="cs2"] { --ec: rgb(211 139 31); }
.fvr[data-s="dota2"], .fvn a[data-s="dota2"] { --ec: rgb(184 53 42); }
.fvr[data-s="valorant"], .fvn a[data-s="valorant"] { --ec: rgb(253 69 86); }
.fvl[data-all="false"] .fvr { --ec: var(--muted); }
.fvl[data-all="false"] .fvr[data-k="match"] { --ec: #12808f; }
.fvl[data-all="false"] .fvr[data-k="serie"] { --ec: #3a67b0; }
.fvl[data-all="false"] .fvr[data-k="news"] { --ec: var(--acc); }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .fvl[data-all="false"] .fvr[data-k="match"] { --ec: #4fbdcb; }
  :where(:root:not([data-theme="light"])) .fvl[data-all="false"] .fvr[data-k="serie"] { --ec: #7aa5ea; }
}
:where(:root[data-theme="dark"]) .fvl[data-all="false"] .fvr[data-k="match"] { --ec: #4fbdcb; }
:where(:root[data-theme="dark"]) .fvl[data-all="false"] .fvr[data-k="serie"] { --ec: #7aa5ea; }
.fvr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; min-height: 46px; padding: 6px calc(var(--tl-x) - 6px) 6px calc(var(--tl-x) + 6px); box-shadow: inset 6px 0 0 color-mix(in srgb, var(--ec) 62%, transparent); color: inherit; }
.fvr:hover { background: var(--chip); color: inherit; }
.fvr:hover .fvt { color: var(--acc); }
.fvt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 550; line-height: 1.3; color: color-mix(in srgb, var(--ink) 80%, var(--muted)); }
.fvt .ktg { font-size: 11.5px; padding: 1px 7px 2px; }
.fvq { display: inline-block; margin: 0 8px 0 0; padding: 1px 7px 2px; border-radius: 6px; background: var(--chip); font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink2); vertical-align: 1px; white-space: nowrap; }
.fvw { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; font-size: 12px; font-weight: 500; line-height: 1.25; color: color-mix(in srgb, var(--muted) 88%, var(--panel)); white-space: nowrap; }
.fvw b { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fvw b::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H6l-3 3v-3H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h12v8H6l-3 3v-3H2z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.fva .fvr { min-height: 42px; }
.fva .fvt { font-size: 14px; }
.fvl + .tpgr { margin-top: 14px; }
.fva { position: sticky; top: 14px; }
.fva > .panel { margin-top: 0; }
.fvn { margin: 0 -18px; padding: 0; list-style: none; }
.fvn li { border-top: 1px solid var(--line); }
.fvn li:last-child { border-bottom: 1px solid var(--line); }
.fvn a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 18px 9px 24px; box-shadow: inset 6px 0 0 color-mix(in srgb, var(--ec) 62%, transparent); font-size: 14px; font-weight: 600; color: var(--ink2); }
.fvn a.fvo { --ec: #16884a; } /* the reader's own topics a colour of their own (owner 2026-10-20: «мои темы тоже число. и цвет») */
.fvn a:hover { background: var(--chip); color: var(--acc); }
.fvn a.on { background: var(--acc2); color: var(--acc); }
.fvn b { font-size: 12px; font-weight: 500; color: var(--muted); }
.fvn a.on b { color: color-mix(in srgb, var(--acc) 70%, var(--muted)); }
.fvn b { font-variant-numeric: tabular-nums; }
/* «Все» — the stripe of all the sections' colours, top to bottom */
.fvn a[data-s=""], .fvn a[data-s=""]:hover, .fvn a[data-s=""].on { --ec: transparent; background-image: linear-gradient(color-mix(in srgb, rgb(211 139 31) 62%, transparent) 0 25%, color-mix(in srgb, rgb(184 53 42) 62%, transparent) 25% 50%, color-mix(in srgb, rgb(253 69 86) 62%, transparent) 50% 75%, color-mix(in srgb, var(--acc) 62%, transparent) 75%); background-size: 6px 100%; background-repeat: no-repeat; }
.fvp { display: none; }
@media (min-width: 901px) { .fvk { display: none; } } /* the chips over the list are a phone's: a computer has the column «Разделы» at the right */
.fnew-m { display: none; }
@media (max-width: 900px) {
  .fva { display: none; }
  .fvp { display: block; }
  .fh .fnew { display: none; }
  .forum .fnew-m { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 5; display: flex; width: max-content; margin: 14px 0 0 auto; padding: 12px 20px; border-radius: 999px; font-size: 15px; box-shadow: 0 8px 24px rgba(16, 24, 40, .28); }
  .forum .fnew-m span { font-size: 19px; font-weight: 500; line-height: 1; }
}
@media (max-width: 600px) {
  .fvl { --tl-x: 10px; }
  .fvr { gap: 0 10px; }
  .fvt { -webkit-line-clamp: 3; font-size: 14.5px; }
}
/* The home page: the main tournaments' cards and lines on a computer and a phone, the league's hue. */
/* the discussions tab on the home page: «Все обсуждения» under the list (the new topic's button gone 2026-10-23: owner
   «С главной убрать кнопку обсудить» — a new topic is the forum's) */
.thead { position: relative; display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.thead .sect { flex: 1 1 auto; min-width: 0; margin: 0; }
@media (max-width: 600px) {
  .thead .sect { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent); }
  .thead .sect::-webkit-scrollbar { display: none; }
  .thead .sect a { flex: none; }
}
/* «Все обсуждения» under the list */
.thead.tlf { justify-content: space-between; margin: 12px 0 0; }
.thead.tlf .more { margin: 0; }

/* The home page on a phone (owner 2026-10-19: «Предлагаю начать с телефона… компактней верхнюю строку… главные турниры
   идут, но не много места занимают… Ниже идет как сейчас новости и обсуждение. Потом блок результаты, матчи, турниры… О
   ниже трансферы, рейтинг»). The main tournaments' slim lines and the Valve top twenty as a block of its own are a
   phone's; a wide screen keeps the top twenty as a tab. */
.fem, .rate-m { display: none; }
.live-h { display: flex; align-items: center; gap: 6px; color: var(--live); font-weight: 600; }
.live-h i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: live-beat 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-h i { animation: none; } }
@media (max-width: 900px) {
  .tab-pc { display: none !important; }
  .rate-m { display: block; }
}
.fem { --idle: #b45f06; display: flex; flex-direction: column; margin: 10px 0 0; padding: 2px 0; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.fem-r { display: flex; flex-direction: column; gap: 4px; padding: 7px 12px 8px; }
.fem-h { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 0 10px; color: inherit; }
.fem-r + .fem-r { border-top: 1px solid var(--line); }
.fem-r .logo, .fem-r .mk { width: 30px; height: 30px; margin: 0; border-radius: 7px; }
.fem-r img.logo { padding: 2px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.fem-r img.logo.dk { background: #23262d; }
.fem-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fem-n b { overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.fem-s { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; font-size: 12px; line-height: 1.25; color: var(--muted); white-space: nowrap; }
.fem-s > span { overflow: hidden; text-overflow: ellipsis; }
.fem-s em { display: inline-flex; flex: none; align-items: center; gap: 4px; font-style: normal; font-weight: 600; color: var(--ink2); }
.fem-s em i { width: 6px; height: 6px; border-radius: 50%; }
.fem-s em.on { color: var(--live); }
.fem-s em.on i { background: var(--live); animation: live-beat 1.6s ease-in-out infinite; }
.fem-s em.idle { color: var(--idle); }
.fem-s em.idle i { box-sizing: border-box; width: 7px; height: 7px; border: 1.8px solid var(--idle); }
.fem-s em.end { color: var(--muted); }
.fem-s .crown { flex: none; width: 13px; }
.fem-s .w { font-weight: 600; color: var(--ink2); }
.fem-p { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.fem-r.over { background: color-mix(in srgb, var(--panel) 50%, var(--ground)); }
.fem-r:first-child { border-radius: 11px 11px 0 0; }
.fem-r:last-child { border-radius: 0 0 11px 11px; }
.fem-r:only-child { border-radius: 11px; }
/* one banner a screen, the next by a finger (owner 2026-10-20: «Сделай на телефоне что бы показывалось по одному
   баннеру и далее пальцем»): the cards side by side, each the list's width, all as tall as the tallest; the dots under
   them tell which one is shown and take to theirs (app.js), without scripts there are none */
.fem { flex-direction: row; gap: 8px; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; border: 0; border-radius: 0; background: none; }
.fem::-webkit-scrollbar { display: none; }
.fem > .fem-r { flex: 0 0 100%; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.fem > .fem-r.over { background: color-mix(in srgb, var(--panel) 50%, var(--ground)); }
.fem > .fem-r.pic { border-color: transparent; background: #10131c; }
.fem-dots { display: flex; justify-content: center; margin: 4px 0 0; }
html:not(.js) .fem-dots { display: none; }
.fem-dots button { position: relative; width: 20px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.fem-dots button::after { content: ""; position: absolute; top: 6px; left: 7px; width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 45%, transparent); transition: left .2s, width .2s; }
.fem-dots button[aria-current]::after { left: 3px; width: 14px; background: var(--acc); }
@media (prefers-reduced-motion: reduce) { .fem-dots button::after { transition: none; } }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .fem { --idle: #f2a649; } }
:where(:root[data-theme="dark"]) .fem { --idle: #f2a649; }
@media (prefers-reduced-motion: reduce) { .fem-s em.on i { animation: none; } }

/* the slim lines of the main tournaments: the game when «Все игры» mixes them; the Valve table of a phone, its top ten
   (owner 2026-10-19: «В главных турнирах нужна дисциплина… рейтинг топ 10») */
@media (max-width: 900px) {
  .rate-m .vrs tr:nth-child(n+11) { display: none; }
}
.fem-s .gb { flex: none; width: 15px; height: 15px; margin: 0; border-radius: 3px; }
/* the main tournament's series, a line of its own under it (2026-10-19: «сделай еще строку что матч оформить норм»):
   when, the teams with their logos round the score; a link to the series */
@media (max-width: 900px) {
  .tdn-c { background: color-mix(in srgb, var(--panel) 50%, var(--ground)); }
}
.fem-m { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 8px; margin-left: 40px; padding: 4px 8px; border-radius: 8px; background: var(--chip); font-size: 12.5px; color: inherit; }
.fem-c { display: flex; flex-direction: column; align-items: center; min-width: 40px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fem-c b { font-size: 13px; font-weight: 700; color: var(--ink); }
.fem-c b i { margin: 0 1px; font-style: normal; color: var(--muted); }
.fem-c small { display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.fem-m.live .fem-c small { font-weight: 600; color: var(--live); }
.fem-m.live .fem-c small i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--live); animation: live-beat 1.6s ease-in-out infinite; }
.fem-t { display: flex; align-items: center; gap: 5px; min-width: 0; font-weight: 500; color: var(--ink2); }
.fem-t.a { justify-content: flex-end; text-align: right; }
.fem-t .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fem-t .logo, .fem-t .mk { flex: none; width: 16px; height: 16px; margin: 0; border-radius: 4px; font-size: 7px; }
.fem-t.w { font-weight: 700; color: var(--ink); }
a.fem-m:hover .nm { color: var(--acc); }
@media (prefers-reduced-motion: reduce) { .fem-m.live .fem-c small i { animation: none; } }
/* an event over in the tab «Турниры»: its winner with the crown */
.tdn-w { display: inline-flex; flex: none; align-items: center; gap: 4px; font-weight: 600; color: var(--ink2); } /* the winner whole, the dates give way */
.tdn-w .crown { flex: none; width: 13px; }

/* a series to come in the main tournament's line: the day small over the time, the time large (owner 2026-10-19: «время
   больше и число вверху меньше») */
.fem-c small.dt { margin: 0 0 1px; font-size: 10px; }
.fem-c small.dt + b { font-size: 14px; }

/* a main tournament still to start: its opening series under it, two at most, and how many more start then (owner
   2026-10-19: «Если у турнира несколько матчей открытия показываем что? Можно и два наверно») */
.fem-x { margin: -1px 0 0 48px; font-size: 11.5px; color: var(--muted); }

/* a main tournament's slim line: its series straight under its head, the wrapper (.fem-v) none of the layout's */
.fem-v { display: contents; }

/* a league's hue (logo.Hue; owner 2026-10-19, of the cards: «свой оформленный баннер… логотип лиги на фоне его
   цветов» — «давай»): a main tournament's card on a computer at its edge (.ft01-r.lc), the picture's palette too
   (banners.go); classes, as the page's policy allows no inline style */
.lc-h0 { --lc: #d64545; } .lc-h1 { --lc: #e0612e; } .lc-h2 { --lc: #e08a1e; } .lc-h3 { --lc: #c9a10f; }
.lc-h4 { --lc: #86ad24; } .lc-h5 { --lc: #3a9f4b; } .lc-h6 { --lc: #1f9e8f; } .lc-h7 { --lc: #1f8fb3; }
.lc-h8 { --lc: #3a6fd8; } .lc-h9 { --lc: #5b55d6; } .lc-h10 { --lc: #8a4fd0; } .lc-h11 { --lc: #c94a93; }

/* The home page on a computer (owner 2026-10-19: «переноси лэйаут в основу»; till then layout 01 on trial; home-pc.html),
   a phone's page beside it as it was (home.html, hl-tabs; «Мобильная ок уже»), each hidden on the other's screen. Under
   the strip a narrow column on the right from the top («колонка матчей уже раза в 2. и идет прям от верхних игровых
   карточек»), 259px («сделай правую колонку уже на 10%»): the matches as cards as layout 1 has them — flat on the panel's
   grey, the game and the event over the two teams, the start or the score at the right, on now a red edge —, down to the
   bottom of the left one («Правая колонка тянется ниже, что бы дотягиваться внизу до остальных»): the column takes the
   row's height and not its own, its cards wrap into a column out of sight and are cut whole (app.js keeps the keyboard
   off them). On the left the main tournaments, the news by day beside the talk, the tournaments under the talk. A phone's
   talk keeps its twelve (homeTalk). */
.hl01 { display: none; }
.hl0-ph .tli > li:nth-child(n+13) { display: none; }
@media (min-width: 901px) {
  .hl0-ph { display: none; }
  .hl01 { display: grid; grid-template-columns: minmax(0, 1fr) 259px; gap: 14px; margin-top: 14px; align-items: start; }
  .hl01 > .hl01-m, .hl01 > .hl01-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .hl01 > .hl01-r { align-self: stretch; min-height: 420px; contain: size; }
  /* the news on two thirds, the talk on one beside it; the talk and the tournaments under it, a column */
  .hl01 .hl01-nt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .hl01 .hl01-s { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  /* the tournaments in the narrow column: the logo smaller, the place gone, the prize under the name */
  .hl01 .hl01-s .tcard { grid-template-columns: 32px minmax(0, 1fr); gap: 1px 10px; padding: 7px 10px 7px 8px; }
  .hl01 .hl01-s .tcard .ev { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 8px; }
  .hl01 .hl01-s .tcard .tc b { font-size: 13.5px; }
  .hl01 .hl01-s .tcard .tmeta > span:not(.gb):not(:last-child) { display: none; }
  .hl01 .hl01-s .tcard .pz { grid-column: 2; justify-self: start; padding: 0; background: none; font-size: 12px; font-weight: 600; color: var(--ink2); }
  /* the column of cards: the panel down to the column's bottom, a list as long as the panel holds, «Все матчи» under it;
     with fewer cards than room (none to come), the panel ends with them */
  .hl01-ms { display: flex; flex: 0 1 auto; flex-direction: column; min-height: 0; }
  .hl01-ms > .tabbar { flex: none; }
  .hl01-ms > .pane:not([hidden]):not(.off) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .hl01 .hl01-ml { position: relative; display: flex; flex: 0 1 auto; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px 24px; min-height: 0; overflow: clip; overflow-clip-margin: 3px; }
  .hl01 .hl01-ml .tile { box-sizing: border-box; flex: none; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 3px 0; padding: 6px 9px 5px 8px; border: 0; border-radius: 9px; background: var(--chip); box-shadow: none; }
  .hl01 .hl01-ml .tile:hover { background: var(--acc2); color: inherit; }
  .hl01 .hl01-ml .tile .ev { grid-column: 2; grid-row: 1; gap: 6px; font-size: 11.5px; }
  .hl01 .hl01-ml .tile .sub { display: contents; }
  .hl01 .hl01-ml .tile .sub .gb { grid-column: 1; grid-row: 1; width: 15px; height: 15px; margin: 0 6px 0 0; border-radius: 4px; }
  .hl01:not([data-g="all"]) .hl01-ml .tile .sub .gb { display: none; } /* a game's page */
  .hl01:not([data-g="all"]) .hl01-ml .tile .ev { grid-column: 1 / 3; }
  .hl01 .hl01-ml .tile .sub .ko { grid-column: 3; grid-row: 1; width: 14px; height: 14px; margin-left: 6px; }
  .hl01 .hl01-ml .tile .sub em.d { grid-column: 4; grid-row: 1; margin-left: 6px; font-size: 11px; color: var(--muted); }
  .hl01 .hl01-ml .tile .sub .dots, .hl01 .hl01-ml .tile .sub .vw { display: none; }
  .hl01 .hl01-ml .tile .teams { grid-column: 1 / -1; grid-row: 2; gap: 0; padding: 0; background: none; }
  .hl01 .hl01-ml .tile .trow { gap: 6px; padding: 1px 0; font-size: 13.5px; }
  .hl01 .hl01-ml .tile .trow .mk, .hl01 .hl01-ml .tile .trow img.logo { width: 18px; height: 18px; margin-right: 7px; border-radius: 4px; }
  .hl01 .hl01-ml .tile .trow .mk { font-size: 7px; background: var(--panel); }
  .hl01 .hl01-ml .tile .trow .fl { width: 18px; height: 12px; padding: 1.5px; margin-right: 6px; border-radius: 3px; }
  .hl01 .hl01-ml .tile .trow b { min-width: 18px; font-size: 14.5px; }
  .hl01 .hl01-ml .tile .trow b.t { font-size: 13px; }
  .hl01 .hl01-ml .tile .trow em.d { font-size: 11px; }
  .hl01 .hl01-ml .tile.live { box-shadow: inset 3px 0 0 var(--live); }
}

/* the main tournaments on a computer as mock-up В12 «Календарь + коротко» (owner 2026-10-19: «Соедини календарь и
   коротко» — «добавь в p01»; home-pc.html, hl01-feat): a state tile at the left in its colour — days to go violet,
   on now red, on with nothing played now amber, over grey —, the short name large, the series under it, no plate; the
   league's logo faint behind; BLAST Slam on its own art, the disclaimer in the tile's corner. Where the card is wide the
   series sits together in the middle and larger («здесь далековаты команды и можно крупнее»); a narrow one lets a long
   name take what a short one leaves. A phone keeps the slim list. */
.ft01 { --idle: #b45f06; }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .ft01 { --idle: #f2a649; } }
:where(:root[data-theme="dark"]) .ft01 { --idle: #f2a649; }
@media (min-width: 901px) {
  .ft01 { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 14px; }
  .ft01-r { position: relative; isolation: isolate; display: flex; box-sizing: border-box; height: 136px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
  .ft01-r.over { background: color-mix(in srgb, var(--panel) 55%, var(--ground)); }
  .ft01-r.lc { border-color: color-mix(in srgb, var(--lc) 30%, var(--line)); }
  .ft01-wm { position: absolute; top: 50%; right: -8px; z-index: -1; width: 150px; height: 150px; object-fit: contain; opacity: .12; transform: translateY(-50%); pointer-events: none; }
  .ft01-tl { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 62px; padding: 6px 4px; line-height: 1.05; text-align: center; color: inherit; }
  .ft01-tl b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
  .ft01-tl b.w { font-size: 15px; font-weight: 700; letter-spacing: 0; }
  .ft01-tl span { font-size: 12px; font-weight: 600; }
  .ft01-tl small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; margin-top: 5px; overflow: hidden; font-size: 10.5px; font-weight: 500; line-height: 1.15; opacity: .85; }
  .ft01-tl i { box-sizing: border-box; width: 7px; height: 7px; margin-bottom: 4px; border-radius: 50%; }
  .ft01-r.soon .ft01-tl { background: var(--acc2); color: var(--acc); }
  .ft01-r.live .ft01-tl { background: color-mix(in srgb, var(--live) 11%, var(--panel)); color: var(--live); }
  .ft01-r.live .ft01-tl i { background: var(--live); animation: live-beat 1.6s ease-in-out infinite; }
  .ft01-r.idle .ft01-tl { background: color-mix(in srgb, var(--idle) 12%, var(--panel)); color: var(--idle); }
  .ft01-r.idle .ft01-tl i { border: 1.8px solid var(--idle); }
  .ft01-r.over .ft01-tl { background: var(--chip); color: var(--muted); }
  .ft01-bd { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 11px 12px 10px 14px; container-type: inline-size; }
  .ft01-nm { overflow: hidden; font-size: 20px; font-weight: 700; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
  a.ft01-nm:hover { color: var(--acc); }
  /* «Все игры»: the state tile a calendar's leaf, its binding the game's colour with the game's name (owner 2026-10-19:
     «В2»; design/feat-badge-2026-10-19) */
  .hl01[data-g="all"] .ft01-tl { position: relative; padding-top: 25px; }
  .ft01-gc { position: absolute; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: center; height: 19px; padding: 0 4px; overflow: hidden; background: var(--gfill); font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff; white-space: nowrap; }
  /* the size as the tile's words have it (.ft01-tl span), «VALORANT» a little smaller and closer, whole within the
     card's rounded corner (owner 2026-10-20: «valorant не вмещается») */
  .ft01-tl .ft01-gc { font-size: 12px; letter-spacing: .06em; }
  .ft01-tl .ft01-gc[data-g="valorant"] { font-size: 10.5px; letter-spacing: 0; }
  .ft01 img.logo { padding: 3px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
  .ft01 img.logo.dk { background: #23262d; }
  .ft01-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: auto 0; color: inherit; } /* a long name takes what a short one leaves */
  .ft01-h .ft01-t { flex: 0 1 auto; }
  .ft01-h .ft01-mid { flex: none; }
  .ft01-t { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; font-size: 13.5px; color: var(--ink2); }
  .ft01-t b { max-width: 100%; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .ft01-t .logo, .ft01-t .mk { flex: none; width: 34px; height: 34px; margin: 0; border-radius: 9px; font-size: 11px; }
  .ft01-t.w { color: var(--ink); }
  .ft01-t.w b { font-weight: 700; }
  .ft01-h.done .ft01-t:not(.w) { color: var(--muted); }
  a.ft01-h:hover .ft01-t b, a.ft01-ln:hover .ft01-t b { color: var(--acc); }
  .ft01-mid { display: flex; flex-direction: column; align-items: center; min-width: 60px; line-height: 1; font-variant-numeric: tabular-nums; }
  .ft01-mid b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
  .ft01-mid b i { margin: 0 2px; font-style: normal; color: var(--muted); }
  .ft01-mid b.tm { font-size: 24px; }
  .ft01-mid small { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
  .ft01-mid small.on { font-weight: 600; color: var(--live); }
  .ft01-mid small.on i { width: 6px; height: 6px; border-radius: 50%; background: var(--live); animation: live-beat 1.6s ease-in-out infinite; }
  .ft01-r.soon .ft01-mid small.dy { display: none; } /* the day is in the tile */
  /* a wider card: the teams close to the middle and larger, the same width either side while there is room, a long name
     never cut for a short one beside it */
  @container (min-width: 260px) {
    .ft01-h { justify-content: center; gap: 12px; }
    .ft01-h .ft01-t { flex: 1 1 0; min-width: min-content; max-width: 124px; }
    .ft01-t { gap: 5px; font-size: 15px; }
    .ft01-t .logo, .ft01-t .mk { width: 42px; height: 42px; border-radius: 10px; font-size: 13px; }
    .ft01-mid { min-width: 72px; }
    .ft01-mid b { font-size: 34px; }
    .ft01-mid b.tm { font-size: 29px; }
    .ft01-hs .ft01-h { gap: 6px; }
    .ft01-hs .ft01-t { min-width: 0; max-width: none; font-size: 14px; }
    .ft01-ln .ft01-t { font-size: 15px; }
    .ft01-ln .ft01-t .logo, .ft01-ln .ft01-t .mk { width: 24px; height: 24px; border-radius: 6px; }
    .ft01-ln .tm { font-size: 21px; }
  }
  .ft01-ls { display: flex; flex-direction: column; gap: 7px; margin: auto 0; }
  .ft01-ln { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; color: inherit; }
  .ft01-ln .ft01-t { flex-direction: row; gap: 6px; font-size: 14px; }
  .ft01-ln .ft01-t.a { justify-content: flex-end; }
  .ft01-ln .ft01-t .logo, .ft01-ln .ft01-t .mk { width: 20px; height: 20px; border-radius: 5px; font-size: 8px; }
  .ft01-ln img.logo { padding: 2px; }
  .ft01-ln .tm { min-width: 52px; font-size: 19px; font-weight: 800; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
  .ft01-hs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: auto 0; }
  .ft01-hs .ft01-h { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin: 0; } /* room enough: each centred, the series apart */
  .ft01-r.art { border-color: transparent; background-color: #0b1446; background-position: center; background-size: cover; background-repeat: no-repeat; }
  .ft01-r.art-blast-slam { background-image: linear-gradient(90deg, rgb(5 9 38 / .88) 0%, rgb(5 9 38 / .64) 55%, rgb(5 9 38 / .24) 100%), url(art/blast-slam-bg.webp); }
  .ft01-r.art .ft01-tl { background: rgb(0 0 0 / .28); color: rgb(255 255 255 / .8); }
  .ft01-r.art.live .ft01-tl { color: #ff8a8a; }
  .ft01-r.art.live .ft01-tl i, .ft01-r.art .ft01-mid small.on i { background: #ff8a8a; }
  .ft01-r.art .ft01-nm, .ft01-r.art .ft01-mid b, .ft01-r.art .ft01-t, .ft01-r.art .ft01-ln .tm { color: #fff; }
  .ft01-r.art .ft01-mid b i, .ft01-r.art .ft01-mid small, .ft01-r.art .ft01-h.done .ft01-t:not(.w) { color: rgb(255 255 255 / .72); }
  .ft01-r.art .ft01-mid small.on { color: #ff8a8a; }
  .ft01-r.art a.ft01-nm:hover, .ft01-r.art a.ft01-h:hover .ft01-t b { color: #c9d6ff; }
  .ft01-al { position: absolute; top: 9px; right: 10px; width: 38px; height: 38px; object-fit: contain; pointer-events: none; } /* beside the short name: the series keep the width */
  .ft01-cr { position: absolute; bottom: 5px; left: 0; z-index: 1; width: 62px; font-size: 9px; line-height: 1.15; color: rgb(255 255 255 / .62); text-align: center; }
  .ft01-cr:hover { color: #fff; }
  .ft01-r.art .ft01-nm { margin-right: 40px; }
  /* its picture drawn by AI (owner 2026-10-19: «давай SOL. это для баннеров на главную»; banners.go), the text white */
  .ft01-r.pic { border-color: transparent; background: #10131c; color: #fff; }
  /* the picture dark and empty on the left, its subject on the right, the card's words in a column over the dark (owner
     2026-10-20: «Давай баннеры по старому как с Мальтой. Просто в темное место переносим информацию текст и так
     далее»): no state tile, a state line over the name instead, the series a little table; from the left, and what is
     long goes on over the picture (2026-10-20: «не бойся залазить на правую сторону… просто начинаем с левой стороны») */
  .ft01-pic { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; pointer-events: none; }
  .ft01-r.pic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 8 18 / .62) 0%, rgb(6 8 18 / .42) 45%, rgb(6 8 18 / 0) 78%); pointer-events: none; }
  .ft01-pb { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; box-sizing: border-box; max-width: 100%; padding: 10px 14px; text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
  .ft01-pb > * { max-width: 100%; }
  .ft01-ps { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; font-weight: 600; line-height: 16px; white-space: nowrap; color: rgb(255 255 255 / .78); }
  .ft01-ps span { overflow: hidden; text-overflow: ellipsis; }
  .ft01-r.soon .ft01-ps { color: #d9ccff; }
  .ft01-ps .on { display: inline-flex; align-items: center; gap: 5px; }
  .ft01-ps .on i { flex: none; box-sizing: border-box; width: 7px; height: 7px; border-radius: 50%; }
  .ft01-r.live .ft01-ps { color: #ff8a8a; }
  .ft01-r.live .ft01-ps .on i { background: #ff8a8a; animation: live-beat 1.6s ease-in-out infinite; }
  .ft01-r.idle .ft01-ps { color: #ffc46b; }
  .ft01-r.idle .ft01-ps .on i { border: 1.8px solid #ffc46b; }
  .ft01-pg { flex: none; padding: 1px 5px; border-radius: 4px; background: var(--gfill); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; line-height: 14px; text-transform: uppercase; color: #fff; text-shadow: none; }
  .ft01-pb .ft01-nm { margin-bottom: 6px; font-size: 19px; }
  .ft01-vw { display: flex; gap: 30px; }
}
/* the series of a main tournament's card with a picture as a little table, the openings a line each: on a computer
   and on a phone (owner 2026-10-23: «сделай что бы на телефоне тоже команды слева и отступ как на пк») */
.ft01-v { display: grid; grid-template-columns: 22px minmax(0, max-content) auto; align-items: center; gap: 4px 8px; min-width: 0; color: inherit; }
.ft01-vt { display: contents; color: #fff; }
.ft01-v .logo, .ft01-v .mk { width: 22px; height: 22px; margin: 0; border-radius: 6px; font-size: 8px; }
.ft01 .ft01-v img.logo { padding: 2px; }
.ft01-vt b { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ft01-vt em { padding-left: 6px; font-size: 18px; font-style: normal; font-weight: 800; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; }
.ft01-v.done .ft01-vt:not(.w) { color: rgb(255 255 255 / .62); }
.ft01-v.done .ft01-vt.w b { font-weight: 700; }
.ft01-v > small { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 13px; color: rgb(255 255 255 / .72); white-space: nowrap; }
.ft01-v > small.on { font-weight: 600; color: #ff8a8a; }
.ft01-v > small.on i { width: 6px; height: 6px; border-radius: 50%; background: #ff8a8a; animation: live-beat 1.6s ease-in-out infinite; }
.ft01-vs { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: flex-end; padding-left: 6px; line-height: 1; }
.ft01-vs b { font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; }
.ft01-vs small { margin-top: 3px; font-size: 11px; color: rgb(255 255 255 / .72); }
.ft01-r.soon .ft01-vs small.dy { display: none; } /* the day is in the state line */
a.ft01-v:hover .ft01-vt b { color: #c9d6ff; }
/* the openings at one time: a line each, the time once on the right */
.ft01-vo { display: grid; grid-template-columns: minmax(0, max-content) auto; align-items: center; gap: 4px 0; }
.ft01-oo { grid-column: 1; display: flex; align-items: center; gap: 5px; min-width: 0; color: #fff; }
.ft01-oo .logo, .ft01-oo .mk { flex: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; font-size: 8px; }
.ft01 .ft01-oo img.logo { padding: 2px; }
.ft01-oo b { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ft01-oo i { flex: none; font-style: normal; color: rgb(255 255 255 / .6); }
a.ft01-oo:hover b { color: #c9d6ff; }
.ft01-vo .ft01-vs { grid-column: 2; grid-row: 1 / span 2; padding-left: 12px; }
@media (min-width: 901px) {
  /* the wide card, one tournament: room for the words larger */
  .ft01[data-n="1"] .ft01-pb { padding: 9px 18px; }
  .ft01[data-n="1"] .ft01-pb .ft01-nm { margin-bottom: 5px; font-size: 22px; }
  .ft01[data-n="1"] .ft01-v { grid-template-columns: 24px minmax(0, max-content) auto; column-gap: 9px; }
  .ft01[data-n="1"] .ft01-v .logo, .ft01[data-n="1"] .ft01-v .mk { width: 24px; height: 24px; }
  .ft01[data-n="1"] .ft01-vt b, .ft01[data-n="1"] .ft01-oo b { font-size: 15px; }
  .ft01[data-n="1"] .ft01-vt em { font-size: 20px; }
  .ft01[data-n="1"] .ft01-vs b { font-size: 24px; }
  .ft01[data-n="1"] .ft01-oo .logo, .ft01[data-n="1"] .ft01-oo .mk { width: 24px; height: 24px; }
  .ft01[data-n="1"] .ft01-vw { gap: 40px; }
  /* four in a row, two of a game on at once (oneAGame): the series a little smaller */
  .ft01[data-n="4"] .ft01-pb { padding: 10px 12px; }
  .ft01[data-n="4"] .ft01-pb .ft01-nm { font-size: 17px; }
  .ft01[data-n="4"] .ft01-oo { gap: 4px; }
  .ft01[data-n="4"] .ft01-oo .logo, .ft01[data-n="4"] .ft01-oo .mk, .ft01[data-n="4"] .ft01-v .logo, .ft01[data-n="4"] .ft01-v .mk { width: 19px; height: 19px; border-radius: 5px; }
  .ft01[data-n="4"] .ft01-v { grid-template-columns: 19px minmax(0, max-content) auto; column-gap: 6px; }
  .ft01[data-n="4"] .ft01-oo b, .ft01[data-n="4"] .ft01-vt b { font-size: 13px; }
  .ft01[data-n="4"] .ft01-vs b { font-size: 19px; }
  .ft01[data-n="4"] .ft01-vo .ft01-vs { padding-left: 8px; }
  .ft01-r.pic.over .ft01-pic { filter: saturate(.75); }
  .ft01-r.pic .ft01-nm { color: #fff; text-shadow: 0 1px 8px rgb(0 0 0 / .45); }
  .ft01-r.pic a.ft01-nm:hover { color: #c9d6ff; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .ft01-r.live .ft01-tl i, .ft01-mid small.on i, .ft01-r.live .ft01-ps .on i, .ft01-v > small.on i { animation: none; } }

/* The game of a main tournament on «Все игры» (owner 2026-10-19: «придумай как отображать дисциплину когда баннер во
   всех» — «В2 и Т1»; design/feat-badge-2026-10-19): its colour — a fill under white capitals (the computer's tile), an
   ink on the panel, a light one on a picture and in the dark (the phone's word). Dota 2 and Valorant both red: the word
   tells them apart. */
.fem-r[data-g="cs2"], .ft01-r[data-g="cs2"] { --gfill: #b0700e; --gink: #8a5304; --glight: #f2b75a; }
.fem-r[data-g="dota2"], .ft01-r[data-g="dota2"] { --gfill: #b8352a; --gink: #a2302a; --glight: #ff8b7e; }
.fem-r[data-g="valorant"], .ft01-r[data-g="valorant"] { --gfill: #d8324a; --gink: #be2639; --glight: #ff8795; }
/* the phone's slim line: the game's name first in the state line, spaced capitals of its colour, in place of its mark */
.fem-gk { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gink); }
.fem-r.pic .fem-gk { color: var(--glight); }
@media (prefers-color-scheme: dark) { :where(:root:not([data-theme="light"])) .fem-gk { color: var(--glight); } }
:where(:root[data-theme="dark"]) .fem-gk { color: var(--glight); }

/* a main tournament's slim line on its picture drawn by GPT (owner 2026-10-19: «баннеры тоже и на телефон»; banners.go):
   the picture under a shade from the left, the text white */
.fem-r.pic { position: relative; isolation: isolate; overflow: hidden; background: #10131c; box-shadow: none; color: #fff; }
.fem-pic { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: right center; pointer-events: none; }
.fem-r.pic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(6 8 18 / .88) 0%, rgb(6 8 18 / .66) 50%, rgb(6 8 18 / .4) 100%); pointer-events: none; }
.fem-r.pic.over .fem-pic { filter: saturate(.75); }
.fem-r.pic .fem-h, .fem-r.pic .fem-v { text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.fem-r.pic .fem-n b, .fem-r.pic .fem-p { color: #fff; }
.fem-r.pic .fem-s, .fem-r.pic .fem-s em, .fem-r.pic .fem-s .w, .fem-r.pic .fem-x { color: rgb(255 255 255 / .76); }
.fem-r.pic .fem-s em.on { color: #ff8a8a; }
.fem-r.pic .fem-s em.on i { background: #ff8a8a; }
.fem-r.pic .fem-s em.idle { color: #ffc46b; }
.fem-r.pic .fem-s em.idle i { border-color: #ffc46b; }
/* on a picture the words as on a computer (owner 2026-10-23: «сделай что бы на телефоне тоже команды слева и отступ как
   на пк»): its padding, the series a little table from the left under the logo — a team a line, the score after the
   name, the time on the right of both —, no glass */
.fem > .fem-r.pic { gap: 8px; padding: 10px 14px; }
.fem-r.pic .fem-x { margin: -4px 0 0; }
.fem-r.pic .ft01-v, .fem-r.pic .ft01-vo { align-self: flex-start; max-width: 100%; }
.fem-r .ft01-v img.logo, .fem-r .ft01-oo img.logo { padding: 2px; }
.fem-r.soon .ft01-vs small.dy { display: none; } /* the day is in the state line */
@media (prefers-reduced-motion: reduce) { .fem-r .ft01-v > small.on i { animation: none; } }
.fem-solo .fem-m { padding: 7px 10px; font-size: 14px; }
.fem-solo .fem-t { gap: 7px; }
.fem-solo .fem-t .logo, .fem-solo .fem-t .mk { width: 22px; height: 22px; border-radius: 5px; font-size: 9px; }
.fem-solo .fem-c b, .fem-solo .fem-c small.dt + b { font-size: 17px; }
.fem-solo .fem-c small, .fem-solo .fem-c small.dt { font-size: 11.5px; }
/* The admin's pages: the shell with its sections (admin.go), the summary, the news and their editor, the discussions, the drafts; the checks, the banners, the visits, the helpers. */
/* The self-check's page, the admin's (checkspage.go): an event a line with its tier, under it what is wrong, the rule
   in a grey word */
.chk-sum { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.chk-hk { margin: -8px 0 14px; padding-left: 18px; font-size: 13.5px; color: var(--muted); }
/* the visits, the admin's (visits.go): the span's numbers as tiles, the lists in three columns, the latest visits step by step */
.vis .vis-n { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 8px; }
.vis .vis-n > div { padding: 10px 12px; border-radius: 10px; background: var(--chip); }
.vis .vis-n b { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.vis .vis-n span { font-size: 12.5px; color: var(--muted); }
.vis .vis-s { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.vis .vis-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.vis h2 { margin: 18px 0 6px; font-size: 16px; }
.vis h3 { margin: 12px 0 4px; font-size: 13px; color: var(--muted); }
.vis .vis-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vis .vis-t td, .vis .vis-t th { padding: 4px 6px; border-top: 1px solid var(--line); text-align: left; }
.vis .vis-t td + td, .vis .vis-t th + th { text-align: right; font-variant-numeric: tabular-nums; }
.vis .vis-t a { color: inherit; overflow-wrap: anywhere; }
.vis .vis-d { max-width: 360px; }
.vis .vis-l { margin: 0; padding: 0; list-style: none; }
.vis .vis-l > li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.vis .vis-l p { margin: 2px 0; overflow-wrap: anywhere; }
.vis .vis-l small { color: var(--muted); }
.vis .vis-st { color: var(--ink2); }
@media (max-width: 760px) { .vis .vis-n { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vis .vis-g { grid-template-columns: 1fr; } }
.chk-l { margin: 0; padding: 0; list-style: none; }
/* the main tournaments' pictures on /admin/checks (banners.go): a still, the event and its state, the admin's presses */
.bnr-l { margin: 0; padding: 0; list-style: none; }
.bnr-l > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.bnr-p { flex: none; width: 160px; height: 80px; border-radius: 8px; background: var(--chip); object-fit: cover; }
.bnr-p.off { opacity: .35; }
.bnr-t { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.bnr-t small { font-size: 12.5px; color: var(--muted); }
.bnr-l form { display: flex; flex: none; gap: 6px; }
.chk-l > li { padding: 10px 0; border-top: 1px solid var(--line); }
.chk-l > li > a { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.chk-l > li > a:hover { color: var(--acc); }
.chk-t { flex: none; min-width: 22px; padding: 1px 5px; border-radius: 5px; background: var(--chip); font-size: 11px; font-weight: 700; color: var(--ink2); text-align: center; }
.chk-l ul { margin: 6px 0 0 30px; padding: 0; list-style: none; font-size: 13px; color: var(--ink2); }
.chk-l ul li { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; }
.chk-k { flex: none; min-width: 84px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.chk-k.k-dup, .chk-k.k-plays { color: var(--loss); }

/* the helpers' page (helperadmin.go): a new key shown once, the helpers one a line with their button, what they sent */
.hlp .hlp-k { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: var(--acc2); font-size: 13.5px; }
.hlp .hlp-k code { padding: 6px 8px; border-radius: 6px; background: var(--panel); font-size: 13px; word-break: break-all; user-select: all; }
.hlp .hlp-k span { color: var(--muted); }
.hlp .hlp-l, .hlp .hlp-o { margin: 0 0 14px; padding: 0; list-style: none; }
/* the photos for the stories waiting for the admin (storyphotos.go): the picture, the story, who is on it, the credit, the two buttons */
.hlp .hlp-ph { display: grid; gap: 14px; margin: 0 0 14px; padding: 0; list-style: none; }
.hlp .hlp-ph li { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.hlp .hlp-ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--chip); }
.hlp .hlp-pt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hlp .hlp-pt small { color: var(--muted); }
.hlp .hlp-pt form { display: flex; gap: 8px; margin-top: auto; }
@media (max-width: 600px) { .hlp .hlp-ph li { grid-template-columns: 1fr; } }
.hlp .hlp-l li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.hlp .hlp-l li span { font-size: 13px; color: var(--muted); }
.hlp .hlp-l li form { margin-left: auto; }
.hlp .hlp-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hlp .hlp-f input { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: 14px var(--sans); }
.hlp .hlp-o li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.hlp .hlp-o li .chk-k { margin-right: 6px; }
.hlp .hlp-o small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* The admin's shell (admin.go): the menu of sections on the left, kept on the screen; the section on the right. A
   phone has the menu as a row of chips over the section. */
.adm { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.adm-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.adm-h { padding: 4px 10px 10px; font: 700 15px var(--sans); color: var(--ink); }
.adm-nav { display: flex; flex-direction: column; gap: 2px; }
.adm-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font: 600 14px var(--sans); color: var(--ink2); }
.adm-nav a:hover { background: var(--chip); color: var(--ink); }
.adm-nav a[aria-current] { background: var(--acc2); color: var(--acc); }
.adm-i { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.adm-back { margin-top: 8px; padding: 10px 10px 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.adm-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.adm-main > .panel.one { margin-top: 0; }
.adm-sec h1 { margin: 0; font-size: 22px; }
.adm-sec h2 { margin: 18px 0 8px; font-size: 15px; }
.adm-sec h2:first-child { margin-top: 0; }
.adm-sec h2 small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.adm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.adm-top h1, .adm-top h2 { margin: 0; }
.adm-note { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* the summary's tiles, each a link to its section; one asking for a look outlined */
.adm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.adm-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--chip); color: var(--ink); }
a.adm-card:hover { border-color: var(--acc); color: var(--ink); }
.adm-card span { font-size: 12.5px; color: var(--muted); }
.adm-card b { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-card small { font-size: 12px; color: var(--muted); }
.adm-card.adm-warn { border-color: color-mix(in srgb, var(--loss) 55%, var(--line)); background: color-mix(in srgb, var(--loss) 7%, var(--panel)); }
.adm-list { margin: 0; padding: 0; list-style: none; }
.adm-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.adm-list li:first-child { border-top: 0; }
.adm-list span { color: var(--muted); }
/* a table of rows: when, what (a link, a line under it), the buttons */
.adm-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.adm-bar .sect { margin: 0; }
.adm-q input { width: 240px; max-width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); font: 14px var(--sans); }
.adm-tbl { display: flex; flex-direction: column; }
.adm-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--line); }
.adm-row:first-child { border-top: 0; }
.adm-when { flex: none; width: 64px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-what { flex: 1; min-width: 0; }
.adm-what > a { font-weight: 600; color: var(--ink); }
.adm-what > a:hover { color: var(--acc); }
.adm-what .gb { margin-right: 6px; vertical-align: -3px; }
.adm-what p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adm-what small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.adm-what b { display: block; font-size: 14px; }
.adm-act { display: flex; flex: none; gap: 6px; }
.adm-btn { padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; font: 600 13px var(--sans); color: var(--ink2); background: var(--panel); }
.adm-btn:hover { border-color: var(--acc); color: var(--acc); }
.adm-tag { padding: 1px 7px; border-radius: 6px; background: var(--acc2); color: var(--acc); font: 600 11.5px var(--sans); font-style: normal; }
.adm-tag.t-draft { background: var(--chip); color: var(--ink2); }
.adm-tag.t-ed { background: color-mix(in srgb, #d99a00 18%, var(--panel)); color: #9a6a00; }
.adm-tag.t-off { background: color-mix(in srgb, var(--loss) 14%, var(--panel)); color: var(--loss); }
.adm-sw { cursor: pointer; }
.adm-sw input { flex: none; width: 18px; height: 18px; accent-color: var(--acc-fill); }
/* the editor: the story on the left, how it comes out on the right, kept on the screen */
.adm-ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.adm-ed-s { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; }
.adm-fl { display: flex; flex-direction: column; gap: 5px; margin: 0 0 14px; }
.adm-fl > span { font: 600 13.5px var(--sans); color: var(--ink); }
.adm-fl small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.adm-ed input:not([type=checkbox], [type=radio], [type=file]), .adm-ed textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink); font: 14.5px/1.5 var(--sans); }
.adm-ed textarea { resize: vertical; }
.adm-ed input:focus, .adm-ed textarea:focus { outline: 2px solid color-mix(in srgb, var(--acc) 35%, transparent); border-color: var(--acc); }
.adm-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.adm-fact { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; background: var(--chip); }
.adm-pair { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; }
.adm-emb { margin: 0 0 10px; padding: 10px 12px 0; border: 1px solid var(--line); border-radius: 10px; }
.adm-emb legend { padding: 0 4px; font-size: 12.5px; color: var(--muted); }
.adm-more summary { display: inline-flex; padding: 6px 12px; border: 1px dashed var(--line); border-radius: 9px; font: 600 13.5px var(--sans); color: var(--acc); cursor: pointer; list-style: none; }
.adm-more summary::-webkit-details-marker { display: none; }
.adm-more[open] summary { margin-bottom: 10px; }
.adm-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.adm-kinds label { cursor: pointer; }
.adm-kinds input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.adm-kinds span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; font: 600 13px var(--sans); color: var(--ink2); background: var(--panel); }
.adm-kinds input:checked + span { border-color: var(--acc); background: var(--acc2); color: var(--acc); }
.adm-kinds input:focus-visible + span { outline: 2px solid var(--acc); }
.adm-kinds .ava { border-radius: 50%; }
.adm-chk { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; cursor: pointer; }
.adm-chk input { width: 17px; height: 17px; accent-color: var(--acc-fill); }
.adm-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-btns form { margin: 0; }
.btn.adm-ghost { background: var(--chip); color: var(--ink); }
.btn.adm-ghost:hover { color: var(--ink); }
.btn.adm-del { background: var(--loss); }
.adm-st { margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.adm-ph { margin: 0 0 10px; }
.adm-ph img { display: block; width: 100%; border-radius: 9px; }
.adm-ph figcaption { margin-top: 4px; font-size: 12px; color: var(--muted); }
.adm-danger h2 { color: var(--muted); }
/* the editor's preview of a story: a strip over the page */
.adm-pv { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, #d99a00 16%, var(--panel)); color: var(--ink); font: 600 14px var(--sans); }
@media (max-width: 1100px) {
  .adm-ed { grid-template-columns: minmax(0, 1fr); }
  .adm-ed-s { position: static; }
  .adm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .adm { grid-template-columns: minmax(0, 1fr); }
  .adm-side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; }
  .adm-h, .adm-back { display: none; }
  .adm-nav { flex-direction: row; flex-wrap: wrap; }
  .adm-nav a { padding: 6px 10px; font-size: 13px; }
  .adm-row { flex-wrap: wrap; }
  .adm-when { width: auto; }
  .adm-act { width: 100%; }
  .adm-grid3 { grid-template-columns: minmax(0, 1fr); }
  .adm-pair { grid-template-columns: minmax(0, 1fr) 96px; }
}
/* FACEIT, the owner's draft (web/faceit.go): an account's card on a player's page and on «Мой FACEIT», a region's first
   hundred by Elo, the comparison with a player of ours. The level is our own badge in the levels' usual colours. */
.flv { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 12px/1 var(--sans); font-style: normal; color: #1b1f27; background: #e5e5e5; }
.flv.l2, .flv.l3 { background: #1ce400; }
.flv.l4, .flv.l5, .flv.l6, .flv.l7 { background: #ffc800; }
.flv.l8, .flv.l9 { background: #ff6309; color: #fff; }
.flv.l10 { background: #fe1f00; color: #fff; }

/* the card: the level big, the Elo and the place, the account's nickname at the right */
.fcx h3, .fcs h3 { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.fch { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.fch .flv { width: 40px; height: 40px; font-size: 17px; flex: none; }
.fch div { display: flex; flex-direction: column; min-width: 0; }
.fch b { font-size: 18px; font-weight: 700; color: var(--ink); }
.fch span { font-size: 13px; color: var(--muted); }
.fch a { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--acc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
/* the numbers over all matches, five tiles */
.fcn { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fcn span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 10px; background: var(--chip); font-size: 11.5px; color: var(--muted); }
.fcn b { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
/* the last results, a square each, the latest last */
.fcr { display: flex; align-items: center; gap: 4px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.fcr span { margin-right: 4px; }
.fcr i { width: 10px; height: 10px; border-radius: 3px; background: var(--loss); }
.fcr i.w { background: var(--win); }
.fcr small { margin-left: 8px; font-size: 12px; }
/* the last matches: when, the map, the score green or red, kills–deaths, damage a round */
.fcg { display: flex; flex-direction: column; font-size: 13px; }
.fcg > a, .fcg .h { display: grid; grid-template-columns: 62px minmax(0, 1fr) 54px 54px 40px; gap: 8px; align-items: center; padding: 6px 4px; border-top: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.fcg .h { border-top: 0; padding-top: 0; font-size: 11.5px; color: var(--muted); }
.fcg > a:hover { background: var(--chip); }
.fcg time { color: var(--muted); }
.fcg b { font-weight: 700; color: var(--loss); }
.fcg .w b { color: var(--win); }
.fcg > a > :nth-child(n+4), .fcg .h > :nth-child(n+4) { text-align: right; }
/* the maps most played */
.fcm { display: flex; flex-direction: column; font-size: 13px; }
.fcm div { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px 70px; gap: 8px; align-items: baseline; padding: 6px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.fcm div:first-child { border-top: 0; }
.fcm small { font-size: 12px; color: var(--muted); text-align: right; }
.fcm b { font-weight: 700; text-align: right; }
.fcv { margin: 12px 0 0; font-size: 13px; font-weight: 600; }
.fcv a { color: var(--acc); }

/* a region's first hundred: the place, the player (ours named as on the site), the level, the Elo */
.fcf { display: flex; gap: 6px; margin: 0 0 12px; font-size: 13px; }
.fcf a { padding: 4px 10px; border-radius: 8px; color: var(--ink2); border: 1px solid var(--line); }
.fcf a.on { border-color: var(--acc); color: var(--acc); }
.fct { display: flex; flex-direction: column; font-size: 14px; }
.fct > div { display: grid; grid-template-columns: 44px minmax(0, 1fr) 64px 64px; gap: 8px; align-items: center; padding: 7px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.fct .h { border-top: 0; font-size: 11.5px; color: var(--muted); padding-top: 0; }
.fct .h > :nth-child(n+3), .fct .r > :nth-child(n+3) { text-align: right; justify-self: end; }
.fct .n { color: var(--muted); }
.fct .who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fct .who a { flex: 0 0 auto; max-width: 62%; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fct .who small { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fct .pro .who a { font-weight: 700; }
.fct .pro { background: color-mix(in srgb, var(--acc2) 55%, transparent); }
.fct .me { background: color-mix(in srgb, var(--win) 14%, transparent); }
.fct b { font-weight: 700; }

/* the side: the reader's own account; the comparison, the better of each number marked */
.fco { font-size: 14px; line-height: 1.5; color: var(--ink2); }
.fcw { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 14px 0 0; }
.fcw label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); flex: 1 1 220px; }
.fcw input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: 14px var(--sans); }
.fcu { padding: 0; border: 0; background: none; color: var(--muted); font: 13px var(--sans); text-decoration: underline; cursor: pointer; }
.fcu:hover { color: var(--loss); }
.fcy { display: flex; gap: 8px; margin: 0 0 12px; }
.fcy input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: 14px var(--sans); }
.fcp { margin: 0 0 12px; }
.fcp a span:hover { border-color: var(--acc); color: var(--acc); }
.fcq { display: flex; flex-direction: column; font-size: 13.5px; }
.fcq > div { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px; gap: 8px; align-items: baseline; padding: 6px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.fcq .h { border-top: 0; padding-top: 0; font-size: 11.5px; color: var(--muted); }
.fcq .h a { color: var(--ink2); font-weight: 600; }
.fcq > div > :nth-child(n+2) { text-align: right; }
.fcq b { font-weight: 600; color: var(--ink2); }
.fcq b.up { font-weight: 700; color: var(--win); }
.fcq small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
@media (max-width: 640px) {
  .fcn { gap: 4px; }
  .fcn span { padding: 6px 2px; font-size: 10.5px; }
  .fcn b { font-size: 14px; }
  .fcg > a, .fcg .h { grid-template-columns: 52px minmax(0, 1fr) 48px 50px 34px; gap: 6px; }
  .fct > div { grid-template-columns: 34px minmax(0, 1fr) 40px 52px; }
}
/* No spoilers (owner 2026-10-27: «сделать режим no spoilers»; settings.go, the reader's «Без спойлеров»; html
   data-nospoil): the scores of the series played, their maps' winners and the headlines of the results hidden — a grey bar
   where the numbers stand —, a series on now and one to come as they are. A press on one opens it (17-spoilers.js:
   .sp-open), «Показать счёт» on a match page opens the page (html.sp-all). The hiding is here alone, by the classes the
   pages already have. */
.sp-btn { display: none; }
html[data-nospoil]:not(.sp-all) :is(
  .ml:not(.live, .sp-open) .sc b,
  .tile.done:not(.tev, .sp-open) .trow > b,
  .fem-m.done:not(.sp-open) b,
  .ft01-h.done:not(.sp-open) b,
  .ft01-v.done:not(.sp-open) em,
  .swm:not(.live, .sp-open) b,
  .brc:not(.live, .sp-open) .bt i,
  .mp .face .score:not(.live) .nums b:not(.t),
  .mp:not(:has(.score.live)) .mcards .mc.all .mcs b,
  .mp .mcards .mc.done .mcs b) {
  color: transparent !important; background: color-mix(in srgb, var(--muted) 38%, transparent); border-radius: 4px; text-shadow: none;
}
html[data-nospoil]:not(.sp-all) :is(
  .ml:not(.live, .sp-open) .sc i,
  .mp .face .score:not(.live) .nums i,
  .mp .mcards .mc.done :is(.mcx, .mcw),
  .mp:not(:has(.score.live)) .mch,
  .mp:not(:has(.score.live)) .rh figcaption .sc,
  .mp .side .crown,
  .tev.done:not(.sp-open) .tev-w) { visibility: hidden; }
/* the winner's colour and weight, the loser's fading: as everyone's */
html[data-nospoil]:not(.sp-all) :is(
  .fem-m.done:not(.sp-open) .fem-t.w,
  .ft01-h.done:not(.sp-open) .ft01-t.w,
  .ft01-v.done:not(.sp-open) .ft01-vt.w,
  .swm:not(.live, .sp-open) .t:is(.w, .l),
  .brc:not(.live, .sp-open) .bt:is(.w, .l),
  .mp .side:is(.won, .lost)) { color: inherit !important; font-weight: inherit; opacity: 1 !important; filter: none !important; }
html[data-nospoil]:not(.sp-all) :is(.form a, .frm i):is(.w, .l, .d) { background: var(--chip) !important; color: transparent !important; }
/* the headline that tells a result (spoils: a score, «обыграла», «вылетела», «чемпион»…), of a story or a topic: blurred */
html[data-nospoil]:not(.sp-all) :is(.ni[data-sp]:not(.sp-open) .nt, .tln[data-sp]:not(.sp-open) .tt, .fvr[data-sp]:not(.sp-open) .fvt) { filter: blur(5px); }
/* «Показать счёт» on the page of a series played */
html[data-nospoil]:not(.sp-all) .mp .sp-btn { display: inline-flex; margin-top: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--acc); font: 600 12.5px var(--sans); cursor: pointer; }
/* The section «Игры» (games.go, games.html): the cards of the list; a game's page — the frame with the canvas, the
   buttons of the sound and the whole screen in its corner, the line under it. The frame is wide on a computer and tall
   on a phone held upright; the game lays its scene in whichever it gets, the whole screen too. A finger scrolls the
   page over the canvas till the round begins (.arc-run), then only plays. A game of aim draws its own crosshair
   (.arc-aim). */
.arc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.arc-card { display: flex; flex-direction: column; gap: 6px; }
.arc-pic { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--ground); }
.arc-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.arc-pic:hover img { transform: scale(1.02); }
.arc-name { margin: 4px 0 0; font-size: 17px; }
.arc-name a { color: var(--ink); }
.arc-about { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.45; }

.arc-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100svh - 140px); border-radius: 12px; overflow: hidden; background: #8fa9c2; }
.arc-cv { display: block; width: 100%; height: 100%; cursor: default; outline: none; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.arc-run .arc-cv { touch-action: none; }
.arc-aim .arc-cv { cursor: none; }
.arc-frame.arc-fs { max-height: none; aspect-ratio: auto; border-radius: 0; }
.arc-ctl { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.arc-ctl button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: rgb(14 16 22 / .42); color: #fff; cursor: pointer; }
.arc-ctl button:hover { background: rgb(14 16 22 / .62); }
.arc-ctl svg { width: 18px; height: 18px; }
.arc-ctl [aria-pressed="true"] .arc-i0, .arc-ctl [aria-pressed="false"] .arc-i1 { display: none; }
.arc-line { margin: 10px 0 0; color: var(--ink2); font-size: 14px; line-height: 1.45; }
@media (max-width: 640px) { .arc-frame { aspect-ratio: 3 / 4; } }