:root{
  color-scheme:dark;
  --bg:#020102;
  --panel:#0b0809;
  --red:#ef233c;
  --red2:#850015;
  --gold:#e7b852;
  --text:#fff8f8;
  --muted:#b8adaf;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#000;color:var(--text)}
body{
  background:
    radial-gradient(circle at 50% 18%,rgba(120,0,20,.22),transparent 27rem),
    radial-gradient(circle at 50% 58%,rgba(85,0,14,.12),transparent 34rem),
    #020102;
}
button,a{-webkit-tap-highlight-color:transparent}
.app{
  width:min(100%,760px);
  margin:0 auto;
  min-height:100vh;
  padding:max(16px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom));
}
.topbar{display:flex;justify-content:space-between;align-items:flex-start}
.brand-area{display:flex;flex-direction:column;align-items:center}
.brand-logo{
  width:116px;height:116px;border-radius:50%;object-fit:cover;
  border:2px solid #ff435a;
  box-shadow:0 0 0 6px rgba(239,35,60,.05),0 0 26px rgba(239,35,60,.42)
}
.live-badge{
  margin-top:14px;display:flex;align-items:center;gap:10px;
  padding:9px 13px;border-radius:13px;
  background:linear-gradient(180deg,rgba(145,0,22,.44),rgba(77,0,12,.24));
  font-weight:900;font-size:1.03rem;box-shadow:0 0 18px rgba(239,35,60,.16)
}
.live-dot{
  width:17px;height:17px;border-radius:50%;background:#ff4861;
  box-shadow:0 0 10px #ff4861,0 0 24px #ff4861;
  animation:blink 1.08s ease-in-out infinite
}
@keyframes blink{
  0%,100%{opacity:.22;transform:scale(.84);box-shadow:0 0 3px #ff4861}
  45%{opacity:1;transform:scale(1.08);box-shadow:0 0 11px #ff4861,0 0 30px #ff4861}
}
.share-btn{
  width:56px;height:56px;border-radius:50%;border:1px solid rgba(231,184,82,.8);
  background:#0b0909;color:var(--gold);font-size:1.65rem;cursor:pointer
}

/* 100/100 hero */
.hero{
  margin:12px auto 18px;
  display:grid;
  grid-template-columns:minmax(48px,1fr) minmax(250px,430px) minmax(48px,1fr);
  align-items:center;gap:8px
}
.media-stage{
  position:relative;
  min-height:330px;
  display:grid;place-items:center;
}
.cover-art{width:100%;height:100%;object-fit:cover;display:block;transition:.38s ease}
.cover-art.changing{opacity:.28;transform:scale(.985)}


/* LP saliendo desde dentro de la carátula */
.sleeve-scene{
  position:relative;
  width:min(74vw,390px);
  aspect-ratio:1.22;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.cover-wrap{
  width:min(62vw,320px);
  aspect-ratio:1;
  position:relative;
  z-index:3;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,89,68,.74);
  background:#16080b;
  box-shadow:
    0 24px 54px rgba(0,0,0,.58),
    0 0 28px rgba(190,24,34,.18);
}

.vinyl-disc{
  position:absolute;
  z-index:2;
  width:min(61vw,315px);
  aspect-ratio:1;
  left:42%;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,95,110,.72);
  background:
    radial-gradient(circle at center,
      #060606 0 2.2%,
      #a60b25 2.4% 14.5%,
      #5d000d 14.8% 17%,
      #0a0a0a 17.2% 20%,
      #2b2b2b 20.4% 20.9%,
      #070707 21.2% 23%,
      #303030 23.4% 23.9%,
      #060606 24.2% 26%,
      #333 26.4% 26.9%,
      #050505 27.2% 29%,
      #363636 29.4% 29.9%,
      #040404 30.2% 32%,
      #393939 32.4% 32.9%,
      #030303 33.2% 35%,
      #3c3c3c 35.4% 35.9%,
      #020202 36.2% 38%,
      #404040 38.4% 38.9%,
      #010101 39.2% 41%,
      #444 41.4% 41.9%,
      #000 42.2% 44%,
      #474747 44.4% 44.9%,
      #000 45.2% 47%,
      #4a4a4a 47.4% 47.9%,
      #000 48.2% 50%,
      #4d4d4d 50.4% 50.9%,
      #000 51.2% 53%,
      #505050 53.4% 53.9%,
      #000 54.2% 56%,
      #535353 56.4% 56.9%,
      #000 57.2% 59%,
      #565656 59.4% 59.9%,
      #000 60.2% 62%,
      #595959 62.4% 62.9%,
      #000 63.2% 65%,
      #5c5c5c 65.4% 65.9%,
      #000 66.2% 68%,
      #606060 68.4% 68.9%,
      #000 69.2% 71%,
      #646464 71.4% 71.9%,
      #000 72.2% 74%,
      #686868 74.4% 74.9%,
      #000 75.2% 77%,
      #6c6c6c 77.4% 77.9%,
      #000 78.2% 80%,
      #707070 80.4% 80.9%,
      #000 81.2% 83%,
      #747474 83.4% 83.9%,
      #000 84.2% 86%,
      #787878 86.4% 86.9%,
      #000 87.2% 89%,
      #7c7c7c 89.4% 89.9%,
      #000 90.2% 100%
    );
  box-shadow:
    inset -42px 0 74px rgba(255,255,255,.13),
    inset 22px 0 38px rgba(0,0,0,.78),
    0 16px 44px rgba(0,0,0,.72);
}

.vinyl-disc::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(118deg,
      transparent 0 36%,
      rgba(255,255,255,.17) 42%,
      rgba(255,255,255,.03) 47%,
      transparent 54% 100%);
  mix-blend-mode:screen;
}

.vinyl-disc::after{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:
    0 0 0 18px rgba(255,255,255,.024),
    0 0 0 36px rgba(255,255,255,.020),
    0 0 0 54px rgba(255,255,255,.016),
    0 0 0 72px rgba(255,255,255,.012);
}

.vinyl-label{
  position:absolute;
  inset:30%;
  border-radius:50%;
  background:
    radial-gradient(circle,
      #080808 0 10%,
      #c50c2f 11% 67%,
      #6f0011 68% 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 2px rgba(0,0,0,.35);
  z-index:2;
}

.vinyl-hole{
  position:absolute;
  width:18px;
  height:18px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#020202;
  border:2px solid #d6d6d6;
  z-index:3;
}

.vinyl-shine{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 70% 30%,rgba(255,255,255,.14),transparent 14%),
    radial-gradient(circle at 35% 72%,rgba(255,255,255,.06),transparent 22%);
  mix-blend-mode:screen;
  z-index:1;
}

/* LED equalizers */

.led-eq{
  height:205px;display:flex;justify-content:center;align-items:flex-end;gap:5px
}
.led-eq i{
  width:8px;min-height:18px;border-radius:2px;
  background:
    repeating-linear-gradient(to top,
      #ff334d 0 6px,
      #ff334d 6px 8px,
      transparent 8px 11px);
  box-shadow:0 0 8px rgba(239,35,60,.34);
  animation:led 1.05s ease-in-out infinite alternate;
  transform-origin:bottom
}
.led-eq i:nth-child(1){height:28%;animation-duration:.9s}
.led-eq i:nth-child(2){height:48%;animation-duration:1.2s}
.led-eq i:nth-child(3){height:74%;animation-duration:.82s}
.led-eq i:nth-child(4){height:92%;animation-duration:1.35s}
.led-eq i:nth-child(5){height:62%;animation-duration:1s}
.led-eq i:nth-child(6){height:84%;animation-duration:.74s}
.led-eq i:nth-child(7){height:53%;animation-duration:1.28s}
.led-eq i:nth-child(8){height:34%;animation-duration:.95s}
.led-right{transform:scaleX(-1)}
@keyframes led{
  from{opacity:.55;transform:scaleY(.65)}
  to{opacity:1;transform:scaleY(1)}
}

.track-info{text-align:center}
.now-playing{
  display:flex;justify-content:center;align-items:center;gap:14px;
  color:var(--red);font-weight:900;letter-spacing:.06em;font-size:1rem
}
.now-playing span{font-size:1.35rem;animation:pulseWave .9s infinite alternate}
@keyframes pulseWave{from{opacity:.35;transform:scaleY(.7)}to{opacity:1;transform:scaleY(1.15)}}
h1{font-size:clamp(2.15rem,7vw,3.65rem);line-height:1.02;margin:15px 0 7px}
#trackArtist{font-size:clamp(1.3rem,4vw,1.9rem);margin:0;color:var(--gold)}

.album-row{
  width:min(100%,520px);margin:22px auto 4px;
  display:flex;justify-content:center;align-items:center;gap:18px
}
.cd-icon{
  flex:0 0 auto;width:84px;height:84px;border-radius:50%;position:relative;
  background:
    conic-gradient(from 20deg,
      #fff2a8,#d7f2ff,#ffe47a,#f6a8c8,#b8efff,#fff3b0,#d8d8d8,#fff2a8);
  border:2px solid #ff5d72;
  box-shadow:0 0 20px rgba(239,35,60,.34)
}
.cd-icon::before{
  content:"";position:absolute;inset:10px;border-radius:50%;
  border:1px solid rgba(0,0,0,.28);
  box-shadow:inset 0 0 0 7px rgba(255,255,255,.08),inset 0 0 0 14px rgba(0,0,0,.05)
}
.cd-center{
  position:absolute;width:30px;height:30px;left:50%;top:50%;transform:translate(-50%,-50%);
  border-radius:50%;background:#121212;border:2px solid #f4f4f4;
  box-shadow:inset 0 0 0 6px #050505
}
.album-copy{text-align:left;display:flex;flex-direction:column;gap:5px}
.album-copy small{color:var(--gold);font-size:.9rem;letter-spacing:.14em}
#albumName{font-size:clamp(1.05rem,3.4vw,1.45rem);color:#f7eeee}

.play-btn{
  width:116px;height:116px;display:block;margin:28px auto 0;border-radius:50%;
  border:2px solid #ff6878;color:#fff;
  background:linear-gradient(145deg,#b61931,#6b000f);
  font-size:2.65rem;cursor:pointer;
  box-shadow:0 0 28px rgba(239,35,60,.44),inset 0 1px 0 rgba(255,255,255,.25)
}
.play-btn:active{transform:scale(.97)}
/* Estado inicial: listo para escuchar */
.play-btn.ready{
  background:linear-gradient(145deg,#b61931,#6b000f);
  border-color:#ff6678;
  color:#ffffff;
  box-shadow:
    0 0 28px rgba(239,35,60,.44),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Transmitiendo en vivo */
.play-btn.live{
  background:linear-gradient(145deg,#0f8f4f,#045f31);
  border-color:#22ff88;
  color:#ffffff;
  box-shadow:
    0 0 30px rgba(34,255,136,.55),
    inset 0 1px 0 rgba(255,255,255,.28);
}

/* Transmisión pausada */
.play-btn.paused{
  background:linear-gradient(145deg,#d4a400,#8b6500);
  border-color:#ffd54d;
  color:#111111;
  box-shadow:
    0 0 28px rgba(255,213,77,.48),
    inset 0 1px 0 rgba(255,255,255,.30);
}
.status{
  width:fit-content;
  max-width:calc(100% - 24px);
  margin:18px auto;
  padding:10px 18px;
  border:1px solid currentColor;
  border-radius:999px;

  text-align:center;
  font-size:clamp(1rem,3vw,1.35rem);
  font-weight:900;
  letter-spacing:.04em;

  color:#ff334f;
  background:rgba(255,51,79,.08);
  box-shadow:0 0 20px rgba(255,51,79,.24);

  animation:statusBreathe 1.6s ease-in-out infinite;
}

.status{
    width:fit-content;
    max-width:calc(100% - 24px);
    margin:18px auto;
    padding:10px 18px;

    border:2px solid currentColor;
    border-radius:999px;

    text-align:center;
    font-size:clamp(1rem,3vw,1.35rem);
    font-weight:900;
    letter-spacing:.05em;

    color:#ff334f;
    background:rgba(255,51,79,.08);

    animation:statusPulse 1.1s ease-in-out infinite;
}

/* Estado inicial */
.status.ready{
    color:#ff334f;
    border-color:#ff334f;
    background:rgba(255,51,79,.08);
    box-shadow:0 0 20px rgba(255,51,79,.30);
}

/* Transmitiendo */
.status.live{
    color:#22ff88;
    border-color:#22ff88;
    background:rgba(34,255,136,.08);
    box-shadow:0 0 24px rgba(34,255,136,.45);
}

/* Pausado */
.status.paused{
    color:#ffd54d;
    border-color:#ffd54d;
    background:rgba(255,213,77,.08);
    box-shadow:0 0 24px rgba(255,213,77,.45);
}


@keyframes statusPulse{

    0%{
        transform:scale(1);
        opacity:.88;
    }

    50%{
        transform:scale(1.04);
        opacity:1;
    }

    100%{
        transform:scale(1);
        opacity:.88;
    }

}

.bottom-actions{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:rgba(15,12,13,.94);border:1px solid rgba(231,184,82,.22);
  border-radius:28px;padding:16px 8px;margin-top:6px
}
.action{
  border:0;background:transparent;color:#fff;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer
}
.action span{font-size:2rem;color:var(--gold)}
.action small{font-size:.8rem;color:#f1e9ea}
.action.active span{color:var(--red)}
footer{text-align:center;padding:20px 0 0;display:flex;flex-direction:column;gap:8px}
footer strong{font-size:1rem;letter-spacing:.1em;color:var(--gold)}
footer span{color:var(--gold);font-style:italic;font-size:.8rem;letter-spacing:.08em}

dialog{
  border:1px solid rgba(239,35,60,.5);border-radius:22px;background:#130d0f;color:#fff;
  padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.7)
}
dialog::backdrop{background:rgba(0,0,0,.72)}
.timer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.timer-grid button{padding:12px;border-radius:12px;border:1px solid #6d2430;background:#1a1013;color:#fff}

@media(max-width:620px){

  .sleeve-scene{width:min(86vw,360px)}
  .cover-wrap{width:min(58vw,270px);border-radius:21px}
  .vinyl-disc{width:min(60vw,282px);left:40%}

  .brand-logo{width:92px;height:92px}
  .live-badge{font-size:.94rem;padding:8px 11px}
  .share-btn{width:48px;height:48px}
  .hero{grid-template-columns:48px minmax(220px,1fr) 48px;gap:4px;margin-top:8px}
  .media-stage{min-height:310px}
  .cover-wrap{width:min(64vw,300px);border-radius:21px}
  .led-eq{height:175px;gap:3px}
  .led-eq i{width:6px}
  .cd-icon{width:68px;height:68px}
  .play-btn{width:96px;height:96px}
  .bottom-actions{border-radius:22px;padding:14px 3px}
  .action small{font-size:.69rem}
}