@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#11110f;--muted:#77776e;--ink:#f4f1e8;--accent:#ff007f;--gradient-accent:linear-gradient(135deg, #ff007f, #00d4ff);font-family:'Space Grotesk',sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:radial-gradient(ellipse at 48% 42%,#24241d 0,#171714 36%,var(--bg) 74%);color:var(--ink)}

.player{position:relative;width:min(100%,480px);padding:25px 28px 22px;background:linear-gradient(145deg,rgba(31,31,26,.96),rgba(22,22,19,.98));border:1px solid #383830;border-radius:15px;box-shadow:0 28px 90px #0008,inset 0 1px #ffffff09;overflow:hidden}

/* Capa de fondo con desenfoque de la carátula */
.bg-cover-blur{position:absolute;inset:-40px;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(50px) brightness(0.35);opacity:0;transform:scale(1.2);transition:opacity 0.8s ease, background-image 0.8s ease;z-index:0;pointer-events:none}
.bg-cover-blur.has-image{opacity:1}

/* Capas superiores para asegurar visibilidad */
.topline,.now-playing,.visualizer,.controls{position:relative;z-index:1}

.topline{height:24px;display:flex;align-items:center;justify-content:space-between}
.wordmark{font:500 11px 'DM Mono',monospace;letter-spacing:.14em;color:#d8d5c9;text-decoration:none}
.wordmark span{background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.live,.viz-meta{display:flex;align-items:center;gap:8px;font:10px 'DM Mono',monospace;letter-spacing:.12em;color:#a7a79b}
.live-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg, #ff007f, #00d4ff);box-shadow:0 0 10px #00d4ff66}
.player.is-playing .live-dot{animation:pulse 1.8s infinite}

.now-playing{display:grid;grid-template-columns:154px 1fr;align-items:center;gap:24px;margin:35px 0 33px}
.artwork{width:154px;aspect-ratio:1;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(140deg,#3b3d2c,#1a1b15 65%,#10110e);border:1px solid #ffffff17;border-radius:5px;box-shadow:0 14px 30px #0005}
.artwork img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.art-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#e2e8bd;font:500 10px 'DM Mono',monospace;letter-spacing:.19em;text-align:center;line-height:1.5}
.placeholder-mark{font:42px Georgia,serif;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.art-grain{position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

.track-info{min-width:0}
.eyebrow{margin:0 0 10px;background:var(--gradient-accent);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font:10px 'DM Mono',monospace;letter-spacing:.16em}
.track-info h1{margin:0;color:#f4f1e8;font-size:clamp(21px,5vw,27px);font-weight:600;line-height:1.15;letter-spacing:-.045em;overflow-wrap:anywhere}
.track-artist{margin:9px 0 0;color:#99998e;font-size:13px;line-height:1.5}

.visualizer{position:relative;padding:0 0 10px}
.viz-meta{justify-content:space-between;color:#77776e;font-size:9px;letter-spacing:.14em}
.bars{height:76px;display:flex;align-items:center;justify-content:space-between;gap:3px;padding:10px 1px 4px}
.bar{width:100%;max-width:7px;height:0;min-height:0;border-radius:2px;background:var(--gradient-accent);opacity:0;transform-origin:center;transition:height .08s linear,opacity .1s}
.viz-baseline{height:1px;background:linear-gradient(90deg,transparent,#414137 12%,#414137 88%,transparent)}

.controls{display:flex;align-items:center;gap:14px;padding-top:20px}
.play-button{width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--gradient-accent);color:#ffffff;cursor:pointer;transition:transform .15s,opacity .15s}
.play-button:hover{transform:scale(1.05);opacity:.9}
.play-button:active{transform:scale(.97)}
.play-button svg{width:23px;height:23px;fill:currentColor}
.pause-icon,.player.is-playing .play-icon{display:none}
.player.is-playing .pause-icon{display:block}
.control-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}
.control-copy span:first-child{font-size:13px;font-weight:600}
.control-copy span:last-child{color:#77776e;font:9px 'DM Mono',monospace;letter-spacing:.12em}
.volume-control{display:flex;align-items:center;gap:9px;color:#9b9b8f}
.volume-control svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.volume-control input{width:67px;height:3px;accent-color:#00d4ff;cursor:pointer}

@keyframes pulse{50%{box-shadow:0 0 0 5px #00d4ff12,0 0 12px #00d4ff77}}

body{min-height:100vh;min-height:100svh;display:block;padding:0}
.player{width:100%;min-height:100vh;min-height:100svh;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;padding:clamp(22px,4vh,48px) clamp(20px,7vw,96px)}
.topline{flex:0 0 24px}
.now-playing{width:min(100%,1120px);flex:1;grid-template-columns:minmax(260px,38%) minmax(0,1fr);gap:clamp(36px,8vw,112px);margin:auto;align-content:center}
.artwork{width:100%;max-width:430px;justify-self:center}
.track-info h1{font-size:clamp(28px,4.2vw,54px);line-height:1.08;letter-spacing:-.035em}
.track-artist{font-size:clamp(15px,1.7vw,21px);margin-top:16px}
.eyebrow{font-size:11px;margin-bottom:18px}
.visualizer,.controls{width:min(100%,1120px);margin-left:auto;margin-right:auto}
.bars{height:clamp(76px,13vh,132px);gap:clamp(3px,.55vw,8px)}
.bar{max-width:12px}
.controls{flex:0 0 auto;padding-top:24px;padding-bottom:4px}

@media(max-width:700px){
  .player{padding:20px 22px max(22px,env(safe-area-inset-bottom))}
  .now-playing{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px;margin:22px auto;align-content:center}
  .artwork{width:min(62vw,36vh,320px)}
  .track-info{text-align:center;max-width:100%}
  .track-info h1{font-size:clamp(25px,6.5vw,38px)}
  .eyebrow{margin-bottom:11px}
  .track-artist{margin-top:9px;font-size:15px}
  .bars{height:clamp(62px,10vh,90px);gap:2px}
  .bar{max-width:7px}
  .controls{padding-top:18px}
}
@media(max-width:700px) and (max-height:620px){
  .player{padding-top:14px}
  .now-playing{grid-template-columns:minmax(150px,34vh) minmax(0,1fr);justify-items:stretch;gap:clamp(18px,5vw,40px);text-align:left;margin:12px auto}
  .artwork{width:100%;max-width:34vh}
  .track-info{text-align:left;align-self:center}
  .track-info h1{font-size:clamp(24px,5.2vh,36px)}
  .bars{height:54px}
  .controls{padding-top:12px}
}
@media(max-height:620px) and (min-width:701px){
  .player{padding-top:16px;padding-bottom:16px}
  .now-playing{grid-template-columns:minmax(180px,31vh) minmax(0,1fr);gap:clamp(24px,5vw,72px)}
  .artwork{width:100%;max-width:31vh}
  .eyebrow{margin-bottom:10px}
  .track-artist{margin-top:9px}
  .bars{height:64px}
  .controls{padding-top:14px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}