/* шрифт Inter (self-hosted, как у dotaprotracker) — латиница + кириллица, variable 100–900 */ @font-face { font-family: 'InterV'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('./fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'InterV'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('./fonts/inter-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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --bg: #08080e; --surface-a: #14161f; --surface-b: #0f1119; --hair: #23262f; --sk1: #1c1f2a; --sk2: #272c39; --text: #eef0f6; --muted: #8b90a0; --faint: #565c6e; --accent: #20c060; --accent-2: #66e0a0; --gold: #f4c34d; --silver: #cdd2dc; --bronze: #d08a4e; --green: #1f9d55; --header-h: 54px; --tab-h: 62px; --tabbar-bg: rgba(10,12,18,.9); --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); } /* светлая тема — переключается кнопкой в шапке (data-theme=light на ) */ :root[data-theme="light"] { --bg: #eef0f5; --surface-a: #ffffff; --surface-b: #f6f7fb; --hair: #e2e5ee; --sk1: #e3e6ee; --sk2: #f4f5fa; --text: #171922; --muted: #5f6575; --faint: #98a0b2; --accent: #20c060; --accent-2: #0e8a44; --gold: #cf9c1f; --silver: #98a0ae; --bronze: #bf7a3e; --tabbar-bg: rgba(248,249,252,.82); /* «стеклянные» карточки — на светлом делаем матово-белыми, а не тёмными полупрозрачными */ --glass: rgba(255,255,255,.82); --glass-2: rgba(255,255,255,.66); --glass-brd: rgba(20,24,40,.10); --glass-hi: rgba(255,255,255,.95); --card: #ffffff; --line: #e2e5ee; } .theme-btn { position: absolute; top: calc(var(--sat) + 10px); right: 12px; z-index: 21; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface-a); color: var(--text); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .theme-btn:active { transform: scale(.94); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "SF Pro Text", 'InterV', "Segoe UI", Roboto, sans-serif; } /* ⚠️ overflow-anchor:none — ГЛАВНЫЙ фикс «скачущего логотипа» на Android Chrome: шапка при сжатии теряет ~210px высоты, а scroll anchoring компенсировал это сдвигом scrollY, сдвиг снова переключал шапку — и лого дребезжал в петле. Без якорения петля невозможна. */ html, body { overflow-anchor: none; } body { padding-bottom: calc(var(--tab-h) + var(--sab) + 24px); } .app { max-width: 860px; margin: 0 auto; min-height: 100vh; } /* переходы между экранами: кроссфейд корня + морф аватара (view-transition-name: phero) */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; } ::view-transition-group(phero) { animation-duration: .34s; animation-timing-function: cubic-bezier(.2,.8,.2,1); } .loading { text-align: center; color: var(--muted); padding: 40vh 0; } /* скелетон загрузки главной */ .sk { background-color: var(--sk1); background-image: linear-gradient(90deg, var(--sk1) 25%, var(--sk2) 45%, var(--sk1) 65%); background-size: 300% 100%; animation: sksh 1.25s ease-in-out infinite; border-radius: 8px; } @keyframes sksh { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } } .skel-appbar { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 8px 0 20px; } .skel-appbar .sk-logo { width: 46px; height: 46px; border-radius: 12px; } .skel-appbar .sk-sub { width: 190px; height: 11px; } .sk-h { width: 165px; height: 13px; margin: 16px 2px 11px; } .skel-strip { display: flex; gap: 10px; justify-content: center; } .skel-strip .sk-dip { width: 152px; height: 150px; border-radius: 16px; flex: 0 0 auto; } .skel-ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .skel-mrank { background: var(--surface-a); border: 1px solid var(--hair); border-radius: 14px; padding: 11px; } .skel-mrank .sk-mh { height: 12px; width: 68%; margin-bottom: 13px; } .skel-mr { display: flex; align-items: center; gap: 9px; padding: 6px 0; } .skel-mr .sk-av { width: 20px; height: 20px; border-radius: 6px; flex: 0 0 auto; } .skel-mr .sk-nm { height: 10px; flex: 1; } .skel-mr .sk-rt { height: 11px; width: 34px; flex: 0 0 auto; } .acct-bot { display: block; text-align: center; margin-top: 13px; color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; } .acct-bot:active { opacity: .6; } /* ===== админка рейтинга ===== */ .adm-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); margin: 18px 4px 8px; } .adm-card { display: flex; flex-direction: column; gap: 10px; } .adm-info { font-size: 13px; } .adm-status { font-size: 13px; font-weight: 600; } .adm-status.ok { color: var(--green); } .adm-status.err { color: #e0514f; } .adm-toggle { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; cursor: pointer; } .adm-toggle input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } .adm-trow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hair); } .adm-trow:first-of-type { border-top: none; } .adm-tn { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-td { font-size: 12px; } .adm-del { flex: 0 0 auto; border: 1px solid var(--hair); background: rgba(225,75,75,.1); color: #e0514f; border-radius: 9px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .adm-renames { display: flex; flex-direction: column; gap: 7px; } .adm-rrow { display: flex; align-items: center; gap: 7px; } .adm-ri { flex: 1; min-width: 0; } .adm-arrow { color: var(--muted); font-weight: 700; flex: 0 0 auto; } .adm-rx { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--hair); background: var(--surface-b); color: var(--muted); border-radius: 9px; cursor: pointer; } .appbar { position: sticky; top: 0; z-index: 20; padding-top: var(--sat); background: transparent; border-bottom: none; transition: background .28s ease, border-color .28s ease; } .appbar-row { min-height: var(--header-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 14px; transition: min-height .28s cubic-bezier(.3,.7,.2,1), padding .28s cubic-bezier(.3,.7,.2,1); } .brand-logo { height: 256px; width: auto; max-width: 100%; flex: 0 0 auto; display: block; cursor: pointer; transition: height .28s cubic-bezier(.3,.7,.2,1); } /* ужимающаяся шапка при скролле вниз */ .appbar.shrink .brand-logo { height: 44px; } .appbar.shrink .appbar-row { min-height: 0; padding-top: 3px; padding-bottom: 3px; } .appbar.shrink .sub { display: none; } .appbar .sub { font-size: 11px; color: var(--muted); text-align: center; } .wrap { padding: 12px 12px 20px; } .toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 2px 12px; } .seg { display: inline-flex; background: var(--surface-b); border: 1px solid var(--hair); border-radius: 12px; padding: 3px; } .seg button { border: none; background: transparent; color: var(--muted); font-weight: 700; font-size: 13px; padding: 6px 11px; border-radius: 9px; cursor: pointer; } .seg button.on { background: var(--accent); color: #fff; } .switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; } .toolbar .switch:last-child { margin-left: auto; } .switch .track { width: 40px; height: 23px; border-radius: 999px; background: var(--surface-a); border: 1px solid var(--hair); position: relative; transition: background .15s; } .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--faint); transition: transform .15s, background .15s; } .switch.on .track { background: color-mix(in srgb, var(--green) 55%, transparent); border-color: var(--green); } .switch.on .track::after { transform: translateX(17px); background: #fff; } .switch.on { color: var(--text); } .select { background: var(--surface-b); border: 1px solid var(--hair); color: var(--text); border-radius: 11px; padding: 7px 10px; font-weight: 700; font-size: 13px; } .input { background: var(--surface-b); border: 1px solid var(--hair); color: var(--text); border-radius: 12px; padding: 11px 13px; font-size: 15px; width: 100%; box-sizing: border-box; } /* нативные date/time на iOS центрируют значение — выравниваем влево, как текстовые поля */ .input[type=date], .input[type=time] { text-align: left; -webkit-appearance: none; appearance: none; min-height: 44px; } .input[type=date]::-webkit-date-and-time-value, .input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; } table.lb { width: 100%; border-collapse: collapse; } .lb th { text-align: left; font-size: 11px; color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 4px 8px 11px; background: var(--bg); white-space: nowrap; } .lb th.n, .lb td.n { text-align: right; font-variant-numeric: tabular-nums; } .lb td { padding: 13px 8px; border-top: 1px solid var(--hair); font-size: 14.5px; } .lb tr:first-child td { border-top: none; } .lb .place { width: 34px; text-align: center; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .lb tr.top1 .place { color: var(--gold); } .lb tr.top2 .place { color: var(--silver); } .lb tr.top3 .place { color: var(--bronze); } .lb .pl { font-weight: 600; } .lb .pl.clk { cursor: pointer; } .rk { display: inline-block; font-size: 10.5px; font-weight: 700; margin-top: 3px; letter-spacing: .4px; color: #fff; padding: 3px 10px; border-radius: 999px; border: none; white-space: nowrap; background: var(--rk, #8b90a0); text-transform: uppercase; } .rk-master { --rk: #f4c34d; } .rk-pro { --rk: #ff7a7a; } .rk-semipro { --rk: #7bd88f; } .rk-amateur { --rk: #6cc0ff; } .rk-novice { --rk: #a99bff; } .rk-beginner { --rk: #8b90a0; } .rk-expert { --rk: #4ec7d8; } /* томский ранг */ .lb .rating { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--accent-2); } .lb .dim { color: var(--muted); } .dot-act { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-left: 6px; vertical-align: middle; } .inact td { opacity: .5; } .card { background: linear-gradient(180deg, var(--surface-a), var(--surface-b)); border: 1px solid var(--hair); border-radius: 16px; padding: 15px 16px; margin-bottom: 12px; } .t-row { display: flex; align-items: center; gap: 12px; } .t-row .grow { min-width: 0; flex: 1; } .t-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--surface-a); border: 1px solid var(--hair); font-size: 11.5px; font-weight: 700; color: var(--muted); } .chip.accent { background: color-mix(in srgb, var(--accent) 20%, transparent); border-color: transparent; color: var(--accent-2); } /* переключатель общий / сезонный на профиле */ .pmode { display: flex; gap: 6px; background: var(--surface-b); border: 1px solid var(--hair); border-radius: 12px; padding: 4px; margin: 2px 0 12px; } .pmode-b { flex: 1; background: transparent; border: 0; color: var(--muted); font-weight: 700; font-size: 14px; font-family: inherit; padding: 9px; border-radius: 9px; cursor: pointer; } .pmode-b.on { background: #7b6cff; color: #fff; } .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 6px 0 18px; } .stat { background: var(--surface-b); border: 1px solid var(--hair); border-radius: 14px; padding: 15px 16px; } .stat .v { font-size: 27px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; } .stat .k { font-size: 11.5px; color: var(--muted); margin-top: 3px; } .section-title { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin: 24px 4px 10px; } .muted { color: var(--muted); } .center { text-align: center; } .empty { color: var(--faint); text-align: center; padding: 30px 0; } .tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(var(--sab) + 4px); z-index: 30; height: var(--tab-h); display: flex; background: var(--tabbar-bg); backdrop-filter: blur(18px); border: 1px solid var(--hair); border-radius: 28px; } .tabbar::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 56%, rgba(255,255,255,.07) 100%); } /* глянцевый блик-полоса по верху (как на мокром стекле) */ .tabbar::after { content: ''; position: absolute; left: 8%; right: 8%; top: 2px; height: 42%; border-radius: 999px; pointer-events: none; z-index: 1; background: radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%); } .tabbar button { position: relative; z-index: 2; } .tabbar button { flex: 1; border: none; background: transparent; color: var(--faint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 700; cursor: pointer; padding-top: 8px; } .tabbar button .ic { font-size: 20px; display: flex; align-items: center; justify-content: center; } .tabbar button .ic-img { width: 27px; height: 27px; object-fit: contain; display: block; opacity: .82; transition: transform .22s cubic-bezier(.34,1.4,.5,1), opacity .2s ease; } .tabbar button.on .ic-img { opacity: 1; transform: scale(1.16); filter: drop-shadow(0 1px 6px var(--accent-glow, rgba(123,108,255,.55))); } .tabbar button.on { color: var(--accent-2); } /* отчётливая liquid-glass пилюля активного раздела */ .tabbar button.on::before { content: ''; position: absolute; inset: 6px 10px; border-radius: 15px; z-index: -1; background: rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.2); animation: tabpill .24s cubic-bezier(.34,1.4,.5,1); } :root[data-theme="light"] .tabbar button.on::before { background: rgba(123,108,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(123,108,255,.14), 0 3px 10px rgba(30,42,80,.1); } @keyframes tabpill { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } } @media (min-width: 560px) { .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 460px; } } /* строка поиска игрока над таблицей */ .searchrow { display: flex; align-items: center; gap: 8px; margin: 4px 2px 10px; padding: 0 12px; height: 42px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; } .searchrow .sic { font-size: 15px; opacity: .6; } /* сортируемые колонки таблицы */ .lb th.sortable { cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; } .lb th.sortable:active { opacity: .6; } .lb th.sorted { color: var(--accent-2); } .lb th .sarr { margin-left: 2px; font-weight: 800; } .psearch { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--fg); font-size: 15px; font-family: inherit; padding: 0; } .psearch::placeholder { color: var(--muted); } .psearch::-webkit-search-cancel-button { -webkit-appearance: none; } /* горизонтальный скролл таблицы на узких экранах */ .tscroll { overflow-x: auto; margin: 0 -12px; padding: 0 12px; } .lb .med { text-align: center; font-variant-numeric: tabular-nums; } .lb th.med { font-size: 13px; } /* дельты (изменение за последний турнир) */ .place .plc { font-weight: 700; } .chg { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .chg.up { color: #4ccb7d; } .chg.down { color: #ff6b6b; } .chg.zero { color: var(--faint); } .place .chg { display: block; margin-top: 1px; } .sub-chg { margin-top: 1px; } .lehint { font-size: 12px; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 7px 11px; margin: 0 2px 10px; } /* кнопки турниров */ .btn-add { background: var(--accent); color: #fff; border: none; border-radius: 11px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; } .btn-more { width: 100%; background: var(--surface-b); border: 1px solid var(--hair); color: var(--muted); border-radius: 12px; padding: 12px; font-weight: 700; font-size: 13px; cursor: pointer; margin-top: 4px; } .tcard { cursor: pointer; } .tcard .chev { color: var(--faint); font-size: 12px; } .podium { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .pod { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface-a); border: 1px solid var(--hair); border-radius: 999px; padding: 3px 10px; } .pod1 { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); } .standwrap { margin-top: 10px; border-top: 1px solid var(--hair); padding-top: 6px; } .lb.mini td { padding: 7px 8px; font-size: 13px; border-top: 1px solid var(--hair); } .lb.mini tr:first-child td { border-top: none; } /* ---------- Профиль (макет) ---------- */ .av { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: 0 0 auto; position: relative; overflow: hidden; } .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .av-clk { cursor: pointer; transition: transform .12s; } .av-clk:active { transform: scale(.9); } /* награды (бэйджи) */ .badge-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 560px) { .badge-grid { grid-template-columns: 1fr 1fr; } } .badge { display: flex; align-items: center; gap: 11px; padding: 10px 12px; background: var(--surface-b); border: 1px solid var(--hair); border-radius: 12px; } .badge-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; } .badge-tx { min-width: 0; } .badge-lbl { font-weight: 700; font-size: 13.5px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .badge-val { font-weight: 700; font-size: 12px; color: var(--accent-2); font-variant-numeric: tabular-nums; } .badge-desc { font-size: 11px; color: var(--muted); margin-top: 1px; line-height: 1.25; } /* ачивки — единая спокойная обводка var(--hair), без цветных рамок по типу */ /* вход-пилюли (рекорды / прогноз) */ .navpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 2px 12px; } .navpill { flex: 1 1 calc(50% - 4px); background: var(--surface-b); border: 1px solid var(--hair); color: var(--text); border-radius: 12px; padding: 11px 10px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; text-align: center; } .navpill:active { transform: scale(.98); } /* книга рекордов */ .card.rec { display: flex; align-items: center; gap: 13px; padding: 12px 15px; } .rec-ic { font-size: 26px; line-height: 1; flex: 0 0 auto; } .rec-tx { min-width: 0; } .rec-title { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; } .rec-holder { font-weight: 700; font-size: 16px; margin: 2px 0 1px; } .rec-link { cursor: pointer; } .rec-link:active { opacity: .6; } .rec-detail { font-size: 12px; color: var(--muted); line-height: 1.3; } .rec-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .rec-grid .card.rec { margin: 0; height: 100%; } @media (min-width: 640px) { .rec-grid { grid-template-columns: 1fr 1fr; } } /* прогноз матча */ .pred-side-t { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; margin-bottom: 7px; } .pred-sel { width: 100%; display: block; margin-bottom: 7px; } .pred-teams { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; } .pred-team { text-align: center; } .pt-avs { display: flex; justify-content: center; margin-bottom: 8px; } .pt-avs .av { border: 2px solid var(--surface-a); } .pt-avs .av + .av { margin-left: -12px; } .pt-r { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; } .pt-k { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 4px; } .pt-nm { display: block; white-space: nowrap; line-height: 1.35; } .pred-vs { font-size: 13px; color: var(--faint); font-weight: 700; } .pred-bar { display: flex; height: 30px; border-radius: 9px; overflow: hidden; border: 1px solid var(--hair); } .pred-bar-a { background: color-mix(in srgb, #3ddc84 70%, transparent); display: flex; align-items: center; justify-content: center; color: #06140c; font-weight: 700; font-size: 13px; min-width: 0; transition: width .2s; } .pred-bar-b { background: color-mix(in srgb, #ff6b6b 60%, transparent); display: flex; align-items: center; justify-content: center; color: #1a0808; font-weight: 700; font-size: 13px; min-width: 0; transition: width .2s; } .pred-stakes { text-align: center; font-size: 13px; color: var(--muted); margin-top: 12px; } /* прогноз: форма с выпадашками должна лежать НАД карточкой результата */ .pred-form { position: relative; z-index: 3; } .pred-result { position: relative; z-index: 1; } /* поиск-пикер игрока */ .pp { position: relative; margin-bottom: 7px; } .pp-input { margin: 0; } .pp-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 8; background: var(--surface-a); border: 1px solid var(--hair); border-radius: 12px; overflow-y: auto; max-height: 264px; box-shadow: 0 14px 34px rgba(0,0,0,.45); } .pp-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; cursor: pointer; border-top: 1px solid var(--hair); } .pp-item:first-child { border-top: none; } .pp-item:hover, .pp-item:active { background: var(--surface-b); } .pp-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pp-item .av { flex: 0 0 auto; } .pp-rt { color: var(--accent-2); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; flex: 0 0 auto; } /* лайтбокс — полноразмерное фото с аватарки */ .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; background: rgba(0,0,0,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); cursor: zoom-out; animation: lb-fade .18s ease; } .lb-photo { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,.6); animation: lb-pop .2s cubic-bezier(.22,.61,.36,1); } .lb-cap { color: #fff; font-weight: 700; font-size: 16px; text-shadow: 0 1px 6px rgba(0,0,0,.5); } .lb-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; } .card-seg { background: rgba(255,255,255,.12); } .card-seg button { color: #dfe3ee; } .lb-btn { background: var(--accent); color: #fff; border: none; border-radius: 12px; padding: 12px 22px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; } .lb-btn:active { transform: scale(.97); } .btn-share { display: block; width: 100%; margin: 0 0 10px; background: var(--surface-b); border: 1px solid var(--hair); color: var(--text); border-radius: 12px; padding: 12px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; } .btn-share:active { transform: scale(.99); } /* тумблер общий/сезонный в оверлее картинки изменений */ .dc-seg { display: flex; gap: 6px; background: rgba(255,255,255,.08); border-radius: 12px; padding: 4px; } .dc-tab { background: transparent; border: 0; color: #cfd3de; font-weight: 700; font-size: 14px; padding: 8px 20px; border-radius: 9px; cursor: pointer; font-family: inherit; } .dc-tab.on { background: var(--accent); color: #fff; } @keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes lb-pop { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: scale(1) } } .av-xl { width: 92px; height: 92px; font-size: 30px; border-radius: 22px; } .av-lg { width: 60px; height: 60px; font-size: 20px; } .av-tiny { width: 34px; height: 34px; font-size: 12px; border-radius: 10px; } .av-ic { width: 24px; height: 24px; font-size: 9px; border-radius: 8px; } .tabbar button.on .av-ic { outline: 2px solid var(--accent-2); outline-offset: 1px; } /* голова-в-голову (личные встречи) */ .h2h-list { display: flex; flex-direction: column; } .h2h-row { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-top: 1px solid var(--hair); cursor: pointer; } .h2h-row:first-child { border-top: 0; } .h2h-row:active { opacity: .6; } .h2h-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .h2h-sub { font-size: 12px; color: var(--muted); margin-top: 2px; } .h2h-rec { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; width: 68px; text-align: right; letter-spacing: .5px; white-space: nowrap; } .h2h-w { color: #3ddc84; } .h2h-l { color: #ff6b6b; } .h2h-wr { flex: 0 0 46px; text-align: right; font-size: 13px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } .h2h-row .chev { color: var(--faint); font-size: 18px; flex: 0 0 auto; } /* экран личного противостояния (versus) */ .h2h-vs { display: flex; align-items: center; gap: 10px; padding: 16px 14px; } .h2h-vp { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; } .h2h-vp.clk { cursor: pointer; } .h2h-vn { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .h2h-vsx { flex: 0 0 auto; font-weight: 800; font-size: 14px; color: var(--muted); letter-spacing: 1px; } .h2h-score { font-size: 46px; font-weight: 800; margin: 8px 0 4px; font-variant-numeric: tabular-nums; } .h2h-bar { display: flex; height: 11px; border-radius: 7px; overflow: hidden; margin: 13px 0 6px; background: rgba(128,128,128,.15); } .h2h-bar-a { background: linear-gradient(90deg, #15a34a 0%, #22c55e 55%, #4ade80 100%); } .h2h-bar-b { background: linear-gradient(90deg, #fb7185 0%, #ef4444 45%, #c62828 100%); } .h2h-bar.mini { height: 6px; border-radius: 4px; margin: 6px 0 0; } .h2h-bar-lbl { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .h2h-bar-lbl .muted { font-weight: 600; } .h2h-sep { color: var(--faint); margin: 0 10px; } .vs-row { display: flex; align-items: center; padding: 9px 0; border-top: 1px solid var(--hair); } .vs-row:first-of-type { border-top: 0; } .vs-val { flex: 1; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); } .vs-val:last-child { text-align: right; } .vs-val.win { color: var(--accent-2); } .vs-k { flex: 0 0 auto; font-size: 12px; color: var(--faint); padding: 0 12px; text-align: center; min-width: 92px; } /* матчи противостояния внутри сезона */ .h2h-matches { padding: 2px 0 6px; } .hm { display: flex; flex-direction: column; gap: 3px; padding: 6px 10px; margin: 5px 0; border-radius: 9px; background: var(--surface-b); border-left: 3px solid var(--hair); } .hm.won { border-left-color: #3ddc84; } .hm.lost { border-left-color: #ff6b6b; } .hm-teams { display: flex; align-items: center; justify-content: center; gap: 12px; } .hm-team { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hm-team.right { align-items: flex-end; } .hm-team.right .tm-mn { flex-direction: row-reverse; } /* аватар справа — выстраиваются в линию у правого края */ .hm-meta { font-size: 10.5px; color: var(--muted); text-align: center; } .hm-sc { min-width: 46px; text-align: center; } .av-xs { width: 22px; height: 22px; font-size: 8px; border-radius: 6px; flex: 0 0 auto; } .hm-t { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-dt { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hm-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; } .hm-sc { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .hm.won .hm-sc { color: #3ddc84; } .hm.lost .hm-sc { color: #ff6b6b; } .hm-delta { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; } .hm-delta.up { color: #3ddc84; } .hm-delta.down { color: #ff6b6b; } /* аватарка в строке таблицы (справа от места) */ .pl-cell { display: flex; align-items: center; gap: 11px; cursor: pointer; } .pl-nm { min-width: 0; } /* карточка-человек: матчи · винрейт */ .p-stat { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } /* пончик-винрейт */ .stat .v.gf { color: #3ddc84; } .stat .v.ga { color: #ff6b6b; } .donut { display: block; flex: 0 0 auto; } .donut-track { stroke: var(--hair); } .donut-arc { transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1); } @media (prefers-reduced-motion: reduce) { .donut-arc { transition: none; } } .donut-txt { fill: var(--text); font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } .winrate-card { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; } .wr-side { min-width: 0; } .wr-wl { margin-top: 4px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; } .wr-win { font-weight: 700; color: #3ddc84; } .wr-loss { font-weight: 700; color: #ff6b6b; } .wr-dot { margin: 0 7px; color: var(--faint); } .phead { display: flex; align-items: center; gap: 15px; } .ph-name { font-size: 22px; font-weight: 800; letter-spacing: -.3px; white-space: normal; overflow-wrap: anywhere; } .ph-name .nick { white-space: nowrap; } .ph-chips { display: flex; flex-wrap: wrap; gap: 6px; } .pchip { font-size: 12px; font-weight: 700; color: var(--accent-2); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 17%, transparent); border-radius: 999px; padding: 4px 11px; } .pchip.dim { color: var(--muted); background: var(--surface-a); border-color: var(--hair); } .section-title.big { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--text); text-transform: none; margin: 30px 4px 14px; } .statbar { padding: 14px 16px; } .sb-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .sb-title { font-weight: 700; font-size: 16px; } .sb-total { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; } .sb-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } .sb-legend b { color: var(--text); } .sb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; } .sb-bar { display: flex; height: 11px; border-radius: 6px; overflow: hidden; background: var(--surface-a); } .sb-bar > span { height: 100%; } .streakrow { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; } .streakp { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; } .streakp.w { background: color-mix(in srgb, #3b82f6 26%, transparent); color: #7fb0ff; } .streakp.l { background: var(--surface-a); color: var(--muted); } .people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; } .pcard { padding: 16px 12px; } .person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .p-name { font-weight: 700; font-size: 15px; } .p-label { font-size: 12px; color: var(--muted); } /* месть + напарники — цельные плашки с волосяными разделителями (как stat-grid), месть с красно/зелёными ячейками */ .rev-box, .people-box { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; margin: 0 0 12px; } .rev-box .rev-p, .people-box .pcard { background: var(--surface-a) !important; border: 0 !important; box-shadow: none !important; border-radius: 0; margin: 0; } .rev-box .rev-nem { background: color-mix(in srgb, #ff6b6b 9%, var(--surface-a)) !important; } .rev-box .rev-vic { background: color-mix(in srgb, #3ddc84 9%, var(--surface-a)) !important; } .rev-box .rev-p:only-child { grid-column: 1 / -1; } .rev-box .rev-p:active, .people-box .pcard:active { opacity: .7; } .rev-p .person > .av { transition: box-shadow .18s; } .rev-nem .person > .av { box-shadow: 0 0 0 2px #ff6b6b, 0 0 18px -5px #ff6b6b; } .rev-vic .person > .av { box-shadow: 0 0 0 2px #3ddc84, 0 0 18px -5px #3ddc84; } .rev-rec { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; justify-content: center; gap: 3px; margin-top: 1px; } .rev-rec i { font-style: normal; color: var(--muted); font-size: 14px; } .rev-w { color: #3ddc84; } .rev-l { color: #ff6b6b; } .rev-nem .p-label { color: #ff6b6b; } .rev-vic .p-label { color: #3ddc84; } .rev-bar { height: 6px; width: 100%; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; margin: 10px 0 2px; } .rev-bar span { display: block; height: 100%; border-radius: 3px; } .rev-nem .rev-bar span { background: linear-gradient(90deg, #ff6b6b, var(--gold)); } .rev-vic .rev-bar span { background: #3ddc84; } .bigstat { padding: 22px 14px; text-align: center; } .bs-v { font-size: 34px; font-weight: 800; color: var(--muted); } .bs-k { font-size: 12.5px; color: var(--muted); margin-top: 6px; } /* график рейтинга */ /* медали в профиле — 3 столбца, эмодзи и число одного размера */ .stat.medals { padding: 12px; } .med3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .medcol { display: flex; flex-direction: column; align-items: center; gap: 3px; } .mede { font-size: 22px; line-height: 1; } .medn { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; } /* кнопки */ .btn-add.wide { display: block; width: 100%; margin: 0 0 14px; padding: 12px; font-size: 14px; } .btn-back { background: var(--surface-b); border: 1px solid var(--hair); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; margin-bottom: 12px; } /* график: изменение общего рейтинга по сезонам (точки+числа, скролл вбок) */ .chartscroll { position: relative; overflow-x: auto; overflow-y: hidden; margin: 0 -4px; } .rchart { display: block; height: 190px; width: auto; } .rline { fill: none; stroke: #7b6cff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .rarea { fill: rgba(123, 108, 255, .13); } .rdot { fill: #a99bff; } .rdot.peak { fill: #f4c34d; } .rval { fill: var(--text); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .rval.peak { fill: #f4c34d; } .rlbl { fill: var(--muted); font-size: 11px; } /* панель аккаунта игрока (вход/аватар/пароль) */ .acct { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin: 0 0 14px; } .acct-head { display: flex; align-items: center; gap: 12px; } .acct-hello { font-size: 12px; color: var(--muted); } .acct-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .acct-warn { margin-top: 10px; font-size: 12.5px; color: #f4c34d; background: rgba(244,195,77,.1); border: 1px solid rgba(244,195,77,.25); border-radius: 10px; padding: 8px 10px; } .acct-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .abtn { flex: 1 1 auto; min-width: 44%; background: var(--surface-b); border: 1px solid var(--hair); color: var(--text); border-radius: 10px; padding: 10px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; } .abtn.primary { background: #7b6cff; border-color: #7b6cff; color: #fff; } .abtn.ghost { background: transparent; color: var(--muted); } .abtn:active { opacity: .7; } .acct-form { display: flex; gap: 8px; margin-top: 12px; align-items: center; } .acct-form.col { flex-direction: column; align-items: stretch; } .ainp { width: 100%; background: var(--surface-b); border: 1px solid var(--hair); border-radius: 10px; color: var(--text); font-size: 15px; font-family: inherit; padding: 11px 12px; outline: none; } .ainp:focus { border-color: #7b6cff; } .acct-err { margin-top: 10px; font-size: 12.5px; color: #ff6b6b; } .av.av-sm { width: 44px; height: 44px; font-size: 15px; flex: 0 0 auto; } /* история турниров игрока в профиле */ .thist { display: flex; flex-direction: column; } .thist-row { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--hair); cursor: pointer; } .thist-row:first-child { border-top: 0; } .thist-row:active { opacity: .6; } .thist-place { flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface-b); border: 1px solid var(--hair); border-radius: 10px; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; } .thist-place.med { font-size: 18px; background: transparent; border: 0; } .thist-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .thist-meta { font-size: 12px; color: var(--muted); margin-top: 2px; } .thist-row .chev { color: var(--faint); font-size: 18px; flex: 0 0 auto; } /* поясняющая строка под метрикой */ .k-hint { font-size: 10.5px; color: var(--faint); margin-top: 4px; line-height: 1.3; } /* ---------- клатч-фактор (два пончика) ---------- */ .clutch-card { display: block; padding: 14px 15px; margin-bottom: 12px; } .clutch-row { display: flex; gap: 14px; } .clutch-one { flex: 1; display: flex; align-items: center; gap: 11px; min-width: 0; } /* ---------- компактный светлый селектор сезона ---------- */ .season-sel { -webkit-appearance: none; appearance: none; display: inline-block; max-width: 100%; margin: 2px 0 12px; background: #f3f4f8 url("data:image/svg+xml;utf8,") no-repeat right 13px center; color: #14161f; border: 0; border-radius: 999px; padding: 9px 36px 9px 16px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6); } .season-sel:focus-visible { outline: 2px solid var(--accent); } /* ---------- liquid glass (в духе apple) ---------- */ :root { --glass: rgba(30,34,48,.52); --glass-2: rgba(22,25,37,.5); --glass-brd: rgba(255,255,255,.14); --glass-hi: rgba(255,255,255,.08); } body::before { content: ""; position: fixed; inset: -10% -10% -5%; z-index: -1; pointer-events: none; background: radial-gradient(42% 34% at 12% 8%, rgba(123,108,255,.28), transparent 62%), radial-gradient(38% 30% at 92% 14%, rgba(61,220,132,.12), transparent 60%), radial-gradient(52% 44% at 84% 92%, rgba(169,155,255,.18), transparent 62%), radial-gradient(48% 38% at 18% 96%, rgba(93,140,255,.12), transparent 60%); } .card, .stat, .acct, .thist-place { background: var(--glass) !important; -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); border: 1px solid var(--glass-brd) !important; box-shadow: inset 0 1px 0 var(--glass-hi), 0 8px 26px rgba(0,0,0,.26); } .appbar { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; } .tabbar { background: rgba(22,24,36,.62) !important; -webkit-backdrop-filter: blur(22px) saturate(1.85) brightness(1.06); backdrop-filter: blur(22px) saturate(1.85) brightness(1.06); border: 1px solid rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.06), inset 2px 0 4px -2px rgba(255,120,180,.4), inset -2px 0 4px -2px rgba(120,190,255,.4), 0 8px 22px rgba(0,0,0,.34), 0 2px 6px rgba(0,0,0,.2) !important; } .pmode { background: var(--glass-2) !important; border-color: var(--glass-brd) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } /* светлая тема: смягчаем тёмные тени/жёсткий фон таббара и приглушаем фоновые свечения, чтобы не «грязнило» */ :root[data-theme="light"] .card, :root[data-theme="light"] .stat, :root[data-theme="light"] .acct, :root[data-theme="light"] .thist-place { box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px rgba(30,42,80,.09) !important; } :root[data-theme="light"] .tabbar { background: rgba(250,251,254,.8) !important; border: 1px solid rgba(255,255,255,.7) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 2px 0 4px -2px rgba(255,120,180,.32), inset -2px 0 4px -2px rgba(120,190,255,.32), 0 8px 20px rgba(30,42,80,.12), 0 2px 6px rgba(30,42,80,.06) !important; } :root[data-theme="light"] .tabbar::before { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 46%); } :root[data-theme="light"] body::before { opacity: .4; } /* карточка российского рейтинга ФСК (rtsf.ru) */ .rus-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); margin-top: -2px; } .rus-card:active { opacity: .7; } .rus-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; } .rus-val { font-size: 18px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; } .rus-delta { font-size: 13px; font-weight: 700; } .rus-delta.up { color: #3ddc84; } .rus-delta.down { color: #ff6b6b; } .rus-arrow { font-size: 20px; color: var(--muted); flex: 0 0 auto; } /* дота-карточка (пасхалка) */ .dota-card { padding: 0; overflow: hidden; } .dota-head { display: flex; align-items: center; gap: 11px; padding: 12px 14px; background: linear-gradient(135deg, #7a1a10, #c0392b); color: #fff; text-decoration: none; } .dota-head:active { opacity: .85; } .dota-logo { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; font-style: italic; } .dota-t { font-weight: 800; font-size: 15px; letter-spacing: .3px; } .dota-nick { font-size: 12px; opacity: .85; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dota-arrow { font-size: 18px; opacity: .85; flex: 0 0 auto; } .dota-body { padding: 0 0 10px; } .dota-ov { display: flex; gap: 8px; padding: 13px 14px 2px; } .dota-ov-i { flex: 1; text-align: center; } .dota-ov-v { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .dota-ov-l { font-size: 10.5px; color: var(--muted); margin-top: 2px; } .dota-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); padding: 13px 14px 4px; } .dota-heroes, .dota-bd { padding: 0 14px; } .dota-hero { display: grid; grid-template-columns: 1fr auto 58px auto; gap: 9px; align-items: center; padding: 5px 0; border-top: 1px solid var(--hair); font-size: 12.5px; } .dota-hero:first-child { border-top: none; } .dh-name { display: flex; align-items: center; gap: 8px; min-width: 0; } .dh-ic { width: 40px; height: 23px; border-radius: 4px; object-fit: cover; flex: 0 0 auto; background: var(--surface-b); border: 1px solid var(--hair); } .dh-nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dh-m, .dh-k { color: var(--muted); font-variant-numeric: tabular-nums; } .dh-k { text-align: right; } .dota-bd-r { display: grid; grid-template-columns: 1fr auto 52px; gap: 10px; padding: 5px 0; border-top: 1px solid var(--hair); font-size: 12.5px; } .dota-bd-r:first-child { border-top: none; } .dbd-m { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; } .dota-card .dw { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .dota-card .dw.pos { color: var(--green); } .dota-card .dw.neg { color: #e0514f; } /* плашка рекорда «скачок за дип» */ .jump-plaque { position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 16px; margin: 2px 0 14px; color: #fff; background: linear-gradient(115deg, #221a3a 0%, #4f2bd6 46%, #b02fb0 100%); box-shadow: 0 14px 32px -14px rgba(123,63,242,.5); } .jump-plaque::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #f6d879, #e6ac33); } .jump-plaque.clk { cursor: pointer; } .jump-plaque.clk:active { opacity: .9; } .jp-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: rgba(244,199,80,.2); box-shadow: inset 0 0 0 1px rgba(244,199,80,.4); display: flex; align-items: center; justify-content: center; font-size: 22px; } .jp-body { flex: 1; min-width: 0; } .jp-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .82; font-weight: 700; } .jp-main { margin: 2px 0 1px; display: flex; align-items: baseline; gap: 8px; } .jp-delta { font-size: 23px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .3px; color: #ffd479; } .jp-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jp-sub { font-size: 11.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jp-arrow { flex: 0 0 auto; font-size: 22px; opacity: .8; font-weight: 700; } /* ===== ГЛАВНАЯ (home) ===== */ /* главная: эйбрау-заголовки разделов в стиле арены (LED-квадрат + акцент), как в профиле/остальных экранах */ .home .section-title { display:flex; align-items:center; gap:9px; margin: 20px 2px 11px; font-size: 12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color: var(--accent-2); } .home .section-title::before { content:""; width:7px; height:7px; border-radius:2px; flex:0 0 auto; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent); } .home > .section-title:first-child { margin-top: 4px; } /* планируемые дипы — квадратные плитки, горизонтальный скролл */ .plan-wrap { position: relative; } .plan-wrap::before, .plan-wrap::after { content: ''; position: absolute; top: 0; bottom: 6px; width: 46px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .2s; } .plan-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .plan-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .plan-wrap.more-l::before { opacity: 1; } .plan-wrap.more-r::after { opacity: 1; } .plan-nav { position: absolute; top: 50%; transform: translateY(-50%); display: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface-a); color: var(--text); font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer; z-index: 3; box-shadow: 0 2px 9px rgba(0,0,0,.18); } .plan-nav.left { left: 3px; } .plan-nav.right { right: 3px; } .plan-wrap.more-l .plan-nav.left { display: flex; } .plan-wrap.more-r .plan-nav.right { display: flex; } .plan-strip { display: flex; justify-content: safe center; gap: 10px; overflow-x: auto; padding: 0 4px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .plan-strip::-webkit-scrollbar { display: none; } .plan-tile { position: relative; flex: 0 0 auto; width: 290px; min-height: 150px; background: var(--surface-a); border: 1px solid var(--hair); border-radius: 16px; padding: 14px 15px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; scroll-snap-align: center; } .pt-when { display: flex; flex-direction: column; gap: 1px; } .pt-date { font-size: 12.5px; font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; } .pt-time { font-size: 11px; color: var(--muted); white-space: nowrap; } .pt-title { font-size: 14.5px; font-weight: 700; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pt-avs { display: flex; align-items: center; min-height: 24px; } .pt-avs .av { margin-right: -7px; border: 2px solid var(--surface-a); } .pt-more { font-size: 11px; color: var(--muted); margin-left: 12px; font-weight: 700; } .pt-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .pt-count { font-size: 11.5px; color: var(--muted); } .pt-count b { color: var(--text); } .pt-go { border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; border-radius: 10px; padding: 6px 12px; cursor: pointer; white-space: nowrap; } .pt-go.leave { background: var(--surface-b); color: var(--muted); border: 1px solid var(--hair); } .pt-own { position: absolute; top: 8px; right: 8px; display: flex; gap: 3px; } .pt-own button { border: none; background: rgba(128,128,128,.16); color: var(--muted); border-radius: 7px; width: 22px; height: 22px; font-size: 11px; cursor: pointer; } .plan-tile.owned .pt-when { padding-right: 46px; } /* сокращённые рейтинги рядом */ .home-ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 2px; } .mrank { background: var(--surface-a); border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; } .mrank-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 11px; font-weight: 800; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--hair); } .mrank-head .mh-sub { font-size: 9.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .mrank-head .chev { color: var(--muted); font-weight: 700; font-size: 16px; } .mrank-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 7px; align-items: center; padding: 9px 11px; font-size: 13px; border-top: 1px solid var(--hair); cursor: pointer; } .mrank-row:first-of-type { border-top: none; } .mr-plc { color: var(--muted); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .mr-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mr-rt { font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; } .mrank-row.top1 .mr-plc { color: var(--gold); } .mrank-row.top2 .mr-plc { color: var(--silver); } .mrank-row.top3 .mr-plc { color: var(--bronze); } /* последние матчи — слайдер карточек (имена под фото, без автопрокрутки/фейда) */ .lm-slider { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 2px; cursor: grab; } .lm-slider::-webkit-scrollbar { display: none; } .lm-slider.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; } .lm-track { display: flex; justify-content: safe center; gap: 10px; } .lm-slide { flex: 0 0 min(88%, 300px); scroll-snap-align: center; cursor: pointer; } .lm-card { position: relative; border-radius: 16px; overflow: hidden; padding: 13px 12px 14px; border: 1px solid var(--hair); background: linear-gradient(160deg, var(--surface-a), var(--surface-b)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent); } .lm-card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent), transparent); opacity: .8; } .lm-card::before { content: ""; position: absolute; top: -34%; right: -22%; width: 64%; height: 82%; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); } .lm-tour { position: relative; z-index: 1; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--accent-2); margin-bottom: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-arena { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 6px; row-gap: 6px; } .lm-avs { display: flex; align-items: center; justify-content: center; grid-row: 1; } .lm-avs.a { grid-column: 1; } .lm-avs.b { grid-column: 3; } .lm-av { width: 66px; height: 66px; border-radius: 50%; flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 20px; box-shadow: 0 0 0 3px var(--surface-a); } .lm-av .av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .lm-avs .lm-av.inner { z-index: 2; } .lm-avs.a .lm-av.outer { margin-right: -30px; } .lm-avs.b .lm-av.outer { margin-left: -30px; } .lm-av.won { box-shadow: 0 0 0 3px var(--surface-a), 0 5px 16px color-mix(in srgb, var(--green) 34%, transparent); } .lm-av.won::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 3px; background: linear-gradient(140deg, #6ee7a0, #22c55e 52%, #12a150); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .lm-score { grid-column: 2; grid-row: 1; align-self: center; font-size: 33px; font-weight: 900; font-variant-numeric: tabular-nums; padding: 0 3px; display: flex; align-items: center; gap: 1px; } .lm-score i { color: var(--faint); font-style: normal; font-size: 22px; position: relative; top: -2px; } .lm-score .w { background: linear-gradient(180deg, #4ade80, #22c55e 52%, #15a34a); -webkit-background-clip: text; background-clip: text; color: transparent; } .lm-score .l { background: linear-gradient(180deg, #fb7185, #ef4444 55%, #c62828); -webkit-background-clip: text; background-clip: text; color: transparent; } .lm-nm { grid-row: 2; justify-self: stretch; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; } .lm-pl { max-width: 100%; font-size: 13px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lm-nm.won .lm-pl { color: var(--green); } .lm-nm.a { grid-column: 1; } .lm-nm.b { grid-column: 3; } .lm-stage { position: relative; z-index: 1; display: block; width: fit-content; margin: 8px auto 0; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent); border-radius: 999px; padding: 3px 11px; } .lm-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 11px 0 2px; } .lm-arrow { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair); background: var(--surface-a); color: var(--text); font-size: 19px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lm-arrow:active { background: var(--surface-b); transform: scale(.94); } .lm-dots { display: flex; justify-content: center; gap: 6px; } .lm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hair); transition: width .2s, background .2s; } .lm-dot.on { background: var(--accent); width: 18px; border-radius: 3px; } /* список участников дипа (в шите) */ .dip-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .dip-p { display: flex; align-items: center; gap: 11px; padding: 7px 4px; border-radius: 10px; } .dip-p.clk { cursor: pointer; } .dip-p.clk:active { background: var(--surface-b); } .dip-nm { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; } .dip-x { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: none; background: rgba(225,75,75,.12); color: #e14b4b; font-size: 12px; font-weight: 700; cursor: pointer; } .dip-x:active { background: rgba(225,75,75,.22); } .dip-no { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: none; background: rgba(224,146,43,.15); color: #e0922b; font-size: 12px; font-weight: 700; cursor: pointer; } .dip-no:active { background: rgba(224,146,43,.3); } .dip-away { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .dip-p.free .dip-nm { color: var(--faint); font-weight: 500; } .dip-free { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--hair); flex: 0 0 auto; } .dip-native { display: block; text-align: center; margin-top: 12px; padding: 11px; border-radius: 12px; border: 1px dashed var(--accent); color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: none; } .dip-native:active { background: var(--surface-b); } .dip-share { display: block; width: 100%; text-align: center; margin-top: 10px; padding: 11px; border-radius: 12px; border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; } .dip-share:active { opacity: .85; } .dip-go { display: block; width: 100%; margin: 4px 0 12px; padding: 13px; border-radius: 12px; border: none; background: var(--accent); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; } .dip-go:active { opacity: .85; } .dip-go.leave { background: var(--surface-b); color: var(--muted); border: 1px solid var(--hair); } /* ===== СТОРИС-АНОНСЫ ===== */ .stories-wrap { margin: 0 0 2px; } .stories { display: flex; justify-content: safe center; gap: 10px; overflow-x: auto; padding: 2px 4px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .stories::-webkit-scrollbar { display: none; } .story-card { position: relative; flex: 0 0 auto; width: 116px; height: 152px; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--surface-b) center/cover no-repeat; border: 1px solid var(--hair); display: flex; align-items: flex-end; } .story-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.12) 46%, transparent 74%); } .story-card.noimg { background: linear-gradient(150deg, var(--accent), var(--accent-2)); } .story-card.noimg::before { opacity: .35; } .sc-emoji { position: absolute; top: 11px; left: 12px; font-size: 23px; z-index: 1; } .sc-title { position: relative; z-index: 2; padding: 10px 11px; font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .story-add { flex: 0 0 auto; width: 92px; height: 152px; border-radius: 16px; border: 1.5px dashed var(--hair); background: var(--surface-a); color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 12px; font-weight: 700; } .story-add:active { background: var(--surface-b); } .sa-plus { font-size: 26px; line-height: 1; color: var(--accent); } /* стрелки порядка на карточке (владелец) */ .sc-move { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; gap: 4px; } .scm { width: 24px; height: 24px; border-radius: 7px; border: none; background: rgba(0,0,0,.5); color: #fff; font-size: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .scm[disabled] { opacity: .3; cursor: default; } /* просмотр сторис — полноэкранный (как в инсте) */ .story-viewer { position: fixed; inset: 0; z-index: 300; background: #000; overflow: hidden; user-select: none; -webkit-user-select: none; } .sv-bg { position: absolute; inset: 0; background: center/cover no-repeat; filter: blur(30px) brightness(.45); transform: scale(1.2); } .sv-bg.noimg { background: linear-gradient(150deg, var(--accent), var(--accent-2)); filter: none; transform: none; } .sv-stage { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; overflow: hidden; } .sv-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; } .sv-bigemoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 92px; z-index: 1; } .sv-bars { position: absolute; top: calc(8px + env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 4; } .sv-seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.32); overflow: hidden; } .sv-seg span { display: block; height: 100%; width: 0; background: #fff; border-radius: 2px; } .sv-seg span.done { width: 100%; } .sv-seg span.run { animation: svfill 8s linear forwards; } @keyframes svfill { from { width: 0; } to { width: 100%; } } .sv-hd { position: absolute; top: calc(17px + env(safe-area-inset-top)); left: 14px; right: 12px; display: flex; align-items: center; justify-content: space-between; z-index: 4; } .sv-hd-l { color: #fff; font-weight: 700; font-size: 13px; text-shadow: 0 1px 5px rgba(0,0,0,.7); } .sv-hd-r { display: flex; gap: 6px; } .sv-btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(0,0,0,.38); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; } .sv-tapz { position: absolute; top: 0; bottom: 0; z-index: 2; cursor: pointer; } .sv-tapz.left { left: 0; width: 30%; } .sv-tapz.right { right: 0; width: 70%; } .sv-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 44px 18px calc(24px + env(safe-area-inset-bottom)); color: #fff; background: linear-gradient(to top, rgba(0,0,0,.86), rgba(0,0,0,.5) 55%, transparent); } .sv-cap-t { font-size: 20px; font-weight: 800; line-height: 1.2; margin-bottom: 7px; } .sv-cap-x { font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; opacity: .96; } .sv-cap-x.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sv-cap-more { margin-top: 4px; border: none; background: none; color: #fff; opacity: .82; font-weight: 700; font-size: 13px; cursor: pointer; padding: 2px 0; } .sv-cap-link { display: inline-block; margin-top: 14px; padding: 11px 20px; border-radius: 12px; background: #fff; color: #111; font-weight: 800; font-size: 14px; text-decoration: none; } .sv-cap-link:active { opacity: .8; } /* редактор сторис */ .se-img { width: 100%; height: 168px; border-radius: 14px; overflow: hidden; background: var(--surface-b); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; cursor: pointer; margin-bottom: 12px; } .se-img img { width: 100%; height: 100%; object-fit: cover; } .se-img.empty { border: 1.5px dashed var(--hair); } .se-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; } .se-text { resize: vertical; min-height: 92px; font-family: inherit; } .abtn.wide { width: 100%; display: block; min-width: 0; } .abtn.danger { color: #e0514f; } /* пользовательский ник в скобках после имени — мельче и светлее */ .nick { font-size: .72em; color: var(--muted); font-weight: 600; font-style: normal; letter-spacing: 0; } .acct-hint { font-size: 12px; color: var(--muted); margin: 10px 0 8px; } /* история матчей турнира (кваля → плей-офф) */ .tmatches { margin-top: 4px; } .tm-head { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); font-weight: 700; margin: 14px 2px 6px; } .tm-row { display: flex; align-items: center; gap: 8px; padding: 7px 4px; border-top: 1px solid var(--hair); font-size: 13px; } .tm-row:first-of-type { border-top: 0; } .tm-side { flex: 1; min-width: 0; color: var(--muted); } .tm-nm { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .tm-side.a .tm-nm { align-items: flex-end; } .tm-side.b .tm-nm { align-items: flex-start; } .tm-side.a .tm-mn { flex-direction: row-reverse; } /* слева аватар справа от имени (у счёта) — аватарки выстраиваются в линию */ .tm-mn { display: flex; align-items: center; gap: 6px; min-width: 0; line-height: 1.2; cursor: pointer; } .tm-mnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* имена игроков в матч-строках и личных встречах — ЯВНО текстовым Manrope (не наследовать) */ .tm-mnm, .tm-mn, .h2h-name, .h2h-vn, .hm-t, .hm-team, .hm-meta { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'InterV', 'Segoe UI', Roboto, sans-serif; } .tm-nm.pair .tm-mnm { font-size: 12.5px; } .tm-d { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 1px; } .tm-d.up { color: #3ddc84; } .tm-d.down { color: #ff6b6b; } .tm-side.a { text-align: right; } .tm-side.b { text-align: left; } .tm-side.win { color: var(--text); font-weight: 700; } .tm-sc { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; text-align: center; color: var(--accent-2); } /* счёт по сетам (плей-офф bo3/bo5) — мельче, чтобы влезло */ .tm-sc.sets { font-size: 12px; min-width: 0; white-space: nowrap; letter-spacing: -.2px; } .hm-sc.sets { font-size: 13px; white-space: nowrap; } /* мобильные оверрайды — В КОНЦЕ файла, чтобы перекрывать базовые правила при равной специфичности */ @media (max-width: 600px) { .brand-logo { height: 141px; } .lb td { font-size: 13.5px; padding: 10px 7px; } .lb .pl { font-weight: 450; } .lb .rating { font-weight: 700; } .lb .place { font-weight: 600; } } /* медали ФСК (rtsf) в карточке рейтинга */ .rus-medals { display: flex; gap: 15px; margin-top: 7px; font-size: 13.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } /* ── кнопка «назад» липнет к скроллу (видна из любого места) ── */ .btn-back { position: sticky; top: calc(var(--sat) + 8px); z-index: 25; box-shadow: 0 6px 18px rgba(0,0,0,.4); } /* ── всплывашка (bottom sheet): аккаунт-меню, достижения ── */ .sheet-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; animation: shfade .15s ease; } @keyframes shfade { from { opacity: 0 } to { opacity: 1 } } .sheet { width: 100%; max-width: 520px; background: var(--surface-b); border: 1px solid var(--hair); border-bottom: none; border-radius: 20px 20px 0 0; padding: 8px 14px calc(16px + var(--sab)); max-height: 84vh; overflow-y: auto; animation: shup .22s cubic-bezier(.2,.8,.2,1); } @keyframes shup { from { transform: translateY(28px) } to { transform: translateY(0) } } .sheet-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--faint); margin: 2px auto 12px; } .sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .sheet-hello { font-size: 11px; color: var(--muted); } .sheet-hello.dip-when { font-size: 15px; font-weight: 600; color: var(--fg); margin-top: 2px; } .sheet-title { font-weight: 700; font-size: 17px; } .sheet-hint { font-size: 12px; color: var(--muted); margin: 2px 2px 10px; } .sheet-err { color: #ff6b6b; font-size: 13px; padding: 4px 2px 6px; } .sheet-form { display: flex; gap: 8px; margin: 2px 0 10px; align-items: stretch; } .sheet-form .abtn { flex: 0 0 auto; min-width: 64px; } /* пункты всплывашки-аккаунта — редакторские строки «навтоки» (плоские, волосяная линия, стрелка ›) */ .sheet-item { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 0; color: var(--text); padding: 15px 4px; font-size: 15.5px; font-weight: 700; font-family: inherit; cursor: pointer; margin: 0; } .sheet-item + .sheet-item { border-top: 1px solid var(--hair); } .sheet-item:active { opacity: .6; } .sheet-item .si-ic { font-size: 20px; width: 26px; text-align: center; flex: 0 0 auto; } .sheet-item .grow { flex: 1; min-width: 0; letter-spacing: -.01em; } .sheet-item .si-note { color: var(--muted); font-weight: 600; font-size: 12.5px; flex: 0 0 auto; } .sheet-item .si-go { color: var(--faint); font-size: 21px; line-height: 1; flex: 0 0 auto; } .sheet-item.danger { color: #ff6b6b; } .sheet-item.danger .si-go { color: #ff6b6b; } .sheet-nav { margin: 6px 0 2px; } /* === запись на дип: кнопки приду/опоздаю/не приду + две таблички === */ .go-btns { display: flex; flex-wrap: wrap; gap: 6px; } .go-btns.tile { margin-top: 8px; } .go-btns.sheet { margin: 4px 0 6px; } .go-b { border: 1px solid var(--hair); background: var(--surface-a); color: var(--text); border-radius: 11px; padding: 9px 13px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; } .go-b:active { transform: scale(.97); } .go-b.ontime.on { background: color-mix(in srgb, #3ddc84 18%, var(--surface-a)); border-color: color-mix(in srgb, #3ddc84 55%, transparent); color: #2fae67; } .go-b.late.on { background: color-mix(in srgb, var(--gold) 20%, var(--surface-a)); border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: var(--gold); } .go-b.leave { background: transparent; color: var(--muted); } .go-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .go-tbl { background: var(--surface-a); border: 1px solid var(--hair); border-radius: 14px; padding: 10px 8px; min-width: 0; } .go-tbl-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-weight: 800; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; padding: 0 2px; } .go-tbl.ot .go-tbl-h { color: #2fae67; } .go-tbl.lt .go-tbl-h { color: var(--gold); } .go-tbl-n { font-family: 'Unbounded', 'SF Pro Display', -apple-system, sans-serif; font-weight: 700; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; } .go-tbl-list { display: flex; flex-direction: column; gap: 2px; } .go-row { display: flex; align-items: center; gap: 6px; padding: 5px 2px; min-width: 0; } .go-row.clk { cursor: pointer; border-radius: 8px; } .go-row.clk:active { background: color-mix(in srgb, var(--text) 6%, transparent); } .go-nm { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .go-row .av { flex: 0 0 auto; } .go-x { flex: 0 0 auto; width: 18px; height: 18px; border: 0; background: transparent; color: var(--faint); font-size: 11px; cursor: pointer; border-radius: 6px; margin-left: -2px; } .go-x:active { background: color-mix(in srgb, var(--text) 8%, transparent); } .go-empty { color: var(--faint); font-size: 12px; padding: 4px 2px; } .pt-late { color: var(--gold); font-weight: 700; } /* компактные кнопки записи в плитке главной */ .go-btns.tile { gap: 6px; } .go-btns.tile .go-b { flex: 1; padding: 6px 4px; font-size: 11.5px; text-align: center; } /* поля формы планирования дипа: подпись над инпутом */ .plan-field { display: block; margin-top: 12px; } .plan-field:first-of-type { margin-top: 4px; } .plan-field-l { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--muted); } .plan-field .input { width: 100%; margin: 0; } /* счёт матча (турнир + личные встречи) под арену: половины цветом (победа зелёным / проигрыш приглушённо), Unbounded, крупнее */ .tm-sc, .hm-sc { font-family: 'Unbounded', 'SF Pro Display', -apple-system, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .tm-sc .w, .hm-sc .w { color: #3ddc84; } .tm-sc .l, .hm-sc .l { color: var(--muted); } .tm-sc i, .hm-sc i { color: var(--faint); font-style: normal; font-weight: 700; margin: 0 1px; } .tm-sc.sets, .hm-sc.sets { font-size: 12.5px; color: var(--accent-2); } .hm-sc.sets { color: var(--accent-2); } /* ===== итоги сезона (wrapped) — иммерсивная листалка в духе spotify ===== */ .wr-open { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 14px 16px; border: 0; border-radius: 14px; cursor: pointer; background: linear-gradient(110deg, #7b6cff, #e06bee); color: #fff; font-family: inherit; font-weight: 800; font-size: 15px; box-shadow: 0 12px 28px -12px rgba(123,108,255,.7); } .wr-open:active { transform: scale(.99); } .wrap-greet { position: fixed; inset: 0; z-index: 260; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 30px calc(34px + env(safe-area-inset-bottom)); color: #fff; background: radial-gradient(120% 70% at 50% 34%, color-mix(in srgb, var(--wr-accent) 26%, transparent), transparent 60%), rgba(6,7,12,.62); -webkit-backdrop-filter: blur(18px) saturate(1.12); backdrop-filter: blur(18px) saturate(1.12); animation: wgIn .38s ease both; } @keyframes wgIn { from { opacity: 0; } to { opacity: 1; } } .wrap-greet-mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; } .wrap-greet-mid > * { animation: wgUp .5s cubic-bezier(.2,.8,.2,1) both; } .wrap-greet-mid > *:nth-child(2) { animation-delay: .06s; } .wrap-greet-mid > *:nth-child(3) { animation-delay: .12s; } .wrap-greet-mid > *:nth-child(4) { animation-delay: .18s; } @keyframes wgUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .wrap-greet .wr-av.av-xl { margin: 0 0 22px; } .wrap-greet-eyebrow { font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--wr-accent) 50%, #fff); margin-bottom: 14px; } .wrap-greet-h { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.01em; max-width: 16ch; line-height: 1.15; } .wrap-greet-s { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: clamp(30px, 10vw, 44px); letter-spacing: -.02em; margin-top: 12px; color: #fff; text-shadow: 0 6px 34px color-mix(in srgb, var(--wr-accent) 55%, transparent); } .wrap-greet-go { align-self: stretch; max-width: 460px; margin: 0 auto; padding: 17px; border: 0; border-radius: 15px; background: linear-gradient(110deg, var(--wr-accent), color-mix(in srgb, var(--wr-accent) 42%, #fff)); color: #0b0d16; font-family: inherit; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 18px 40px -16px var(--wr-accent); animation: wgUp .5s cubic-bezier(.2,.8,.2,1) .24s both; } .wrap-greet-go:active { transform: scale(.99); } .wrap-greet-x { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; display: grid; place-items: center; } @media (prefers-reduced-motion: reduce) { .wrap-greet, .wrap-greet-mid > *, .wrap-greet-go { animation: none; opacity: 1; transform: none; } } .wr-open-ic { font-size: 18px; } .wr-open-go { font-size: 18px; opacity: .85; } .wr-open-t { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 1px; line-height: 1.12; } .wr-open-sub { font-size: 12px; font-weight: 700; opacity: .82; } .wrap-view .sv-seg span.run { animation-duration: 5.2s; } .wrap-view { touch-action: pan-y; } /* всё содержимое итогов держим в телефон-колонке (декор больше не растягивается на весь экран) */ .wr-frame { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 460px; overflow: hidden; } @media (min-width: 620px) { .wrap-view { background: radial-gradient(120% 90% at 50% 30%, #16161f, #05060a 70%); } .wr-frame { top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(420px, 94vw); height: min(90vh, 880px); max-width: none; border-radius: 26px; box-shadow: 0 40px 100px -40px #000, 0 0 0 1px rgba(255,255,255,.06); } } .wrap-view .sv-bars, .wrap-view .sv-hd, .wrap-view .wr-cta, .wrap-view .wr-share { transition: opacity .18s ease; } .wr-peek .sv-bars, .wr-peek .sv-hd, .wr-peek .wr-cta, .wr-peek .wr-share { opacity: 0; pointer-events: none; } .wr-bg { position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--wr-accent) 55%, transparent), transparent 60%), radial-gradient(90% 60% at 100% 100%, color-mix(in srgb, var(--wr-accent) 26%, transparent), transparent 60%), linear-gradient(180deg, #0b0d16, #05060b); } .wr-stage { background: transparent; } /* оп-арт «бёрст» — концентрические кольца растут из угла (в духе wrapped-видео) */ .wr-opart { position: absolute; width: 130%; height: 92%; pointer-events: none; left: var(--ol, -35%); right: var(--or, auto); top: var(--ot, auto); bottom: var(--ob, -35%); transform-origin: var(--cx, 28%) var(--cy, 100%); animation: wrBurst .95s cubic-bezier(.16,.84,.3,1) both; } .wr-opart::before { content: ''; position: absolute; inset: 0; transform-origin: var(--cx, 28%) var(--cy, 100%); background: repeating-radial-gradient(circle at var(--cx, 28%) var(--cy, 100%), transparent 0 var(--g0, 15px), rgba(242,238,224,.11) var(--g0, 15px) var(--g1, 31px)); -webkit-mask: radial-gradient(circle at var(--cx, 28%) var(--cy, 100%), #000 55%, transparent 60%); mask: radial-gradient(circle at var(--cx, 28%) var(--cy, 100%), #000 55%, transparent 60%); animation: wrPulse 6.5s ease-in-out .9s infinite; } .wr-opart::after { content: ''; position: absolute; inset: 0; transform-origin: var(--cx, 28%) var(--cy, 100%); background: linear-gradient(var(--ea, 74deg), transparent 43%, color-mix(in srgb, var(--wr-accent) 88%, transparent) 47% 53%, transparent 57%); -webkit-mask: radial-gradient(circle at var(--cx, 28%) var(--cy, 100%), #000 50%, transparent 56%); mask: radial-gradient(circle at var(--cx, 28%) var(--cy, 100%), #000 50%, transparent 56%); animation: wrSway 9s ease-in-out .9s infinite; } /* 6 разновидностей: угол, плотность колец, наклон акцента */ .wr-opart.o1 { --cx: 72%; --cy: 100%; --ol: auto; --or: -35%; --ea: -74deg; } .wr-opart.o2 { --cx: 80%; --cy: 9%; --ol: auto; --or: -35%; --ot: -35%; --ob: auto; --ea: 56deg; } .wr-opart.o3 { --cx: 20%; --cy: 9%; --ot: -35%; --ob: auto; --ea: -56deg; } .wr-opart.o4 { --cx: 28%; --cy: 100%; --g0: 22px; --g1: 48px; --ea: 82deg; } .wr-opart.o5 { --cx: 72%; --cy: 100%; --ol: auto; --or: -35%; --g0: 10px; --g1: 22px; --ea: -64deg; } /* амбиент-движение фоновых слоёв, пока смотришь слайд */ @keyframes wrBurst { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes wrPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.13); } } @keyframes wrSway { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } } @keyframes wrFloat { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -12px, 0) rotate(1.3deg); } } /* самоотрисовывающиеся «каракули» + плавный дрейф */ .wr-doodle { position: absolute; inset: 0; pointer-events: none; opacity: .9; animation: wrFloat 8.5s ease-in-out infinite; } .wr-doodle svg { width: 100%; height: 100%; } .wr-doodle path { fill: none; stroke: rgba(255,255,255,.4); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3200; stroke-dashoffset: 3200; animation: wrDraw 1.7s ease .12s forwards; } @keyframes wrDraw { to { stroke-dashoffset: 0; } } /* число врывается с масштабом */ .wr-body > .wr-big { animation: wrPop .62s cubic-bezier(.18,.9,.3,1.1) both; } @keyframes wrPop { from { opacity: 0; transform: translateY(10px) scale(.82); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .wr-opart, .wr-opart::before, .wr-opart::after { animation: none; opacity: 1; transform: none; } .wr-doodle { animation: none; } .wr-doodle path { animation: none; stroke-dashoffset: 0; } .wr-body > .wr-big { animation: none; opacity: 1; transform: none; } } .wr-body { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 74px 28px calc(48px + env(safe-area-inset-bottom)); color: #fff; pointer-events: none; } .wr-body > * { opacity: 0; transform: translateY(16px); animation: wrIn .55s cubic-bezier(.2,.8,.2,1) forwards; } .wr-share { pointer-events: auto; } .wr-body > *:nth-child(2) { animation-delay: .06s; } .wr-body > *:nth-child(3) { animation-delay: .12s; } .wr-body > *:nth-child(4) { animation-delay: .18s; } .wr-body > *:nth-child(5) { animation-delay: .24s; } .wr-body > *:nth-child(6) { animation-delay: .3s; } @keyframes wrIn { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .wr-body > * { animation: none; opacity: 1; transform: none; } } .wr-eyebrow { font-weight: 800; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: color-mix(in srgb, var(--wr-accent) 55%, #fff); margin-bottom: 18px; } .wr-av.av-xl { width: 120px; height: 120px; border-radius: 26%; margin: 0 0 18px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wr-accent) 70%, transparent), 0 0 60px -8px var(--wr-accent); } .wr-bigemoji { position: relative; isolation: isolate; font-size: 92px; line-height: 1; margin-bottom: 14px; } .wr-bigemoji::before { content: ''; position: absolute; left: 50%; top: 50%; width: 165%; height: 165%; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--wr-accent) 42%, transparent) 0%, transparent 66%); } .wr-big { font-family: 'Unbounded', 'SF Pro Display', -apple-system, sans-serif; font-weight: 800; font-size: clamp(76px, 29vw, 148px); line-height: .9; letter-spacing: -.04em; color: #fff; text-shadow: 0 6px 40px color-mix(in srgb, var(--wr-accent) 55%, transparent); font-variant-numeric: tabular-nums; } .wr-big em { font-size: .5em; font-style: normal; color: var(--wr-accent); margin-left: 2px; } .wr-big.sm { font-size: clamp(40px, 12vw, 60px); letter-spacing: -.02em; } .wr-unit { font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-top: 10px; } .wr-title { font-weight: 800; font-size: 24px; line-height: 1.15; margin-top: 16px; max-width: 17ch; } .wr-sub { font-size: 15px; color: rgba(255,255,255,.66); margin-top: 12px; max-width: 22ch; line-height: 1.45; } .wr-medals { display: flex; gap: 16px; margin-bottom: 6px; } .wr-med { display: flex; flex-direction: column; align-items: center; gap: 6px; } .wr-med span { font-size: 42px; line-height: 1; } .wr-med b { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 30px; font-variant-numeric: tabular-nums; } .wr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 20px; width: 100%; max-width: 340px; } .wr-cell { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 12px 8px; } .wr-cell-v { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; } .wr-cell-k { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 4px; } .wr-share { margin-top: 20px; padding: 15px 26px; border: 0; border-radius: 14px; background: linear-gradient(110deg, var(--wr-accent), color-mix(in srgb, var(--wr-accent) 45%, #fff)); color: #0b0d16; font-family: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 16px 34px -14px var(--wr-accent); } .wr-share:active { transform: scale(.98); } .wr-cta { position: absolute; left: 28px; right: 28px; bottom: calc(42px + env(safe-area-inset-bottom)); pointer-events: auto; padding: 16px; border: 0; border-radius: 15px; background: linear-gradient(110deg, var(--wr-accent), color-mix(in srgb, var(--wr-accent) 45%, #fff)); color: #0b0d16; font-family: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 16px 34px -14px var(--wr-accent); } .wr-cta:active { transform: scale(.98); } /* разъёб-слайд: текст сверху, фото героя выезжает снизу */ .wr-body.wr-roast { justify-content: flex-start; padding-top: calc(92px + env(safe-area-inset-top)); } .wr-photo-pop { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 66%); opacity: 0; width: auto; max-width: 90%; max-height: 60%; object-fit: contain; object-position: bottom center; z-index: 2; pointer-events: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 -6px 44px rgba(0,0,0,.55)); transition: transform .82s cubic-bezier(.16,.84,.3,1), opacity .55s ease; will-change: transform, opacity; } .wr-photo-pop.in { transform: translate(-50%, 0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .wr-photo-pop { transition: none; } } /* топ-финал: вердикт-чип, финальная строка, аватар поменьше */ .wr-av-fin { width: 92px !important; height: 92px !important; margin-bottom: 12px !important; } .wr-verdict { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--wr-accent) 22%, transparent); border: 1px solid color-mix(in srgb, var(--wr-accent) 55%, transparent); font-weight: 800; font-size: 15px; color: #fff; } .wr-verdict-e { font-size: 20px; line-height: 1; } .wr-closer { margin-top: 16px; font-weight: 700; font-size: 14px; color: rgba(255,255,255,.72); max-width: 24ch; line-height: 1.4; } .sheet-item.danger { color: #ff6b6b; } .sheet-item.primary { background: var(--accent); color: #fff; border-color: transparent; } /* ── список достижений ── */ .ach-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; border: 1px solid var(--hair); margin-bottom: 8px; background: var(--surface-a); } .ach-item.locked .ach-ic, .ach-item.locked .ach-lbl, .ach-item.locked .ach-desc { opacity: .5; } .ach-prog { margin-top: 7px; } .ach-prog-bar { height: 6px; border-radius: 4px; background: rgba(128,128,128,.18); overflow: hidden; } .ach-prog-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #15a34a, #22c55e 60%, #4ade80); } .ach-prog-lbl { font-size: 10.5px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .ach-ic { font-size: 23px; width: 30px; text-align: center; flex: 0 0 auto; } .ach-tx { flex: 1; min-width: 0; } .ach-lbl { font-weight: 700; font-size: 14.5px; } .ach-lbl .ach-val { color: var(--accent-2); margin-left: 6px; font-variant-numeric: tabular-nums; } .ach-desc { font-size: 12px; color: var(--muted); margin-top: 2px; } .ach-state { font-size: 12px; font-weight: 700; white-space: nowrap; flex: 0 0 auto; } .ach-state.got { color: var(--green); } .ach-state.no { color: var(--faint); } /* ── чип изменения рейтинга игрока за турнир (в списке турниров) ── */ .t-delta { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px; margin-left: 8px; flex: 0 0 auto; } .t-delta.up { color: #2ec77a; background: color-mix(in srgb, #2ec77a 16%, transparent); } .t-delta.down { color: #ff6b6b; background: color-mix(in srgb, #ff6b6b 16%, transparent); } .t-delta.zero { color: var(--faint); background: var(--surface-b); } /* ================= морской бой ================= */ .bs-card { } .bs-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .bs-card-h > span:first-child { font-weight: 700; font-size: 16px; } .bs-card-sub { font-size: 12px; color: var(--muted); } .bs-note { font-size: 13px; color: var(--muted); } .bs-play { width: 100%; background: var(--accent); border: none; color: #fff; border-radius: 12px; padding: 13px; font-weight: 700; font-size: 15px; font-family: inherit; cursor: pointer; } .bs-play:active { opacity: .85; } .bs-play:disabled { opacity: .6; } .bs-err { color: #ff6b6b; font-size: 13px; margin-top: 8px; } .bs-game-row { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--surface-a); border: 1px solid var(--hair); color: var(--text); border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; margin-bottom: 8px; } .bs-turn { font-size: 12px; font-weight: 700; } .bs-turn.go { color: var(--green); } .bs-turn.wait { color: var(--faint); } .bs-overlay { align-items: center; justify-content: center; padding: 16px; } .bs-panel { width: 100%; max-width: 360px; background: var(--surface-b); border: 1px solid var(--hair); border-radius: 18px; padding: 14px 16px calc(16px + var(--sab)); max-height: 92vh; overflow-y: auto; animation: shup .2s cubic-bezier(.2,.8,.2,1); } .bs-head { display: flex; align-items: center; justify-content: space-between; } .bs-title { font-weight: 700; font-size: 17px; } .bs-close { background: var(--surface-a); border: 1px solid var(--hair); color: var(--muted); border-radius: 999px; width: 30px; height: 30px; font-size: 14px; cursor: pointer; } .bs-vs { font-size: 13px; color: var(--muted); font-weight: 700; margin: 2px 0 10px; } .bs-status { text-align: center; font-weight: 700; font-size: 14px; padding: 9px; border-radius: 11px; margin-bottom: 12px; } .bs-status.go { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); } .bs-status.wait { color: var(--muted); background: var(--surface-a); } .bs-status.win { color: #fff; background: var(--green); } .bs-status.lose { color: #fff; background: #d0455a; } .bs-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--faint); font-weight: 700; margin: 4px 0 6px; } .bs-grid { display: grid; gap: 4px; margin-bottom: 12px; } .bs-cell { aspect-ratio: 1; display: grid; place-items: center; background: var(--surface-a); border: 1px solid var(--hair); border-radius: 5px; font-size: 15px; font-weight: 800; color: var(--muted); user-select: none; } .bs-cell.fire { cursor: pointer; background: color-mix(in srgb, var(--accent) 12%, var(--surface-a)); border-color: color-mix(in srgb, var(--accent) 40%, var(--hair)); } .bs-cell.fire:active { transform: scale(.92); } .bs-cell.hit { background: #d0455a; border-color: #d0455a; color: #fff; } .bs-cell.miss { color: var(--faint); } .bs-cell.mine.ship { background: color-mix(in srgb, var(--accent) 42%, var(--surface-a)); border-color: var(--accent); } .bs-cell.mine.ship.hit { background: #d0455a; border-color: #d0455a; } .bs-hint { font-size: 12px; color: var(--faint); text-align: center; } .bs-badge { position: fixed; right: 12px; bottom: calc(var(--tab-h) + var(--sab) + 12px); z-index: 40; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 12px 18px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; box-shadow: 0 8px 24px rgba(123,108,255,.5); animation: bspulse 1.8s ease-in-out infinite; } .bs-badge-n { background: rgba(255,255,255,.28); border-radius: 999px; padding: 1px 8px; font-size: 12px; } @keyframes bspulse { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } } /* ================= русские шашки ================= */ .ch-overlay { align-items: center; justify-content: center; padding: 12px; } .ch-panel { background: var(--surface-b); border: 1px solid var(--hair); border-radius: 16px; padding: 12px 14px calc(12px + var(--sab)); max-width: 640px; width: 100%; max-height: 94vh; overflow-y: auto; } .ch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .ch-title { font-weight: 700; font-size: 17px; } .ch-wrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .ch-board { flex: 1 1 300px; max-width: 420px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border-radius: 8px; overflow: hidden; border: 3px solid #2e2015; } .ch-sq { position: relative; display: grid; place-items: center; cursor: pointer; } .ch-sq.l { background: #e2caa6; } .ch-sq.d { background: #7d5636; } .ch-sq.tgt::after { content: ''; width: 28%; height: 28%; border-radius: 50%; background: rgba(60,220,130,.75); position: absolute; } .ch-sq.sel { box-shadow: inset 0 0 0 3px #3ddc84; } .ch-p { position: relative; width: 76%; height: 76%; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 -3px 6px rgba(0,0,0,.35), inset 0 3px 5px rgba(255,255,255,.4); } .ch-p.w { background: radial-gradient(circle at 38% 32%, #ffe694, #d29a17); } .ch-p.b { background: radial-gradient(circle at 38% 32%, #f7abe2, #bd44a0); } .ch-p.k::after { content: '\2655'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(0,0,0,.55); font-size: 62%; } .ch-side { flex: 1 1 170px; min-width: 150px; display: flex; flex-direction: column; gap: 10px; } .ch-img { width: 100%; border-radius: 12px; display: block; } .ch-status { text-align: center; font-weight: 700; font-size: 14px; padding: 9px; border-radius: 10px; background: var(--surface-a); } .ch-status.win { background: var(--green); color: #fff; } .ch-status.lose { background: #d0455a; color: #fff; } .ch-new { background: var(--surface-a); border: 1px solid var(--hair); color: var(--text); border-radius: 10px; padding: 10px; font-weight: 700; font-size: 13px; font-family: inherit; cursor: pointer; } /* бейдж «твой ход в шашках» — над бейджем морского боя */ .ck-badge { bottom: calc(var(--tab-h) + var(--sab) + 66px); } /* мобилка: доска на всю ширину, картинка Джуди компактная и влезает */ @media (max-width: 600px) { .ch-panel { padding: 10px 10px calc(10px + var(--sab)); } .ch-wrap { gap: 10px; } .ch-img { max-width: 120px; } .ch-side { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px; } .ch-status { flex: 1 1 auto; } } /* пасхалка Згутницкого: видео выезжает снизу по тройному тапу на винрейт */ .zg-video { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; display: flex; justify-content: center; transform: translateY(105%); transition: transform .38s cubic-bezier(.22,.61,.36,1); will-change: transform; } .zg-video.on { transform: translateY(0); } .zg-video video { width: 100%; max-width: 560px; max-height: 74vh; display: block; background: #000; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 44px rgba(0,0,0,.55); } /* цензура мата в названиях турниров — настоящая пиксельная мозаика (canvas), как обнажёнку в кино */ .pxc { display: inline-block; vertical-align: -0.22em; border-radius: 2px; -webkit-user-select: none; user-select: none; } /* иконки ачивок — картинки вместо эмодзи */ .badge-img { width: 42px; height: 42px; object-fit: contain; display: block; flex: 0 0 auto; } .ach-ic { width: 34px; } .ach-ic .badge-img { width: 30px; height: 30px; margin: 0 auto; } /* иконки книги рекордов — картинки вместо эмодзи */ .rec-img { width: 42px; height: 42px; object-fit: contain; display: block; } /* профиль: время за дипами + первый дип */ /* профиль: время за дипами — яркий столбик + первый дип */ .ptime-h { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--faint); margin-bottom: 6px; } .ptime-row { display: flex; align-items: baseline; gap: 9px; padding: 3px 2px; } .ptime-v { font-size: 27px; font-weight: 800; color: var(--accent-2); font-variant-numeric: tabular-nums; line-height: 1.1; } .ptime-u { font-size: 14px; color: var(--muted); font-weight: 700; } .ptime-first { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 15px; font-weight: 700; } .ptime-first b { color: var(--accent-2); } .ptime { margin-top: 12px; } .ph-first { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 8px; } /* мобилка: шапка профиля в столбик (аватарка сверху) — чтобы чипсы шли на всю ширину, а не башней сбоку */ @media (max-width: 560px) { .phead { flex-direction: column; align-items: center; gap: 11px; } .phead .grow { width: 100%; text-align: center; } .phead .ph-chips { justify-content: center; } } .ph-status { font-size: 13px; font-weight: 700; color: var(--accent-2); margin-top: 5px; overflow-wrap: anywhere; } /* хитмап «статистика по дням» */ .hm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .hm-mrow { display: flex; gap: 3px; margin-bottom: 4px; } .hm-m { width: 11px; flex: 0 0 auto; font-size: 9px; color: var(--muted); white-space: nowrap; } .hm-body { display: flex; gap: 3px; } .hm-col { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; } .hm-cell { width: 11px; height: 11px; border-radius: 3px; background: rgba(128,128,128,.16); flex: 0 0 auto; } .hm-cell.hm-none { background: transparent; } .hm-legend { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 11px; color: var(--muted); flex-wrap: wrap; } .hm-legend .hm-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-left: 6px; } .hm-legend .hm-dot:first-child { margin-left: 0; } .hm-pop { position: absolute; z-index: 120; background: var(--surface-a); border: 1px solid var(--hair); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; font-weight: 700; box-shadow: 0 8px 26px rgba(0,0,0,.3); white-space: nowrap; pointer-events: none; } /* хитмап: на широких экранах тянем колонки по ширине карточки (клетки крупнее, квадратные) */ @media (min-width: 560px) { .hm-mrow, .hm-body { gap: 4px; } .hm-col { gap: 4px; flex: 1 1 0; min-width: 0; } .hm-m { flex: 1 1 0; width: auto; min-width: 0; } .hm-cell { width: 100%; height: auto; aspect-ratio: 1 / 1; } .hm-scroll > div { width: 100%; } } /* планирование дипа — оверлей */ .plan-ov { position: fixed; inset: 0; z-index: 130; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; } .plan-box { background: var(--surface-a); border: 1px solid var(--hair); border-radius: 16px; padding: 18px; width: 100%; max-width: 340px; box-shadow: 0 20px 60px rgba(0,0,0,.4); } /* шкала винрейта в строке рейтинга */ .wr-line { display: flex; align-items: center; gap: 7px; margin-top: 4px; } .wr-pct { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 26px; } .wr-mini { width: 84px; flex: 0 0 auto; height: 5px; border-radius: 3px; background: rgba(128,128,128,.34); overflow: hidden; } :root[data-theme="light"] .wr-mini { background: rgba(20,24,40,.16); } .wr-mini > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #f4c34d, #f0a92e); } .plan-del { flex: 0 0 auto; border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 6px 8px; border-radius: 8px; } .plan-del:active { transform: scale(.9); } /* запись на дип */ .plan-count { cursor: pointer; } .btn-going { flex: 0 0 auto; border: 1px solid var(--hair); background: var(--surface-a); color: var(--accent-2); font-weight: 700; font-size: 12.5px; border-radius: 999px; padding: 8px 13px; cursor: pointer; font-family: inherit; white-space: nowrap; } .btn-going.on { background: color-mix(in srgb, var(--green) 20%, transparent); border-color: transparent; color: var(--green); } .btn-going.leave { color: #e14b4b; border-color: color-mix(in srgb, #e14b4b 45%, transparent); } .plan-going { margin-top: 10px; } .plan-slots { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 8px; } .plan-slot { width: 66px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .plan-slot.clk { cursor: pointer; } .plan-slot .ps-nm { width: 66px; font-size: 10.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-slot.slot-free .ps-nm { color: var(--faint); font-weight: 600; } .ps-ava { position: relative; line-height: 0; } .ps-x { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #e14b4b; color: #fff; font-size: 10px; line-height: 18px; text-align: center; padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .ps-no { position: absolute; top: -5px; left: -5px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #e0922b; color: #fff; font-size: 9px; line-height: 18px; text-align: center; padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); } .plan-away { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; } .plan-away-lbl { font-size: 11px; font-weight: 700; color: var(--muted); } .away-chip { border: 1px solid var(--hair); background: var(--surface-b); color: var(--muted); border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; font-family: inherit; cursor: pointer; } .away-chip:active { transform: scale(.95); } .plan-time { margin-top: 3px; font-size: 13px; font-weight: 800; color: var(--accent-2); } /* новички (аккаунты без матчей в рейтинге) */ .nc-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; } .nc-row + .nc-row { border-top: 1px solid var(--hair); } .nc-nm { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; } .nc-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--faint); background: var(--surface-b); border: 1px solid var(--hair); border-radius: 999px; padding: 2px 9px; } .ps-empty { width: 34px; height: 34px; border-radius: 10px; border: 2px dashed var(--hair); box-sizing: border-box; } .plan-need { margin-top: 11px; font-size: 12px; font-weight: 600; color: var(--muted); } .plan-native { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--accent-2); text-decoration: none; } .plan-login-link { display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; } .gf-confirm { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .gf-q { font-size: 13px; color: var(--muted); font-weight: 600; } .gf-name { font-size: 17px; font-weight: 700; } .gf-btns { display: flex; flex-direction: column; gap: 8px; } .gf-btns .abtn { width: 100%; } .ph-next { display: inline-block; margin-left: 9px; font-size: 12px; font-weight: 700; color: var(--muted); } /* движение за неделю (экран) */ .mv-cols { display: flex; gap: 14px; } .mv-col { flex: 1; min-width: 0; } .mv-h { font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; } .mv-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; } .mv-body { flex: 1; min-width: 0; } .mv-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .mv-nm { min-width: 0; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mv-ch { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; flex: 0 0 auto; } .mv-ch.up { color: #1f9d55; } .mv-ch.down { color: #e14b4b; } .mv-bar { margin-top: 5px; height: 6px; border-radius: 4px; background: rgba(128,128,128,.14); overflow: hidden; } .mv-bar span { display: block; height: 100%; border-radius: 4px; } .mv-bar span.up { background: linear-gradient(90deg,#15a34a,#22c55e,#4ade80); } .mv-bar span.down { background: linear-gradient(90deg,#fb7185,#ef4444,#c62828); } /* лучшие пары (экран, карточки) */ .duo-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 10px; } .duo-rank { min-width: 22px; text-align: center; flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .duo-avs { display: flex; flex: 0 0 auto; } .duo-avs .av { border: 2px solid var(--surface-a); } .duo-avs .av + .av { margin-left: -12px; } .duo-body { flex: 1; min-width: 0; } .duo-pair { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .duo-wl { font-size: 13px; font-weight: 700; margin: 3px 0 6px; font-variant-numeric: tabular-nums; } .duo-w { color: #1f9d55; } .duo-l { color: #e14b4b; } .duo-sep { color: var(--faint); margin: 0 7px; } .duo-body .wr-line { margin-top: 0; } .duo-body .wr-mini { flex: 1; width: auto; } /* Виктор — ассистент-скрепка, ходит по низу экрана (пасхалка для двоих) */ .viktor { position: fixed; left: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 66px); z-index: 30; cursor: pointer; animation: vwalk 26s linear infinite; will-change: left; } .viktor .vface { display: inline-block; animation: vbob .5s ease-in-out infinite alternate; } .viktor .vemo { display: block; font-size: 32px; line-height: 1; } .viktor .vtag { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; opacity: .65; } .viktor .vbubble { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 15px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.18); } .viktor .vbubble.show { display: block; } @keyframes vwalk { 0% { left: 3%; } 50% { left: 82%; } 100% { left: 3%; } } @keyframes vbob { from { transform: translateY(0); } to { transform: translateY(-5px); } } @media (prefers-reduced-motion: reduce) { .viktor { animation: none; left: 6%; } .viktor .vface { animation: none; } } /* ---- эпловские анимации: fade-up секций + пружина/snap + шрифт-шапка ---- */ /* секции всплывают снизу при появлении (класс .reveal ставит js; активны только при .anim = не reduce-motion) */ .anim .reveal { opacity: 0; transform: translateY(34px); transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; } .anim .reveal.in { opacity: 1; transform: none; } /* фон ужатой шапки — стекло, чтобы контент не просвечивал (перебивает transparent !important за счёт специфичности) */ .appbar.shrink { background: rgba(14,16,24,.55) !important; -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border-bottom: none; } :root[data-theme="light"] .appbar.shrink { background: rgba(242,243,247,.72) !important; } /* snap на горизонтальных лентах — щёлкают в позицию */ .plan-strip, .stories { scroll-snap-type: x proximity; } .plan-strip > *, .stories > * { scroll-snap-align: center; } /* пружинный отклик на нажатие кнопок */ .navpill, .btn-back, .btn-add, .btn-share, .dip-go, .seg button, .tabbar button, .dip-native, .dip-share { transition: transform .18s cubic-bezier(.34,1.4,.5,1); } .navpill:active, .btn-back:active, .btn-add:active, .btn-share:active, .dip-go:active, .seg button:active, .tabbar button:active, .dip-native:active, .dip-share:active { transform: scale(.95); } @media (prefers-reduced-motion: reduce) { .appbar, .appbar-row, .brand-logo, .navpill, .btn-back, .btn-add, .btn-share, .dip-go, .seg button, .tabbar button, .dip-native, .dip-share { transition: none; } .anim .reveal { opacity: 1; transform: none; } } /* «запланировать дип» — кнопка в стиле apple: кружок ⇄ пилюля с надписью (наш акцент) */ .fab-plan-wrap { display: flex; justify-content: center; margin: 8px 4px 4px; } .fab-plan { display: inline-flex; align-items: center; height: 52px; padding: 0; border: none; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; box-shadow: 0 8px 22px rgba(123,108,255,.45), inset 0 1px 0 rgba(255,255,255,.25); } .fab-plan .fp-ic { flex: 0 0 52px; width: 52px; text-align: center; font-size: 26px; line-height: 1; font-weight: 400; } .fab-plan .fp-label { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; padding-right: 0; transition: max-width .5s cubic-bezier(.65,0,.35,1), opacity .38s ease, padding-right .5s cubic-bezier(.65,0,.35,1); } .fab-plan.open .fp-label, .fab-plan:hover .fp-label { max-width: 240px; opacity: 1; padding-right: 24px; } @media (prefers-reduced-motion: reduce) { .fab-plan .fp-label { transition: none; } } /* (хало профиля откачено по просьбе) */ /* ================= Таблица рейтинга · стиль «Арена» ================= */ .arena-list{display:flex;flex-direction:column;gap:8px} .arena-row{position:relative;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 15px;border-radius:16px; background:var(--surface-a);border:1px solid var(--hair);cursor:pointer;overflow:hidden; transition:transform .16s cubic-bezier(.34,1.4,.5,1)} .arena-row:active{transform:scale(.99)} .arena-row.inact{opacity:.5} .arena-row::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-2)} .arena-row .a-plc{flex:0 0 auto;width:26px;text-align:center;font-weight:800;font-size:19px;color:var(--faint); font-variant-numeric:tabular-nums;line-height:1;display:flex;flex-direction:column;align-items:center;gap:2px} .arena-row .av{width:46px;height:46px;border-radius:14px;flex:0 0 auto;box-shadow:0 0 0 2px var(--hair)} .arena-row .a-mid{flex:1;min-width:0} .arena-row .a-nm{font-weight:800;font-size:15px;color:var(--text);line-height:1.18;overflow-wrap:anywhere;word-break:break-word} .arena-row .a-nm .pl{font-weight:800} .arena-row .a-nm .nick{flex:0 1 auto;min-width:0;max-width:42%;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-weight:600;font-size:13px} .arena-row .a-sub{display:flex;align-items:center;gap:8px;margin-top:5px;min-width:0} .arena-row .a-meds{display:flex;flex-wrap:nowrap;gap:6px;margin-top:7px;font-size:11px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .arena-row .a-meds>span{flex:0 0 auto;white-space:nowrap} .arena-row .a-right{flex:0 0 auto;text-align:right;padding-left:10px} .arena-row .a-rt{font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;line-height:1} .arena-row .a-dl{font-size:11px;font-weight:800;margin-top:4px} /* топ-3 — золото / серебро / бронза: ровный лёгкий тон + цветная рамка/полоса/кольцо (чисто) */ .arena-row.a-p1{background:color-mix(in srgb,var(--gold) 9%,var(--surface-a));border-color:color-mix(in srgb,var(--gold) 42%,var(--hair));box-shadow:0 6px 16px -12px color-mix(in srgb,var(--gold) 50%,transparent)} .arena-row.a-p1::before{width:4px;background:linear-gradient(180deg,#f6d879,var(--gold))} .arena-row.a-p1 .a-plc{color:var(--gold)} .arena-row.a-p1 .av{box-shadow:0 0 0 2px var(--gold)} .arena-row.a-p2{background:color-mix(in srgb,var(--silver) 13%,var(--surface-a));border-color:color-mix(in srgb,var(--silver) 48%,var(--hair))} .arena-row.a-p2::before{width:4px;background:linear-gradient(180deg,#e6eaf1,var(--silver))} .arena-row.a-p2 .a-plc{color:var(--silver)} .arena-row.a-p2 .av{box-shadow:0 0 0 2px var(--silver)} .arena-row.a-p3{background:color-mix(in srgb,var(--bronze) 10%,var(--surface-a));border-color:color-mix(in srgb,var(--bronze) 42%,var(--hair))} .arena-row.a-p3::before{width:4px;background:linear-gradient(180deg,#e3a670,var(--bronze))} .arena-row.a-p3 .a-plc{color:var(--bronze)} .arena-row.a-p3 .av{box-shadow:0 0 0 2px var(--bronze)} /* матчи и спарклайн формы в строке Арены */ .arena-row .a-spark{display:block;margin:5px 0 3px auto} /* быстрые кнопки над рейтингом — под концепцию Арены (иконка в цветной плитке) */ .navpills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 2px 14px} .navpill{display:flex;align-items:center;gap:11px;text-align:left;background:var(--surface-a);border:1px solid var(--hair); border-radius:16px;padding:11px 12px;font-weight:800;font-size:13.5px;color:var(--text);font-family:inherit;cursor:pointer;line-height:1.15} .navpill .np-ic{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:17px; background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .navpill .np-tx{min-width:0} .navpill.np-gold .np-ic{background:color-mix(in srgb,var(--gold) 26%,transparent)} .navpill.np-violet .np-ic{background:color-mix(in srgb,var(--accent) 22%,transparent)} .navpill.np-green .np-ic{background:color-mix(in srgb,#16b364 24%,transparent)} .navpill.np-magenta .np-ic{background:color-mix(in srgb,#c94fd8 22%,transparent)} /* цифры рейтинга и места — фирменный Unbounded (как в мокапе) */ .arena-row .a-rt, .arena-row .a-plc, .arena-row .a-dl{font-family:'Unbounded','SF Pro Display',-apple-system,system-ui,sans-serif;letter-spacing:-.03em} .arena-row .a-plc{letter-spacing:-.02em} /* строка Арены — гибкая раскладка, чтобы ничего не резалось и не наползало на узких экранах */ .arena-row .rk{flex:0 0 auto} /* чип ранга теперь у имени (линия винрейта — только полоса, выровнена и не давит на рейтинг) */ /* чип ранга — в фикс-слоте на строке статы: у всех одна ширина, поэтому полоса винрейта после него стартует с одной точки */ .arena-row .rk-slot{flex:0 0 auto;width:60px;display:inline-flex;align-items:center} .arena-row .a-sub{gap:4px} .arena-row .rk-slot .rk{margin-top:0;font-size:9px;letter-spacing:.2px;padding:3px 6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .arena-row .wr-line{flex:1 1 auto;min-width:0;margin-top:0} /* полоса винрейта — ОДИНАКОВОЙ ширины у всех рангов (не тянется на остаток после чипа ранга), иначе 50% у «про» кажется длиннее 60% у «мастера» */ .arena-row .wr-mini{width:56px;flex:0 0 auto;min-width:56px;max-width:none} .arena-row .a-meds>span{flex:0 0 auto} /* матчи — компактный чип в правой колонке (у рейтинга), слово склоняется корректно */ .arena-row .a-right .a-mt{display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:800; color:var(--accent-2);background:color-mix(in srgb,var(--accent) 15%,transparent);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0} /* фильтр-сортировка рейтинга (чипы) */ .a-sort{display:flex;gap:7px;overflow-x:auto;padding:0 2px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none} .a-sort::-webkit-scrollbar{display:none} .a-sortb{flex:0 0 auto;background:var(--surface-a);border:1px solid var(--hair);color:var(--muted);font-weight:800;font-size:12.5px;font-family:inherit;padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:transform .15s} .a-sortb:active{transform:scale(.95)} .a-sortb.on{background:var(--accent);border-color:var(--accent);color:#fff} /* ник — второй строкой под именем */ .arena-row .a-nick{display:block;margin-top:2px;font-size:12px;font-weight:600;color:var(--muted);white-space:normal;overflow-wrap:anywhere} /* форма игрока: серия — бейдж в углу аватара (огонёк = в огне, снежинка = холодает) */ .arena-row .a-avw{position:relative;flex:0 0 auto;display:flex} .arena-row .a-fmark{position:absolute;right:-4px;bottom:-4px;display:flex;align-items:center;justify-content:center;width:21px;height:21px;border-radius:50%;box-shadow:0 0 0 2px var(--surface-a);line-height:1;pointer-events:none} .arena-row .a-fmark-ic{font-size:13px;line-height:1} .arena-row .a-fmark.hot{background:color-mix(in srgb,#ff7a3c 24%,var(--surface-a))} .arena-row .a-fmark.cold{background:color-mix(in srgb,#54a6dc 24%,var(--surface-a))} /* ВСЕ ЧИСЛА — фирменным Unbounded (слова остаются на Manrope) */ .stat .v, .donut-txt, .wr-pct, .badge-val, .ach-val, .ach-prog-lbl, .rus-val, .rus-medals, .jp-delta, .mr-rt, .mr-plc, .lb .rating, .lb .place, .lb td.n, .lb td.med, .thist-place, .h2h-score, .h2h-wr, .h2h-rec, .h2h-bar-lbl, .lm-score, .pt-r, .ptime-v, .vs-val, .duo-rank, .duo-wl, .med, .medn, .chg, .t-delta, .hm-delta, .hm-sc, .mv-ch, .dw, .rval, .sb-total, .dbd-m, .dh-m, .tm-d, .tm-sc, .pp-rt, .dota-ov-v, .a-meds, .delta, .cnum { font-family: 'Unbounded', 'SF Pro Display', -apple-system, system-ui, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } /* чип шапки профиля не переносится внутри */ .pchip{white-space:nowrap} /* ---- профиль: шапка-герой в стиле «Арена» (обе темы) ---- */ .phead.arena-hero{position:relative;overflow:hidden} .phead.arena-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:130%;z-index:0;pointer-events:none; background:radial-gradient(120% 80% at 28% -12%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 62%)} .phead.arena-hero.hero-p1::before{background:radial-gradient(120% 80% at 28% -12%, color-mix(in srgb,var(--gold) 26%,transparent), transparent 62%)} .phead.arena-hero > *{position:relative;z-index:1} .phead .av-xl{box-shadow:0 10px 30px -10px color-mix(in srgb,var(--accent) 55%,transparent), 0 0 0 3px color-mix(in srgb,var(--accent) 32%,transparent)} .phead.hero-p1 .av-xl{box-shadow:0 10px 30px -10px color-mix(in srgb,var(--gold) 65%,transparent), 0 0 0 3px var(--gold)} .phead.hero-p2 .av-xl{box-shadow:0 10px 26px -10px color-mix(in srgb,var(--silver) 60%,transparent), 0 0 0 3px var(--silver)} .phead.hero-p3 .av-xl{box-shadow:0 10px 26px -10px color-mix(in srgb,var(--bronze) 60%,transparent), 0 0 0 3px var(--bronze)} .ph-rankrow{margin:8px 0 2px} .ph-hero{margin:6px 0 10px} .ph-hero-rt{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:46px;line-height:1;letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums} .phead.hero-p1 .ph-hero-rt{color:var(--gold)} .ph-hero-lbl{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--muted);margin-top:6px} .ph-hero-lbl b{color:var(--text)} /* графики профиля — свечение линий/пиков в стиле «Арены» (обе темы) */ .rchart .rline{filter:drop-shadow(0 1px 6px rgba(123,108,255,.5))} .rchart .rdot.peak{filter:drop-shadow(0 0 5px rgba(244,195,80,.85))} /* ================= ПРОФИЛЬ · «Тёмная арена» (вариант 3) — обе темы через токены ================= */ /* сцена-герой: портрет в луче софита + табло рейтинга (без карточки — открытая сцена на фоне) */ /* мемориал — тихая шапка вместо арены (без свечения, ч/б портрет) */ .mem-head{text-align:center;padding:30px 20px 26px;margin-bottom:12px;border-radius:20px;background:linear-gradient(180deg,#14151a,#0c0d11);border:1px solid var(--hair)} .mem-candle{font-size:26px;line-height:1;margin-bottom:12px;opacity:.95} .mem-portrait{width:130px;height:130px;margin:0 auto 16px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,200,140,.28);animation:memglow 4.5s ease-in-out infinite} @keyframes memglow{ 0%,100%{box-shadow:0 0 0 1px rgba(255,196,128,.20), 0 0 26px -2px rgba(255,168,64,.34), 0 0 62px 2px rgba(255,150,40,.17), 0 10px 30px -12px rgba(0,0,0,.7)} 50%{box-shadow:0 0 0 1px rgba(255,208,148,.26), 0 0 34px 0 rgba(255,176,72,.46), 0 0 80px 8px rgba(255,158,48,.24), 0 10px 30px -12px rgba(0,0,0,.7)}} @media (prefers-reduced-motion: reduce){.mem-portrait{animation:none;box-shadow:0 0 0 1px rgba(255,196,128,.22), 0 0 30px -2px rgba(255,168,64,.4), 0 0 70px 4px rgba(255,150,40,.2), 0 10px 30px -12px rgba(0,0,0,.7)}} .mem-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02)} .mem-name{font-family:'Manrope','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:23px;letter-spacing:-.01em;color:#e8e9ee} .mem-years{font-family:'Unbounded',sans-serif;font-weight:600;font-size:15px;color:#9a9ba4;margin-top:6px;font-variant-numeric:tabular-nums} .mem-tribute{font-size:14px;font-weight:600;letter-spacing:.04em;color:#8a8b93;margin-top:12px} .phead.arena-stage{display:block;text-align:center;position:relative;overflow:visible;border:0;background:transparent; padding:26px 18px 22px;margin-bottom:14px} .arena-stage .arena-spot{position:absolute;top:-64px;left:50%;transform:translateX(-50%);width:300px;height:300px; border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%)} .phead.arena-stage.hero-p1 .arena-spot{background:radial-gradient(circle,color-mix(in srgb,var(--gold) 34%,transparent),transparent 62%)} .phead.arena-stage.hero-p2 .arena-spot{background:radial-gradient(circle,color-mix(in srgb,var(--silver) 30%,transparent),transparent 62%)} .phead.arena-stage.hero-p3 .arena-spot{background:radial-gradient(circle,color-mix(in srgb,var(--bronze) 30%,transparent),transparent 62%)} .arena-stage > *:not(.arena-spot){position:relative;z-index:1} .arena-stage .av-xl{margin:0 auto 14px} .arena-eyebrow{font-size:10px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-2);margin-bottom:15px} .arena-name{font-family:'Manrope','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:22px; letter-spacing:-.01em;color:var(--text);overflow-wrap:anywhere;margin-bottom:9px} .arena-name .nick{font-family:'Manrope',-apple-system,sans-serif;white-space:nowrap;font-weight:600;color:var(--muted);font-size:14px;letter-spacing:0} .arena-status{font-size:13px;font-weight:700;color:var(--accent-2);margin-bottom:9px;overflow-wrap:anywhere} .arena-rankrow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px} .arena-rankrow .ph-next{margin-left:0} .arena-neon .rk{font-size:11px;padding:6px 14px;letter-spacing:.16em;box-shadow:0 0 22px -3px var(--rk,var(--accent))} .arena-board{text-align:center;margin:16px 0 6px;line-height:.9} .arena-board .cnum{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:66px; letter-spacing:-.04em;line-height:.9; background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 4px 22px color-mix(in srgb,var(--accent) 45%,transparent))} .phead.arena-stage.hero-p1 .arena-board .cnum{ background:linear-gradient(100deg,var(--gold),color-mix(in srgb,var(--gold) 55%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 4px 22px color-mix(in srgb,var(--gold) 45%,transparent))} .arena-board-sub{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap; font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .arena-board-sub .cnum{font-size:15px;color:var(--text)} .arena-board-sub .goldc,.arena-board-sub .goldc .cnum{color:var(--gold)} .arena-board-sub .dotsep{opacity:.5} .arena-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:15px} /* «форма» — лента последних матчей (арена last-12) */ .arena-form{margin:2px 2px 12px} .arena-form .section-title{margin:0 2px 10px} .arena-form-row{display:flex;gap:5px} .aform{flex:1;min-width:0;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center; font-family:'Unbounded',-apple-system,sans-serif;font-weight:800;font-size:12px;color:#fff} .aform.w{background:linear-gradient(160deg,#1bc46e,#0e8f4f);box-shadow:0 0 12px -4px #1bc46e} .aform.l{background:linear-gradient(160deg,#f0616f,#c63b4a)} /* заголовки-эйбрау секций профиля (как .sec из «Арены») — только внутри профиля, чтобы не трогать другие экраны */ .arena-prof .section-title{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .arena-prof .section-title.big{font-size:12.5px;letter-spacing:.14em;color:var(--accent-2)} .arena-prof .section-title::before{content:"";width:6px;height:6px;border-radius:2px;flex:0 0 auto; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent)} /* плитки статов и карточки профиля — лёгкое свечение верхней кромки (арена, обе темы) */ .arena-prof .stat{position:relative;overflow:hidden} .arena-prof .stat::after{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 45%,transparent),transparent);opacity:.7} /* === тело профиля «Тёмная арена»: единая карточка-сетка статов (перенос эталон-мокапа, обе темы) === */ .arena-prof .stat-grid{grid-template-columns:repeat(3,1fr);gap:1px;padding:0;margin:0 0 12px; background:var(--hair);border:1px solid var(--hair);border-radius:16px;overflow:hidden} .arena-prof .section-title,.arena-prof .section-title.big{margin:28px 4px 12px} .arena-prof .stat-grid.g2{grid-template-columns:repeat(2,1fr)} .arena-prof .stat-grid > .stat{background:var(--surface-a) !important;border:0 !important;border-radius:0;padding:14px 13px; box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important} /* плоские плитки: гасим glass-слой, чтобы разделитель был одинарным (gap:1px) */ .arena-prof .stat-grid > .stat::after{display:none} /* убираем per-cell свечение — карточка единая */ .arena-prof .stat-grid .v{font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.02em} .arena-prof .stat-grid .v.gf,.arena-prof .stat-grid .v.ga{color:var(--text)} /* числа в сетке — белые (как в мокапе) */ .arena-prof .stat-grid .k{margin-top:5px;font-size:9.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .arena-prof .stat-grid .k-hint{margin-top:3px;font-size:10px;color:var(--faint);letter-spacing:0;text-transform:none} /* медали — строкой на всю ширину, эмодзи рядом с числом */ .arena-prof .stat-grid > .stat.medals{grid-column:1/-1;padding:13px} .arena-prof .stat-grid .medcol{flex-direction:row;gap:9px;justify-content:center;align-items:center} .arena-prof .stat-grid .medn{font-size:19px;color:var(--text)} /* винрейт — крупный процент + градиентная полоса (вместо доната) */ .arena-prof .winrate-card.wr3{grid-column:1/-1;display:flex;align-items:center;gap:18px;background:var(--surface-a);padding:16px 14px} .arena-prof .wr3-num{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:40px;line-height:1;color:var(--text);letter-spacing:-.03em;flex:0 0 auto} .arena-prof .wr3-num .cnum{font-family:inherit} .arena-prof .wr3-num em{font-size:20px;font-style:normal;color:var(--accent-2);margin-left:1px} .arena-prof .wr3-meta{flex:1;min-width:0} .arena-prof .wr3-wl{font-size:12.5px;color:var(--muted)} .arena-prof .wr3-wl .wr-win{color:#3ddc84} .arena-prof .wr3-wl .wr-loss{color:#ff6b6b} .arena-prof .wr3bar{height:8px;margin-top:11px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--text) 9%,transparent)} .arena-prof .wr3bar > span{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)} /* медали в блоке «награды» — три плитки эмодзи+число (перенос из сетки статов) */ .badges .awmed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px} .badges .awmed-i{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px;border-radius:12px; background:color-mix(in srgb,var(--text) 4%,transparent);border:1px solid var(--hair)} .badges .awmed-e{font-size:20px;line-height:1} .badges .awmed-i b{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:19px; color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* === общий рейтинг: навигация «разделы номера» в редакторском виде (перенос В4 «журнальной обложки») === */ .navtoc{display:flex;flex-direction:column;margin:2px 0 16px} .navtoc-row{display:flex;align-items:center;gap:14px;width:100%;padding:15px 2px;text-align:left;cursor:pointer; background:transparent;border:0;border-top:1px solid var(--hair);font-family:inherit;color:var(--text)} .navtoc-row:first-child{border-top:0} .navtoc-row:active{opacity:.6} .navtoc-n{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:700;font-size:23px; letter-spacing:-.03em;color:var(--accent-2);flex:0 0 auto;min-width:40px} .navtoc-t{flex:1;min-width:0;font-weight:700;font-size:17px;letter-spacing:-.01em;transition:color .18s} .navtoc-row:hover .navtoc-t{color:var(--accent-2)} .navtoc-go{flex:0 0 auto;color:var(--faint);font-size:22px;line-height:1} /* === книга рекордов: галерея коллекционных карт (перенос В5 «галерея карточек») === */ .cgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 12px} .gcard{position:relative;overflow:hidden;border-radius:16px;padding:14px 13px 15px; background:linear-gradient(165deg,var(--surface-a),var(--surface-b) 62%,var(--surface-a)); border:1px solid color-mix(in srgb,var(--accent) 22%,var(--hair)); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent),0 12px 26px -18px rgba(0,0,0,.5); transition:transform .3s cubic-bezier(.2,.7,.2,1)} .gcard:active{transform:scale(.99)} .gcard::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:linear-gradient(125deg,transparent 30%,color-mix(in srgb,#fff 10%,transparent) 46%,color-mix(in srgb,var(--accent-2) 8%,transparent) 54%,transparent 70%)} .gcard.rar-leg{border-color:color-mix(in srgb,var(--gold) 32%,var(--hair))} .gcard.rar-epic{border-color:color-mix(in srgb,var(--accent) 30%,var(--hair))} .gc-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .gc-ic{font-size:22px;line-height:1} .gc-rar{font-weight:800;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent); border-radius:999px;padding:3px 8px} .gcard.rar-leg .gc-rar{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 12%,transparent)} .gcard.rar-rare .gc-rar{color:var(--silver);border-color:color-mix(in srgb,var(--silver) 34%,transparent);background:color-mix(in srgb,var(--silver) 10%,transparent)} .gc-num{position:relative;z-index:1;font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:29px; line-height:1;margin:4px 0 2px;color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums; filter:drop-shadow(0 3px 16px color-mix(in srgb,var(--gold) 26%,transparent))} .gc-num .cnum{font-family:inherit;color:inherit;letter-spacing:inherit} .gc-unit{position:relative;z-index:1;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)} .gc-div{position:relative;z-index:1;height:1px;margin:11px 0 9px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 40%,transparent),transparent)} .gc-tt{position:relative;z-index:1;font-weight:800;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .gc-name{position:relative;z-index:1;font-weight:700;font-size:12.5px;color:var(--text);margin-top:4px;line-height:1.25} .gc-name .rec-link{color:inherit;cursor:pointer} .gc-cap{position:relative;z-index:1;font-size:9.5px;color:var(--faint);margin-top:5px;line-height:1.3} /* === лучшие пары: карты «химия дуэта» (перенос В4 мокапа) === */ .chem{background:var(--surface-a);border:1px solid var(--hair);border-radius:18px;padding:14px 15px;margin-bottom:11px} .chem-top{display:flex;align-items:center;gap:12px} .chem .link{display:inline-flex;align-items:center;flex:0 0 auto} .chem .link .av{z-index:1;box-shadow:0 0 0 2px var(--surface-a)} .chem .bond{width:26px;height:2px;position:relative;margin:0 -6px;z-index:0;border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2))} .chem .bond .spark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:12px; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent-2) 80%,transparent))} .chem-id{flex:1;min-width:0} .chem-id .nm{font-weight:700;font-size:13.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer} .chem-id .nm.two{color:var(--muted);font-weight:600;font-size:12.5px;margin-top:1px} .chem-pct{flex:0 0 auto;text-align:right} .chem-pct .p{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:30px;color:var(--text);line-height:1;letter-spacing:-.02em} .chem-pct .p .cnum{font-family:inherit;color:inherit;letter-spacing:inherit} .chem-pct .p em{font-size:15px;font-style:normal;color:var(--accent-2)} .chem-pct .k{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:2px} .charge{display:flex;gap:3px;margin:13px 0 9px} .charge i{flex:1;height:9px;border-radius:3px;background:color-mix(in srgb,var(--text) 7%,transparent)} .charge i.on{background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 0 9px color-mix(in srgb,var(--accent) 50%,transparent)} .chem-cap{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)} .chem-cap b{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:700;color:var(--text)} .chem.g{border-color:color-mix(in srgb,var(--gold) 40%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 26%,transparent),0 14px 34px -22px color-mix(in srgb,var(--gold) 50%,transparent)} .chem.g .charge i.on{background:linear-gradient(180deg,#ffe08a,var(--gold));box-shadow:0 0 9px color-mix(in srgb,var(--gold) 55%,transparent)} .chem.g .chem-pct .p em{color:var(--gold)} /* === движение за неделю: «стрелки-моменты» (перенос В4 мокапа) === */ .v4heroes{margin-top:6px;margin-bottom:16px;display:flex;flex-direction:column;gap:4px} .v4hero{display:flex;align-items:center;gap:13px;padding:16px 4px;cursor:pointer} .v4arrow{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:54px;line-height:.7;flex:0 0 auto} .v4hero.up .v4arrow{color:#3ddc84;text-shadow:0 0 34px rgba(61,220,132,.4)} .v4hero.dn .v4arrow{color:#ff6b6b;text-shadow:0 0 34px rgba(255,107,107,.35)} .v4meta{min-width:0} .v4tag{font-weight:800;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .v4nm{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em; margin:7px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)} .v4line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .v4d{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .v4hero.up .v4d{color:#3ddc84}.v4hero.dn .v4d{color:#ff6b6b} .v4rt{font-size:12px;color:var(--muted);font-weight:600} .v4rt b{color:var(--accent-2);font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:700} .v4rule{border:0;border-top:1px solid var(--hair);margin:2px 0} .v4rest{margin-top:8px} .v4kick{display:block;font-weight:800;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 2px 6px} .v4rr{display:flex;align-items:center;gap:10px;padding:10px 2px;border-top:1px solid var(--hair);cursor:pointer} .v4rr:first-of-type{border-top:0} .v4ar{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:14px;width:20px;text-align:center;flex:0 0 auto} .v4rr.up .v4ar{color:#3ddc84}.v4rr.dn .v4ar{color:#ff6b6b} .v4rn{flex:1;min-width:0;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)} .v4rr .rt{font-size:12px;color:var(--muted);font-weight:600} .v4rr .dl{font-size:12.5px;font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:700;font-variant-numeric:tabular-nums} .v4rr .dl.up{color:#3ddc84}.v4rr .dl.dn{color:#ff6b6b} .v4hero .av{flex:0 0 auto} .v4rr .av{flex:0 0 auto} /* === прогноз матча: «шкала вероятности» дуга-gauge (перенос В2 мокапа) === */ .gauge-wrap{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 0 2px} .gauge{width:100%;max-width:300px;height:auto;display:block} .g-center{position:absolute;top:66%;left:0;right:0;transform:translateY(-50%);text-align:center;pointer-events:none;padding:0 54px} .g-pct{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1;color:#5fe3a1;text-shadow:0 0 30px rgba(61,220,132,.4)} .g-cap{font-size:10.5px;color:var(--muted);margin-top:5px;font-weight:600;letter-spacing:.03em} .g-ends{display:flex;justify-content:space-between;width:100%;max-width:300px;margin:-6px auto 0;font-size:10.5px;color:var(--faint);font-weight:700} .gp{display:flex;align-items:center;gap:11px;padding:12px 13px;border-radius:15px;border:1px solid var(--hair);margin-top:10px;background:var(--surface-b)} .gp.fav{border-color:color-mix(in srgb,#3ddc84 45%,transparent);background:linear-gradient(90deg,color-mix(in srgb,#3ddc84 12%,transparent),var(--surface-b) 60%)} .gp .pt-avs{display:flex;flex:0 0 auto} .gp .grow{flex:1;min-width:0} .gp .nm{font-weight:800;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gp .rt{font-size:12px;color:var(--muted);font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:2px} .gp .pn{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;flex:0 0 auto} .gp.fav .pn{color:#3ddc84} .gp.dog .pn{color:#ff9a9a} .readout{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} .readout .ro{background:var(--surface-b);border:1px solid var(--hair);border-radius:14px;padding:13px;text-align:center} .readout .ro .v{font-family:'Unbounded','SF Pro Display',-apple-system,sans-serif;font-weight:800;font-size:22px;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.02em} .readout .ro .k{margin-top:4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .pred-result .pred-stakes{margin-top:12px;font-size:12.5px;color:var(--muted)} /* === вкладка «профиль» (аккаунт): действия в стиле «разделов номера» навтоки === */ .acctnav{margin:0 0 14px} .acctnav-head{display:flex;align-items:center;gap:12px;padding:2px 2px 4px} .acctnav-head .acct-hello{font-size:12px;color:var(--muted)} .acctnav-head .acct-name{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .acctnav-list{margin:4px 0 0} .acctnav-list .navtoc-row{width:100%} .navtoc-sub{display:block;margin-top:3px;font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--muted)} .navtoc-row.danger .navtoc-n,.navtoc-row.danger .navtoc-t{color:#ff6b6b}