.crt-display{
  position:relative;height:126px;padding:10px 14px 11px 16px;overflow:hidden;border-radius:7px;
  color:var(--green);font-family:'Courier New',monospace;
  background:
    radial-gradient(circle at 35% 18%,rgba(115,255,126,.20),transparent 45%),
    linear-gradient(180deg,#05230b 0%,#021106 58%,#010602 100%);
  border:2px solid #021f06;
  box-shadow:inset 0 0 32px #000,inset 0 0 16px rgba(99,255,115,.12),0 0 0 2px #3d3d3d,0 0 15px rgba(99,255,115,.10);
}
.crt-display:before{content:"";position:absolute;inset:6px;border:1px solid rgba(99,255,115,.16);border-radius:5px;box-shadow:inset 0 0 16px rgba(99,255,115,.07);pointer-events:none}.display-topline{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:4px;font-weight:900;letter-spacing:.05em;text-shadow:0 0 8px rgba(99,255,115,.75)}.display-topline strong{font-size:10px;color:#a8ffad;font-weight:700}.artist-label,.title-label{font-size:9px;line-height:1;color:#7bff84;opacity:.84;letter-spacing:.12em;margin-top:2px}.artist-line{font-size:16px;line-height:1.13;margin-top:2px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 72px);color:#95ff9b;text-shadow:0 0 8px rgba(99,255,115,.55)}.song-marquee{font-size:17px;line-height:1.14;white-space:nowrap;overflow:hidden;text-shadow:0 0 8px rgba(99,255,115,.68);max-width:calc(100% - 72px);min-height:20px;margin-top:2px;font-weight:800}.song-marquee span{display:inline-block;min-width:100%;will-change:transform}.song-marquee.is-long span{animation:marquee 13s linear infinite}.display-footer{display:flex;gap:8px;align-items:center;margin-top:7px;font-size:10px}.pill{border:1px solid #188f2d;border-radius:5px;padding:2px 7px;background:rgba(17,87,26,.28);box-shadow:0 0 8px rgba(99,255,115,.16)}.meta-state{opacity:.82;display:inline-block;max-width:132px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lcd-bars{position:absolute;right:12px;bottom:13px;display:flex;align-items:flex-end;gap:3px;height:34px}.lcd-bars i{width:6px;border-radius:1px 1px 0 0;background:linear-gradient(#b9ffbd,#3aff4f);box-shadow:0 0 8px rgba(99,255,115,.72)}.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);pointer-events:none;mix-blend-mode:screen}.scanlines:after{content:"";position:absolute;inset:-30% 0;background:linear-gradient(180deg,transparent,rgba(255,255,255,.06),transparent);animation:crtSweep 4.8s linear infinite}@keyframes marquee{0%,16%{transform:translateX(0)}100%{transform:translateX(calc(-100% + 210px))}}@keyframes crtSweep{0%{transform:translateY(-60%)}100%{transform:translateY(60%)}}.cover-frame{position:relative;overflow:hidden}.cover-frame:after{content:"";position:absolute;inset:0;border-radius:4px;background:linear-gradient(120deg,rgba(255,255,255,.28),transparent 32%,transparent 70%,rgba(255,255,255,.08));pointer-events:none}.cover-art{transition:opacity .28s ease, filter .28s ease, transform .28s ease}.cover-art.is-loading{opacity:.30;filter:blur(1.2px);transform:scale(.985)}

/* =========================================================
   SRK FINAL: display CRT premium, cover glass y ticker refinado
   ========================================================= */
.crt-display{
  background:
    linear-gradient(110deg,rgba(255,255,255,.08),transparent 25%,transparent 66%,rgba(255,255,255,.04)),
    radial-gradient(circle at 34% 16%,rgba(148,255,155,.24),transparent 44%),
    linear-gradient(180deg,#06280c 0%,#021307 58%,#010501 100%);
  box-shadow:
    inset 0 0 34px #000,
    inset 0 0 16px rgba(99,255,115,.16),
    0 0 0 2px #3d3d3d,
    0 0 16px rgba(99,255,115,.13),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.crt-display::after{
  content:"";position:absolute;left:12px;right:12px;top:7px;height:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.025),transparent);
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;
}
.display-topline span::before{
  content:"● ";color:#ff3a32;text-shadow:0 0 9px #ff3028;animation:onAirPulse 1.55s ease-in-out infinite;
}
.artist-line,.song-marquee{
  letter-spacing:.01em;
  text-shadow:0 0 7px rgba(99,255,115,.75),0 0 14px rgba(99,255,115,.20);
}
.song-marquee.is-long span{animation:marquee 12.5s linear infinite;}
.meta-state{color:#bdffc2;}
.cover-frame{
  background:
    linear-gradient(135deg,rgba(255,255,255,.18),transparent 30%,rgba(0,0,0,.34)),
    linear-gradient(180deg,#171717,#050505);
}
.cover-art{will-change:opacity,filter,transform;}
.cover-art.cover-fade-out{opacity:.12;filter:blur(1.8px) saturate(.65);transform:scale(.97)}
@keyframes onAirPulse{0%,100%{opacity:.72;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.45)}}
@media (prefers-reduced-motion:reduce){.display-topline span::before,.song-marquee.is-long span{animation:none!important}}


/* =========================================================
   SRK v3.1: marquesina completa para artista y canción
   ========================================================= */
.artist-line,
.song-marquee{
  position:relative;
  overflow:hidden;
  max-width:calc(100% - 72px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 18px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 18px),transparent 100%);
}
.artist-line span,
.song-marquee span{
  display:inline-block;
  white-space:nowrap;
  min-width:max-content;
  padding-right:42px;
  will-change:transform;
}
.artist-line.is-long span,
.song-marquee.is-long span{
  animation:pipolTextCrawler var(--crawl-time, 14s) linear infinite;
}
.artist-line:hover span,
.song-marquee:hover span{animation-play-state:paused;}
@keyframes pipolTextCrawler{
  0%,12%{transform:translateX(100%)}
  88%,100%{transform:translateX(calc(-100% - 20px))}
}

/* Carátula ampliable al pasar el mouse o al hacer focus/click táctil */
.cover-module{overflow:visible;z-index:12;}
.cover-frame{
  transform-origin:left center;
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  cursor:zoom-in;
}
.cover-frame:hover,
.cover-frame:focus,
.cover-frame.is-cover-expanded{
  transform:scale(2);
  z-index:100;
  box-shadow:inset 0 0 12px #000,0 0 0 1px #000,0 12px 34px rgba(0,0,0,.78),0 0 26px rgba(255,133,0,.45) !important;
  filter:saturate(1.07) contrast(1.04);
}
.cover-frame:hover .cover-art,
.cover-frame:focus .cover-art,
.cover-frame.is-cover-expanded .cover-art{border-radius:4px;}
@media (prefers-reduced-motion:reduce){.artist-line.is-long span,.song-marquee.is-long span{animation:none!important}.cover-frame{transition:none!important}}
