/* ============================================================================
   CS2STAT — legacy.css
   Global styles extracted VERBATIM from the old inline <style> in base.html
   (Stage 1 of the UI redesign). Selectors and behaviour are unchanged on
   purpose: this stage only relocates these rules out of base.html so pages
   keep rendering identically. Deep refactor / migration onto the new --color-*
   tokens happens per page in later stages.

   Excluded from this file (moved elsewhere, see docs/ui-redesign.md §9):
     - :root design tokens        -> tokens.css
     - body background + colour   -> base.css  (new cool app frame)
     - [x-cloak]                  -> base.css
   ========================================================================== */

    input, select, textarea { max-width: 100%; box-sizing: border-box; }
    .card { background: var(--card); border-radius: 8px; border: 1px solid var(--border); }
    .surface-card { min-width: 0; background: linear-gradient(180deg, #202023, #18191b); border: 1px solid #303136; border-radius: 8px; box-shadow: 0 18px 44px rgba(0,0,0,.18); }
    .soon-card { min-width: 0; background: linear-gradient(180deg, rgba(245,197,66,.08), rgba(31,31,31,.96)); border: 1px solid rgba(245,197,66,.22); border-radius: 8px; }
    .soft-panel { min-width: 0; background: #17181a; border: 1px solid #2a2b30; border-radius: 8px; }
    .ui-btn { max-width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; padding: 0 14px; font-size: 13px; font-weight: 800; transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
    .ui-btn-primary { background: var(--accent); color: #fff; }
    .ui-btn-primary:hover { background: var(--accent-hover); }
    .ui-btn-ghost { border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,.02); }
    .ui-btn-ghost:hover { border-color: rgba(255,85,0,.55); color: #fff; background: rgba(255,85,0,.08); }
    .status-badge,
    .source-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); color: var(--text-dim); font-size: 10px; font-weight: 900; line-height: 1; text-transform: uppercase; white-space: nowrap; }
    .source-badge-manual { color: #ffb383; background: rgba(255,85,0,.12); border-color: rgba(255,85,0,.28); }
    .source-badge-steam { color: #8fc8ff; background: rgba(74,143,212,.14); border-color: rgba(74,143,212,.3); }
    .source-badge-faceit { color: #f3d777; background: rgba(245,197,66,.12); border-color: rgba(245,197,66,.26); }
    .status-badge-green { color: #8ef0a5; background: rgba(50,211,90,.12); border-color: rgba(50,211,90,.28); }
    .status-badge-orange { color: #ffb383; background: rgba(255,85,0,.12); border-color: rgba(255,85,0,.28); }
    .status-badge-yellow { color: #f3d777; background: rgba(245,197,66,.12); border-color: rgba(245,197,66,.26); }
    .status-badge-red { color: #ff9a9a; background: rgba(253,71,71,.12); border-color: rgba(253,71,71,.28); }
    .status-badge-gray { color: #b8bac0; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
    .source-tabs { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
    .source-tabs::-webkit-scrollbar { display: none; }
    .source-tab { flex: 0 0 auto; min-height: 38px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid #2b2c31; background: #18191b; color: var(--text-dim); padding: 0 12px; font-size: 13px; font-weight: 850; white-space: nowrap; }
    .source-tab:hover { color: #fff; border-color: #44464d; }
    .source-tab.is-active { color: #fff; background: rgba(255,85,0,.16); border-color: rgba(255,85,0,.45); }
    .source-tab b { color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
    .upload-dropzone { position: relative; border: 1px dashed rgba(255,255,255,.18); background: #131416; border-radius: 8px; transition: border-color .16s ease, background .16s ease; }
    .upload-dropzone:hover { border-color: rgba(255,85,0,.55); background: rgba(255,85,0,.05); }
    .match-row-redesign { min-height: 74px; background: linear-gradient(180deg, #1d1e21, #17181a); }
    .match-row-redesign:hover { background: linear-gradient(180deg, #25262a, #1b1c1f); }
    .match-thumb { border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
    .queue-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #2a2b30; background: #17181a; border-radius: 8px; padding: 12px; }
    .steam-profile-name { display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table { width:100%; border-collapse:collapse; }
    /* внутри горизонтально скроллящейся обёртки таблица не должна сжиматься до
       100% контейнера (иначе Safari/iOS сминает широкие таблицы вместо того,
       чтобы дать им переполниться и появиться скроллу) - пусть встаёт по
       контенту, но не уже самого контейнера */
    .overflow-x-auto { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
    .overflow-x-auto,
    .score-scroll,
    .nav-scroll { -webkit-overflow-scrolling: touch; }
    .overflow-x-auto > table { width: max-content; min-width: 100%; }
    .score-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; }
    .score-table { width: max-content; min-width: 100%; }
    .player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .mobile-match-title,
    .mobile-match-summary,
    .mobile-player-list,
    .mobile-section-heading,
    .mobile-mode-toggle,
    .mobile-general-compact,
    .mobile-general-table,
    .mobile-utility-list,
    .mobile-chip-label { display: none; }
    .equipment-info button { display: none; }
    thead th { font-size:11px; color:var(--text-faint); text-align:right; padding:8px 10px; border-bottom:1px solid var(--border); font-weight:600; white-space:nowrap; }
    thead th.col-player { text-align:left; }
    thead th.sortable { cursor:pointer; user-select:none; }
    thead th.sortable:hover { color:var(--text); }
    thead th.sorted-asc::after { content:" ▲"; color:var(--accent); }
    thead th.sorted-desc::after { content:" ▼"; color:var(--accent); }
    tbody td { padding:9px 10px; font-size:13px; border-bottom:1px solid #262626; white-space:nowrap; }
    tbody tr:last-child td { border-bottom:none; }
    tbody tr:hover td { background:#242424; }
    td.num { text-align:right; font-variant-numeric: tabular-nums; }
    /* тонкий прогресс-бар под числом (ADR/KAST, как у FACEIT) */
    .statbar { height:3px; border-radius:2px; background:#333; overflow:hidden; margin-top:3px; min-width:46px; }
    .statbar > div { height:100%; border-radius:2px; }
    .top-tab-nav a { transition: color .16s ease, border-color .16s ease; }
    .top-tab-nav a.border-orange-500 { color: #fff !important; border-bottom-color: var(--accent) !important; }
    .top-tab-nav a.border-transparent:hover { color: #fff !important; border-bottom-color: rgba(255,85,0,.42) !important; }
    .map-selector { display: flex; align-items: center; gap: 8px; margin: -4px 0 20px; padding: 4px; overflow-x: auto; overflow-y: hidden; border: 1px solid #242429; border-radius: 14px; background: #151516; scrollbar-width: none; }
    .map-selector::-webkit-scrollbar { display: none; }
    .map-selector-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border-radius: 10px; color: #a9abaf; background: #1e1e21; font-size: 13px; font-weight: 800; white-space: nowrap; transition: background .16s ease, color .16s ease, border-color .16s ease; }
    .map-selector-chip b { color: #f2f2f2; font-variant-numeric: tabular-nums; }
    .map-selector-chip:hover { color: #fff; background: #29292d; }
    .map-selector-chip.is-active { color: #fff; background: rgba(255,85,0,.22); box-shadow: inset 0 0 0 1px rgba(255,85,0,.55); }
    .map-selector-chip.is-active b { color: var(--accent-hover); }
    .mobile-map-label { display: none; }
    .match-card-map-scores,
    .match-hero-map-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .match-map-score-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 7px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08); color: #b8bac0; font-size: 11px; line-height: 1.1; }
    .match-map-score-pill b { color: #fff; font-variant-numeric: tabular-nums; }
    @media (min-width: 768px) {
      .score-table.score-table-medium,
      .score-table.score-table-compact { width: max-content; min-width: auto; }
      .score-table.score-table-medium th,
      .score-table.score-table-medium td,
      .score-table.score-table-compact th,
      .score-table.score-table-compact td { min-width: 76px; max-width: 138px; }
      .score-table.score-table-medium .col-player,
      .score-table.score-table-compact .col-player { min-width: 190px; max-width: 230px; }
      .score-table.score-table-medium .statbar,
      .score-table.score-table-compact .statbar { min-width: 42px; max-width: 78px; margin-left: auto; }
      .equipment-table { width: max-content; min-width: auto; }
      .equipment-table th,
      .equipment-table td { min-width: 84px; max-width: 132px; }
      .equipment-table th:first-child,
      .equipment-table td:first-child { min-width: 190px; max-width: 240px; }
      .utility-breakdown-grid { align-items: stretch; }
      .utility-breakdown-card { height: 100%; }
    }
    @media (max-width: 767px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; background: var(--color-bg); }
      body { color: #eceef2; }
      main { width: 100% !important; max-width: none !important; padding: 16px 16px 88px !important; overflow-x: hidden; }
      .surface-card,
      .soon-card,
      .soft-panel { border-radius: 8px; }
      .ui-btn { width: 100%; min-height: 42px; }
      .source-tabs { margin-right: -16px; padding-right: 16px; }
      .queue-item { align-items: stretch; flex-direction: column; }
      .match-row-redesign { display: grid !important; grid-template-columns: 74px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 8px 10px !important; min-height: 118px; padding: 12px !important; align-items: start !important; }
      .match-row-redesign .match-select { grid-column: 1; grid-row: 1; justify-self: start; margin: 2px 0 0 2px; }
      .match-row-redesign .match-fav { grid-column: 1; grid-row: 1; justify-self: end; margin-top: -2px; }
      .match-row-redesign .match-thumb { grid-column: 1; grid-row: 2 / 4; width: 74px !important; height: 52px !important; align-self: end; }
      .match-row-redesign .match-info { grid-column: 2 / 3; grid-row: 2; align-self: center; }
      .match-row-redesign .match-score-cell { grid-column: 3; grid-row: 1; width: auto !important; align-self: start; justify-self: end; }
      .match-row-redesign .match-status-dot { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
      .match-row-redesign .match-actions { grid-column: 2 / 4; grid-row: 3; justify-content: flex-start; opacity: 1 !important; }

      /* home filters: one compact horizontally-scrollable row instead of a
         tall wrapped block; search stays first and reasonably wide */
      .home-filters { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px !important; }
      .home-filters::-webkit-scrollbar { display: none; }
      .home-filters > * { flex: 0 0 auto; }
      .home-filters > .flex-1 { display: none; }
      .home-filters input[type="search"] { width: 44vw; min-width: 150px; }
      /* bigger touch target for the 2D action on phones */
      .match-card a[title="Открыть 2D Viewer"] { height: 34px; padding: 0 12px; font-size: 12px; }
      nav { min-height: 58px; padding: 10px 16px !important; background: #111113 !important; }
      .brand-logo { height: 30px; max-width: 150px; }

      .match-hero { display: none; }
      .mobile-match-title { display: block; margin: 2px 0 12px; }
      .mobile-match-title h1 { color: #fff; font-size: 26px; line-height: 1.1; font-weight: 900; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .mobile-match-summary { display: block; position: relative; min-height: 196px; margin-bottom: 18px; overflow: hidden; border-radius: 16px; border: 1px solid #26272b; background: #171717; }
      .mobile-match-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .58; }
      .mobile-match-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,9,.66), rgba(8,8,9,.93)); }
      .mobile-match-content { position: relative; z-index: 1; display: flex; min-height: 196px; flex-direction: column; justify-content: space-between; padding: 16px; }
      .mobile-match-meta { display: flex; flex-wrap: wrap; gap: 7px; color: #d7d8db; font-size: 12px; font-weight: 800; text-transform: uppercase; }
      .mobile-match-meta span { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(0,0,0,.36); border: 1px solid rgba(255,255,255,.08); }
      .initials-avatar,
      .mobile-team-badge {
        display: inline-grid !important;
        place-items: center;
        text-align: center;
        line-height: 1;
        letter-spacing: .01em;
        padding-left: 1px;
        font-variant-numeric: tabular-nums;
      }
      .mobile-score-lines { display: flex; flex-direction: column; gap: 8px; }
      .mobile-score-line { display: grid; grid-template-columns: 42px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
      .mobile-score-num { color: var(--green); font-size: 36px; line-height: 1; font-weight: 950; font-variant-numeric: tabular-nums; }
      .mobile-team-badge { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 900; background: rgba(100, 116, 255, .28); border: 1px solid rgba(125, 138, 255, .38); }
      .mobile-team-b .mobile-team-badge { background: rgba(80, 220, 190, .22); border-color: rgba(80, 220, 190, .34); }
      .mobile-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 18px; font-weight: 900; }
      .mobile-vs { margin-left: 52px; color: #d4d5d9; font-size: 13px; font-weight: 900; text-transform: uppercase; }
      .mobile-win-badge { justify-self: end; min-width: 30px; padding: 4px 8px; border-radius: 7px; color: #07110a; background: var(--green); font-size: 13px; line-height: 1; font-weight: 950; }

      .top-tab-nav { display: flex; min-height: 42px; gap: 24px; margin: 0 -16px 16px; padding: 0 16px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; border-bottom-color: #252529; scrollbar-width: none; }
      .top-tab-nav a { flex: 0 0 auto; padding-bottom: 11px !important; font-size: 14px !important; font-weight: 900 !important; letter-spacing: .01em; }
      .top-tab-nav a.border-orange-500 { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
      .top-tab-nav a.border-transparent { color: #8f9299 !important; }
      .top-tab-nav::-webkit-scrollbar,
      .subtab-nav::-webkit-scrollbar,
      .map-chip-scroll::-webkit-scrollbar { display: none; }
      .map-selector { margin: -2px -16px 16px 0; padding: 0 16px 2px 0; border: 0; border-radius: 0; background: transparent; gap: 8px; overflow-x: auto; white-space: nowrap; }
      .map-selector-chip { min-height: 36px; padding: 0 12px; border-radius: 10px; background: #1a1a1c; font-size: 13px; font-weight: 900; }
      .map-selector-chip.is-active { background: var(--accent); box-shadow: none; color: #fff; }
      .map-selector-chip.is-active b { color: #fff; }
      .desktop-map-label { display: none; }
      .mobile-map-label { display: inline; }

      .match-scoreline { margin-bottom: 14px; color: #8f9299; font-size: 12px; line-height: 1.45; }
      .match-scoreline span { margin-left: 0 !important; }
      .desktop-section-title { display: none !important; }
      .mobile-section-heading { display: block; margin: 0 0 14px; }
      .mobile-section-heading h2 { color: #fff; font-size: 20px; line-height: 1.15; font-weight: 950; }
      .mobile-section-heading p { margin-top: 4px; color: #9b9b9f; font-size: 13px; line-height: 1.3; }

      .report-summary { gap: 10px !important; margin-bottom: 20px !important; }
      .mvp-card { max-width: none !important; padding: 16px !important; border-radius: 14px !important; background: #171717 !important; border-color: #2a2a2c !important; }
      .mvp-top { align-items: flex-start !important; }
      .mvp-main { min-width: 0; align-items: center; gap: 12px !important; width: calc(100% - 56px); }
      .mvp-avatar { width: 56px !important; height: 56px !important; border-radius: 12px !important; font-size: 20px !important; }
      .mvp-name { max-width: 100%; color: #fff; font-size: 18px !important; line-height: 1.15; font-weight: 900 !important; }
      .mvp-badge { margin-top: 2px; padding: 5px 8px; border-radius: 999px; background: rgba(245,197,66,.12); border: 1px solid rgba(245,197,66,.25); font-size: 11px !important; }
      .mvp-card .rating-badge { min-width: 58px; padding: 4px 8px; border-radius: 6px; font-size: 20px !important; line-height: 1; }
      .mvp-metrics { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 10px !important; margin-top: 16px !important; padding-top: 14px !important; text-align: left; }
      .mvp-metrics .metric-value { font-size: 20px !important; line-height: 1.05; font-weight: 900 !important; }
      .mvp-metrics .metric-label { margin-top: 4px; color: #9a9ca1; font-size: 12px !important; line-height: 1.15; }

      .records-card.card { display: flex; gap: 10px; padding: 0 !important; background: transparent; border: 0; }
      .record-row { position: relative; display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto; min-height: 72px; padding: 12px 12px 12px 14px !important; overflow: hidden; border-radius: 14px; background: #151516; border: 1px solid #25262a; }
      .record-row::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 999px; background: var(--team-accent, var(--accent)); }
      .record-row > .inline-flex { width: 40px !important; height: 40px !important; border-radius: 999px !important; font-size: 15px !important; }
      .record-row > div.flex { display: contents; }
      .record-row .record-value { grid-column: 3; grid-row: 1; justify-self: end; color: #fff; font-size: 22px !important; line-height: 1; font-weight: 950; }
      .record-row .record-player { grid-column: 2; grid-row: 1; max-width: none; margin-left: 0 !important; align-self: end; color: #fff; font-size: 15px !important; font-weight: 900; }
      .record-row .record-label { grid-column: 2 / 4; grid-row: 2; align-self: start; display: -webkit-box; overflow: hidden; color: #a7a9ae; font-size: 12px !important; line-height: 1.25; white-space: normal !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

      .subtab-nav { display: flex; min-height: 38px; gap: 8px !important; margin: 0 -16px 16px 0; padding: 0 16px 2px 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
      .subtab-nav button { flex: 0 0 auto; min-height: 36px; padding: 0 12px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 900 !important; }
      .subtab-nav button:not(.bg-orange-500) { background: #1a1a1c !important; color: #a9abaf !important; }
      .desktop-chip-label { display: none; }
      .mobile-chip-label { display: inline; }
      .duel-chip-nav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
      .duel-chip-nav::-webkit-scrollbar { display: none; }
      .map-chip-scroll { flex-wrap: nowrap !important; margin: 0 -16px 16px 0; padding-right: 16px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
      .map-chip-scroll a { flex: 0 0 auto; min-height: 34px; display: inline-flex; align-items: center; border-radius: 10px !important; padding: 0 12px !important; font-size: 13px !important; font-weight: 850; }

      .mobile-mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 40px; margin: -2px 0 16px; padding: 4px; border-radius: 999px; background: #151516; border: 1px solid #2a2a2c; }
      .mobile-mode-toggle button { border-radius: 999px; color: #a9abaf; font-size: 14px; font-weight: 900; }
      .mobile-mode-toggle button.is-active { color: #fff; background: #a33a0d; box-shadow: inset 0 0 0 1px rgba(255,90,18,.38); }
      .desktop-general-table { display: none; }
      .mobile-general-compact { display: block; }
      .mobile-general-table { display: none; }
      .general-mode-table .mobile-general-table { display: block; }
      .general-mode-table .mobile-general-compact { display: none; }

      .mobile-team-summary { display: grid; grid-template-columns: auto 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 0 0 10px; }
      .mobile-team-summary-score { color: #fff; font-size: 27px; line-height: 1; font-weight: 950; font-variant-numeric: tabular-nums; }
      .mobile-team-summary-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--team-accent); background: #151516; background: color-mix(in srgb, var(--team-accent) 16%, #151516); border: 1px solid #34363a; border-color: color-mix(in srgb, var(--team-accent) 28%, #34363a); font-size: 10px; font-weight: 950; }
      .mobile-team-summary-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 17px; font-weight: 950; }
      .mobile-team-summary-avg { justify-self: end; color: #9b9b9f; white-space: nowrap; font-size: 12px; font-weight: 750; }
      .mobile-team-summary-avg b { margin-left: 4px; color: #fff; font-size: 16px; }
      .mobile-team-summary-half { grid-column: 3 / 5; color: #8d9097; font-size: 12px; line-height: 1.25; }
      .mobile-compact-team,
      .mobile-table-team { margin-bottom: 22px; }
      .mobile-compact-players { display: flex; flex-direction: column; gap: 9px; }
      .mobile-compact-player { position: relative; padding: 12px 12px 11px 14px; border-radius: 14px; background: #151516; background: color-mix(in srgb, var(--team-accent) 9%, #151516); border: 1px solid #2a2a2c; border-color: color-mix(in srgb, var(--team-accent) 18%, #2a2a2c); overflow: hidden; }
      .mobile-compact-player::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 999px; background: var(--team-accent); }
      .mobile-compact-player-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
      .mobile-compact-player .initials-avatar { width: 40px !important; height: 40px !important; border-radius: 999px !important; font-size: 15px !important; }
      .mobile-compact-player-id { min-width: 0; }
      .mobile-compact-player-name { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.15; font-weight: 950; }
      .mobile-compact-player-line { margin-top: 4px; overflow: hidden; color: #a9abaf; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.15; font-weight: 750; }
      .mobile-compact-player-rating { display: grid; justify-items: end; gap: 4px; min-width: 64px; }
      .mobile-compact-player-rating .rating-badge { min-width: 54px; padding: 4px 7px; border-radius: 6px; font-size: 18px !important; line-height: 1; }
      .mobile-compact-player-rating span { font-size: 13px; line-height: 1; font-weight: 900; }
      .mobile-compact-statgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
      .mobile-compact-statgrid div { min-width: 0; }
      .mobile-compact-statgrid span { display: block; color: #8f9299; font-size: 10px; line-height: 1.05; font-weight: 850; text-transform: uppercase; }
      .mobile-compact-statgrid b { display: block; margin-top: 3px; color: #f2f2f2; font-size: 14px; line-height: 1.1; font-weight: 950; font-variant-numeric: tabular-nums; }
      .mobile-compact-statgrid div:first-child { grid-column: span 2; }
      .mobile-score-table-wrap { position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: 14px; border: 1px solid #2a2a2c; -webkit-overflow-scrolling: touch; }
      .mobile-score-table-wrap::after { content: ""; position: sticky; right: 0; display: block; width: 28px; height: 0; box-shadow: -20px 0 24px 18px rgba(11,11,12,.88); pointer-events: none; }
      .mobile-score-table { min-width: 940px; width: max-content; border-collapse: separate; border-spacing: 0; }
      .mobile-score-table th,
      .mobile-score-table td { height: 56px; padding: 8px 10px; border-bottom: 1px solid #26272a; background: #151516; color: #f2f2f2; font-size: 13px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
      .mobile-score-table th { height: 42px; color: #8f9299; background: #1e1e20; font-size: 12px; font-weight: 900; }
      .mobile-score-table tr:last-child td { border-bottom: 0; }
      .mobile-score-table .mobile-sticky-player { position: sticky; left: 0; z-index: 3; min-width: 158px; max-width: 158px; text-align: left; box-shadow: 10px 0 18px rgba(0,0,0,.32); }
      .mobile-score-table th.mobile-sticky-player { z-index: 4; }
      .mobile-score-table .mobile-sticky-player > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
      .mobile-score-table .mobile-sticky-player span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; }
      .mobile-score-table .rating-badge { min-width: 48px; padding: 4px 7px; border-radius: 6px; font-size: 15px !important; line-height: 1; }

      .score-card { margin-bottom: 24px !important; overflow: visible; background: transparent; border: 0; }
      .team-header { display: grid !important; grid-template-columns: auto 22px minmax(0, 1fr) auto; align-items: center; column-gap: 10px !important; row-gap: 4px; padding: 0 0 10px !important; background: transparent !important; border-left: 0 !important; }
      .team-header-score { width: auto !important; color: #fff; font-size: 24px !important; line-height: 1; font-weight: 950; }
      .team-header img { width: 20px; height: 20px; }
      .team-header-name { min-width: 0; overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 17px !important; font-weight: 900 !important; }
      .team-header-half { grid-column: 3 / 5; justify-self: start; margin-right: 0 !important; color: #8d9097; font-size: 12px !important; }
      .team-header-avg { justify-self: end; color: #a5a7ad; white-space: nowrap; font-size: 12px !important; }
      .team-header-avg b { display: inline-block; margin-left: 4px; color: #fff; font-size: 15px; }

      .mobile-player-list { display: none; }
      .mobile-player-row { position: relative; display: grid; grid-template-columns: 4px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 76px; padding: 10px 12px 10px 0; overflow: hidden; border-radius: 12px; background: #151516; background: color-mix(in srgb, var(--team-accent) 10%, #151516); border: 1px solid #25262a; border-color: color-mix(in srgb, var(--team-accent) 18%, #25262a); }
      .mobile-side-marker { width: 4px; height: 48px; border-radius: 999px; background: var(--team-accent); }
      .mobile-player-row .inline-flex { width: 36px !important; height: 36px !important; border-radius: 999px !important; font-size: 14px !important; }
      .mobile-player-main { min-width: 0; }
      .mobile-player-name { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 1.15; font-weight: 900; }
      .mobile-player-sub { margin-top: 5px; overflow: hidden; color: #a4a6ab; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 1.2; font-weight: 650; }
      .mobile-player-stats { display: grid; min-width: 74px; justify-items: end; gap: 4px; }
      .mobile-player-stats .rating-badge { min-width: 52px; padding: 4px 7px; border-radius: 6px; font-size: 17px !important; line-height: 1; }
      .mobile-swing { font-size: 13px; line-height: 1; font-weight: 900; }
      .mobile-kd { display: none; }

      .desktop-chip-label { display: none; }
      .mobile-chip-label { display: inline; }
      .duel-chip-nav,
      .utility-mode-tabs { min-height: 38px; margin-right: -16px; padding-right: 16px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
      .duel-chip-nav button,
      .utility-mode-tabs button { flex: 0 0 auto; min-height: 36px; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 900; }
      .duel-matrix-card { padding: 0 !important; border-radius: 14px; border-color: #2a2a2c; background: #151516; }
      .duel-matrix-table { min-width: max-content; border-collapse: separate; border-spacing: 0; }
      .duel-matrix-table th,
      .duel-matrix-table td { min-width: 72px; height: 56px; padding: 8px 10px; background: #151516; border-bottom: 1px solid #25262a; text-align: center; font-size: 13px; }
      .duel-matrix-table th { background: #1e1e20; }
      .duel-matrix-table .col-player { position: sticky; left: 0; z-index: 3; min-width: 140px; max-width: 140px; background: #171719; text-align: left; box-shadow: 10px 0 18px rgba(0,0,0,.32); }
      .duel-matrix-table thead .col-player { z-index: 4; background: #1e1e20; }
      .duel-matrix-table .col-player span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .duel-select-card { padding: 12px !important; border-radius: 14px; border-color: #2a2a2c; background: #151516; }
      .duel-select-form { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; }
      .duel-player-select { width: 100%; height: 44px; padding: 0 12px !important; border-radius: 12px !important; border: 1px solid #2a2a2c; background: #171717 !important; color: #f2f2f2; font-size: 14px; }
      .duel-player-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,90,18,.18); }
      .h2h-table-card .overflow-x-auto { border-radius: 14px; }
      .h2h-table-card .col-player { position: sticky; left: 0; z-index: 2; min-width: 150px; max-width: 150px; background: #151516; box-shadow: 10px 0 18px rgba(0,0,0,.32); }
      .h2h-table-card thead .col-player { z-index: 3; background: #1e1e20; }

      .equipment-info { margin-bottom: 16px; padding: 12px; border-radius: 12px; border: 1px solid #2a2a2c; background: #151516; }
      .equipment-info p { max-height: 38px; margin-bottom: 8px !important; overflow: hidden; color: #9b9b9f !important; font-size: 13px !important; line-height: 1.35; }
      .equipment-info.is-open p { max-height: none; }
      .equipment-info button { display: inline-flex; color: var(--accent); font-size: 13px; font-weight: 900; }
      .utility-table-scroll { display: none; }
      .mobile-utility-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
      .mobile-utility-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 66px; padding: 10px; border-radius: 12px; background: #151516; border: 1px solid #2a2a2c; border-color: color-mix(in srgb, var(--team-accent) 18%, #2a2a2c); }
      .mobile-utility-row .initials-avatar { width: 38px !important; height: 38px !important; border-radius: 999px !important; font-size: 14px !important; }
      .mobile-utility-main { min-width: 0; }
      .mobile-utility-name { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 950; }
      .mobile-utility-sub { margin-top: 4px; color: #9b9b9f; font-size: 12px; line-height: 1.2; }
      .mobile-utility-value { display: grid; justify-items: end; gap: 2px; }
      .mobile-utility-value b { color: #fff; font-size: 21px; line-height: 1; font-weight: 950; }
      .mobile-utility-value span { color: #9b9b9f; font-size: 11px; text-transform: uppercase; font-weight: 850; }
      .utility-breakdown-title { margin-top: 24px !important; font-size: 18px; font-weight: 950; }
      .utility-breakdown-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
      .utility-breakdown-card { border-radius: 14px; border-color: #2a2a2c; background: #151516; }
      .utility-breakdown-card .grid.grid-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
      .utility-breakdown-card .grid.grid-cols-5 > div { padding: 8px 4px; border-radius: 10px; background: #101011; border: 1px solid #25262a; }

      .score-scroll { margin: 0 -1px; padding-bottom: 8px; border-radius: 8px; scrollbar-color: #4a4a4a transparent; }
      .score-scroll::-webkit-scrollbar { height: 4px; }
      .score-scroll::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 99px; }
      .score-scroll::-webkit-scrollbar-track { background: transparent; }
      .score-table { min-width: 820px; border-collapse: separate; border-spacing: 0 4px; }
      .overflow-x-auto > table:not(.score-table) { min-width: 680px; }
      .score-table.score-table-compact { min-width: 660px; }
      .score-table.score-table-medium { min-width: 720px; }
      .score-table thead th { background: #202020; padding: 12px 14px; font-size: 12px; }
      .score-table thead th:first-child { border-radius: 8px 0 0 8px; }
      .score-table thead th:last-child { border-radius: 0 8px 8px 0; }
      .score-table tbody td { background: #151516; border-bottom: 0; padding: 13px 14px; font-size: 14px; }
      .score-table tbody tr:hover td { background: #1f1f1f; }
      .score-table tbody td:first-child { border-radius: 8px 0 0 8px; }
      .score-table tbody td:last-child { border-radius: 0 8px 8px 0; }
      .score-table .col-player { position: sticky; left: 0; z-index: 2; min-width: 168px; max-width: 168px; box-shadow: 10px 0 16px rgba(0,0,0,.28); }
      .score-table thead .col-player { z-index: 3; }
      .score-table .player-name { max-width: 104px; }
    }
    .icon-invert { filter: invert(72%) sepia(4%) saturate(120%) hue-rotate(190deg); } /* svg под цвет текста */