@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

:root{
  --bg:#0f0f10;
  --panel:#0b0b0c;
  /* title text color used consistently for the main headline and controls */
  --title-color: #ffffff;
  /* switch accent from vivid red to teal so title and "Escuchando a" use teal */
  --accent:#00a090; /* teal accent */
  --muted:#9aa0a6;
  --glass: rgba(255,255,255,0.04);
  --soft-glow: 0 8px 30px rgba(0,160,144,0.12);
  --vol-fill-color: var(--speaker-fill); /* use speaker tint for the volume filled track */

  /* speaker tint variables (updated from JS) */
  --speaker-fill: rgba(0,160,144,0.18);
  --speaker-stroke: rgba(0,160,144,0.12);

  /* dynamic title gradient derived from album art (set by JS) */
  --title-gradient: linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
}

/* Top neomorphic title bar */
.title-neo{
  position:fixed;
  top: env(safe-area-inset-top, 12px);
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px; /* space between title and vinyl */
  padding:10px 18px;
  border-radius:14px;
  /* Make the title panel transparent so underlying background shows through,
     but keep a subtle elevated shadow for separation and legibility */
  background: transparent;
  color: var(--accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 4px 14px rgba(0,160,144,0.06);
  border: 1px solid rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(120%);
  min-width:220px;
  max-width:85%;
  pointer-events:auto;
}
.title-neo .title-inner{
  /* bold, contemporary headline rendered in white with a luminous effect */
  font-family: "Poppins", Inter, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(20px, 5.2vw, 56px);
  line-height: 1;
  color: var(--title-color);

  /* subtle metallic edge + soft outer glow to create an "efecto" (shine) */
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.25);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.06),    /* tiny top highlight */
    0 6px 18px rgba(0,0,0,0.65),       /* deep shadow for contrast */
    0 10px 30px rgba(0,160,144,0.08),  /* soft colored halo tied to accent */
    0 2px 8px rgba(255,255,255,0.06);  /* gentle luminous sheen */

  /* keep crisp rendering and smooth transitions */
  position: relative;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition: transform 220ms ease, opacity 220ms ease, text-shadow 300ms ease;
  transform-origin: left center;
}

/* Strike line through the title with a glowing light/marker at the end */
.title-neo .title-inner .strike-line{
  position:relative;
  display:inline-block;
  padding: 0 10px; /* a bit more horizontal padding to balance larger marker */
  line-height:1;
  /* keep the text above the decorative line */
  z-index: 2;
}

/* horizontal line running through the vertical middle of the title text (removed per request) */
.title-neo .title-inner .strike-line::after{
  /* line intentionally disabled */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  transform: translateY(-50%);
  background: none;
  opacity: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 0;
  pointer-events: none;
}

/* moved glowing 'light' marker to sit above the letter "I" in MUSICA */
.title-neo .title-inner .strike-line::before{
  /* remove the old inline orb at end-of-line: keep an empty pseudo to avoid layout shifts */
  content: '';
  position: absolute;
  right: 40px;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

/* target the wrapped "I" and place the glowing orb above it */
.title-neo .title-inner .dot-i{
  position: relative;
  display: inline-block;
  line-height: 1;
  /* ensure the I's width is at least minimal for reliable positioning */
  padding: 0 2px;
}

.title-neo .title-inner .dot-i::after{
  /* glowing marker removed */
  display: none !important;
}

/* gentle pulsing for the light marker */
@keyframes strikeLightPulse{
  0% { transform: translateY(-50%) scale(1.00); opacity: 0.96; filter: drop-shadow(0 0 6px rgba(0,255,200,0.12)); }
  50% { transform: translateY(-50%) scale(1.06); opacity: 1; filter: drop-shadow(0 0 18px rgba(0,255,200,0.22)); }
  100% { transform: translateY(-50%) scale(1.00); opacity: 0.96; filter: drop-shadow(0 0 6px rgba(0,255,200,0.12)); }
}

/* subtle warm highlight behind the title */
.title-neo .title-inner::after{
  content: '';
  position: absolute;
  left: -8%;
  top: -12%;
  width: 116%;
  height: 120%;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(600px 120px at 10% 10%, rgba(255,120,60,0.14), rgba(255,40,40,0.06) 30%, transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
  filter: blur(6px) saturate(1.02);
  border-radius: 6px;
}

/* simplified shadow layer for subtle depth */
.title-neo .title-inner::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  transform-origin: left center;
  z-index: -1;
  color: rgba(0,0,0,0.32);
  transform: translate(4px, 6px) skewX(0deg) scale(1);
  opacity: 0.85;
  filter: blur(6px) saturate(0.98);
}

/* pseudo-elements to create an extruded solid edge that scales with the title */
.title-neo .title-inner::before,
.title-neo .title-inner::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  -webkit-text-stroke: 0;
  pointer-events: none;
  transform-origin: left center;
  z-index: -1;
  filter: blur(0.6px);
}

/* darker thin layer offset for base depth — strong solid extrusion to read as a 3D face */
.title-neo .title-inner::before{
  /* use a deep teal/green for the extrusion face so it reads as a solid 3D side */
  color: rgba(2,80,70,0.98);
  /* multiple-step offset to create a chunky extrude effect (visual 3D) */
  transform: translate(6px, 6px) skewX(-6deg) scale(1);
  clip-path: inset(0 0 0 0);
  opacity: 0.98;
  /* make this layer slightly darker and crisp */
  filter: blur(0.4px) saturate(1.02);
}

/* softer larger layer for ambient shadow and highlight */
.title-neo .title-inner::after{
  color: rgba(0,0,0,0.14);
  /* further offset creates an ambient shadow behind the solid extrude */
  transform: translate(12px, 12px) skewX(-6deg) scale(1.02);
  opacity: 0.9;
  filter: blur(1.2px);
}

/* Slightly reduce extrusion on small screens for clarity */
@media (max-width:560px){
  .title-neo .title-inner{
    text-shadow:
      0 1px 0 rgba(255,255,255,0.03),
      0 2px 0 rgba(0,0,0,0.14),
      0 4px 6px rgba(0,0,0,0.36);
  }
  .title-neo .title-inner::before{ transform: translate(2px,2px) skewX(-4deg); color: rgba(0,0,0,0.26); }
  .title-neo .title-inner::after{ transform: translate(5px,5px) skewX(-4deg) scale(1.01); color: rgba(0,0,0,0.10); }
}

/* Add a glossy top sheen to enhance the 3D effect */


/* logo (circular) and moved title to the right of the logo */
.title-vinyl{
  display:flex;
  align-items:center;
  justify-content:center;
  width:84px;
  height:84px;
  opacity:1;
  transition: transform 220ms ease, opacity 220ms ease;
  pointer-events:none;
  z-index:8;
  background: transparent;
  border: none;
  box-shadow: none;
  filter: none;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  flex: 0 0 auto;
}

/* ensure the logo image fills the title-vinyl container and keeps contrast */
.title-vinyl img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:50%;
  filter: contrast(1.03) saturate(1.02);
  opacity:1;
  transition: filter 260ms cubic-bezier(.2,.9,.3,1), opacity 220ms ease;
}

/* Title text positioned to the right of the logo inside the same header */
.title-text-right{
  font-family: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  /* use a dynamic gradient (set via --title-gradient) clipped into the text */
  color: transparent;
  background-image: var(--title-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  /* increased size to make title more prominent next to the logo */
  font-size: clamp(20px, 5.2vw, 48px);
  margin-left:16px;
  align-self:center;
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  pointer-events:auto;
  z-index:9;
  transition: background-image 520ms cubic-bezier(.2,.9,.3,1), transform 220ms ease, opacity 220ms ease;
}

/* Slightly scale down on small screens and keep spacing */
@media (max-width:560px){
  .title-vinyl{ width:48px; height:48px; }
  .title-text-right{ font-size:18px; margin-left:8px; }
}

/* slightly larger vinyl on wide screens */


/* compact layout for small screens: move vinyl next to title but scale down */
@media (max-width:560px){
  .title-vinyl{ width:48px; height:48px; opacity:0.98; transform: translateY(0) scale(1.0); }
  .title-neo{ padding:10px 14px; gap:8px; }
  .title-neo .title-inner{ font-size:27px; }
}

/* slightly larger on desktop */


/* larger title box on very wide screens */


/* compress for very small screens while respecting safe area */
@media (max-width:560px){
  .title-neo{ left:12px; transform: none; right:12px; top: env(safe-area-inset-top, 8px); display:flex; justify-content:flex-start; padding:10px 14px; }
  .title-neo .title-inner{ font-size:32.4px; }
}

/* keep space for title so content doesn't overlap accidentally */
#player{ padding-top: calc(64px + env(safe-area-inset-top, 0px)); }

/* reset & layout */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#app{height:100%}
body{
  /* use the provided photographic asset as a fullscreen backdrop with a subtle dark overlay for legibility */
  background:
    linear-gradient(rgba(6,6,8,0.56), rgba(12,12,14,0.64)),
    url("https://i.imgur.com/Be0awLz.jpeg") center center / cover no-repeat;
  color:#fff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: env(safe-area-inset);
  background-attachment: fixed;
  position:relative;
  overflow:hidden;
}

/* Neumorphism frame around the wallpaper: subtle rounded panel with outer and inset shadows */
body::before{
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 18px; /* distance from viewport edges, adapts to safe-area via padding on #player */
  border-radius: 20px;
  /* keep the soft overlay but add a subtle blurred backdrop to reduce background detail (approx ~50% softening) */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow:
    /* soft outer lift */
    18px 18px 40px rgba(4,4,6,0.65),
    -12px -12px 30px rgba(255,255,255,0.03),
    /* subtle inner bevel to suggest depth */
    inset 6px 6px 20px rgba(0,0,0,0.45),
    inset -4px -4px 12px rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  z-index: 0;
  transition: box-shadow 220ms ease, transform 220ms ease;
  /* increase blur to de-emphasize the wallpaper (approx. 50% visual softening) */
  backdrop-filter: blur(2.56px) saturate(120%);
  /* apply an extra filter to produce the blur even when backdrop-filter has limited support */
  -webkit-filter: blur(2.56px);
  filter: blur(2.56px);
}

/* ensure page content sits above the frame */
#app, #player{
  position: relative;
  z-index: 1;
}

/* main player fills viewport */
#player{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  padding:24px;
  position:relative;
  overflow:hidden;
}

/* metadata / cover */
#meta{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:1210px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:13px 18px;
  border-radius:14px;
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: var(--soft-glow), 0 6px 18px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.03);
  min-height:101px;
  align-items:center;
}

/* framed cover */
#cover-frame{
  flex:0 0 155px;
  width:155px;
  height:155px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  padding:10px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 14px 38px rgba(0,0,0,0.62), 0 3px 10px rgba(255,40,40,0.09);
}

/* cover image inside the frame */
#cover{
  width:135px;
  height:135px;
  object-fit:cover;
  border-radius:11px;
  background:linear-gradient(180deg,#222,#111);
  display:block;
  border:1px solid rgba(255,255,255,0.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
#text{display:flex;flex-direction:column;overflow:hidden;min-width:0}
#station{
  font-weight:700;
  color:#281C59;
  font-size:20px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  /* white outline for clearer reading */
  -webkit-text-stroke: 1px #ffffff;
  text-stroke: 1px #ffffff; /* non-standard fallback */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.35), /* subtle inner shadow for depth */
    0 2px 6px rgba(40,28,89,0.06); /* soft glow tied to text color */
}
#song{
  margin-top:6px;
  font-size:15px;
  color:#e9e9e9;
  /* use the Poppins headline family for clarity and visual consistency */
  font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;

  /* show full titles: allow wrapping, preserve layout and avoid overflow */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* visualizer canvas */
#viz{
  width:100%;
  height:36vh;
  max-height:540px;
  background:transparent;
  display:block;
  min-height:120px;
}

/* controls */
#controls{
  width:100%;
  max-width:1100px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  /* Darkened control panel for stronger contrast behind the play area */
  background: linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.75));
  border-radius:10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
#play{
  width:72px;
  height:56px;
  border-radius:10px;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:72px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;

  /* Use the Monoton texture & bold treatment like the title */
  font-family: "Monoton", "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--title-color);
  -webkit-text-stroke: 0.9px rgba(255,255,255,0.06);
  text-shadow:
    0 2px 0 rgba(0,0,0,0.7),
    0 8px 26px rgba(255,40,40,0.26),
    0 3px 12px rgba(255,100,100,0.14);
  mix-blend-mode: screen;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* Darkened play button surface for stronger contrast and visibility */
  background: linear-gradient(180deg, rgba(6,6,8,0.72), rgba(10,10,12,0.86));
  box-shadow: none;
  border: 1px solid rgba(255,255,255,0.03);
  padding: 6px 10px;

  /* smooth transitions for hover/focus interactions */
  transition: transform 180ms cubic-bezier(.2,.9,.3,1), filter 180ms ease;
}

/* Hover and focus state: subtle lift, scale and warm glow for pointer interaction and keyboard focus */
#play:hover,
#play:focus {
  transform: translateY(-4px) scale(1.04);
  box-shadow: none;
  filter: brightness(1.03) saturate(1.06);
  outline: none;
}

/* Accessible focus-visible style for keyboard users */
#play:focus-visible {
  box-shadow: none;
}

/* pressed/active still gives a tactile feedback */
#play:active{
  transform: translateY(2px) scale(0.99);
  box-shadow: none;
}

#play.pressed {
  animation: pressPulse 420ms cubic-bezier(.2,.9,.3,1);
}
@keyframes pressPulse{
  0% { transform: translateY(0) scale(1); box-shadow: 0 6px 18px rgba(255,59,48,0.16); }
  30% { transform: translateY(2px) scale(0.985); box-shadow: 0 4px 12px rgba(239,108,53,0.12); }
  60% { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 28px rgba(255,59,48,0.14); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 6px 18px rgba(239,108,53,0.16); }
}

#play.paused{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--title-color)}
/* volume slider: sized and styled with accented filled track and subtle rail */
#volume{
  flex:1;
  height:28px;
  min-width:90px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0 8px;
}

/* WebKit: filled track + rail */
#volume::-webkit-slider-runnable-track{
  height:8px;
  border-radius:999px;
  /* use dedicated blue fill for the filled portion while keeping the unfilled rail subtle */
  background: linear-gradient(90deg, var(--vol-fill-color) 0%, var(--vol-fill-color) 50%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.06) 100%);
  background-size: calc(var(--_pct, 100%)) 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

/* WebKit thumb */
#volume::-webkit-slider-thumb{
  -webkit-appearance: none;
  width:18px;
  height:18px;
  border-radius:50%;
  background: transparent;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  margin-top: -5px; /* center the thumb vertically (track is 8px) */
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Hover/focus thumb interaction */
#volume:hover::-webkit-slider-thumb,
#volume:focus::-webkit-slider-thumb{
  transform: scale(1.06);
  box-shadow: 0 10px 26px rgba(0,0,0,0.6), 0 6px 18px rgba(255,59,48,0.12);
}

/* Firefox: track and thumb */
#volume::-moz-range-track{
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
}
#volume::-moz-range-progress{
  height:8px;
  border-radius:999px;
  /* firefox filled portion uses the same intense blue */
  background: var(--vol-fill-color);
  border: none;
}

/* Firefox thumb */
#volume::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background: transparent;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}

/* Edge/IE fallback using input background and CSS variable to emulate filled portion */
/* JS will update --_pct on the slider to sync visual fill; provide graceful default */
#volume{ --_pct: 100%; }

/* volume percent label to the right of the slider (touch-friendly, small) */
#volumePercent{
  min-width:48px;
  padding:6px 8px;
  margin-left:8px;
  border-radius:8px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-weight:700;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width:560px){
  #volumePercent{ font-size:12px; min-width:44px; padding:6px 6px; margin-left:6px; }
}

/* small screens: more touchable */
@media (max-width:560px){
  #volume{ height:36px; }
  #volume::-webkit-slider-thumb{ width:20px; height:20px; margin-top:-7px; }
  #volume::-moz-range-thumb{ width:20px; height:20px; }
}

#info{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tablet breakpoint: slightly larger touch targets and stacked layout option */
@media (max-width:900px){
  #player{padding:18px}
  #meta{gap:13px;padding:11px 13px;border-radius:12px}
  #cover-frame{flex:0 0 133px;width:133px;height:133px}
  #cover{width:117px;height:117px}
  #song{
    font-size:14px;
    font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.05em;
  }
  #viz{height:38vh}
  #controls{padding:10px}
  #play{width:60px;height:48px;font-size:20px}
}

/* mobile / smartphone: stack elements, larger controls, fit to single-screen height */
@media (max-width:560px){
  #player{padding:12px;gap:12px;justify-content:flex-end}
  #meta{
    flex-direction:row;
    align-items:center;
    gap:13px;
    padding:11px;
  }
  /* make cover smaller and text wrap-friendly */
  #cover-frame{flex:0 0 105px;width:105px;height:105px;padding:8px;border-radius:11px}
  #cover{width:89px;height:89px;border-radius:9px}
  #text{min-width:0}
  #station{font-size:15px}
  #song{
    font-size:13px;
    white-space:normal;
    max-width:220px;
    font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  /* visualizer becomes taller to fill vertical space but kept within viewport */
  #viz{height:44vh;max-height:46vh}
  /* stack controls vertically on very small screens for touch comfort */
  #controls{
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:8px;
  }
  /* make play button larger and volume slider more touch-friendly */
  #play{width:56px;height:52px;border-radius:10px}
  #volume{height:36px}
  /* ensure everything fits without vertical scrolling on most phones */
  :root{ --safe-bottom: env(safe-area-inset-bottom, 12px) }
  #player{padding-bottom: calc(12px + var(--safe-bottom))}
}

/* very small devices: stack controls into two rows if needed */
@media (max-height:640px) and (max-width:420px){
  #meta{padding:8px}
  #viz{height:40vh}
  #controls{gap:8px;padding:8px}
}

/* utility: ensure canvas is crisp on high DPR devices */
@supports (image-rendering:pixelated){
  #viz{image-rendering:auto}
}

/* loading spinner in controls */
#loading{width:44px;height:44px;display:flex;align-items:center;justify-content:center;margin-left:8px;flex:0 0 44px}
#loading.hidden{display:none}
#loading svg{display:block}
#spinnerArc{transform-origin:25px 25px; animation: spinArc 1s linear infinite}
@keyframes spinArc{
  0%{ transform: rotate(0deg) }
  100%{ transform: rotate(360deg) }
}

/* subtle transitions for cover artwork and background changes */
#cover{
  transition: transform 520ms cubic-bezier(.2,.9,.3,1), opacity 380ms ease;
  will-change: transform, opacity;
}
#cover.fade-out{
  opacity: 0;
  transform: scale(0.96) rotate(-0.8deg);
}
#cover.fade-in{
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* background transition: crossfade via pseudo overlay */
body.bg-transition::after{
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(6,6,8,0.56), rgba(12,12,14,0.64));
  mix-blend-mode: normal;
  opacity: 0;
  animation: bgFade 620ms ease forwards;
  z-index: 0;
}
@keyframes bgFade{
  0% { opacity: 0.08; transform: scale(1.01); filter: blur(1.28px); }
  60% { opacity: 0.42; transform: scale(1); filter: blur(0.384px); }
  100% { opacity: 0; transform: scale(1); filter: blur(0); }
}

/* ensure spinner is touch-friendly on small screens */
@media (max-width:560px){
  #loading{width:48px;height:48px;margin-left:6px}
  #loading svg{width:32px;height:32px}
}

/* social links (left side) */
.socials{
  position: fixed;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:14px;
  z-index: 3;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  padding:10px;
  border-radius:14px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(6px) saturate(120%);
}

/* individual link styling */
.socials a{
  width:54px;
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color: white;
  background: transparent;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}

/* colored accents per network */
.socials a:nth-child(1){ /* Facebook */
  color: #fff;
  background: linear-gradient(180deg, rgba(59,89,152,0.14), rgba(59,89,152,0.06));
}

.socials a:nth-child(3){ /* Instagram */
  color: #fff;
  background: linear-gradient(180deg, rgba(225,48,108,0.12), rgba(225,48,108,0.04));
}

/* hover / active */
.socials a:hover, .socials a:focus{
  transform: translateX(6px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.5);
  outline: none;
}

/* compact on very small viewports: hide social links for phones */
@media (max-width:560px){
  .socials{
    display: none;
  }
}

/* decorative speaker used inline inside the #meta block (moved from fixed left to inline) */
.left-speaker{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:88px; /* increased size for better visibility */
  height:auto;
  margin-left:8px;
  margin-right:8px;
  z-index:2; /* bring forward slightly above other decorative elements */
  opacity:1; /* fully visible */
  pointer-events:none; /* decorative only */
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.55));
  transition: transform 220ms ease, opacity 220ms ease;
  /* expose a CSS hook so the speaker can be tinted while preserving textures/shadow */
  --_speaker-gloss: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

/* make the inline SVG a bit brighter and more saturated so it stands out on the background */
.left-speaker svg{
  width:100%;
  height:auto;
  display:block;
  filter: contrast(1.06) saturate(1.12) brightness(1.04);
  /* ensure transitions for color changes */
  transition: filter 240ms ease, opacity 220ms ease;
}

/* Force SVG shapes to inherit the tint variables while preserving subtle alpha/textures.
   We use stroke/fill overrides so the visual style/contrast remains; JS updates --speaker-fill/--speaker-stroke. */
.left-speaker svg rect,
.left-speaker svg circle,
.left-speaker svg path,
.left-speaker svg g {
  /* Use CSS variables so colors can be animated from JS */
  fill: var(--speaker-fill) !important;
  stroke: var(--speaker-stroke) !important;
  transition: fill 260ms cubic-bezier(.2,.9,.3,1), stroke 260ms cubic-bezier(.2,.9,.3,1);
  paint-order: stroke;
  /* keep shapes slightly translucent to blend with background like original design */
  mix-blend-mode: screen;
}

/* responsive adjustments for inline speaker inside #meta */
@media (max-width:900px){
  .left-speaker{ width:76px; margin-left:6px; margin-right:6px; opacity:0.95; }
}
@media (max-width:560px){
  /* keep small decorative speaker on larger phones but hide on very small screens to preserve space */
  .left-speaker{ width:64px; opacity:0.95; }
}

/* Side vertical translucent labels: "RADIO MUSICA" top-to-bottom at both edges */
.side-text{
  position:fixed;
  top:12%;
  bottom:12%;
  /* increased width by 80% to match larger text */
  width:86.4px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  pointer-events:none;
  color: rgba(255,255,255,0.12);
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-family: "Poppins", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* font-size increased by 80% (18px * 1.8 = 32.4px) */
  font-size:32.4px;
  /* vertical layout: text flows top-to-bottom */
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* make letters read top->bottom */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  user-select:none;
  mix-blend-mode: screen;
}

/* left and right placement */
.side-left{ left:8px; }
.side-right{ right:8px; }

/* subtle gradient fade so label doesn't compete with controls when near top/bottom */
.side-text::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(6,6,8,0.0) 0%, rgba(6,6,8,0.18) 12%, rgba(6,6,8,0.18) 88%, rgba(6,6,8,0.0) 100%);
  mix-blend-mode: normal;
  border-radius:8px;
  opacity:0.9;
}

/* hover/focus (though pointer-events:none prevents hover) — keep accessible reduced contrast when needed */
@media (max-width:900px){
  /* scale the side labels by 80% relative to the original small-breakpoint values:
     16px * 1.8 = 28.8px, 40px * 1.8 = 72px */
  .side-text{ font-size:28.8px; width:72px; top:14%; bottom:14%; color: rgba(255,255,255,0.11); }
}
@media (max-width:560px){
  /* hide on small phones to preserve space */
  .side-text{ display:none; }
}

/* When the JS requests a sharp ATECNICA background (body.no-bg-blur),
   remove the decorative blur/softening applied via pseudo-elements so the background image appears crisp. */
body.no-bg-blur::before{
  /* override the blurred frame overlay */
  -webkit-filter: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  /* keep the subtle overlay gradient removed so the image remains sharp */
  background: transparent !important;
  box-shadow: none !important;
}

/* Also ensure any scoped plugin wrapper that used a blurred pseudo-element shows the sharp image */
body.no-bg-blur .radio-musica-wrapper::before,
.no-bg-blur .radio-musica-wrapper::before{
  -webkit-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Additionally, if the script switched the page background image via inline styles,
   make sure there's no extra blur layer left over from bg-transition or body::after */
body.no-bg-blur.bg-transition::after,
body.no-bg-blur::after{
  display: none !important;
}