/* Экран «Эфир» в стиле J, ночная тема. Макет svoiefir.pen: «C · 01л» (1440 и 390).
   Общий для страницы /efir/ (static/player/player.js) и окна плеера на сайте (static/site/j.js):
   классы здесь только для вида, разметку скрипты находят по своим data-атрибутам.
   Всё внутри .efir — стили сайта не задевает. Окна и кнопки страницы /efir/ — в player.css. */
.player-body, .efir-window {
  --bg: #0D0B09; --surface: #1F1B17; --sheet: #2A2520; --ink: #F3EEE4; --muted: #F3EEE4B8; --faint: #F3EEE480; --gone: #F3EEE452;
  --line: #FFFFFF1F; --glass: #FFFFFF12; --accent: #C8401A; --on-accent: #FFF9F6; --gold: #C9A765; --glow: #F08A3C;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
.efir {
  color: var(--ink);
  font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.efir .visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.efir {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* свечение ламп шире экрана телефона: без этого страница ездила бы вбок */
}
.efir .efir-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; }
.efir .efir-brand { display: block; width: 103px; height: 22px; }
.efir .efir-brand img { display: block; width: 100%; height: 100%; }
.efir .efir-acc { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); font: 500 14px/18px "Onest", sans-serif; text-decoration: none; }
.efir .efir-acc__ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--line); border-radius: 50%; }
.efir .efir-acc__ico svg { width: 15px; height: 15px; fill: currentColor; }
.efir .efir-acc__who { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efir .efir-acc:hover .efir-acc__ico { border-color: var(--ink); }
@media (max-width: 599px) { .efir .efir-acc__who { display: none; } }
.efir .efir-where { display: none; align-items: center; gap: 10px; margin: 0; color: var(--muted); font-size: 13px; line-height: 18px; }
.efir .efir-onair, .efir .efir-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--gold); font: 600 11px/14px "Onest", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.efir .efir-onair::before, .efir .efir-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #F3EEE426; transition: background .3s, box-shadow .3s; }
.efir .efir-onair[data-on="1"]::before, .efir .efir-eyebrow[data-on="1"]::before { background: var(--glow); box-shadow: 0 0 10px #F08A3CAA; }

.efir .efir-body { display: grid; gap: 22px; }

/* Сцена: лампы показывают, сколько играет трек */
.efir .efir-stage { display: grid; justify-items: center; text-align: center; min-width: 0; padding-top: 20px; }
.efir .lamps { --lw: 60px; position: relative; display: flex; align-items: flex-end; gap: calc(var(--lw) * .03); }
.efir .lamps::before {
  content: ""; position: absolute; inset: -26% -24% -34%; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(closest-side, #F08A3C40, #F08A3C16 50%, #F08A3C00);
}
.efir .lamps[data-on="1"]::before { opacity: 1; }
/* Все цифры подгружаются заранее: иначе при смене секунды лампа мигала бы пустым местом */
.efir .lamps::after { content: ""; position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; background-image: url("img/lamp-0.06116b0b49d4.webp"), url("img/lamp-1.e053b0f92193.webp"), url("img/lamp-2.af761185b34c.webp"), url("img/lamp-3.e3ed661c90bf.webp"), url("img/lamp-4.c02041c2fd49.webp"), url("img/lamp-5.26ff6fbe53d4.webp"), url("img/lamp-6.90efa437421f.webp"), url("img/lamp-7.e9380b22594d.webp"), url("img/lamp-8.e646fadbbf46.webp"), url("img/lamp-9.787ae030fd42.webp"); }
.efir .lamp { position: relative; flex: none; width: var(--lw); height: calc(var(--lw) * 2.458); background: url("img/lamp-off.ffa717a274b0.webp") center / contain no-repeat; }
.efir .lamp[data-d="0"] { background-image: url("img/lamp-0.06116b0b49d4.webp"); }
.efir .lamp[data-d="1"] { background-image: url("img/lamp-1.e053b0f92193.webp"); }
.efir .lamp[data-d="2"] { background-image: url("img/lamp-2.af761185b34c.webp"); }
.efir .lamp[data-d="3"] { background-image: url("img/lamp-3.e3ed661c90bf.webp"); }
.efir .lamp[data-d="4"] { background-image: url("img/lamp-4.c02041c2fd49.webp"); }
.efir .lamp[data-d="5"] { background-image: url("img/lamp-5.26ff6fbe53d4.webp"); }
.efir .lamp[data-d="6"] { background-image: url("img/lamp-6.90efa437421f.webp"); }
.efir .lamp[data-d="7"] { background-image: url("img/lamp-7.e9380b22594d.webp"); }
.efir .lamp[data-d="8"] { background-image: url("img/lamp-8.e646fadbbf46.webp"); }
.efir .lamp[data-d="9"] { background-image: url("img/lamp-9.787ae030fd42.webp"); }
.efir .lamp-colon { position: relative; flex: none; width: calc(var(--lw) * .552); height: calc(var(--lw) * 1.656); margin: 0 calc(var(--lw) * .02); background: url("img/lamp-colon-off.b876f23118d5.webp") center / contain no-repeat; }
.efir .lamps[data-on="1"] .lamp-colon { background-image: url("img/lamp-colon.42841bdfd186.webp"); }

.efir .efir-eyebrow { margin: 22px 0 0; }
.efir .efir-title { margin: 10px 0 0; max-width: 100%; font-size: clamp(1.75rem, 8.2vw, 2rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; overflow-wrap: anywhere; }
.efir .efir-sub { min-height: 20px; margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.efir .efir-progress { width: 100%; margin-top: 22px; }
.efir .efir-progress__line { position: relative; height: 3px; background: #F3EEE426; cursor: pointer; touch-action: none; }
.efir .efir-progress__line::after { content: ""; position: absolute; inset: -10px 0; } /* попасть пальцем */
.efir .efir-progress__line:hover, .efir .efir-progress__line.is-seeking { height: 5px; margin-block: -1px; }
.efir .efir-progress__line:focus-visible { outline: 2px solid var(--glow); outline-offset: 6px; }
.efir .efir-progress__line i { display: block; width: 0; height: 100%; background: var(--glow); transition: width .25s linear; pointer-events: none; }
.efir .efir-progress__line.is-seeking i { transition: none; }
.efir .efir-progress__time { display: flex; justify-content: space-between; margin-top: 10px; color: var(--muted); font: 400 12px/16px var(--mono); }
.efir .efir-progress__time span:first-child { color: var(--ink); font-weight: 500; }

.efir .player-play {
  width: 112px;
  aspect-ratio: 1;
  margin: 24px 0 8px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 0 0 1px #F08A3C40, 0 0 56px #F08A3C59;
  transition: transform .15s;
}
.efir .player-play:active { transform: scale(.96); }
.efir .player-play svg { width: 40%; height: 40%; fill: currentColor; grid-area: 1 / 1; }
.efir .player-play .icon-pause, .efir .player-play[data-playing="1"] .icon-play { opacity: 0; }
.efir .player-play[data-playing="1"] .icon-pause { opacity: 1; }
.efir .player-status { min-height: 20px; margin: 0; color: var(--glow); font-size: 14px; line-height: 20px; font-weight: 500; }
.efir .player-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 384px; margin-top: 12px; }
.efir .player-act { display: grid; justify-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--muted); font: 500 12px/15px "Onest", sans-serif; cursor: pointer; }
.efir .player-act i { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #F3EEE466; border-radius: 50%; color: var(--ink); transition: border-color .15s, background .15s; }
.efir .player-act svg { width: 20px; height: 20px; fill: currentColor; }
.efir .player-act svg.is-stroke { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.efir .player-act:not(:disabled):hover i { border-color: var(--ink); background: var(--glass); }
.efir .player-act:disabled { opacity: .4; cursor: default; }

/* Панели: жанры, очередь, громкость */
.efir .efir-panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.efir .efir-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.efir .efir-panel__head h2 { margin: 0; font: 600 17px/22px "Onest", sans-serif; letter-spacing: -.3px; }
.efir .efir-panel__head p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 16px; }
.efir .efir-panel__count { flex: none; padding-top: 3px; color: var(--faint); font: 400 11.5px/16px var(--mono); white-space: nowrap; }

/* Жанры на телефоне и планшете — ряд кнопок, листается вбок */
.efir .efir-genres { background: none; border: 0; border-radius: 0; overflow: visible; }
.efir .efir-genres .efir-panel__head { align-items: center; padding: 0 2px 12px; border: 0; }
.efir .efir-genres .efir-panel__head h2 { color: var(--muted); font: 600 10.5px/13px "Onest", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.efir .efir-genres .efir-panel__head p { display: none; }
.efir .efir-genres .efir-panel__count { padding: 0; }
.efir .efir-genrelist { display: flex; gap: 8px; margin: 0 -20px; padding: 0 20px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.efir .efir-genrelist::-webkit-scrollbar { display: none; }
.efir .efir-genrelist li { flex: none; }
.efir .efir-genre {
  display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--muted); font: 500 14px/18px "Onest", sans-serif; white-space: nowrap; cursor: pointer;
}
.efir .efir-genre[aria-pressed="true"] { border-color: var(--glow); background: var(--glass); color: var(--ink); font-weight: 600; }
.efir .efir-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #F3EEE426; }
.efir .efir-genre .efir-dot { display: none; }
.efir .efir-genre[aria-pressed="true"] .efir-dot, .efir .efir-dot.is-on { display: block; background: var(--glow); box-shadow: 0 0 10px #F08A3CAA; }
.efir .efir-genre__text { display: grid; }
.efir .efir-genre__text b { font-weight: inherit; }
.efir .efir-genre__text small, .efir .efir-genre__go { display: none; }
.efir .efir-genres__hint { margin: 12px 2px 0; color: var(--faint); font-size: 12.5px; line-height: 16px; }

/* Очередь одним списком: играло, сейчас, дальше */
.efir .efir-hint { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 12.5px; line-height: 18px; }
.efir .efir-hint::before { content: ""; flex: none; width: 6px; height: 6px; margin: 3px 2px 0; border: solid currentColor; border-width: 1.4px 1.4px 0 0; transform: rotate(-45deg); }
.efir .efir-hint--later { border-bottom: 0; border-top: 1px solid var(--line); }
.efir .efir-hint--later::before { margin-top: -3px; transform: rotate(135deg); }
.efir .efir-hint[hidden] { display: none; }
.efir .efir-sec { margin: 0; padding: 14px 18px 8px; color: var(--gold); font: 600 10.5px/13px "Onest", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.efir .efir-row { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 18px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.efir .efir-list > .efir-row:last-child { border-bottom: 0; }
.efir .efir-row[data-play] { cursor: pointer; transition: background-color .15s; }
.efir .efir-row[data-play]:hover { background: var(--glass); }
.efir .efir-row[data-play]:hover .efir-row__title { color: var(--ink); }
.efir .efir-row[data-play]:focus-visible { outline: 2px solid var(--glow); outline-offset: -2px; }
.efir .efir-row__lead { flex: none; display: flex; align-items: center; width: 40px; color: var(--faint); font: 400 12px/16px var(--mono); }
.efir .efir-row__title { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font: 500 15px/19px "Onest", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.efir .efir-row__meta { flex: none; color: var(--faint); font: 400 12px/16px var(--mono); }
.efir .efir-row--played .efir-row__title { color: var(--faint); }
.efir .efir-row--now { min-height: 60px; border-bottom: 0; background: var(--glass); }
.efir .efir-row--now .efir-row__title { display: grid; gap: 2px; color: var(--ink); }
.efir .efir-row--now .efir-row__title b { overflow: hidden; font: 600 16px/20px "Onest", sans-serif; text-overflow: ellipsis; }
.efir .efir-row--now .efir-row__title small { color: var(--muted); font: 400 12px/15px "Onest", sans-serif; }
.efir .efir-row--now .efir-row__meta { color: var(--ink); font-weight: 500; }
/* Трек убрали кнопкой «Больше не ставить»: строка серая, заиграть он не может */
.efir .efir-row.is-gone .efir-row__lead, .efir .efir-row.is-gone .efir-row__title, .efir .efir-row.is-gone .efir-row__meta { color: var(--gone); }
.efir .efir-empty { margin: 0; padding: 12px 18px 16px; color: var(--faint); font-size: 13.5px; line-height: 19px; }
.efir .efir-rowbtn { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; }
.efir .efir-rowbtn svg { width: 15px; height: 15px; fill: currentColor; }
.efir .efir-rowbtn:hover, .efir .efir-rowbtn:focus-visible { color: var(--ink); }
.efir .efir-rowbtn--back { border-color: #F3EEE466; color: var(--ink); }
.efir .efir-rowbtn--back svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.efir .efir-rowbtn--back:hover, .efir .efir-rowbtn--back:focus-visible { border-color: var(--ink); background: var(--glass); }
.efir .efir-rowbtn[data-tip]:hover::after, .efir .efir-rowbtn[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; right: -1px; bottom: calc(100% + 9px); z-index: 2; padding: 7px 10px; border-radius: 6px;
  background: var(--ink); color: #0D0B09; font: 500 12px/15px "Onest", sans-serif; white-space: nowrap; box-shadow: 0 6px 16px #00000066; pointer-events: none;
}

.efir .efir-set { display: grid; padding: 2px 18px; }
.efir .efir-set > * { min-height: 54px; box-sizing: border-box; }
/* линия только между строками: «Адрес» на широком экране скрыт, и с ним уходит его линия */
.efir .efir-set > * + * { border-top: 1px solid var(--line); }
.efir .field { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.efir .field > span, .efir .player-device { color: var(--muted); font: 600 10.5px/14px "Onest", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.efir .field input[type="range"] { width: 52%; accent-color: var(--ink); }
/* Громкость — в цветах полосы хода трека: тонкая линия, заполнено до текущего уровня */
.efir .efir-set input[type="range"] {
  --fill: 100%;
  -webkit-appearance: none; appearance: none; height: 20px; margin: 0; background: none; cursor: pointer;
}
.efir .efir-set input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; background: linear-gradient(to right, var(--glow) var(--fill), #F3EEE426 var(--fill));
}
.efir .efir-set input[type="range"]::-moz-range-track { height: 3px; background: #F3EEE426; }
.efir .efir-set input[type="range"]::-moz-range-progress { height: 3px; background: var(--glow); }
.efir .efir-set input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border: 0; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 8px var(--glow);
}
.efir .efir-set input[type="range"]::-moz-range-thumb {
  width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow);
}
.efir .efir-set input[type="range"]:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.efir .player-device { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; }
.efir .player-device span { color: var(--ink); font: 400 13px/18px "Onest", sans-serif; letter-spacing: 0; text-transform: none; text-align: right; }

/* Планшет и узкий ноутбук: слева эфир, справа очередь */
@media (min-width: 900px) {
  .efir { max-width: none; padding: 0 32px 28px; }
  .efir .efir-top { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 72px; margin: 0 -32px; padding: 0 32px; border-bottom: 1px solid var(--line); }
  .efir .efir-where { display: flex; }
  .efir .efir-top > :last-child { justify-self: end; }
  .efir .efir-body {
    flex: 1; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: 1fr auto auto; gap: 20px 24px; padding-top: 24px;
    grid-template-areas: "stage queue" "genres queue" "set queue";
  }
  .efir .efir-stage { grid-area: stage; align-self: center; padding-top: 12px; }
  .efir .efir-genres { grid-area: genres; }
  .efir .efir-queue { grid-area: queue; display: flex; flex-direction: column; }
  .efir .efir-list { flex: 1; }
  .efir .efir-set { grid-area: set; }
  .efir .efir-set .player-device { display: none; }
  .efir .efir-genrelist { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .efir .lamps { --lw: 80px; }
  .efir .efir-eyebrow { margin-top: 30px; }
  .efir .efir-title { font-size: 36px; }
  .efir .efir-progress { max-width: 451px; margin-top: 26px; }
  .efir .player-play { width: 120px; margin-top: 28px; }
  .efir .efir-panel__head { padding: 18px 20px 16px; }
  .efir .efir-panel__head h2 { font-size: 18px; line-height: 23px; }
  .efir .efir-hint, .efir .efir-row { padding-inline: 20px; }
  .efir .efir-sec { padding-inline: 20px; }
  .efir .efir-row { gap: 14px; }
  .efir .efir-set { padding-inline: 20px; }
}

/* Широкий экран: три колонки — жанры и громкость, эфир, очередь */
@media (min-width: 1280px) {
  .efir { padding: 0 40px 32px; }
  .efir .efir-top { margin: 0 -40px; padding: 0 40px; }
  .efir .efir-body {
    grid-template-columns: 320px minmax(0, 1fr) 440px; grid-template-rows: 1fr auto;
    grid-template-areas: "genres stage queue" "set stage queue";
  }
  .efir .efir-genres { align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .efir .efir-genres .efir-panel__head { align-items: flex-start; padding: 18px 20px 16px; border-bottom: 1px solid var(--line); }
  .efir .efir-genres .efir-panel__head h2 { color: var(--ink); font: 600 18px/23px "Onest", sans-serif; letter-spacing: -.3px; text-transform: none; }
  .efir .efir-genres .efir-panel__head p { display: block; }
  .efir .efir-genres .efir-panel__count { padding-top: 3px; }
  .efir .efir-genres__hint { display: none; }
  .efir .efir-genrelist { display: block; }
  .efir .efir-genrelist li + li { border-top: 1px solid var(--line); }
  .efir .efir-genre { width: 100%; height: 60px; gap: 14px; padding: 0 20px; border: 0; border-radius: 0; background: none; color: var(--ink); font: 500 16px/20px "Onest", sans-serif; text-align: left; }
  .efir .efir-genre:hover { background: #FFFFFF08; }
  .efir .efir-genre[aria-pressed="true"] { background: var(--glass); }
  .efir .efir-genre .efir-dot { display: block; }
  .efir .efir-genre__text { flex: 1; min-width: 0; gap: 3px; }
  .efir .efir-genre__text small { display: block; color: var(--faint); font: 400 12px/15px "Onest", sans-serif; }
  .efir .efir-genre[aria-pressed="true"] .efir-genre__text small { color: var(--muted); }
  .efir .efir-genre__go { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #F3EEE466; border-radius: 50%; color: var(--ink); }
  .efir .efir-genre__go svg { width: 10px; height: 10px; fill: currentColor; }
  .efir .efir-genre__go .icon-on, .efir .efir-genre[aria-pressed="true"] .efir-genre__go .icon-go { display: none; }
  .efir .efir-genre[aria-pressed="true"] .efir-genre__go { border-color: transparent; color: var(--glow); }
  .efir .efir-genre[aria-pressed="true"] .efir-genre__go .icon-on { display: block; width: 18px; height: 18px; }
  .efir .efir-set { align-self: end; }
  .efir .lamps { --lw: 96px; }
  .efir .efir-eyebrow { margin-top: 36px; }
  .efir .efir-title { font-size: 40px; letter-spacing: -.9px; }
  .efir .efir-sub { font-size: 15px; }
}