:root{
  --rfm-gold-1:#f7e08a;
  --rfm-gold-2:#d4af37;
  --rfm-gold-3:#9a6f12;
}
.rfm-player-shell{width:100%;box-sizing:border-box;z-index:9998;font-family:Arial,Helvetica,sans-serif}
.rfm-player-shell.is-sticky{position:fixed;left:0;right:0;bottom:0;width:100vw;padding:0}
.rfm-player{
  position:relative;width:100%;max-width:100%;min-height:80px;height:80px;border-radius:0;overflow:hidden;
  background:
    radial-gradient(circle at 18% 50%, rgba(212,175,55,.12), transparent 24%),
    radial-gradient(circle at 85% 50%, rgba(247,224,138,.10), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    linear-gradient(135deg,#080808 0%,#111111 42%,#0b0b0b 100%);
  border-top:1px solid rgba(247,224,138,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(212,175,55,.16), 0 -6px 22px rgba(0,0,0,.35);
  display:grid;grid-template-columns:minmax(320px,1.35fr) minmax(140px,.8fr) minmax(190px,.85fr);align-items:center;gap:12px;padding:6px 16px;box-sizing:border-box
}
.rfm-gold-line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(247,224,138,.3),rgba(212,175,55,.55),rgba(247,224,138,.3),transparent)}
.rfm-left,.rfm-right{display:flex;align-items:center}
.rfm-left{gap:12px;min-width:0}
.rfm-right{justify-content:flex-end;gap:16px;min-width:0}
.rfm-center{display:flex;justify-content:center;align-items:center;min-width:0}
.rfm-cover-wrap{
  width:68px;height:68px;min-width:68px;position:relative;border-radius:12px;padding:2px;
  background:linear-gradient(145deg,rgba(247,224,138,.65),rgba(154,111,18,.9));
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 5px 18px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.rfm-cover{
  width:64px;height:64px;display:block;border-radius:10px;object-fit:cover;object-position:center center;background:#111;flex:0 0 64px
}
.rfm-logo{position:absolute;width:22px;height:22px;right:2px;bottom:2px;border-radius:50%;object-fit:cover;background:#111;border:2px solid rgba(247,224,138,.85);box-shadow:0 0 8px rgba(212,175,55,.45);z-index:3}
.rfm-meta{min-width:0}
.rfm-station{font-size:10px;line-height:1;margin-bottom:6px;letter-spacing:2.4px;color:var(--rfm-gold-2);font-weight:700;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rfm-title{color:#fff;font-size:18px;line-height:1.05;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:6px}
.rfm-artist-row{display:flex;align-items:center;gap:10px;min-width:0}
.rfm-artist{color:rgba(255,255,255,.88);font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rfm-live-badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;color:#efd59a;font-size:11px;letter-spacing:.8px;font-weight:700;background:linear-gradient(180deg,rgba(255,115,70,.12),rgba(212,175,55,.08));border:1px solid rgba(247,224,138,.22)}
.rfm-live-badge:before{content:"";width:8px;height:8px;border-radius:50%;background:#ff4f3f;box-shadow:0 0 10px rgba(255,79,63,.7);margin-right:6px}
.rfm-visualizer{width:100%;max-width:240px;height:46px;display:block;opacity:.95;filter:drop-shadow(0 0 6px rgba(212,175,55,.28))}
.rfm-moderator{display:flex;align-items:center;gap:8px;min-width:0}
.rfm-moderator-image{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid rgba(247,224,138,.55)}
.rfm-moderator-label{font-size:10px;text-transform:uppercase;letter-spacing:1.6px;color:rgba(247,224,138,.72)}
.rfm-moderator-name{font-size:13px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px}
.rfm-controls{display:flex;align-items:center;gap:10px}
.rfm-play{
  position:relative;width:52px;height:52px;border-radius:50%;border:none;cursor:pointer;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 36%),
    radial-gradient(circle at 40% 35%, var(--rfm-gold-1) 0%, var(--rfm-gold-2) 38%, var(--rfm-gold-3) 78%, #694707 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.32), inset 0 -3px 6px rgba(0,0,0,.22), 0 8px 16px rgba(0,0,0,.36), 0 0 16px rgba(212,175,55,.26)
}
.rfm-icon-play,.rfm-icon-pause{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.rfm-icon-play{width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #fff6d7;margin-left:3px}
.rfm-icon-pause{width:14px;height:16px;display:none}
.rfm-icon-pause:before,.rfm-icon-pause:after{content:"";position:absolute;top:0;bottom:0;width:4px;background:#fff6d7;border-radius:1px}
.rfm-icon-pause:before{left:1px}.rfm-icon-pause:after{right:1px}
.rfm-player-shell.is-playing .rfm-icon-play{display:none}.rfm-player-shell.is-playing .rfm-icon-pause{display:block}
@media (max-width:900px){.rfm-player{grid-template-columns:minmax(260px,1fr) auto;gap:10px}.rfm-center{display:none}.rfm-moderator{display:none}}
@media (max-width:620px){.rfm-player{grid-template-columns:1fr auto;padding:6px 10px;height:80px;min-height:80px}.rfm-left{gap:9px}.rfm-title{font-size:15px}.rfm-artist{font-size:12px}.rfm-station{font-size:9px}.rfm-live-badge{display:none}.rfm-cover-wrap{width:64px;height:64px;min-width:64px}.rfm-cover{width:60px;height:60px}.rfm-play{width:44px;height:44px}}


/* Update 1.2.6 */
.rfm-moderator-image{
  width:64px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
}
.rfm-moderator-label{
  font-weight:800;
  color:#ff3b3b !important;
}


/* Premium Finish 1.2.7 */
.rfm-cover-wrap{
  width:68px;
  height:68px;
  min-width:68px;
  border-radius:14px;
  padding:2px;
  background:
    linear-gradient(145deg, rgba(247,224,138,.95), rgba(212,175,55,.88) 45%, rgba(122,84,9,.95));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    0 6px 18px rgba(0,0,0,.34),
    0 0 14px rgba(212,175,55,.22),
    inset 0 1px 0 rgba(255,255,255,.28);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.rfm-cover{
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:contain !important;
  object-position:center center !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(255,255,255,0) 50%),
    #0f0f0f;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.rfm-cover-wrap:hover{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 6px 18px rgba(0,0,0,.34),
    0 0 20px rgba(212,175,55,.30),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.rfm-moderator{
  gap:10px;
}
.rfm-moderator-image{
  width:68px !important;
  height:68px !important;
  min-width:68px;
  border-radius:14px !important;
  object-fit:cover;
  object-position:center center;
  background:#111;
  border:2px solid rgba(212,175,55,.72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 5px 14px rgba(0,0,0,.34),
    0 0 12px rgba(212,175,55,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.rfm-moderator-label{
  font-weight:900 !important;
  color:#ff2f2f !important;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 0 8px rgba(255,47,47,.18);
}
.rfm-moderator-name{
  font-size:22px;
  line-height:1;
}

.rfm-play{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -3px 6px rgba(0,0,0,.24),
    0 8px 16px rgba(0,0,0,.36),
    0 0 18px rgba(212,175,55,.30),
    0 0 30px rgba(212,175,55,.10);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.rfm-play:hover{
  transform:scale(1.04);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.34),
    inset 0 -3px 6px rgba(0,0,0,.24),
    0 8px 16px rgba(0,0,0,.36),
    0 0 24px rgba(212,175,55,.38),
    0 0 34px rgba(212,175,55,.14);
}

.rfm-player{
  background:
    radial-gradient(circle at 18% 50%, rgba(212,175,55,.16), transparent 24%),
    radial-gradient(circle at 85% 50%, rgba(247,224,138,.14), transparent 20%),
    linear-gradient(90deg, rgba(212,175,55,.12), rgba(212,175,55,0) 18%, rgba(212,175,55,0) 82%, rgba(212,175,55,.10)),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
    linear-gradient(135deg,#080808 0%,#111111 42%,#0b0b0b 100%);
}

@media (max-width:620px){
  .rfm-cover-wrap,
  .rfm-moderator-image{
    width:60px !important;
    height:60px !important;
    min-width:60px !important;
    border-radius:12px !important;
  }
  .rfm-cover{
    width:56px !important;
    height:56px !important;
  }
  .rfm-moderator-name{
    font-size:16px;
  }
}


/* ===== 1.2.9 Moderator transparent fix ===== */
.rfm-moderator-image{
  background: transparent !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 5px 14px rgba(0,0,0,.34),
    0 0 12px rgba(212,175,55,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
}


/* ===== 1.3.1 Animation + Soft Fade ===== */
.rfm-moderator{
  animation: rfmFadeSlideIn .7s ease both;
}

.rfm-moderator-image{
  transition: transform .35s ease, opacity .35s ease;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}

.rfm-moderator-image:hover{
  transform: scale(1.04);
}

.rfm-moderator-label{
  animation: rfmPulseText 1.8s infinite ease-in-out;
}

@keyframes rfmFadeSlideIn{
  0%{opacity:0; transform:translateY(6px);}
  100%{opacity:1; transform:translateY(0);}
}

@keyframes rfmPulseText{
  0%,100%{opacity:1;}
  50%{opacity:.7;}
}


/* ===== 1.4.0 ULTRA ===== */
.rfm-player{
  background:
    linear-gradient(115deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 18%, rgba(255,255,255,0) 82%, rgba(255,255,255,.04) 100%),
    radial-gradient(circle at 12% 50%, rgba(212,175,55,.18), transparent 24%),
    radial-gradient(circle at 88% 50%, rgba(247,224,138,.16), transparent 22%),
    linear-gradient(90deg, rgba(212,175,55,.10), rgba(212,175,55,0) 24%, rgba(212,175,55,0) 76%, rgba(212,175,55,.09)),
    linear-gradient(135deg, #050505 0%, #0d0d0d 35%, #141414 55%, #090909 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(212,175,55,.18),
    0 -8px 24px rgba(0,0,0,.42),
    0 0 20px rgba(212,175,55,.08) !important;
  position: relative;
}

.rfm-player::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(105deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 14%, rgba(255,255,255,0) 86%, rgba(255,255,255,.05) 100%);
  mix-blend-mode:screen;
  opacity:.55;
}

.rfm-player::after{
  content:"";
  position:absolute;
  left:-20%;
  top:0;
  width:40%;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.06), rgba(255,255,255,0));
  transform:skewX(-22deg);
  animation: rfmUltraSweep 10s linear infinite;
  opacity:.55;
}

.rfm-gold-line{
  height:2px !important;
  background:linear-gradient(90deg, transparent, rgba(247,224,138,.35), rgba(212,175,55,.8), rgba(247,224,138,.35), transparent) !important;
}

.rfm-center{
  position:relative;
}

.rfm-visualizer{
  max-width:260px !important;
  height:44px !important;
  filter:drop-shadow(0 0 8px rgba(212,175,55,.30)) !important;
}

.rfm-station{
  text-shadow:0 0 8px rgba(212,175,55,.12);
}

.rfm-title{
  text-shadow:0 0 10px rgba(255,255,255,.05);
}

.rfm-play{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.36),
    inset 0 -3px 6px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.38),
    0 0 28px rgba(212,175,55,.28),
    0 0 42px rgba(212,175,55,.14) !important;
}

.rfm-play:hover{
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.36),
    inset 0 -3px 6px rgba(0,0,0,.24),
    0 8px 18px rgba(0,0,0,.38),
    0 0 34px rgba(212,175,55,.36),
    0 0 48px rgba(212,175,55,.18) !important;
}

.rfm-live-badge{
  display:none !important;
}

@keyframes rfmUltraSweep{
  0%{ left:-30%; }
  100%{ left:130%; }
}


/* ===== 1.4.1 Host Switch / Slim EQ / Edge Blend ===== */
.rfm-player{
  grid-template-columns:minmax(360px,1.65fr) 170px auto !important;
  gap:12px !important;
  padding:6px 18px !important;
  overflow:hidden !important;
  position:relative !important;
}

.rfm-player::before{
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.35) 2.5%,
      rgba(0,0,0,0) 6%,
      rgba(255,255,255,.045) 12%,
      rgba(255,255,255,0) 19%,
      rgba(255,255,255,0) 81%,
      rgba(255,255,255,.04) 88%,
      rgba(0,0,0,0) 94%,
      rgba(0,0,0,.35) 97.5%,
      rgba(0,0,0,.88) 100%) !important;
}

.rfm-player::after{
  width:28% !important;
  opacity:.35 !important;
}

.rfm-left{min-width:0 !important;}
.rfm-meta{min-width:0 !important;}
.rfm-title{
  max-width:none !important;
  font-size:17px !important;
}
.rfm-artist{
  font-size:13px !important;
}
.rfm-artist-row{
  gap:8px !important;
}
.rfm-center{
  width:170px !important;
  min-width:170px !important;
  max-width:170px !important;
  justify-self:center !important;
}
.rfm-visualizer{
  width:170px !important;
  max-width:170px !important;
  height:34px !important;
}

.rfm-right{
  min-width:auto !important;
  gap:10px !important;
}
.rfm-moderator{
  display:none !important;
}

.rfm-player-shell.mode-host .rfm-cover{
  object-fit:cover !important;
  object-position:center center !important;
}

.rfm-player-shell.mode-host .rfm-cover-wrap{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 5px 18px rgba(0,0,0,.34),
    0 0 16px rgba(212,175,55,.24),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.rfm-player-shell.mode-host .rfm-title{
  color:#ffffff !important;
  text-shadow:0 0 12px rgba(212,175,55,.10) !important;
}
.rfm-player-shell.mode-host .rfm-artist{
  color:#ff3b3b !important;
  font-weight:900 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;
}
.rfm-player-shell.mode-host .rfm-station{
  color:#f0c95b !important;
}

.rfm-player-shell .rfm-cover,
.rfm-player-shell .rfm-title,
.rfm-player-shell .rfm-artist{
  transition:opacity .45s ease, transform .45s ease, filter .45s ease, color .35s ease !important;
}

.rfm-player-shell.is-swapping .rfm-cover,
.rfm-player-shell.is-swapping .rfm-title,
.rfm-player-shell.is-swapping .rfm-artist{
  opacity:.4;
  transform:translateY(2px) scale(.985);
  filter:brightness(.95);
}

@media (max-width: 900px){
  .rfm-player{
    grid-template-columns:minmax(210px,1fr) 120px auto !important;
    gap:8px !important;
    padding:6px 10px !important;
  }
  .rfm-center{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
  }
  .rfm-visualizer{
    width:120px !important;
    max-width:120px !important;
    height:26px !important;
  }
  .rfm-title{
    font-size:15px !important;
  }
  .rfm-artist{
    font-size:12px !important;
  }
}

@media (max-width: 620px){
  .rfm-player{
    grid-template-columns:minmax(0,1fr) 82px auto !important;
    height:80px !important;
    min-height:80px !important;
    gap:8px !important;
  }
  .rfm-center{
    width:82px !important;
    min-width:82px !important;
    max-width:82px !important;
  }
  .rfm-visualizer{
    width:82px !important;
    max-width:82px !important;
    height:22px !important;
  }
  .rfm-cover-wrap{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
  }
  .rfm-cover{
    width:54px !important;
    height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
  }
  .rfm-title{
    font-size:14px !important;
    line-height:1.05 !important;
  }
  .rfm-artist{
    font-size:11px !important;
  }
  .rfm-play{
    width:42px !important;
    height:42px !important;
  }
}


/* ===== 1.4.2 Backend controls / image fitting / transition ===== */
.rfm-player-shell{
  --rfm-accent:#d4af37;
  --rfm-accent-rgb:212,175,55;
}
.rfm-player{
  border-left:1px solid rgba(var(--rfm-accent-rgb), .18);
  border-right:1px solid rgba(var(--rfm-accent-rgb), .18);
}
.rfm-gold-line{
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--rfm-accent) 35%, white), var(--rfm-accent), color-mix(in srgb, var(--rfm-accent) 35%, white), transparent) !important;
}
.rfm-station{
  color:var(--rfm-accent) !important;
}
.rfm-cover-wrap{
  width:68px !important;
  height:68px !important;
  min-width:68px !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.rfm-cover{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  max-height:64px !important;
  aspect-ratio:1/1 !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#111 !important;
}
.rfm-player-shell.mode-host .rfm-cover{
  width:68px !important;
  height:68px !important;
  max-width:68px !important;
  max-height:68px !important;
  object-fit:cover !important;
  object-position:center top !important;
}
.rfm-player-shell.mode-host .rfm-cover-wrap{
  border-radius:16px !important;
}
.rfm-player-shell.mode-host .rfm-cover-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.06) 100%);
}
.rfm-player-shell.mode-host .rfm-cover{
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 72%, rgba(0,0,0,.92) 80%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 72%, rgba(0,0,0,.92) 80%, rgba(0,0,0,0) 100%);
}
.rfm-player-shell .rfm-cover-wrap,
.rfm-player-shell .rfm-cover{
  transition:transform .55s ease, opacity .55s ease, filter .55s ease, box-shadow .55s ease, border-radius .55s ease !important;
}
.rfm-player-shell.switch-enter .rfm-cover-wrap,
.rfm-player-shell.switch-enter .rfm-cover{
  opacity:.18;
  transform:scale(.88) rotateY(20deg);
  filter:blur(1px) brightness(.9);
}
.rfm-player-shell.switch-exit .rfm-cover-wrap,
.rfm-player-shell.switch-exit .rfm-cover{
  opacity:1;
  transform:scale(1) rotateY(0deg);
  filter:blur(0) brightness(1);
}
.rfm-artist{
  color:#ff3636 !important;
  font-weight:900 !important;
  letter-spacing:.8px !important;
  text-transform:uppercase !important;
}
.rfm-player-shell:not(.mode-host) .rfm-artist{
  color:rgba(255,255,255,.88) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:700 !important;
}
@media (max-width:620px){
  .rfm-cover-wrap{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
  }
  .rfm-cover{
    width:54px !important;
    height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
  }
  .rfm-player-shell.mode-host .rfm-cover{
    width:58px !important;
    height:58px !important;
    max-width:58px !important;
    max-height:58px !important;
  }
}


/* ===== 1.4.5 Glass / Notes / Volume / Data Fix ===== */
.rfm-player-shell{
  --rfm-accent:#d4af37;
  position:relative;
}
.rfm-player{
  background:
    linear-gradient(90deg, rgba(212,175,55,.08), rgba(212,175,55,0) 18%, rgba(212,175,55,0) 82%, rgba(212,175,55,.08)),
    rgba(10,10,10,.52) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-top: 1px solid rgba(247,224,138,.22) !important;
  border-left: 1px solid rgba(247,224,138,.10) !important;
  border-right: 1px solid rgba(247,224,138,.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(212,175,55,.12),
    0 -8px 22px rgba(0,0,0,.28) !important;
  overflow:hidden !important;
}
.rfm-player::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.28) 0%,
      rgba(0,0,0,0) 4%,
      rgba(255,255,255,.05) 14%,
      rgba(255,255,255,0) 25%,
      rgba(255,255,255,0) 75%,
      rgba(255,255,255,.04) 86%,
      rgba(0,0,0,0) 96%,
      rgba(0,0,0,.28) 100%);
}
.rfm-player::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  pointer-events:none;
  box-shadow:
    inset 18px 0 20px -20px rgba(247,224,138,.18),
    inset -18px 0 20px -20px rgba(247,224,138,.18);
}

.rfm-cover-wrap{
  width:68px !important;
  height:68px !important;
  min-width:68px !important;
  border-radius:0 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
}
.rfm-cover{
  width:64px !important;
  height:64px !important;
  max-width:64px !important;
  max-height:64px !important;
  aspect-ratio:1/1 !important;
  border-radius:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
}
.rfm-player-shell.mode-host .rfm-cover{
  object-fit:contain !important;
  object-position:center center !important;
  background:transparent !important;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 68%, rgba(0,0,0,.96) 82%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 68%, rgba(0,0,0,.96) 82%, rgba(0,0,0,0) 100%);
}
.rfm-center{
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:center;
}
.rfm-note-field{
  position:relative;
  width:170px;
  height:34px;
  overflow:hidden;
  filter:drop-shadow(0 0 6px rgba(212,175,55,.28));
}
.rfm-note{
  position:absolute;
  bottom:2px;
  color:#e3bc45;
  font-size:18px;
  opacity:.0;
  animation: rfmFloatNotes 7s linear infinite;
  text-shadow:0 0 8px rgba(212,175,55,.32);
}
.rfm-note.n1{left:0; animation-delay:0s; font-size:16px;}
.rfm-note.n2{left:30px; animation-delay:1.2s; font-size:18px;}
.rfm-note.n3{left:66px; animation-delay:2.4s; font-size:15px;}
.rfm-note.n4{left:102px; animation-delay:3.6s; font-size:19px;}
.rfm-note.n5{left:138px; animation-delay:4.8s; font-size:16px;}

@keyframes rfmFloatNotes{
  0%{ transform:translateY(10px) translateX(0) scale(.9); opacity:0; }
  10%{ opacity:.8; }
  50%{ transform:translateY(-4px) translateX(6px) scale(1); opacity:1; }
  90%{ opacity:.12; }
  100%{ transform:translateY(-18px) translateX(12px) scale(1.06); opacity:0; }
}

.rfm-controls{
  gap:10px !important;
}
.rfm-volume{
  -webkit-appearance:none;
  appearance:none;
  width:86px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(247,224,138,.95), rgba(212,175,55,.85));
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 10px rgba(212,175,55,.18);
  outline:none;
}
.rfm-volume::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f7e08a;
  border:1px solid rgba(122,86,13,.85);
  box-shadow:0 0 10px rgba(212,175,55,.28);
  cursor:pointer;
}
.rfm-volume::-moz-range-thumb{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#f7e08a;
  border:1px solid rgba(122,86,13,.85);
  box-shadow:0 0 10px rgba(212,175,55,.28);
  cursor:pointer;
}
.rfm-volume::-moz-range-track{
  height:4px;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(247,224,138,.95), rgba(212,175,55,.85));
}

.rfm-player-shell.switch-fade-out .rfm-cover,
.rfm-player-shell.switch-fade-out [data-rfm-title],
.rfm-player-shell.switch-fade-out [data-rfm-artist]{
  opacity:0 !important;
}
.rfm-player-shell .rfm-cover,
.rfm-player-shell [data-rfm-title],
.rfm-player-shell [data-rfm-artist]{
  transition:opacity .8s ease !important;
}

@media (max-width:900px){
  .rfm-center{width:116px !important; min-width:116px !important; max-width:116px !important;}
  .rfm-note-field{width:110px; height:26px;}
  .rfm-note{font-size:14px;}
  .rfm-volume{width:64px;}
}
@media (max-width:620px){
  .rfm-player{
    grid-template-columns:minmax(0,1fr) 70px auto !important;
    gap:8px !important;
  }
  .rfm-center{width:70px !important; min-width:70px !important; max-width:70px !important;}
  .rfm-note-field{width:68px; height:22px;}
  .rfm-note{font-size:11px;}
  .rfm-volume{display:none;}
  .rfm-cover-wrap{width:58px !important; height:58px !important; min-width:58px !important;}
  .rfm-cover{width:54px !important; height:54px !important; max-width:54px !important; max-height:54px !important;}
}


/* ===== 1.4.6 High-End UI ===== */

/* Moderator freistellen */
.rfm-player-shell.mode-host .rfm-cover{
  background: transparent !important;
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 60%, rgba(0,0,0,.6) 75%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 60%, rgba(0,0,0,.6) 75%, rgba(0,0,0,0) 100%);
}

/* Glas-Reflex */
.rfm-player::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(110deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,0) 25%,
      rgba(255,255,255,0) 75%,
      rgba(255,255,255,.08) 100%
    );
  mix-blend-mode:screen;
  opacity:.6;
}

/* Licht Sweep */
.rfm-player::before{
  content:"";
  position:absolute;
  top:0;
  left:-40%;
  width:40%;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.12),
    rgba(255,255,255,0)
  );
  transform:skewX(-20deg);
  animation: rfmLightSweep 8s linear infinite;
}

@keyframes rfmLightSweep{
  0%{ left:-40%; }
  100%{ left:140%; }
}


/* Moderator square fix */
.rfm-player-shell.mode-host .rfm-cover-wrap{
  border-radius:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
}

.rfm-player-shell.mode-host .rfm-cover{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.rfm-cover-wrap,.rfm-cover{
  border-radius:0!important;
}


/* ===== 1.4.8 Volume + Play Gold Fix ===== */
.rfm-volume{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:86px !important;
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, color-mix(in srgb, var(--rfm-accent) 82%, white), var(--rfm-accent)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 10px rgba(0,0,0,.18) !important;
  outline:none !important;
}

.rfm-volume::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:var(--rfm-accent) !important;
  border:1px solid rgba(0,0,0,.38) !important;
  box-shadow:
    0 0 6px rgba(0,0,0,.28),
    0 0 10px color-mix(in srgb, var(--rfm-accent) 42%, transparent) !important;
  cursor:pointer !important;
}

.rfm-volume::-moz-range-thumb{
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  background:var(--rfm-accent) !important;
  border:1px solid rgba(0,0,0,.38) !important;
  box-shadow:
    0 0 6px rgba(0,0,0,.28),
    0 0 10px color-mix(in srgb, var(--rfm-accent) 42%, transparent) !important;
  cursor:pointer !important;
}

.rfm-volume::-webkit-slider-runnable-track{
  height:3px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, color-mix(in srgb, var(--rfm-accent) 82%, white), var(--rfm-accent)) !important;
}

.rfm-volume::-moz-range-track{
  height:3px !important;
  border:none !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, color-mix(in srgb, var(--rfm-accent) 82%, white), var(--rfm-accent)) !important;
}

.rfm-play{
  background:
    radial-gradient(circle at 30% 28%, rgba(255,250,214,.95) 0%, rgba(255,250,214,0) 32%),
    radial-gradient(circle at 50% 58%, #f9e59f 0%, #e0bc4d 34%, #c9981b 58%, #9f7310 78%, #6d4e08 100%) !important;
  border:1px solid rgba(255,231,148,.46) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.42),
    inset 0 -4px 8px rgba(0,0,0,.34),
    0 6px 16px rgba(0,0,0,.42),
    0 0 18px rgba(212,175,55,.34),
    0 0 35px rgba(212,175,55,.16) !important;
}

.rfm-play:hover{
  filter:brightness(1.08) !important;
  transform:scale(1.05) !important;
}

.rfm-icon-play{
  border-left-color:#fff8da !important;
}

.rfm-icon-pause::before,
.rfm-icon-pause::after{
  background:#fff8da !important;
}


/* ===== 1.4.9 Gold Button + Volume Fix ===== */

/* Play Button -> realistischer Gold Sphere Look */
.rfm-play{
  background:
    radial-gradient(circle at 30% 25%, #fff6cc 0%, rgba(255,255,255,0) 35%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 40%),
    radial-gradient(circle at 50% 50%, #f5d77a 0%, #d4af37 45%, #a8790f 75%, #6a4b07 100%) !important;

  border:1px solid rgba(255,230,140,.5) !important;

  box-shadow:
    inset -6px -10px 18px rgba(0,0,0,.35),
    inset 4px 6px 10px rgba(255,255,255,.35),
    0 6px 18px rgba(0,0,0,.45),
    0 0 25px rgba(212,175,55,.35),
    0 0 45px rgba(212,175,55,.18) !important;
}

/* Icon besser sichtbar */
.rfm-icon-play{
  border-left-color:#fffbe6 !important;
}

.rfm-icon-pause::before,
.rfm-icon-pause::after{
  background:#fffbe6 !important;
}

/* Volume Fix – Thumb zentrieren */
.rfm-volume{
  height:4px !important;
  display:flex;
  align-items:center;
}

.rfm-volume::-webkit-slider-thumb{
  margin-top:-3px !important;
}

.rfm-volume::-moz-range-thumb{
  transform:translateY(-2px);
}

/* Track sauber */
.rfm-volume::-webkit-slider-runnable-track{
  height:4px !important;
}

.rfm-volume::-moz-range-track{
  height:4px !important;
}


/* ===== 1.5.0 Requested updates on top of 1.4.9 ===== */

/* Play/Pause button like later preferred version */
.rfm-play{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  overflow: visible !important;
  position: relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.rfm-play:hover{
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: scale(1.04) !important;
}

.rfm-play::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 70%);
  filter: blur(4px);
  z-index:0;
}

.rfm-icon-play,
.rfm-icon-pause{
  z-index:1 !important;
}

.rfm-icon-play{
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  border-left: 16px solid #e8c14a !important;
  margin-left: 4px !important;
  filter: drop-shadow(0 0 4px rgba(232,193,74,.95)) drop-shadow(0 0 10px rgba(212,175,55,.75));
}

.rfm-icon-pause{
  width: 18px !important;
  height: 20px !important;
  filter: drop-shadow(0 0 4px rgba(232,193,74,.95)) drop-shadow(0 0 10px rgba(212,175,55,.75));
}
.rfm-icon-pause::before,
.rfm-icon-pause::after{
  width: 5px !important;
  background: #e8c14a !important;
  box-shadow: 0 0 8px rgba(212,175,55,.65);
}

/* Sticky player: extra 20px bottom */
.rfm-player-shell.is-sticky .rfm-player{
  padding-bottom: 26px !important;
  min-height: 100px !important;
  height: 100px !important;
  align-items: flex-start !important;
}
.rfm-player-shell.is-sticky .rfm-center{
  align-self: flex-end !important;
}
.rfm-player-shell:not(.is-sticky) .rfm-player{
  padding-bottom: 6px !important;
}

/* Notes animation faster while playing */
.rfm-player-shell.is-playing .rfm-note{
  animation-name: rfmFloatNotesPlay !important;
  animation-duration: 3.1s !important;
  animation-timing-function: ease-in-out !important;
}

@media (max-width:620px){
  .rfm-player-shell.is-sticky .rfm-player{
    min-height:100px !important;
    height:100px !important;
    padding-bottom:24px !important;
  }
}


/* ===== 1.5.1 Full-height notes animation ===== */
.rfm-center{
  overflow: visible !important;
  align-items: stretch !important;
}

.rfm-note-field{
  overflow: visible !important;
  height: 58px !important;
  display:flex !important;
  align-items:flex-end !important;
}

.rfm-player-shell.is-sticky .rfm-note-field{
  height: 72px !important;
}

.rfm-note{
  bottom: 0 !important;
  transform-origin: bottom center !important;
}

@keyframes rfmFloatNotes{
  0%{ transform:translateY(18px) translateX(0) scale(.9); opacity:0; }
  10%{ opacity:.8; }
  50%{ transform:translateY(-12px) translateX(6px) scale(1); opacity:1; }
  90%{ opacity:.12; }
  100%{ transform:translateY(-34px) translateX(12px) scale(1.06); opacity:0; }
}

@keyframes rfmFloatNotesPlay{
  0%{ transform:translateY(24px) translateX(0) scale(.85) rotate(-8deg); opacity:0; }
  10%{ opacity:.75; }
  35%{ transform:translateY(-2px) translateX(8px) scale(1.02) rotate(4deg); opacity:1; }
  65%{ transform:translateY(-22px) translateX(16px) scale(1.1) rotate(-4deg); opacity:.9; }
  100%{ transform:translateY(-46px) translateX(28px) scale(1.16) rotate(8deg); opacity:0; }
}

@media (max-width:900px){
  .rfm-note-field{
    height: 44px !important;
  }
  .rfm-player-shell.is-sticky .rfm-note-field{
    height: 52px !important;
  }
  @keyframes rfmFloatNotes{
    0%{ transform:translateY(12px) translateX(0) scale(.9); opacity:0; }
    10%{ opacity:.8; }
    50%{ transform:translateY(-8px) translateX(6px) scale(1); opacity:1; }
    90%{ opacity:.12; }
    100%{ transform:translateY(-24px) translateX(12px) scale(1.06); opacity:0; }
  }
  @keyframes rfmFloatNotesPlay{
    0%{ transform:translateY(16px) translateX(0) scale(.85) rotate(-8deg); opacity:0; }
    10%{ opacity:.75; }
    35%{ transform:translateY(0px) translateX(8px) scale(1.02) rotate(4deg); opacity:1; }
    65%{ transform:translateY(-14px) translateX(16px) scale(1.1) rotate(-4deg); opacity:.9; }
    100%{ transform:translateY(-30px) translateX(28px) scale(1.16) rotate(8deg); opacity:0; }
  }
}

@media (max-width:620px){
  .rfm-note-field{
    height: 30px !important;
    overflow: visible !important;
  }
  .rfm-player-shell.is-sticky .rfm-note-field{
    height: 36px !important;
  }
}


/* ===== 1.5.2 Mobile volume hidden ===== */
@media (max-width: 768px){
  .rfm-volume,
  .rfm-volume-wrap,
  .rfm-volume input{
    display:none !important;
  }
}