/* Каталог режимов.
   ========================================================================
   Карточка режима устроена как карточка эпохи: крупная область изображения,
   затемнение, название и подпись. Отличие одно — обложек у режимов пока
   нет, поэтому вместо картинки рисуется поле с коротким именем. Это не
   «серый прямоугольник до лучших времён», а законченный вид: появится
   обложка — встанет на то же место. */
@layer components {
  .modes-head{ display:flex; align-items:flex-end; gap:var(--sp-6);
               flex-wrap:wrap }
  .modes-head__search{ margin-left:auto; flex:0 1 320px; min-width:220px }
  @media (max-width:720px){ .modes-head__search{ margin-left:0; flex:1 1 100% } }

  .modes-sum{ display:flex; flex-wrap:wrap; gap:var(--sp-8);
              padding:var(--sp-5); background:var(--bg-panel);
              border:1px solid var(--stroke); border-radius:var(--r-lg) }
  .modes-sum > div{ display:grid; gap:2px }
  .modes-sum .k{ font-size:var(--fs-xs); color:var(--text-faint);
                 letter-spacing:var(--tracking-caps); text-transform:uppercase }
  .modes-sum .v{ font-family:var(--font-display); font-weight:700;
                 font-size:var(--fs-xl); color:var(--text); line-height:1;
                 font-variant-numeric:tabular-nums }

  /* .mcard и .mcard:hover живут в components.css — одним определением
     на проект. Здесь было второе, и оно перебивало первое просто
     потому, что этот файл грузится позже: тень при наведении,
     описанная в components.css, на страницах режимов не показывалась
     ни разу. */

  .mcard__art{
    position:relative; display:grid; place-items:center;
    aspect-ratio:16/7; overflow:hidden;
    /* Размер подложки считаем от ширины самой карточки, а не от ширины
       окна. От окна он не знал, куда его поставили: в узкой плитке
       «Классика» не помещалась и обрезалась краем, в широкой — болталась
       мелкой. */
    container-type:inline-size;
    /* Цвет приходит из базы через --mc. color-mix даёт из него прозрачную
       версию, не заставляя хранить в базе три оттенка одного цвета. */
    background:
      radial-gradient(80% 120% at 30% 0%,
                      color-mix(in srgb, var(--mc, var(--accent)) 18%, transparent),
                      transparent 70%),
      linear-gradient(160deg, var(--bg-elevated), var(--bg-sunken));
    border-bottom:1px solid var(--stroke);
  }
  /* Короткое имя вместо обложки. Берётся из атрибута, чтобы разметка и
     скрипт рисовали одно и то же.

     Стояло по центру ровным серым — и читалось как подпись к картинке,
     которая не загрузилась. Разница между «нет обложки» и «так
     задумано» здесь только в композиции: имя уходит в нижний угол,
     наполовину за край, и становится фоновой графикой, а не сообщением
     об ошибке. Заливка по букве — из цвета режима, он же красит значок,
     контур и свет под курсором. */
  .mcard__art::after{
    content:attr(data-short);
    position:absolute; right:var(--sp-4); bottom:var(--sp-3);
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(20px, 13cqw, 64px); line-height:.86;
    max-width:calc(100% - var(--sp-6));
    letter-spacing:-.03em; white-space:nowrap;
    background:linear-gradient(168deg,
      color-mix(in srgb, var(--mc, var(--accent)) 42%, var(--text)) 0%,
      color-mix(in srgb, var(--mc, var(--accent)) 10%, transparent) 88%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
    opacity:.30; transition:opacity var(--dur-2) var(--ease-out);
    pointer-events:none;
  }
  .mcard:hover .mcard__art::after{ opacity:.44 }
  .mcard__art img{ position:absolute; inset:0; width:100%; height:100%;
                   object-fit:cover }

  /* Значок режима. Рисуется поверх подложки и рядом с сокращением, а не
     вместо него: буквы читаются быстрее, а значок говорит о правиле —
     голова с прицелом, решётка, наклонная. Вместе они дают понять, что
     это за режим, ещё до чтения подписи. */
  .mcard__icon{
    position:absolute; left:var(--sp-4); top:var(--sp-4);
    width:34px; height:34px;
    fill:none; stroke:var(--mc, var(--accent)); stroke-width:1.6;
    stroke-linecap:round; stroke-linejoin:round;
    opacity:.9;
  }
  .mcard:hover .mcard__icon{ opacity:1 }

  .mhero__icon{
    width:64px; height:64px;
    fill:none; stroke:var(--mc, var(--accent)); stroke-width:1.5;
    stroke-linecap:round; stroke-linejoin:round;
  }

  .mcard__body{ display:grid; gap:var(--sp-2); padding:var(--sp-4);
                align-content:start }
  .mcard__name{ font-size:var(--fs-lg); font-weight:600; color:var(--text) }
  /* Две строки и многоточие. Раньше описание упиралось в край карточки и
     пропадало посреди слова — выглядело поломкой вёрстки, а не длинным
     текстом. */
  .mcard__body .muted{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
  }
  .mcard__facts{ display:flex; gap:var(--sp-5); flex-wrap:wrap;
                 font-size:var(--fs-sm); margin-top:var(--sp-1) }
  .mcard__facts div{ display:grid; gap:2px }
  .mcard__facts .k{ font-size:var(--fs-2xs); letter-spacing:var(--tracking-caps);
                    text-transform:uppercase; color:var(--text-faint) }
  .mcard__facts .num{ color:var(--text) }

  /* Планируемые: та же карточка, но приглушённая и с явной подписью. */
  .mcard--soon{ opacity:.72 }
  .mcard--soon:hover{ opacity:1 }
  .mcard--soon .mcard__art{ background:linear-gradient(160deg,
                            var(--bg-panel), var(--bg-sunken)) }
  .mcard--soon .mcard__art::after{ opacity:.16 }
}

@layer components {
  /* Шапка страницы режима — та же схема, что у страницы эпохи: слева
     изображение, справа текст. Отличие в том, что изображения пока нет, и
     на его месте стоит то же поле с коротким именем, что и на карточке. */
  .mhero{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
          overflow:hidden }
  .mhero__art{ position:relative; min-height:240px; display:grid;
               place-items:center;
               background:
                 radial-gradient(80% 120% at 30% 0%,
                   color-mix(in srgb, var(--mc, var(--accent)) 20%, transparent),
                   transparent 70%),
                 linear-gradient(160deg, var(--bg-elevated), var(--bg-sunken)) }
  .mhero__art::after{ content:attr(data-short);
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(var(--fs-xl), 6vw, var(--fs-3xl));
    color:var(--text); opacity:.22; letter-spacing:-.03em }
  .mhero__art img{ position:absolute; inset:0; width:100%; height:100%;
                   object-fit:cover; opacity:.55 }
  .mhero__body{ padding:var(--sp-7) }
  .mhero__nums{ display:flex; gap:var(--sp-7); flex-wrap:wrap }
  .mhero__nums > div{ display:grid; gap:2px }
  .mhero__nums .k{ font-size:var(--fs-xs); color:var(--text-faint);
                   letter-spacing:var(--tracking-caps); text-transform:uppercase }
  .mhero__nums .v{ font-family:var(--font-display); font-weight:700;
                   font-size:var(--fs-xl); color:var(--text); line-height:1;
                   font-variant-numeric:tabular-nums }
  @media (max-width:820px){
    .mhero{ grid-template-columns:1fr }
    .mhero__art{ min-height:160px }
    .mhero__body{ padding:var(--sp-5) }
  }

  .mmap{ display:flex; align-items:center; gap:var(--sp-3);
         padding:var(--sp-3); background:var(--bg-panel);
         border:1px solid var(--stroke); border-radius:var(--r-md) }
  .mmap img{ width:64px; height:36px; object-fit:cover;
             border-radius:var(--r-sm); flex:none }
  .mmap__name{ color:var(--text) }
}

@layer components {
  @media (max-width:720px){
    /* Сводка: две колонки вместо ряда, который разваливался в столбец с
       промежутками по сорок точек. */
    .modes-sum{ display:grid; grid-template-columns:1fr 1fr;
                gap:var(--sp-4) var(--sp-5); padding:var(--sp-4) }
    .modes-sum .v{ font-size:var(--fs-lg) }

    .modes-head{ gap:var(--sp-4) }
    .mhero__nums{ display:grid; grid-template-columns:1fr 1fr;
                  gap:var(--sp-4) }
    .mhero__nums .v{ font-size:var(--fs-lg) }

    /* Карточка режима: подпись под названием на узком экране режется до
       двух строк, иначе список превращается в простыню текста. */
    .mcard__body{ padding:var(--sp-3) }
    .mcard__body .muted{
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
      overflow:hidden;
    }
  }
  /* Одна колонка — только на совсем узких. На 375 две помещаются, а
     одна растягивает сводку на пол-экрана. */
  @media (max-width:340px){
    .modes-sum{ grid-template-columns:1fr }
  }
}


/* ==================================== выбор эпохи внутри режима

   Шаг между режимом и сервером. Карточек здесь всегда две-три, поэтому
   сетка простая и без переносов на телефоне: узкий экран показывает их
   в столбик, и это ровно то, что нужно. */

.mepochs{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:var(--sp-3);
}

.mepoch{
  display:flex; flex-direction:column; gap:var(--sp-2);
  padding:var(--sp-4);
  text-align:left; cursor:pointer;
  border:1px solid var(--line);
  background:var(--surface);
  transition:border-color .15s ease, transform .15s ease;
}
.mepoch:hover, .mepoch:focus-visible{
  border-color:var(--accent-ink);
  transform:translateY(-2px);
}

.mepoch__head{ display:flex; align-items:baseline; gap:var(--sp-2); }
.mepoch__year{
  font-family:var(--font-nums, inherit);
  font-size:var(--fs-2xl); font-weight:700; line-height:1;
  color:var(--text);
}
.mepoch__title{ color:var(--muted); font-size:var(--fs-sm); }

.mepoch__facts{
  display:flex; flex-direction:column; gap:2px;
  font-size:var(--fs-sm); color:var(--muted);
}

/* Полоса над списком серверов выбранной эпохи. */
.mepoch__bar{
  align-items:center; justify-content:space-between;
  gap:var(--sp-2); flex-wrap:wrap;
}

/* ============================================ незапущенные режимы строкой

   Четырнадцать больших плиток с надписью «серверов нет» перетягивали на
   себя страницу, ради которой на неё и приходят. Строка занимает экран
   по делу, но каталог не укорачивает: у каждого режима остаётся своя
   страница. */

.soonrow{ display:flex; flex-wrap:wrap; gap:var(--sp-2) }

.soonchip{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--stroke);
  border-radius:999px;
  background:var(--bg-panel);
  color:var(--text-muted);
  font-size:var(--fs-sm); text-decoration:none;
  transition:border-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out);
}
.soonchip svg{
  width:16px; height:16px; flex:none;
  fill:none; stroke:var(--mc, var(--mode-accent)); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.7;
}
.soonchip:hover{
  border-color:var(--mc, var(--stroke-strong));
  color:var(--text);
  transform:translateY(-1px);
}
.soonchip:hover svg{ opacity:1 }