/* =========================================================
   R90 FOOTER PLAYER – COMPACT + RADIAL GEAR EQ (v28 CLEAN)
   ====================================================== */

/* 0. Fundal player */

.r90-footer-player {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 4px 6px;
  background:
    radial-gradient(circle at top left, rgba(70, 90, 255, .18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(255, 80, 180, .16), transparent 55%),
    #04040b;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, .9);
  border-top: 1px solid rgba(255, 255, 255, .03);
  font-size: 0.95rem;
  backdrop-filter: blur(24px);

  /* var folosită de JS (nu mai avem bară vizibilă, dar rămâne safe) */
  --r90-wave-pct: 0;
}

.r90-footer-player.is-playing {
  box-shadow:
    0 -1px 0 rgba(0, 255, 245, .25),
    0 -16px 36px rgba(0, 0, 0, 1);
}

/* Energy modes (setate din JS prin data-mode="chill|groove|party") */
.r90-footer-player[data-mode="chill"] {
  filter: saturate(0.95);
}

.r90-footer-player[data-mode="groove"] {
  filter: saturate(1.1);
}

.r90-footer-player[data-mode="party"] {
  filter: saturate(1.25);
  box-shadow:
    0 -1px 0 rgba(255, 0, 120, .4),
    0 -20px 42px rgba(0, 0, 0, 1);
}

/* 1. Grid – layout */

.r90-player-grid {
  position: relative;
  display: grid;
  grid-template-columns:
    auto                    /* cover */
    minmax(0, 2.7fr)        /* artist/title/ticker */
    minmax(0, 1.4fr)        /* EQ band */
    minmax(0, auto)         /* show + hours + listeners */
    auto;                   /* play */
  grid-template-rows:
    auto
    auto
    auto;
  column-gap: 32px;
  row-gap: 2px;
  align-items: center;
}

/* 2. Cover + GEAR – col 1 */

.r90-cell-cover {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
}

.r90-player-cover-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.r90-player-cover {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.8),
    0 0 12px rgba(0, 0, 0, 0.9);
}

.r90-footer-player.is-playing .r90-player-cover-wrap {
  box-shadow:
    0 0 0 1px rgba(0, 255, 255, .35),
    0 0 20px rgba(0, 200, 255, .55);
  filter: saturate(1.1);
  transform: translateY(-1px);
}

/* boost bass extra (setat via JS cu .is-bass) */
.r90-footer-player.is-playing .r90-player-cover-wrap.is-bass {
  box-shadow:
    0 0 8px rgba(0, 255, 255, 0.75),
    0 0 16px rgba(0, 180, 255, 0.55);
}

/* RADIAL GEAR EQ — around cover */

.r90-gear-layer {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

.r90-gear-bar {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 3px;
  height: 10px;
  transform-origin: bottom center;
  border-radius: 999px;

  /* Variabile controlate din JS (fallback default) */
  --gear-hue: 0;
  --gear-light: 65%;
  --gear-alpha: 0.9;
  --gear-comp-hue: 180;

  background: linear-gradient(
    to top,
    hsla(var(--gear-hue), 100%, 15%, 0) 0%,
    hsla(var(--gear-hue), 100%, var(--gear-light), var(--gear-alpha)) 100%
  );

  box-shadow:
    0 0 12px hsla(var(--gear-comp-hue), 100%, 70%, 0.8),
    0 0 18px hsla(var(--gear-hue), 100%, 60%, 0.7);

  opacity: 0.9;
  mix-blend-mode: screen;
}

.r90-gear-bar::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: inherit;
  filter: blur(4px);
  opacity: .4;
  pointer-events: none;
}

/* Glow general când e în play */

.r90-footer-player.is-playing .r90-player-cover-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(0, 255, 220, 0.35),
      rgba(255, 80, 200, 0.0) 70%);
  filter: blur(6px);
  opacity: 1;
  z-index: 0;
}

/* Bass glow */

.r90-gear-layer.is-bass {
  filter:
    drop-shadow(0 0 10px rgba(0,255,255,.75))
    drop-shadow(0 0 16px rgba(0,180,255,.45));
}

/* 3. Artist + Title – col 2 */

.r90-cell-artist,
.r90-cell-title {
  margin: 0;
  align-self: center;
}

.r90-cell-artist {
  grid-column: 2;
  grid-row: 1;
}

.r90-cell-title {
  grid-column: 2;
  grid-row: 2;
}

.r90-player-artist {
  font-weight: 900;
  font-size: 1.02rem;
  color: #fdf6ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1rem;
  margin-bottom: -1px;
  text-shadow: 0 0 8px rgba(160, 100, 255, 0.45);
}

.r90-player-title {
  font-size: 0.93rem;
  color: #d1d4e4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.05rem;
  opacity: 0.95;
}

.r90-footer-player.is-playing .r90-player-artist,
.r90-footer-player.is-playing .r90-player-title {
  text-shadow: 0 0 6px rgba(160, 100, 255, 0.5);
}

/* 4. Show + Ore + Listeners – col 4 */

.r90-cell-show {
  grid-column: 4;
  grid-row: 1;
  align-self: flex-end;
}

.r90-player-show {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: #f1e5ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.r90-cell-hours {
  grid-column: 4;
  grid-row: 2;
  align-self: flex-start;
  justify-self: end;
}

.r90-player-hours {
  font-size: .84rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(26, 46, 120, .85);
  color: #e6f0ff;
  border: 1px solid rgba(255, 255, 255, .14);
}

/* listeners – col 4, rând 3 */

.r90-cell-listeners {
  grid-column: 4;
  grid-row: 3;
  justify-self: end;
  align-self: center;
}

.r90-player-listeners {
  font-size: .7rem;
  color: #b8fffb;
  background: rgba(0, 180, 255, .12);
  border-radius: 999px;
  padding: 1px 5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.r90-player-listeners::before {
  content: "👥";
  font-size: .7rem;
  color: #44ff99;
}

/* 5. Buton PLAY – col 5 */

.r90-cell-play {
  grid-column: 5;
  grid-row: 1 / span 3;
  justify-self: end;
  align-self: center;
}

.r90-player-cta-btn {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  outline: none;
  cursor: pointer;
  background: radial-gradient(circle at 30% 0, #8cf3ff, #0084ff);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .2),
    0 10px 26px rgba(0, 0, 0, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s ease, box-shadow .18s ease, filter .14s ease;
}

.r90-player-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25),
    0 16px 34px rgba(0, 0, 0, .95);
}

.r90-footer-player.is-playing .r90-player-cta-btn {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .38),
    0 0 26px rgba(0, 255, 245, .65);
}

/* loader */

.r90-player-loader {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: #ffffff;
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
}

.r90-player-cta-btn.is-loading .r90-player-loader {
  opacity: 1;
  animation: r90-spin .7s linear infinite;
}

.r90-player-cta-btn.is-loading .r90-icon {
  opacity: .25;
}

@keyframes r90-spin {
  to { transform: scale(.6) rotate(360deg); }
}

.r90-player-cta-btn .r90-icon {
  width: 60px;
  height: 60px;
  transition: opacity .22s ease;
}

/* play / pause swap */

.r90-player-cta-btn .r90-icon-play { display: block; }
.r90-player-cta-btn .r90-icon-pause { display: none; }

.r90-player-cta-btn.is-playing .r90-icon-play { display: none; }
.r90-player-cta-btn.is-playing .r90-icon-pause { display: block; }

/* 6. EQ – col 3, rând 2 */

.r90-cell-eq {
  grid-column: 3;
  grid-row: 2;
  align-self: flex-start;
  pointer-events: none;
  z-index: 0;
}

.r90-eq {
  position: relative;
  height: 20px;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  mix-blend-mode: screen;
  opacity: 0.25;
  transition: opacity .35s ease-out;
}

.r90-footer-player.is-playing .r90-eq {
  opacity: 0.9;
}

/* Moduri de energie (override pe EQ) */
.r90-footer-player.is-playing[data-mode="chill"] .r90-eq {
  opacity: 0.5;
}

.r90-footer-player.is-playing[data-mode="groove"] .r90-eq {
  opacity: 0.85;
}

.r90-footer-player.is-playing[data-mode="party"] .r90-eq {
  opacity: 1;
}

.r90-eq-bar {
  flex: 0 0 8px;
  height: 100%;
  transform-origin: bottom center;
  transform: scaleY(.25);
  border-radius: 999px;
  background: linear-gradient(
    to top,
    rgba(10, 0, 16, .0)   0%,
    rgba(0, 214, 255, .75) 35%,
    rgba(120, 255, 210, .9) 70%,
    rgba(255, 255, 255, .95) 100%
  );
  position: relative;
  transition: transform .08s linear;
  opacity: .8;
}

/* peaks – setat din JS (is-peak) */

.r90-eq-bar.is-peak {
  background: linear-gradient(
    to top,
    rgba(10, 0, 16, .0)    0%,
    rgba(0, 255, 200, .9)  30%,
    rgba(210, 130, 255, .95) 65%,
    rgba(255, 255, 255, 1)   100%
  );
  box-shadow:
    0 0 8px rgba(160, 70, 255, .9),
    0 0 16px rgba(0, 255, 220, .7);
}

/* halo deasupra vârfului */

.r90-eq-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) scale(0);
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(210, 130, 255, .7) 50%,
    rgba(210, 130, 255, 0) 100%
  );
  filter: blur(3px);
  opacity: 0;
  transition:
    transform .15s linear,
    opacity .12s linear;
  pointer-events: none;
}

.r90-eq-bar.is-peak::after {
  opacity: 0.9;
  transform: translateX(-50%) scale(1.2);
}

/* 7. Ticker – col 2–3, rând 3 */

.r90-cell-ticker {
  grid-column: 2 / 4;
  grid-row: 3;
  align-self: start;
  position: relative;
  z-index: 1;
  margin-top: 6px;
}

/* optional: wave container (acum nu îl mai folosim vizual) */
.r90-wave {
  width: 100%;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* Ticker + gradient mask */

.r90-player-ticker {
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.r90-player-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  animation: r90-ticker-scroll 120s linear infinite;
  padding-right: 10px;
  color: #f5f5ff;
}

.r90-footer-player:not(.is-playing) .r90-player-ticker-inner {
  animation-play-state: paused;
}

/* dedicații din API – accent pe ticker */

.r90-footer-player.has-request .r90-player-ticker-inner {
  color: #ffe6ff;
  text-shadow: 0 0 12px rgba(255, 120, 220, .75);
}

@keyframes r90-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 8. Tablet */

@media (max-width: 1024px) {
  .r90-player-grid {
    grid-template-columns:
      auto
      minmax(0, 2.3fr)
      minmax(0, 1.2fr)
      auto
      auto;
    column-gap: 10px;
  }

  .r90-player-title {
    font-size: 0.9rem;
  }

  .r90-player-show {
    font-size: 0.96rem;
  }

  .r90-player-hours {
    font-size: 0.8rem;
    padding: 2px 8px;
  }

  .r90-player-listeners {
    font-size: 0.76rem;
    padding: 3px 8px;
  }
}

/* 9. Mobil (max ~ 768px) – layout compact */

@media (max-width: 768px) {
  .r90-footer-player {
    padding: 6px 8px;
    font-size: 0.85rem;
  }

  .r90-player-cover-wrap {
    width: 64px;
    height: 64px;
  }

  .r90-player-cover {
    width: 46px;
    height: 46px;
    box-shadow:
      0 0 6px rgba(255,255,255,.25),
      0 0 16px rgba(0,255,255,.35);
  }

  .r90-player-cta-btn {
    width: 60px;
    height: 60px;
  }

  .r90-player-grid {
    grid-template-columns:
      auto           /* cover */
      minmax(0, 1fr) /* text */
      auto;          /* play */
    grid-template-rows:
      auto           /* artist */
      auto           /* title */
      auto;          /* ticker */
    column-gap: 10px;
    row-gap: 2px;
  }

  .r90-cell-cover {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .r90-cell-artist {
    grid-column: 2;
    grid-row: 1;
  }

  .r90-cell-title {
    grid-column: 2;
    grid-row: 2;
  }

  .r90-cell-play {
    grid-column: 3;
    grid-row: 1 / span 3;
    justify-self: end;
    align-self: center;
  }

  /* ascundem show, ore, listeners și EQ pe ecrane mici */
  .r90-cell-show,
  .r90-cell-hours,
  .r90-cell-listeners,
  .r90-cell-eq {
    display: none;
  }

  /* ticker – ultimul rând, full-width */
  .r90-cell-ticker {
    grid-column: 1 / span 3;
    grid-row: 3;
    margin-top: 6px;
  }

  .r90-player-ticker-inner {
    font-size: 0.75rem;
  }
}

/* 10. Mobil mic (max 480px) – fine-tuning */

@media (max-width: 480px) {
  .r90-footer-player {
    --r90h-player-h: 60px;
    padding: 6px 6px;
  }

  .r90-player-cover {
    width: 42px;
    height: 42px;
  }

  .r90-player-title,
  .r90-player-artist {
    font-size: .82rem;
    line-height: 1.15;
  }

  #r90-player-toggle {
    width: 64px;
    height: 64px;
  }

  .r90-player-cta-btn .r90-icon {
    width: 64px;
    height: 64px;
  }

  .r90-player-ticker {
    max-height: 20px;
    overflow: hidden;
  }

  .r90-header-row {
    margin-bottom: 8px;
  }
}

/* 11. Rotirea gear-ului */

#r90-gear-eq {
  animation: r90-gear-rotate 60s linear infinite;
  transform-origin: center center;
}

@keyframes r90-gear-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.r90-footer-player:not(.is-playing) #r90-gear-eq {
  animation-play-state: paused;
}