@font-face { font-family: 'Golos Text'; src: url('../../fonts/golos-text-cyrillic.woff2') format('woff2');
               unicode-range: U+0400-04FF; font-display: swap; }
  @font-face { font-family: 'Golos Text'; src: url('../../fonts/golos-text-latin.woff2') format('woff2');
               unicode-range: U+0000-024F; font-display: swap; }

  :root {
    --ink: #f4f6fa;
    /* Вторичный текст подтянут до контраста 7:1 к фону карточки: на скриншотах
       прежний серый читался с трудом, а это половина подписей интерфейса. */
    --dim: #b6bfcd;
    --faint: #8d97a6;
    --bg: #090a0d;
    --card: #15171d;
    --card-2: #1b1e26;
    --line: #2c313c;
    --line-2: #3a4150;
    --start: #7ad4f5;
    --pro: #ff4a8d;
    --top: #e8eef8;
    --gold: #ffd479;
    --ok: #74e0af;
    --focus: #ffd479;
    --r: 16px;
    --tap: 44px;              /* минимальная зона нажатия */
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 16px/1.55 'Golos Text', ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
    background-image:
      radial-gradient(130% 70% at 8% -8%, #1a1d26 0%, transparent 58%),
      radial-gradient(90% 55% at 108% 6%, #191420 0%, transparent 52%);
    background-attachment: fixed;
    overflow-x: hidden;               /* на 390 px горизонтали быть не должно */
  }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3 { letter-spacing: -.022em; }
  .name, .brandname, .lead b, .place { letter-spacing: -.012em; }

  /* Видимый фокус с клавиатуры — на всём, что кликается. */
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 10px; }

  .wrap { max-width: 780px; margin: 0 auto; padding: 0 16px 64px; }
  .wide { max-width: 1200px; }

  /* ------------------------------------------------------------ шапка */
  .top { padding: 20px 0 14px; display: flex; align-items: center; gap: 12px; }
  .top .mark { width: 42px; height: 42px; flex: none; }
  .brandname { font-weight: 800; font-size: 17px; letter-spacing: .01em; }
  .brandname span { color: var(--dim); font-weight: 600; font-size: 14px;
                    display: block; letter-spacing: 0; }

  .tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
  .tabs a {
    flex: 1; min-height: var(--tap); display: flex; align-items: center;
    justify-content: center; padding: 10px 12px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--line); color: var(--dim);
    font-weight: 700; font-size: 15px;
  }
  .tabs a[aria-current] { color: var(--ink); border-color: var(--line-2);
                          background: var(--card-2); }

  .bar { display: flex; gap: 10px; align-items: center; margin: 10px 0 14px;
         flex-wrap: wrap; }
  .switch { display: flex; gap: 4px; background: var(--card); padding: 4px;
            border: 1px solid var(--line); border-radius: 999px; }
  .switch a { min-height: 36px; display: flex; align-items: center;
              padding: 4px 16px; border-radius: 999px; font-size: 15px;
              color: var(--dim); font-weight: 600; }
  .switch a[aria-current] { background: #262c38; color: var(--ink); font-weight: 700; }

  .search { display: flex; gap: 8px; flex: 1; min-width: 240px; }
  .search input {
    flex: 1; font: inherit; font-size: 16px; min-height: var(--tap);
    padding: 10px 14px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--card); color: var(--ink);
  }
  .search input::placeholder { color: var(--faint); }
  .search button {
    font: inherit; font-weight: 700; min-height: var(--tap); padding: 10px 18px;
    border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2);
    color: var(--ink); cursor: pointer;
  }

  /* ------------------------------------------------------------ строка команды */
  .rows { display: flex; flex-direction: column; gap: 10px; }
  .row {
    display: block; padding: 14px 16px; border-radius: var(--r);
    background: var(--card); border: 1px solid var(--line);
  }
  .row:hover { border-color: var(--line-2); }
  .row-head { display: flex; align-items: center; gap: 10px; }
  .name { font-weight: 800; font-size: 18px; letter-spacing: -.01em; line-height: 1.2;
          flex: 1; min-width: 0; }
  /* Лига — всегда ТЕКСТ, а не только цвет: без цвета страница обязана
     оставаться понятной. */
  .lg { font-size: 12px; font-weight: 800; letter-spacing: .1em; white-space: nowrap;
        text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
        border: 1px solid var(--line-2); }
  .lg[data-league="Старт"] { color: var(--start); border-color: #2c5a70; }
  .lg[data-league="Про"]   { color: var(--pro);   border-color: #6d2547; }
  .lg[data-league="Топ"]   { color: var(--top);   border-color: #5a6273; }
  .lg[data-league="Калибровка"] { color: var(--dim); }

  /* Главная строка прогресса — крупная, читается за один взгляд. */
  .lead { margin-top: 8px; font-size: 15px; color: var(--dim); }
  .lead b { color: var(--ink); font-weight: 800; font-size: 17px; }
  /* Вторичные метрики — мельче, но не мельче комфортного: 14px. */
  .meta { color: var(--faint); font-size: 14px; margin-top: 4px;
          display: flex; gap: 14px; flex-wrap: wrap; }

  /* ------------------------------------------------------------ баблы */
  /* Ячейка — официальный знак в кружке цвета лиги. Знак не перекрашивается:
     цвет живёт в рамке, фоне и свечении вокруг него. */
  /* Десять в одну строку при любой ширине: nowrap плюс сжимаемый зазор. Перенос
     «девять и один» читается как две разные шкалы. */
  .bubrow { display: flex; gap: 4px; margin-top: 10px; align-items: center;
            flex-wrap: nowrap; max-width: 100%; }
  @media (max-width: 400px) { .bubrow { gap: 3px; } }
  .bub { position: relative; display: inline-flex; align-items: center;
         justify-content: center; flex: none; border-radius: 50%;
         border: 1.5px solid var(--lg-soft); background: #101319; }
  .bub img { width: 76%; height: 76%; object-fit: contain; display: block; }

  .bub[data-state="filled"] { border-color: var(--lg);
    background: color-mix(in srgb, var(--lg) 14%, #101319);
    box-shadow: 0 0 6px color-mix(in srgb, var(--lg) 45%, transparent); }
  /* Пустой: знак приглушён, но узнаваем — форма и надпись на месте. */
  .bub[data-state="empty"] img { opacity: .22; }
  .bub[data-state="empty"] { border-color: #2c313c; }
  /* Следующая отметка — тонкая подсветка, без заливки: это цель, а не награда. */
  .bub[data-state="next"] { border-color: var(--lg);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--lg) 22%, transparent); }
  .bub[data-state="next"] img { opacity: .42; }

  /* Десятый — простая золотистая рамка. */
  .bub[data-mark="gold"] { border-color: var(--gold); border-width: 2px;
    box-shadow: 0 0 9px rgba(255,212,121,.55); }
  /* Ачивка — искра отдельным слоем поверх, знак не трогаем. */
  .bub .spark { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
    background: var(--ok); border-radius: 50%; border: 2px solid var(--bg); }

  /* Топ: белое/серебряное свечение, но сдержаннее розового неона — дороже, а
     не ярче. */
  .bub.lg-top[data-state="filled"] { box-shadow: 0 0 5px rgba(232,238,248,.35); }

  .emblem { display: inline-flex; align-items: center; justify-content: center;
            border-radius: 50%; border: 2px solid var(--lg);
            background: radial-gradient(circle at 50% 30%,
                        color-mix(in srgb, var(--lg) 18%, #0e1116), #0b0d11 72%);
            box-shadow: 0 0 26px color-mix(in srgb, var(--lg) 30%, transparent);
            margin: 2px auto 8px; }
  .emblem img { width: 74%; height: 74%; object-fit: contain; display: block; }
  .emblem.lg-top { box-shadow: 0 0 22px rgba(232,238,248,.22),
                               inset 0 0 18px rgba(232,238,248,.06); }

  .progress { height: 6px; border-radius: 6px; background: #242a35; margin-top: 10px;
              overflow: hidden; }
  .progress i { display: block; height: 100%; border-radius: 6px; background: var(--dim); }
  [data-league="Старт"] .progress i { background: #7ad4f5; }
  [data-league="Про"]   .progress i { background: #ff4a8d; }
  [data-league="Топ"]   .progress i { background: linear-gradient(90deg,#8b93a3,#e8eef8); }

  .soon { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .07em;
          color: var(--gold); text-transform: uppercase; white-space: nowrap;
          border: 1px solid #5c5233; border-radius: 999px; padding: 2px 10px; }

  /* ------------------------------------------------------------ ачивки */
  .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
  .chip { font-size: 13.5px; padding: 5px 11px; border-radius: 999px;
          border: 1px solid var(--line-2); background: #1d212a; color: var(--ink);
          line-height: 1.25; }
  .chip[data-scope="permanent"] { border-color: #6a5c37; color: var(--gold); }
  .chip[data-new] { border-color: #35705a; color: var(--ok); }
  .chip.more { color: var(--dim); border-style: dashed; }
  .muted-in-chip { color: var(--dim); }

  /* ------------------------------------------------------------ карточка */
  .hero { border-radius: 22px; padding: 22px 20px 24px; margin: 2px 0 18px;
          border: 1px solid var(--line); background: var(--card);
          position: relative; overflow: hidden; }
  .hero::after {                       /* единый мягкий блик, без «обоев» */
    content: ""; position: absolute; inset: -40% -20% auto -20%; height: 70%;
    background: radial-gradient(60% 100% at 30% 0%, rgba(255,255,255,.07), transparent 70%);
    pointer-events: none; }
  .hero[data-league="Старт"] { border-color: #26505f; }
  .hero[data-league="Про"]   { border-color: #5b2340; }
  .hero[data-league="Топ"]   { border-color: #4e5666;
    background: linear-gradient(180deg, #101218 0%, #16191f 60%, #101218 100%); }
  .hero h1 { font-size: 28px; margin: 12px 0 0; letter-spacing: -.02em; line-height: 1.15; }
  .emblem { display: block; margin: 2px auto 6px; }
  .hero .lead { font-size: 17px; margin-top: 14px; }
  .hero .lead b { font-size: 20px; }
  .next { margin-top: 10px; color: var(--dim); font-size: 15px; }

  .sec { margin-top: 26px; }
  .sec h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em;
            color: var(--dim); margin: 0 0 10px; font-weight: 800; }
  .panel { background: var(--card); border: 1px solid var(--line);
           border-radius: var(--r); overflow: hidden; }
  .panel .line { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
                 border-top: 1px solid var(--line); font-size: 15px; }
  .panel .line:first-child { border-top: none; }
  .panel .line .grow { flex: 1; min-width: 0; overflow: hidden;
                       text-overflow: ellipsis; white-space: nowrap; }
  .panel .line .num { color: var(--dim); font-variant-numeric: tabular-nums; }
  .place { font-weight: 800; min-width: 44px;
           font-variant-numeric: tabular-nums; }
  .place[data-medal="1"] { color: var(--gold); }
  .place[data-medal="2"] { color: #dbe2ee; }
  .place[data-medal="3"] { color: #d8a273; }

  /* Лента событий: получен бабл / переход / ачивка. Не график с числами —
     игрок должен видеть события, а не измерения. */
  .feed { position: relative; padding-left: 26px; }
  .feed::before { content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px;
                  width: 2px; background: var(--line); }
  .ev { position: relative; padding: 9px 0; }
  .ev::before { content: ""; position: absolute; left: -22px; top: 15px;
                width: 10px; height: 10px; border-radius: 50%;
                background: var(--faint); box-shadow: 0 0 0 3px var(--bg); }
  .ev[data-kind="league"]::before { background: var(--gold); }
  .ev[data-kind="award"]::before  { background: var(--ok); }
  .ev-t { font-weight: 700; font-size: 15px; }
  .ev-s { color: var(--dim); font-size: 14px; }

  .explain { color: var(--dim); font-size: 15px; line-height: 1.65; }
  .empty { color: var(--dim); font-size: 15px; padding: 16px; }
  .btn { display: inline-flex; align-items: center; min-height: var(--tap);
         padding: 10px 18px; border-radius: 12px; border: 1px solid var(--line-2);
         background: var(--card-2); color: var(--ink); font-weight: 700; }
  .crumbs { margin: 4px 0 14px; font-size: 15px; color: var(--dim); }
  .crumbs a { color: var(--dim); display: inline-flex; align-items: center;
              min-height: 36px; }

  /* ------------------------------------------------------------ пустой архив */
  .blank { text-align: center; padding: 40px 20px; }
  .blank .emblem { margin-bottom: 14px; }
  .blank p { color: var(--dim); font-size: 16px; margin: 0 0 20px; }

  @media (min-width: 900px) {
    .rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
            gap: 14px; align-items: start; }
    .row { padding: 18px 20px; }
    .name { font-size: 20px; }
    .lead { font-size: 16px; }
    .lead b { font-size: 19px; }
    .top { padding-top: 30px; }
    .hero h1 { font-size: 36px; }
    .two { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px;
           align-items: start; }
  }

  /* Неон, блики и любое движение выключаются по просьбе системы. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .bub { filter: none !important; }
    .hero::after { display: none; }
  }