/* ======================================================
   MAGICALRADIO3D - PLAYER PUBLIC V2
   VISUEL UNIQUEMENT
   ====================================================== */

body[data-page="home"] .hero-grid > .mr3d-radio-card{
  grid-column:1 / -1;
}

body[data-page="home"] .mr3d-radio-card{
  position:relative;
  overflow:hidden;
  padding:18px !important;

  background:
    radial-gradient(
      circle at 88% 5%,
      rgba(184,61,255,.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 5% 100%,
      rgba(22,196,255,.13),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(11,20,45,.98),
      rgba(8,13,31,.99)
    ) !important;

  border:
    1px solid rgba(112,169,255,.32) !important;

  box-shadow:
    0 22px 55px rgba(0,0,0,.34),
    inset 0 0 50px rgba(72,134,255,.04);
}

body[data-page="home"] .mr3d-radio-card::before{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-110px;
  top:-160px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(212,54,255,.18),
      transparent 68%
    );
  pointer-events:none;
}


body[data-page="home"] .mr3d-radio-top{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  margin-bottom:16px;
}


body[data-page="home"] .mr3d-radio-brand{
  display:flex;
  align-items:center;
  gap:12px;
}


body[data-page="home"] .mr3d-radio-wave{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:15px;

  font-size:27px;
  font-weight:900;

  color:#ff62e8;

  background:
    linear-gradient(
      145deg,
      rgba(255,66,216,.18),
      rgba(55,178,255,.10)
    );

  border:
    1px solid rgba(255,111,235,.28);

  box-shadow:
    0 0 28px rgba(255,65,218,.17);
}


body[data-page="home"] .mr3d-radio-kicker{
  color:#62ddff;

  font-size:11px;
  font-weight:900;
  letter-spacing:.15em;

  margin-bottom:2px;
}


body[data-page="home"] .mr3d-radio-heading{
  color:#fff;
  font-size:18px;
}


body[data-page="home"] .mr3d-radio-live{
  display:flex;
  align-items:center;
  gap:7px;

  padding:7px 11px;

  border-radius:999px;

  color:#bfffe0;

  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;

  background:rgba(35,216,138,.10);

  border:
    1px solid rgba(35,216,138,.24);
}


body[data-page="home"] .mr3d-radio-live span{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#39e89a;

  box-shadow:
    0 0 12px rgba(57,232,154,.8);
}


body[data-page="home"] .mr3d-radio-now{
  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    64px
    minmax(0,1fr)
    auto;

  align-items:center;

  gap:16px;

  padding:15px;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.022)
    );

  border:
    1px solid rgba(255,255,255,.08);
}


body[data-page="home"] #radioPlayBtn.mr3d-radio-play{
  width:58px;
  height:58px;

  padding:0;

  display:grid;
  place-items:center;

  border-radius:50%;

  font-size:19px;

  background:
    linear-gradient(
      135deg,
      #d948ff,
      #706eff 55%,
      #25cfff
    );

  box-shadow:
    0 0 0 5px rgba(143,99,255,.10),
    0 0 28px rgba(197,66,255,.34);
}


body[data-page="home"] .mr3d-radio-now-text{
  min-width:0;
}


body[data-page="home"] .mr3d-radio-title{
  margin-top:2px;

  color:#fff;

  font-size:23px;
  line-height:1.1;
  font-weight:950;
}


body[data-page="home"] .mr3d-radio-subtitle{
  margin-top:5px;

  color:#aebddb;

  font-size:12px;
}


body[data-page="home"] .mr3d-radio-mini-bars{
  height:46px;

  display:flex;
  align-items:flex-end;
  gap:4px;

  padding-right:3px;
}


body[data-page="home"] .mr3d-radio-mini-bars i{
  width:5px;

  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      #f044ff,
      #7d73ff,
      #25d5ff
    );

  box-shadow:
    0 0 10px rgba(90,183,255,.28);
}


body[data-page="home"] .mr3d-radio-mini-bars i:nth-child(1){
  height:17px;
}

body[data-page="home"] .mr3d-radio-mini-bars i:nth-child(2){
  height:34px;
}

body[data-page="home"] .mr3d-radio-mini-bars i:nth-child(3){
  height:25px;
}

body[data-page="home"] .mr3d-radio-mini-bars i:nth-child(4){
  height:42px;
}

body[data-page="home"] .mr3d-radio-mini-bars i:nth-child(5){
  height:29px;
}


body[data-page="home"] .mr3d-radio-card #radioEqualizer{
  position:relative;
  z-index:2;

  height:72px !important;

  margin:
    14px 0 10px !important;

  padding:
    12px 14px !important;

  border-radius:17px !important;

  background:
    rgba(255,255,255,.035) !important;

  border:
    1px solid rgba(255,255,255,.075) !important;
}


body[data-page="home"] .mr3d-radio-card #radioEqualizer span{
  background:
    linear-gradient(
      180deg,
      #f059ff 0%,
      #846fff 48%,
      #29d9ff 100%
    ) !important;
}


body[data-page="home"] .mr3d-radio-volume{
  position:relative;
  z-index:2;

  padding:
    8px 11px !important;

  margin-top:
    8px !important;
}


body[data-page="home"] .mr3d-volume-icon{
  font-size:14px;
}


body[data-page="home"] .mr3d-radio-meta{
  position:relative;
  z-index:2;

  align-items:center;

  padding:
    3px 2px 0;
}


body[data-page="home"] .mr3d-sono-zone{
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;

  margin-top:16px;

  padding:15px;

  border-radius:18px;

  background:
    linear-gradient(
      120deg,
      rgba(220,46,255,.09),
      rgba(57,130,255,.08)
    );

  border:
    1px solid rgba(177,97,255,.18);
}


body[data-page="home"] .mr3d-sono-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}


body[data-page="home"] .mr3d-sono-copy strong{
  color:#fff;
  font-size:16px;
}


body[data-page="home"] .mr3d-sono-copy span{
  color:#aebddb;
  font-size:11px;
}


body[data-page="home"] .mr3d-sono-btn{
  min-width:205px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:11px;

  padding:
    11px 15px;

  border:0;

  border-radius:16px;

  color:#fff;

  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      #f23bd8,
      #a34cff 48%,
      #42c9ff
    );

  box-shadow:
    0 10px 32px rgba(198,57,255,.30),
    0 0 0 1px rgba(255,255,255,.11) inset;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


body[data-page="home"] .mr3d-sono-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 15px 38px rgba(198,57,255,.38),
    0 0 0 1px rgba(255,255,255,.18) inset;
}


body[data-page="home"] .mr3d-sono-btn > span:nth-child(2){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}


body[data-page="home"] .mr3d-sono-btn b{
  font-size:15px;
  line-height:1.05;
}


body[data-page="home"] .mr3d-sono-btn small{
  margin-top:3px;

  font-size:9px;
  font-weight:700;

  opacity:.78;
}


body[data-page="home"] .mr3d-sono-star{
  font-size:18px;
}


body[data-page="home"] .mr3d-sono-arrow{
  font-size:20px;
}


@media (max-width:700px){

  body[data-page="home"] .mr3d-radio-top{
    align-items:flex-start;
  }

  body[data-page="home"] .mr3d-radio-now{
    grid-template-columns:
      58px
      minmax(0,1fr);
  }

  body[data-page="home"] .mr3d-radio-mini-bars{
    display:none;
  }

  body[data-page="home"] .mr3d-sono-zone{
    flex-direction:column;
    align-items:stretch;
  }

  body[data-page="home"] .mr3d-sono-btn{
    width:100%;
    min-width:0;
  }

}


/* =========================================================
   MAGICALRADIO3D - MODE RADIO + ROOMS ACTIVES
   ========================================================= */

.mr3d-radio-community{
  margin-top:16px;
  display:grid;
  gap:12px;
}

.mr3d-radio-mode-card{
  padding:15px 16px;
  border-radius:18px;
  background:
    linear-gradient(
      135deg,
      rgba(67,52,142,.35),
      rgba(24,31,74,.68)
    );
  border:1px solid rgba(135,126,255,.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.18);
}

.mr3d-radio-mode-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.mr3d-radio-mode-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  color:#aebcf5;
}

.mr3d-radio-mode-badge{
  font-size:11px;
  font-weight:900;
  padding:6px 9px;
  border-radius:999px;
  color:#ff9be8;
  background:rgba(255,79,216,.10);
  border:1px solid rgba(255,79,216,.24);
}

.mr3d-radio-mode-card strong{
  display:block;
  font-size:16px;
  color:#fff;
  margin-bottom:4px;
}

.mr3d-radio-mode-card > span{
  display:block;
  font-size:13px;
  line-height:1.45;
  color:#b9c6e8;
}

.mr3d-active-rooms-toggle{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border-radius:16px;
  cursor:pointer;
  color:#eef4ff;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
}

.mr3d-active-rooms-toggle:hover{
  background:rgba(255,255,255,.075);
}

#mr3dActiveRoomsCount{
  display:inline-flex;
  min-width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  margin-left:6px;
  border-radius:999px;
  background:rgba(74,220,255,.14);
  color:#58e5ff;
}

.mr3d-active-rooms-panel{
  padding:12px;
  border-radius:16px;
  background:rgba(6,12,30,.58);
  border:1px solid rgba(255,255,255,.08);
}

.mr3d-active-rooms-empty{
  text-align:center;
  padding:12px;
  color:#8998bf;
  font-size:13px;
}

@media (max-width:768px){
  .mr3d-radio-mode-head{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* =========================================================
   MAGICALRADIO3D — PLAYER RADIO 2026
   COUP DE JEUNE VISUEL
   ========================================================= */

.mr3d-radio-card{
  position:relative;
  overflow:hidden;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 15% 0%, rgba(108,92,255,.20), transparent 34%),
    radial-gradient(circle at 92% 16%, rgba(255,63,209,.14), transparent 32%),
    linear-gradient(145deg,#0d1733 0%,#111a3d 48%,#0b1630 100%)!important;
  border:1px solid rgba(104,213,255,.20)!important;
  box-shadow:
    0 20px 55px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 60px rgba(69,132,255,.04)!important;
}

.mr3d-radio-card::before{
  content:"";
  position:absolute;
  inset:-60px;
  pointer-events:none;
  background:
    repeating-radial-gradient(
      circle at 15% 20%,
      rgba(101,240,255,.05) 0 1px,
      transparent 1px 18px
    );
  opacity:.28;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}

.mr3d-radio-top,
.mr3d-radio-now,
.mr3d-radio-volume,
.mr3d-radio-meta,
.mr3d-sono-zone,
.mr3d-radio-community{
  position:relative;
  z-index:1;
}

.mr3d-radio-kicker{
  letter-spacing:.16em!important;
  font-size:10px!important;
  color:#69ecff!important;
  text-shadow:0 0 14px rgba(105,236,255,.42);
}

.mr3d-radio-heading{
  font-size:18px!important;
  font-weight:900!important;
  color:#fff!important;
  letter-spacing:-.01em;
}

.mr3d-radio-live{
  padding:7px 11px!important;
  border-radius:999px!important;
  background:rgba(21,255,168,.10)!important;
  border:1px solid rgba(58,255,180,.26)!important;
  color:#83ffd0!important;
  box-shadow:0 0 22px rgba(33,255,176,.10);
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.06em;
}

.mr3d-radio-live span{
  box-shadow:0 0 12px rgba(72,255,187,.85);
}

.mr3d-radio-now{
  border-radius:20px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 30px rgba(0,0,0,.18)!important;
}

.mr3d-radio-play{
  width:64px!important;
  height:64px!important;
  min-width:64px!important;
  border-radius:50%!important;
  font-size:24px!important;
  background:
    linear-gradient(145deg,#9d55ff 0%,#6c6cff 48%,#43d9ff 100%)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:
    0 0 0 7px rgba(117,93,255,.08),
    0 0 28px rgba(102,98,255,.52),
    0 14px 26px rgba(0,0,0,.34),
    inset 0 2px 1px rgba(255,255,255,.24)!important;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease!important;
}

.mr3d-radio-play:hover{
  transform:scale(1.06)!important;
  filter:brightness(1.10);
}

#radioEqualizer.equalizer{
  position:relative;
  overflow:hidden;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(9,17,42,.55),rgba(16,25,57,.72))!important;
  border:1px solid rgba(106,180,255,.11)!important;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.28),
    0 10px 24px rgba(0,0,0,.14)!important;
}

#radioEqualizer.equalizer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.035),
      transparent
    );
  transform:translateX(-100%);
  animation:mr3dEqScan 5s linear infinite;
}

@keyframes mr3dEqScan{
  to{ transform:translateX(100%); }
}

#radioEqualizer.equalizer span{
  position:relative;
  z-index:1;
  background:
    linear-gradient(
      180deg,
      #ff58de 0%,
      #a167ff 42%,
      #4f89ff 72%,
      #55edff 100%
    )!important;
  box-shadow:
    0 0 9px rgba(255,84,218,.35),
    0 0 16px rgba(80,224,255,.25)!important;
  animation-timing-function:cubic-bezier(.4,0,.2,1)!important;
}

.mr3d-radio-volume{
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:999px!important;
  padding:9px 12px!important;
}

#radioVolume{
  accent-color:#60e4ff;
}

.mr3d-radio-meta{
  font-size:11px!important;
  color:#aebbdc!important;
}

#radioStatus{
  color:#65f1d0!important;
  text-shadow:0 0 12px rgba(101,241,208,.26)!important;
}

.mr3d-sono-zone{
  border-radius:20px!important;
  padding:14px!important;
  background:
    linear-gradient(
      135deg,
      rgba(121,66,255,.17),
      rgba(255,64,210,.09)
    )!important;
  border:1px solid rgba(191,116,255,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 30px rgba(0,0,0,.17)!important;
}

.mr3d-sono-copy strong{
  font-size:16px!important;
  color:#fff!important;
}

.mr3d-sono-copy span{
  color:#b9c5e5!important;
}

.mr3d-sono-btn{
  border-radius:16px!important;
  background:
    linear-gradient(
      110deg,
      #ca3dff 0%,
      #a74cff 32%,
      #5d77ff 66%,
      #41dafa 100%
    )!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:
    0 10px 24px rgba(112,69,255,.30),
    0 0 22px rgba(204,64,255,.18),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease!important;
}

.mr3d-sono-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.mr3d-radio-mode-card{
  position:relative;
  overflow:hidden;
  border-radius:20px!important;
  padding:16px!important;
  background:
    linear-gradient(
      135deg,
      rgba(49,55,126,.48),
      rgba(27,35,82,.58)
    )!important;
  border:1px solid rgba(139,125,255,.24)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 28px rgba(0,0,0,.18)!important;
}

.mr3d-radio-mode-card::after{
  content:"";
  position:absolute;
  right:-30px;
  top:-30px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,71,211,.12),transparent 68%);
  pointer-events:none;
}

.mr3d-radio-mode-label{
  color:#95aaff!important;
}

.mr3d-radio-mode-badge{
  position:relative;
  z-index:1;
  background:
    linear-gradient(
      135deg,
      rgba(255,79,216,.16),
      rgba(156,80,255,.14)
    )!important;
  border:1px solid rgba(255,105,222,.30)!important;
  color:#ffb2ee!important;
  box-shadow:0 0 18px rgba(255,72,216,.11);
}

.mr3d-active-rooms-toggle{
  border-radius:18px!important;
  background:
    linear-gradient(
      135deg,
      rgba(18,32,67,.84),
      rgba(16,28,59,.76)
    )!important;
  border:1px solid rgba(93,201,255,.13)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 9px 22px rgba(0,0,0,.16)!important;
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease!important;
}

.mr3d-active-rooms-toggle:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(
      135deg,
      rgba(24,41,84,.94),
      rgba(22,37,78,.88)
    )!important;
  border-color:rgba(93,220,255,.26)!important;
}

#mr3dActiveRoomsCount{
  background:
    linear-gradient(135deg,rgba(78,219,255,.18),rgba(121,113,255,.18))!important;
  color:#7bedff!important;
  border:1px solid rgba(112,223,255,.18);
  box-shadow:0 0 14px rgba(79,216,255,.10);
}

.mr3d-active-rooms-panel{
  animation:mr3dRoomsOpen .18s ease;
}

@keyframes mr3dRoomsOpen{
  from{
    opacity:0;
    transform:translateY(-5px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:768px){

  .mr3d-radio-play{
    width:58px!important;
    height:58px!important;
    min-width:58px!important;
  }

  .mr3d-sono-zone{
    gap:10px!important;
  }

  .mr3d-sono-btn{
    min-height:48px;
  }

}

/* =========================================================
   MAGICALRADIO3D
   PLAYER PREMIUM STYLE SONO
   ========================================================= */

.mr3d-radio-card{
  position:relative!important;
  overflow:hidden!important;

  border-radius:28px!important;

  background:
    radial-gradient(circle at 12% 5%,rgba(171,76,255,.22),transparent 26%),
    radial-gradient(circle at 88% 8%,rgba(38,191,255,.18),transparent 28%),
    linear-gradient(
      145deg,
      #07152d 0%,
      #0b1c3a 45%,
      #101b42 100%
    )!important;

  border:1px solid rgba(91,194,255,.35)!important;

  box-shadow:
    0 0 0 1px rgba(169,78,255,.12),
    0 0 38px rgba(71,98,255,.16),
    0 24px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
}


/* Halo néon extérieur */
.mr3d-radio-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(65,231,255,.28),
      transparent 28%,
      transparent 68%,
      rgba(238,61,255,.32)
    );

  opacity:.55;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite:xor;

  padding:1px;
}


/* HEADER */
.mr3d-radio-top{
  padding:4px 2px 12px!important;
}

.mr3d-radio-wave{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:46px!important;
  height:46px!important;

  border-radius:15px!important;

  background:
    linear-gradient(
      145deg,
      rgba(221,56,255,.22),
      rgba(55,188,255,.12)
    )!important;

  border:1px solid rgba(208,94,255,.32)!important;

  color:#ff65ef!important;

  box-shadow:
    0 0 22px rgba(222,74,255,.20)!important;
}

.mr3d-radio-kicker{
  color:#65eaff!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
}

.mr3d-radio-heading{
  font-size:19px!important;
  font-weight:900!important;
  color:#fff!important;
}

.mr3d-radio-live{
  border-radius:999px!important;
  padding:8px 13px!important;

  background:
    linear-gradient(
      135deg,
      rgba(16,220,149,.20),
      rgba(19,132,98,.16)
    )!important;

  border:1px solid rgba(64,255,183,.42)!important;

  color:#83ffd2!important;

  box-shadow:
    0 0 20px rgba(35,255,178,.15)!important;
}


/* PLAYER PRINCIPAL */
.mr3d-radio-now{
  margin-top:8px!important;
  padding:18px!important;

  border-radius:22px!important;

  background:
    linear-gradient(
      135deg,
      rgba(6,19,45,.88),
      rgba(13,26,61,.84)
    )!important;

  border:1px solid rgba(92,135,255,.22)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 14px 32px rgba(0,0,0,.20)!important;
}


/* PLAY façon sono */
.mr3d-radio-play{
  width:72px!important;
  height:72px!important;
  min-width:72px!important;

  border-radius:50%!important;

  font-size:27px!important;

  background:
    radial-gradient(circle at 35% 25%,#ff71f0,#9f4cff 46%,#386fff 76%,#2fd8ff)!important;

  border:1px solid rgba(255,255,255,.28)!important;

  box-shadow:
    0 0 0 6px rgba(185,64,255,.08),
    0 0 24px rgba(218,71,255,.50),
    0 0 42px rgba(60,180,255,.24),
    inset 0 2px 2px rgba(255,255,255,.30)!important;
}

.mr3d-radio-play:hover{
  transform:scale(1.07)!important;
  filter:brightness(1.12)!important;
}


/* PETITES BARRES seulement */
.mr3d-radio-mini-bars{
  filter:
    drop-shadow(0 0 8px rgba(221,68,255,.45))
    drop-shadow(0 0 10px rgba(67,207,255,.24))!important;
}


/* VOLUME */
.mr3d-radio-volume{
  margin-top:14px!important;

  padding:10px 14px!important;

  border-radius:999px!important;

  background:
    rgba(6,17,40,.72)!important;

  border:1px solid rgba(111,151,255,.18)!important;
}

#radioVolume{
  accent-color:#bd55ff!important;
}


/* STATUS */
.mr3d-radio-meta{
  padding:3px 4px!important;
}

#radioStatus{
  color:#59f2ce!important;
  font-weight:900!important;
}


/* TA SONO */
.mr3d-sono-zone{
  margin-top:16px!important;

  padding:16px!important;

  border-radius:22px!important;

  background:
    linear-gradient(
      120deg,
      rgba(33,24,83,.92),
      rgba(27,26,72,.87)
    )!important;

  border:1px solid rgba(173,88,255,.28)!important;

  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05)!important;
}

.mr3d-sono-copy strong{
  font-size:18px!important;
}

.mr3d-sono-btn{
  min-height:56px!important;

  padding:0 22px!important;

  border-radius:18px!important;

  background:
    linear-gradient(
      110deg,
      #ed29ef 0%,
      #bf39ff 35%,
      #7358ff 67%,
      #37cfff 100%
    )!important;

  border:1px solid rgba(255,255,255,.24)!important;

  box-shadow:
    0 0 28px rgba(218,55,255,.26),
    0 12px 28px rgba(72,49,210,.26),
    inset 0 1px 0 rgba(255,255,255,.20)!important;
}

.mr3d-sono-btn b{
  font-size:15px!important;
}


/* ===============================
   MODE ACTUEL
   =============================== */

.mr3d-radio-community{
  margin-top:16px!important;
}

.mr3d-radio-mode-wrap{
  padding:16px!important;

  border-radius:22px!important;

  background:
    linear-gradient(
      145deg,
      rgba(6,19,47,.86),
      rgba(12,25,59,.88)
    )!important;

  border:1px solid rgba(91,147,255,.20)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 32px rgba(0,0,0,.20)!important;
}

.mr3d-mode-title-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  margin-bottom:14px;
}

.mr3d-mode-title-row strong{
  display:block;

  margin-top:3px;

  color:#fff;

  font-size:16px;
}

.mr3d-mode-eyebrow{
  display:block;

  color:#7f9cff;

  font-size:10px;

  font-weight:900;

  letter-spacing:.12em;
}

.mr3d-mode-grid{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;
}


/* CHOIX */
.mr3d-mode-choice{
  min-height:100px;

  padding:14px;

  display:flex;

  align-items:center;

  gap:12px;

  position:relative;

  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      rgba(15,31,68,.95),
      rgba(16,31,68,.82)
    );

  border:1px solid rgba(83,127,220,.22);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.mr3d-mode-choice.active{
  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(222,53,255,.18),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      rgba(57,22,98,.93),
      rgba(29,26,81,.93)
    );

  border:1px solid rgba(235,81,255,.70);

  box-shadow:
    0 0 0 1px rgba(214,67,255,.18),
    0 0 28px rgba(209,63,255,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.mr3d-mode-icon{
  width:50px;
  height:50px;

  min-width:50px;

  border-radius:15px;

  display:flex;

  justify-content:center;
  align-items:center;

  font-size:24px;

  background:
    linear-gradient(
      145deg,
      rgba(220,59,255,.30),
      rgba(135,71,255,.20)
    );

  border:1px solid rgba(228,102,255,.36);

  box-shadow:
    0 0 20px rgba(211,62,255,.15);
}

.mr3d-mode-icon.blue{
  background:
    linear-gradient(
      145deg,
      rgba(44,185,255,.26),
      rgba(58,94,255,.18)
    );

  border-color:rgba(70,191,255,.34);
}

.mr3d-mode-copy{
  flex:1;
}

.mr3d-mode-copy strong{
  display:block;

  color:#fff;

  margin-bottom:5px;

  font-size:15px;
}

.mr3d-mode-copy span{
  display:block;

  color:#aebce1;

  font-size:12px;

  line-height:1.35;
}

.mr3d-mode-check{
  width:30px;
  height:30px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  font-size:18px;

  font-weight:900;

  color:#fff;

  background:
    linear-gradient(
      145deg,
      #ef5cff,
      #9b5dff
    );

  box-shadow:
    0 0 18px rgba(229,76,255,.34);
}

.mr3d-mode-radio{
  width:28px;
  height:28px;

  border-radius:50%;

  border:1px solid rgba(108,161,255,.48);

  background:rgba(10,25,58,.60);
}


/* BADGE ÉMISSION */
.mr3d-radio-mode-badge{
  padding:7px 10px!important;

  border-radius:999px!important;

  background:
    linear-gradient(
      135deg,
      rgba(229,67,255,.18),
      rgba(129,76,255,.18)
    )!important;

  border:1px solid rgba(224,86,255,.36)!important;

  color:#ffafea!important;

  font-size:10px!important;

  font-weight:900!important;
}


/* ROOMS */
.mr3d-active-rooms-toggle{
  margin-top:12px!important;

  min-height:56px!important;

  padding:12px 16px!important;

  border-radius:18px!important;

  background:
    linear-gradient(
      135deg,
      rgba(10,28,62,.92),
      rgba(18,33,75,.88)
    )!important;

  border:1px solid rgba(95,145,255,.22)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 10px 26px rgba(0,0,0,.18)!important;
}

#mr3dActiveRoomsCount{
  min-width:30px!important;

  height:28px!important;

  background:
    linear-gradient(
      145deg,
      #495cff,
      #389fff
    )!important;

  color:#fff!important;

  box-shadow:
    0 0 18px rgba(71,121,255,.30)!important;
}

.mr3d-active-rooms-panel{
  margin-top:8px;

  background:
    rgba(7,20,47,.88)!important;

  border:1px solid rgba(81,143,255,.18)!important;

  border-radius:18px!important;
}


/* MOBILE */
@media(max-width:768px){

  .mr3d-mode-grid{
    grid-template-columns:1fr;
  }

  .mr3d-mode-title-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .mr3d-radio-play{
    width:62px!important;
    height:62px!important;
    min-width:62px!important;
  }

  .mr3d-sono-zone{
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .mr3d-sono-btn{
    width:100%!important;
  }

}

/* =========================================================
   COUCHE 1 — FOND VISUEL MAGICALRADIO3D
   ========================================================= */

.mr3d-radio-card{
  position:relative!important;
  overflow:hidden!important;

  background:
    linear-gradient(
      180deg,
      rgba(5,12,32,.18),
      rgba(5,12,32,.34)
    ),
    url("/assets/magicalradio-player-bg.png") center top / cover no-repeat!important;

  border:1px solid rgba(72,190,255,.34)!important;

  box-shadow:
    0 0 0 1px rgba(220,72,255,.12),
    0 0 34px rgba(72,118,255,.20),
    0 20px 50px rgba(0,0,0,.38)!important;
}

/* voile léger pour garder les textes lisibles */
.mr3d-radio-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(4,10,28,.10) 0%,
      rgba(4,10,28,.16) 28%,
      rgba(4,10,28,.36) 58%,
      rgba(4,10,28,.52) 100%
    );
}

/* tout le contenu reste au-dessus du fond */
.mr3d-radio-card > *{
  position:relative;
  z-index:1;
}


/* =========================================================
   COUCHE 1 REELLE — IMAGE SOUS LE PLAYER
   ========================================================= */

.mr3d-radio-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;

  /* on retire le faux background précédent */
  background:#07142e!important;
}

.mr3d-player-bg-layer{
  position:absolute!important;

  inset:0!important;

  width:100%!important;
  height:100%!important;

  object-fit:cover!important;
  object-position:center top!important;

  z-index:-3!important;

  display:block!important;

  opacity:1!important;

  pointer-events:none!important;
}

.mr3d-player-bg-shade{
  position:absolute!important;

  inset:0!important;

  z-index:-2!important;

  pointer-events:none!important;

  background:
    linear-gradient(
      180deg,
      rgba(3,9,25,.10) 0%,
      rgba(3,9,25,.20) 35%,
      rgba(3,9,25,.42) 68%,
      rgba(3,9,25,.58) 100%
    )!important;
}

/* contenu interactif au-dessus */
.mr3d-radio-card > *:not(.mr3d-player-bg-layer):not(.mr3d-player-bg-shade){
  position:relative!important;
  z-index:2!important;
}

/* On laisse voir davantage le décor */
.mr3d-radio-now,
.mr3d-sono-zone,
.mr3d-radio-mode-card,
.mr3d-radio-mode-wrap,
.mr3d-active-rooms-toggle,
.mr3d-active-rooms-panel{
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

.mr3d-radio-now{
  background:rgba(6,17,43,.62)!important;
}

.mr3d-sono-zone{
  background:rgba(30,21,77,.56)!important;
}

.mr3d-radio-mode-card,
.mr3d-radio-mode-wrap{
  background:rgba(12,24,59,.62)!important;
}

.mr3d-active-rooms-toggle{
  background:rgba(8,23,54,.64)!important;
}


/* =========================================================
   COUCHE 2 — PLAYER APP MAGICALRADIO3D
   ========================================================= */

/* Ancien gros égaliseur retiré visuellement */
#radioEqualizer{
  display:none!important;
}


/* ---------------------------------------------------------
   BLOC PRINCIPAL
   --------------------------------------------------------- */

.mr3d-radio-now{
  position:relative!important;

  min-height:126px!important;

  display:grid!important;
  grid-template-columns:92px 1fr 72px!important;

  align-items:center!important;
  gap:18px!important;

  margin-top:12px!important;
  padding:18px 20px!important;

  overflow:hidden!important;

  border-radius:24px!important;

  background:
    linear-gradient(
      110deg,
      rgba(4,16,42,.82),
      rgba(10,26,65,.70) 55%,
      rgba(13,25,61,.62)
    )!important;

  border:1px solid rgba(87,157,255,.34)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 32px rgba(58,91,255,.06),
    0 16px 34px rgba(0,0,0,.26)!important;

  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}


/* petite lumière interne */
.mr3d-radio-now::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(215,60,255,.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 40%,
      rgba(49,211,255,.10),
      transparent 26%
    );
}


/* ---------------------------------------------------------
   BOUTON PLAY / PAUSE
   --------------------------------------------------------- */

#radioPlayBtn.mr3d-radio-play{
  position:relative!important;
  z-index:3!important;

  width:82px!important;
  height:82px!important;
  min-width:82px!important;

  padding:0!important;
  margin:0!important;

  border:0!important;
  border-radius:50%!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  background:
    url("/assets/mr3d-play-texture.svg")
    center / contain no-repeat!important;

  color:#fff!important;

  font-size:29px!important;
  line-height:1!important;

  text-shadow:
    0 2px 5px rgba(0,0,0,.30),
    0 0 10px rgba(255,255,255,.30)!important;

  box-shadow:
    0 0 16px rgba(204,67,255,.28),
    0 0 34px rgba(49,197,255,.16)!important;

  cursor:pointer!important;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease!important;
}

#radioPlayBtn.mr3d-radio-play:hover{
  transform:scale(1.07)!important;

  filter:
    brightness(1.12)
    saturate(1.08)!important;

  box-shadow:
    0 0 22px rgba(226,67,255,.42),
    0 0 45px rgba(55,201,255,.24)!important;
}

#radioPlayBtn.mr3d-radio-play:active{
  transform:scale(.96)!important;
}


/* pulsation uniquement lorsque le player joue */
#radioEqualizer.radio-playing ~ .radio-volume-row{
  /* laissé volontairement neutre pour compatibilité */
}


/* ---------------------------------------------------------
   TITRE / INFORMATIONS
   --------------------------------------------------------- */

.mr3d-radio-now-text{
  position:relative!important;
  z-index:2!important;

  min-width:0!important;

  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}

.mr3d-radio-now-text .muted.small{
  margin-bottom:5px!important;

  color:#72efff!important;

  font-size:10px!important;
  font-weight:900!important;

  letter-spacing:.13em!important;

  text-transform:uppercase!important;
}

.mr3d-radio-title{
  margin:0!important;

  color:#fff!important;

  font-size:23px!important;
  font-weight:900!important;

  letter-spacing:-.025em!important;

  text-shadow:
    0 2px 12px rgba(0,0,0,.28)!important;
}

.mr3d-radio-subtitle{
  margin-top:5px!important;

  color:#bdc9e9!important;

  font-size:12px!important;

  letter-spacing:.01em!important;
}


/* ---------------------------------------------------------
   MINI ONDES À DROITE
   --------------------------------------------------------- */

.mr3d-radio-mini-bars{
  position:relative!important;
  z-index:2!important;

  width:58px!important;
  height:55px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  gap:4px!important;

  padding:8px!important;

  border-radius:16px!important;

  background:
    linear-gradient(
      145deg,
      rgba(133,61,255,.12),
      rgba(42,186,255,.08)
    )!important;

  border:1px solid rgba(130,111,255,.16)!important;

  box-shadow:
    inset 0 0 18px rgba(93,73,255,.08),
    0 0 20px rgba(77,125,255,.08)!important;
}

.mr3d-radio-mini-bars i{
  width:4px!important;

  border-radius:999px!important;

  background:
    linear-gradient(
      to top,
      #3ee9ff,
      #765cff,
      #f24bdf
    )!important;

  box-shadow:
    0 0 8px rgba(115,104,255,.45)!important;

  animation:
    mr3dMiniWave 1.05s ease-in-out infinite alternate!important;
}

.mr3d-radio-mini-bars i:nth-child(1){
  height:18px!important;
  animation-delay:.05s!important;
}

.mr3d-radio-mini-bars i:nth-child(2){
  height:31px!important;
  animation-delay:.18s!important;
}

.mr3d-radio-mini-bars i:nth-child(3){
  height:43px!important;
  animation-delay:.30s!important;
}

.mr3d-radio-mini-bars i:nth-child(4){
  height:27px!important;
  animation-delay:.12s!important;
}

.mr3d-radio-mini-bars i:nth-child(5){
  height:36px!important;
  animation-delay:.24s!important;
}

@keyframes mr3dMiniWave{
  from{
    transform:scaleY(.60);
    opacity:.62;
  }

  to{
    transform:scaleY(1.08);
    opacity:1;
  }
}


/* ---------------------------------------------------------
   VOLUME = SOUS-CARTE DU PLAYER
   --------------------------------------------------------- */

.mr3d-radio-volume{
  position:relative!important;
  z-index:2!important;

  display:flex!important;
  align-items:center!important;

  gap:12px!important;

  margin-top:10px!important;

  min-height:44px!important;

  padding:8px 14px!important;

  border-radius:18px!important;

  background:
    rgba(4,16,40,.70)!important;

  border:
    1px solid rgba(97,150,255,.20)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04)!important;

  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

.mr3d-volume-icon{
  font-size:17px!important;

  filter:
    drop-shadow(0 0 7px rgba(73,220,255,.30));
}

#radioVolume{
  width:100%!important;

  accent-color:#c54aff!important;

  cursor:pointer!important;
}


/* ---------------------------------------------------------
   ÉTAT DU STREAM
   --------------------------------------------------------- */

.mr3d-radio-meta{
  position:relative!important;
  z-index:2!important;

  display:flex!important;

  align-items:center!important;
  justify-content:space-between!important;

  min-height:30px!important;

  padding:4px 8px!important;

  color:#a9b8db!important;

  font-size:11px!important;
}

#radioStatus{
  display:inline-flex!important;
  align-items:center!important;

  gap:5px!important;

  color:#54f2cf!important;

  font-weight:900!important;

  text-shadow:
    0 0 12px rgba(84,242,207,.28)!important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:768px){

  .mr3d-radio-now{
    grid-template-columns:68px 1fr 48px!important;

    gap:11px!important;

    min-height:108px!important;

    padding:14px!important;
  }

  #radioPlayBtn.mr3d-radio-play{
    width:66px!important;
    height:66px!important;
    min-width:66px!important;

    font-size:23px!important;
  }

  .mr3d-radio-title{
    font-size:18px!important;
  }

  .mr3d-radio-subtitle{
    font-size:10px!important;
  }

  .mr3d-radio-mini-bars{
    width:44px!important;
    height:48px!important;

    gap:3px!important;
    padding:6px!important;
  }

  .mr3d-radio-mini-bars i{
    width:3px!important;
  }

}

/* =========================================================
   COUCHE 2.1 — PLAY SOLO SUR LE FOND
   ========================================================= */

/* le grand rectangle du player devient invisible */
.mr3d-radio-now{
  width:auto!important;
  min-height:0!important;

  display:block!important;

  margin:22px 0 14px 18px!important;
  padding:0!important;

  background:transparent!important;
  border:0!important;
  box-shadow:none!important;

  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;

  overflow:visible!important;
}

/* on garde uniquement le vrai bouton */
.mr3d-radio-now-text,
.mr3d-radio-mini-bars{
  display:none!important;
}

/* bouton flottant */
#radioPlayBtn.mr3d-radio-play{
  width:88px!important;
  height:88px!important;
  min-width:88px!important;

  display:flex!important;

  position:relative!important;
  z-index:10!important;

  margin:0!important;

  box-shadow:
    0 0 0 7px rgba(192,63,255,.09),
    0 0 25px rgba(222,65,255,.52),
    0 0 50px rgba(50,207,255,.30),
    0 14px 32px rgba(0,0,0,.38)!important;
}

/* halo supplémentaire derrière le bouton */
#radioPlayBtn.mr3d-radio-play::after{
  content:"";

  position:absolute;

  width:112px;
  height:112px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(203,64,255,.20),
      rgba(40,210,255,.08) 48%,
      transparent 72%
    );

  z-index:-1;

  pointer-events:none;
}


/* mobile */
@media(max-width:768px){

  .mr3d-radio-now{
    margin:18px 0 12px 14px!important;
  }

  #radioPlayBtn.mr3d-radio-play{
    width:74px!important;
    height:74px!important;
    min-width:74px!important;
  }

}