/* «Ефир»: одобреният изглед. Текстът ползва адаптивното мастило (--ink*):
   нощем слонова кост, денем тъмнозелен печат върху светлата трева.
   Самият екран не лови докосвания (камерата се влачи по платното);
   интерактивни са само .np и .play. */

#screen-efir{display:flex;flex-direction:column;justify-content:flex-end;
  padding-bottom:calc(env(safe-area-inset-bottom) + 78px);
  color:var(--ink);text-shadow:var(--text-glow)}
#screen-efir.on{pointer-events:none}

.bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.np{min-width:0;flex:1;pointer-events:auto}
.np-over{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px}
.np-over.live{color:var(--accent)}
.np-title{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,6.4vw,32px);line-height:1.13;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.np-artist{margin-top:7px;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-progress{margin-top:9px;display:flex;align-items:center;gap:10px;max-width:300px}
.np-bar{flex:1;height:2px;border-radius:1px;background:var(--ink-faint);overflow:hidden}
.np-bar i{display:block;height:100%;width:0;border-radius:1px;background:var(--ink);opacity:.85;
  transition:width 1s linear}
.np-progress span{flex:0 0 auto;font-size:10.5px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.np-listeners{margin-top:7px;font-family:var(--font-display);font-style:italic;font-size:13.5px;
  color:var(--ink-soft)}
.np-next{margin-top:4px;font-size:12px;color:var(--ink-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-next em{font-style:italic;font-family:var(--font-display)}
.np-status{margin-top:5px;font-size:12px;color:var(--ink-soft);min-height:15px;
  font-style:italic;font-family:var(--font-display)}
.np-title.swap{animation:titleIn .8s cubic-bezier(.2,.7,.3,1)}
@keyframes titleIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.play{pointer-events:auto;flex:0 0 auto;width:80px;height:80px;border-radius:50%;border:none;cursor:pointer;
  position:relative;
  background:radial-gradient(circle at 34% 28%, #fffef4, #efe7cb 78%);
  box-shadow:0 10px 32px rgba(15,32,12,.45), inset 0 -3px 8px rgba(120,110,70,.25), inset 0 2px 4px rgba(255,255,255,.9);
  display:grid;place-items:center;transition:transform .12s ease}
.play:active{transform:scale(.94)}
/* жарава-копче: огънят живее в плеъра; --ember идва от сцената кадър по кадър */
.play::before{content:'';position:absolute;inset:7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 60%, rgba(255,176,84,.95), rgba(245,128,40,.5) 45%, rgba(245,128,40,0) 72%);
  opacity:var(--ember,0)}
.play::after{content:'';position:absolute;inset:-16px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,170,80,.42), rgba(255,170,80,0) 70%);
  opacity:var(--ember,0)}
.play .ic-play,.play .ic-pause{position:relative;z-index:1}
.ic-play{width:0;height:0;border-left:24px solid var(--deep);
  border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.ic-pause{display:none;width:24px;height:28px;justify-content:space-between}
.ic-pause i{display:block;width:8px;height:100%;background:var(--deep);border-radius:2px}
.play.playing .ic-play{display:none}
.play.playing .ic-pause{display:flex}