/* Плеер в духе Winamp 2.x. Отдельный файл и отдельные цвета: это не элемент
   сайта, а вещь в себе, как скриншот в окне. Поэтому палитра сайта на него
   не действует: рама серая, экран чёрный, цифры зелёные при любой схеме.

   Размеры заданы в единицах --u. Одна единица это один «пиксель» Winamp:
   окно плеера 275 на 116 единиц, как настоящее. На широком экране единица
   крупнее, на телефоне мельче, пропорции при этом не меняются. */

.amp {
  --u: 1.7px;
  /* Лицо плеера светлее рабочего стола: в настоящем Winamp оно #c0c0c0,
     но там рабочий стол был бирюзовым. На сером столе того же цвета окно
     плеера растворялось и держалось только на черной рамке. */
  --amp-face: #d4d4d4;
  --amp-face-2: #c8c8c8;
  --amp-dark: #000;
  --amp-hi: #fff;
  --amp-sh: #808080;
  --amp-title-a: #0a246a;
  --amp-title-b: #1e4fa8;
  --amp-screen: #000;
  --amp-green: #00ff00;
  --amp-green-dim: #0a8a0a;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(14 * var(--u));
  align-items: start;
  margin: 0 0 46px;
  font-family: var(--dp-interface, "Segoe UI", system-ui, sans-serif);
  color: #000;
}

.amp-left { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; }

/* ---------- общая рамка окна ---------- */

.amp-win {
  width: calc(275 * var(--u));
  max-width: 100%;
  background: var(--amp-face);
  border: 1px solid var(--amp-dark);
  box-shadow:
    inset 1px 1px 0 var(--amp-hi),
    inset -1px -1px 0 var(--amp-sh),
    calc(3 * var(--u)) calc(3 * var(--u)) 0 rgba(0, 0, 0, .55);
  padding: calc(2 * var(--u));
}

/* ---------- заголовок окна ---------- */

.amp-bar {
  display: flex; align-items: center; gap: calc(4 * var(--u));
  height: calc(14 * var(--u));
  padding: 0 calc(3 * var(--u));
  background: linear-gradient(var(--amp-title-a), var(--amp-title-b));
  border: 1px solid var(--amp-dark);
  color: #fff;
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  font-size: calc(8 * var(--u));
  letter-spacing: .12em;
  text-transform: uppercase;
  user-select: none;
}
.amp-bar b {
  flex: 1; text-align: center; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* значок слева: просто ornament, не кнопка */
.amp-ico {
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  background: var(--amp-face);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-hi), inset -1px -1px 0 var(--amp-sh);
  flex: none;
}
.amp-dots { display: flex; gap: calc(2 * var(--u)); flex: none; }
.amp-dots i {
  width: calc(9 * var(--u)); height: calc(8 * var(--u));
  background: var(--amp-face);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-hi), inset -1px -1px 0 var(--amp-sh);
  display: block; position: relative;
}
/* Тире, квадрат, крестик: в настоящем Winamp это ровно эти три значка. */
.amp-dots i::before,
.amp-dots i::after { content: ""; position: absolute; background: #000; }
.amp-dots i:nth-child(1)::before {
  left: calc(2 * var(--u)); right: calc(2 * var(--u)); bottom: calc(1.5 * var(--u));
  height: 1px;
}
.amp-dots i:nth-child(2)::before {
  left: calc(2 * var(--u)); top: calc(1.5 * var(--u));
  width: calc(4 * var(--u)); height: calc(3 * var(--u));
  background: none; border: 1px solid #000;
}
.amp-dots i:nth-child(3)::before,
.amp-dots i:nth-child(3)::after {
  left: 50%; top: 50%; width: calc(5 * var(--u)); height: 1px;
  transform: translate(-50%, -50%) rotate(45deg);
}
.amp-dots i:nth-child(3)::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- главное окно ---------- */

.amp-main .amp-body {
  display: grid;
  grid-template-columns: calc(68 * var(--u)) minmax(0, 1fr);
  gap: calc(4 * var(--u));
  padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
}

/* экран: время и спектр */
.amp-screen {
  background: var(--amp-screen);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-sh);
  padding: calc(2 * var(--u));
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  height: calc(40 * var(--u));
}
.amp-time {
  display: flex; align-items: center; gap: calc(3 * var(--u));
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  font-size: calc(12 * var(--u)); font-weight: 700;
  line-height: 1; letter-spacing: .06em;
  color: var(--amp-green);
  text-shadow: 0 0 calc(5 * var(--u)) rgba(0, 255, 0, .45);
  font-variant-numeric: tabular-nums;
}
.amp-time .amp-tri {
  color: var(--amp-green); font-size: calc(9 * var(--u)); line-height: 1;
  opacity: .25;
}
.amp.is-playing .amp-time .amp-tri { opacity: 1; }
.amp-vis { width: 100%; flex: 1; display: block; min-height: calc(14 * var(--u)); }

/* два поля с информацией о «треке» */
.amp-fields { display: flex; flex-direction: column; gap: calc(3 * var(--u)); min-width: 0; }
.amp-field {
  background: var(--amp-screen);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-sh);
  padding: calc(3 * var(--u)) calc(4 * var(--u));
  color: var(--amp-green);
  text-shadow: 0 0 calc(4 * var(--u)) rgba(0, 255, 0, .35);
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  overflow: hidden;
}
.amp-field.is-name {
  height: calc(19 * var(--u));
  display: flex; align-items: center;
  font-size: calc(9 * var(--u)); line-height: 1.25;
}
.amp-field.is-name span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amp-field.is-meta {
  height: calc(18 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(4 * var(--u));
  font-size: calc(8 * var(--u)); line-height: 1;
}
.amp-field.is-meta b { font-weight: 700; white-space: nowrap; flex: none; }
/* Метки бывают длинные («проверено · Мобильные приложения») и упирались
   в рамку поля. Обрезаем многоточием: полный текст остается в title. */
.amp-field.is-meta .amp-flags {
  min-width: 0; flex: 1;
  color: var(--amp-green-dim);
  text-transform: uppercase; letter-spacing: .04em; font-size: calc(7 * var(--u));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* полоса перемотки: она же позиция в списке */
.amp-seek {
  margin: calc(3 * var(--u)) calc(2 * var(--u)) 0;
  height: calc(9 * var(--u));
  background: var(--amp-face-2);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-sh);
  position: relative;
  display: flex; align-items: center;
  padding: 0 calc(3 * var(--u));
}
.amp-seek-track {
  flex: 1; height: calc(3 * var(--u));
  background: #000;
  box-shadow: inset 1px 1px 0 #3a3a3a;
  position: relative;
}
.amp-seek-track i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--amp-green);
  opacity: .55;
}
.amp-seek-knob {
  position: absolute; top: 50%;
  width: calc(7 * var(--u)); height: calc(11 * var(--u));
  transform: translate(-50%, -50%);
  background: var(--amp-face);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-hi), inset -1px -1px 0 var(--amp-sh);
}

/* клавиши */
.amp-keys {
  display: flex; align-items: center; gap: calc(3 * var(--u));
  padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  flex-wrap: wrap;
}
.amp-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: calc(18 * var(--u)); height: calc(16 * var(--u));
  padding: 0 calc(3 * var(--u));
  background: var(--amp-face);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-hi), inset -1px -1px 0 var(--amp-sh);
  color: #000;
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  font-size: calc(8 * var(--u)); font-weight: 700;
  text-decoration: none; cursor: pointer;
  user-select: none;
}
.amp-key:hover { background: #d0d0d0; color: #000; }
.amp-key:active,
.amp-key.is-on {
  box-shadow: inset 1px 1px 0 var(--amp-sh), inset -1px -1px 0 var(--amp-hi);
  transform: translate(1px, 1px);
}
.amp-key:focus-visible {
  outline: 2px solid #ff00b8; outline-offset: 2px;
}
.amp-key.is-wide { min-width: calc(38 * var(--u)); }
.amp-key.is-go { background: #ffff00; }
.amp-key.is-go:hover { background: #ffff66; }

/* ---------- эквалайзер ---------- */

.amp-eq .amp-eq-body { padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)); }
.amp-eq-top {
  display: flex; align-items: center; gap: calc(3 * var(--u));
  margin-bottom: calc(4 * var(--u));
}
.amp-eq-top .amp-key { height: calc(13 * var(--u)); min-width: calc(20 * var(--u)); font-size: calc(7 * var(--u)); }
.amp-eq-top .amp-eq-title {
  flex: 1; text-align: center;
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  font-size: calc(7 * var(--u)); letter-spacing: .08em; color: #303030;
  text-transform: uppercase;
}
.amp-sliders {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: calc(2 * var(--u));
  background: var(--amp-screen);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-sh);
  padding: calc(4 * var(--u)) calc(3 * var(--u)) calc(2 * var(--u));
  position: relative;
}
/* шкала +20 / 0 / -20 слева, как в настоящем окне */
.amp-sliders::before {
  content: "+20db\A0\A0\A0 0db\A0\A0\A0-20db";
  white-space: pre;
  position: absolute; left: calc(-1 * var(--u)); top: calc(3 * var(--u));
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  font-size: calc(5 * var(--u)); line-height: calc(9 * var(--u));
  color: #9a9a9a; opacity: 0; pointer-events: none;
}
.amp-slider {
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u));
}
.amp-slider .amp-rail {
  width: calc(5 * var(--u)); height: calc(34 * var(--u));
  background: #111;
  box-shadow: inset 1px 1px 0 #3a3a3a;
  position: relative;
}
.amp-slider .amp-rail i {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: calc(11 * var(--u)); height: calc(5 * var(--u));
  background: linear-gradient(#f0f0f0, #b0b0b0);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
.amp-slider .amp-rail i::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 50%;
  height: 1px; background: #000;
}
.amp-slider em {
  font-style: normal;
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  font-size: calc(5 * var(--u)); color: #4a4a4a;
  letter-spacing: .02em;
}

/* ---------- список «треков» ---------- */

.amp-list { display: flex; flex-direction: column; height: 100%; }
.amp-tracks {
  list-style: none; margin: calc(3 * var(--u)) 0 0; padding: calc(2 * var(--u)) 0;
  background: var(--amp-screen);
  border: 1px solid var(--amp-dark);
  box-shadow: inset 1px 1px 0 var(--amp-sh);
  font-family: var(--dp-mono, ui-monospace, Consolas, monospace);
  font-size: calc(8 * var(--u));
  line-height: calc(15 * var(--u));
  overflow: auto;
  max-height: calc(196 * var(--u));
  flex: 1;
  counter-reset: amp;
}
.amp-tracks li { counter-increment: amp; }
.amp-tracks a {
  display: block;
  padding: 0 calc(4 * var(--u));
  color: #b6b6b6;
  text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amp-tracks a::before {
  content: counter(amp) ". ";
  color: #6a6a6a;
}
.amp-tracks a:hover { color: #fff; background: #101010; }
.amp-tracks a.is-cur {
  color: var(--amp-green);
  background: #001a00;
  text-shadow: 0 0 calc(4 * var(--u)) rgba(0, 255, 0, .5);
}
.amp-tracks a.is-cur::before { color: var(--amp-green); }
.amp-tracks a:focus-visible {
  outline: 2px solid #ff00b8; outline-offset: calc(-2 * var(--u));
}

.amp-listfoot {
  display: flex; align-items: center; gap: calc(3 * var(--u));
  padding: calc(4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u));
  flex-wrap: wrap;
}
.amp-listfoot .amp-key { min-width: calc(24 * var(--u)); height: calc(14 * var(--u)); font-size: calc(7 * var(--u)); }
.amp-listfoot .amp-go {
  margin-left: auto;
  min-width: calc(70 * var(--u));
  background: #ffff00;
  color: #000;
  font-family: var(--dp-interface, "Segoe UI", system-ui, sans-serif);
  font-size: calc(8 * var(--u));
  font-weight: 700;
  letter-spacing: .02em;
}
.amp-listfoot .amp-go:hover { background: #ffff66; }

/* ---------- узкие экраны ---------- */

@media (max-width: 1050px) {
  .amp { --u: 1.45px; }
}
/* Ниже 900px окна идут в одну колонку, и фиксированная единица оставляла бы
   плеер островком посреди пустой строки. Считаем единицу от ширины экрана:
   окно ровно заполняет контейнер, но не растет больше 1.45px. */
@media (max-width: 900px) {
  .amp {
    --u: min(1.45px, calc((100vw - 40px) / 275));
    grid-template-columns: 1fr;
    gap: calc(10 * var(--u));
    margin-bottom: 34px;
  }
  .amp-left { align-items: flex-start; }
}
@media (max-width: 480px) {
  .amp-win { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .amp * { transition: none !important; animation: none !important; }
}

/* Строка со размерами каталога: раньше это был блок «что внутри» справа
   от заголовка, теперь он живет в подвале списка, как строка состояния. */
.amp-stats {
  margin: calc(3 * var(--u)) 0 0;
  padding: calc(2 * var(--u)) calc(4 * var(--u));
  font-family: ui-monospace, Consolas, monospace;
  font-size: calc(6.5 * var(--u));
  letter-spacing: .04em; text-transform: uppercase;
  color: #3a3a3a;
  border-top: 1px solid #808080;
}
.amp-empty {
  margin: calc(3 * var(--u)) 0 0;
  padding: calc(8 * var(--u));
  background: #000; color: var(--amp-green);
  border: 1px solid #000;
  font-family: ui-monospace, Consolas, monospace;
  font-size: calc(8 * var(--u));
}
/* Клавиши эквалайзера декоративные: окно помечено aria-hidden, курсор
   не должен обещать нажатие. */
.amp-eq .amp-key { cursor: default; }
.amp-eq .amp-key:hover { background: var(--amp-face); }