/* === БАЗА === */
body {
  margin: 0;
  background: #000;
  font-family: Arial, sans-serif;
  color: #fff;
  min-width: 320px;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

.app {

  position: relative;

  width: 100%;
  max-width: 420px;

  margin: 0 auto;

  z-index: 2;

}

.app::before,
.app::after {

  content: "";

  position: absolute;

  top: 0;

  width: 12vw;
  max-width: 55px;
  min-width: 30px;

  height: 220px; /* ВОТ ЭТО */

  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;

  pointer-events: none;
  z-index: 1;
}

.player-box,
.playlist,
.footer {
  position: relative;
  z-index: 5;
}

.top-icons {
  position: relative;
  z-index: 5;
}

.player-box {
  z-index: 30;
}

.app::before {
  left: 6px;
  background-image: url('/img/fon_1.jpg');
}

.app::after {
  right: 6px;
  background-image: url('/img/fon_2.jpg');
}

/* === ЛОГО === */
.header {
  width: 100%;
  height: 120px;
  background: url("/img/logo_mobile.png") no-repeat center;
  background-size: contain;
}

/* === TOP ICONS === */
.top-icons {

  width: max-content;
  max-width: 95%;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  margin: 5px auto -12px auto;

  position: relative;
  z-index: 20;
}

.top-icons a {

  width: 38px;
  height: 38px;

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

  border-radius: 50%;

  background: linear-gradient(
    180deg,
    #2b2b2b 0%,
    #050505 100%
  );

  border: 1px solid #444;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.15),
    0 0 8px rgba(0,0,0,0.8);

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

.top-icons a:hover {

  transform: scale(1.08);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.25),
    0 0 12px rgba(255,215,0,.35);
}

.top-icons img {

  width: 20px;
  height: 20px;

  object-fit: contain;
}


/* =========================================
   PRO_RADIO
========================================= */
.mobile-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:12px 0;
}

.mobile-nav-btn{
  padding:7px 14px;
  background:#111;
  color:#ffd400;

  border:1px solid #333;
  border-radius:12px;

  text-decoration:none;
  font-size:13px;
  font-weight:bold;
}

.mobile-nav-btn:hover{
  color:#fff;
  border-color:#ffd400;
}


.mobile-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:10px 0 12px;
}

.mobile-nav-btn{
  padding:8px 14px;
  background:linear-gradient(to bottom,#1b1b1b,#050505);
  color:#ffd400;
  border:1px solid #333;
  border-radius:12px;
  text-decoration:none;
  font-weight:bold;
  font-size:14px;
  font-family:inherit;
}

.mobile-about-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.75);
  align-items:center;
  justify-content:center;
  padding:14px;
}

.mobile-about-modal.active{
  display:flex;
}

.mobile-about-content{
  width:100%;
  max-width:340px;
  position:relative;

  background:linear-gradient(180deg,#1b1b1b,#080808);
  border:2px solid #333;
  border-radius:12px;

  padding:22px 14px 18px;

  color:#ddd;
  box-shadow:0 0 25px rgba(0,0,0,.9);
}

.mobile-about-close{
  position:absolute;
  right:10px;
  top:6px;

  background:none;
  border:0;
  color:#777;

  font-size:28px;
  font-weight:bold;
  cursor:pointer;
}

.mobile-about-content h2{
  margin:0 0 18px;
  text-align:center;
  color:#ffd400;
  font-size:24px;
}

.mobile-about-info{
  padding:12px;
  background:#111;
  border:1px solid #333;
  border-radius:10px;
    font-size:15px;
  line-height:1.5;
}

.mobile-about-info p{
  margin:0;
  padding:10px 0;
  border-bottom:1px solid rgba(255,212,0,.15);
  margin:0 0 12px;
  font-size:14px;
  line-height:1.4;
}

.mobile-about-info p:last-child{
  margin-bottom:0;
  border-bottom:none;
}

.mobile-about-info strong{
  color:#ffd400;
}

.mobile-about-artists{
  display:block;
  margin-top:14px;
  padding:10px;

  text-align:center;
  text-decoration:none;
  font-weight:bold;

  color:#ffd400;
  background:#111;

  border:1px solid #333;
  border-radius:10px;
}

.mobile-contact-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.75);
  align-items:center;
  justify-content:center;
  padding:14px;
}

.mobile-contact-modal.active{
  display:flex;
}

.mobile-contact-content{
  width:100%;
  max-width:340px;

  background:linear-gradient(180deg,#1b1b1b,#080808);

  border:2px solid #333;
  border-radius:12px;

  padding:22px 14px 18px;

  position:relative;
}

.mobile-contact-content h2{
  text-align:center;
  color:#ffd400;
  margin-bottom:15px;
}

.mobile-contact-content input,
.mobile-contact-content textarea{
  width:100%;
  margin-bottom:10px;

  padding:10px;

  background:#111;
  color:#fff;

  border:1px solid #333;
  border-radius:8px;

  box-sizing:border-box;
}

.mobile-contact-content textarea{
  height:100px;
  resize:none;
}

.mobile-send-btn{
  width:100%;
  padding:10px;

  background:#111;
  color:#ffd400;

  border:1px solid #333;
  border-radius:8px;

  font-weight:bold;
}
/* =========================================
   PAYPAL BUTTON
========================================= */
.mobile-paypal-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9999;

  background:rgba(0,0,0,.75);

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

  padding:14px;
}

.mobile-paypal-modal.active{
  display:flex;
}

.mobile-paypal-content{
  width:100%;
  max-width:340px;

  position:relative;

  padding:22px 14px 18px;

  background:linear-gradient(180deg,#1b1b1b,#080808);

  border:2px solid #333;
  border-radius:12px;

  color:#ddd;
  text-align:center;

  box-shadow:0 0 25px rgba(0,0,0,.9);
}

.mobile-paypal-close{
  position:absolute;
  right:10px;
  top:6px;

  background:none;
  border:0;
  color:#777;

  font-size:28px;
  font-weight:bold;
  cursor:pointer;
}

.mobile-paypal-content h2{
  margin:0 0 14px;
  color:#ffd400;
  font-size:22px;
}

.mobile-paypal-content p{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.45;
}

.mobile-paypal-btn{
  width:100%;

  padding:10px;

  color:#ffd400;
  background:#111;

  border:1px solid #333;
  border-radius:10px;

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

  text-decoration:none;
  font-size:16px;
  font-weight:bold;

  box-sizing:border-box;
}

.mobile-paypal-box{
  display:none;
  margin-top:14px;
  padding:12px;

  background:#111;
  border:1px solid #333;
  border-radius:10px;

  text-align:center;
}

.mobile-paypal-box.active{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.mobile-paypal-box p{
  margin:0 0 12px;
  color:#ddd;
  font-size:13px;
  line-height:1.35;
}

.mobile-monobank-btn{
  width:100%;
  margin-top:10px;

  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:bold;
  cursor:pointer;
  font-family:inherit;
}

.mobile-mono-qr-box{
  display:none;
  margin-top:14px;
  padding:14px;
  text-align:center;
}

.mobile-mono-qr-box.active{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.mobile-mono-qr-box img{
  width:260px;
  max-width:100%;
  display:block;
  margin:0 auto;
}

.mobile-mono-qr-box p{
  margin:12px 0 0;
  color:#ddd;
  font-size:13px;
  line-height:1.35;
}




.donate-btn {

  width: 38px;
  height: 38px;

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

  border-radius: 50%;

  background: linear-gradient(
    180deg,
    #2b2b2b 0%,
    #050505 100%
  );

  border: 1px solid #444;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.15),
    inset 0 -2px 5px rgba(0,0,0,.8),
    0 0 8px rgba(0,0,0,.85);

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

.donate-btn:hover {

  transform: scale(1.08);

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.2),
    0 0 12px rgba(0,140,255,.45);
}

.donate-btn img {

  width: 20px;
  height: 20px;

  filter:
    brightness(1.35)
    saturate(1.25)
    drop-shadow(0 0 3px rgba(0,140,255,.45));
}

.donate-btn:hover {

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.2),
    0 0 10px rgba(0,140,255,.28);
}

/* =========================================
   PLAYER
========================================= */
.player-box {
  width: 95%;
  max-width: 377px;

  margin: 17px auto -7px auto;

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

.my_player_adaptive {

    position: relative !important;

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

    width: 100% !important;
    max-width: 377px !important;

    height: 55px !important;

    margin: 0 auto !important;
    padding-left: 4px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    line-height: 1.2 !important;

    overflow: visible !important;

    border-radius: 10px !important;

    background: linear-gradient(
      180deg,
      #1a1a1a 0%,
      #050505 100%
    ) !important;

    border: 2px solid #2f2f2f !important;

    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.08),
      inset 0 -2px 6px rgba(0,0,0,0.8),
      0 0 10px rgba(0,0,0,0.9) !important;

    z-index: 5 !important;
}


/* SHARE */
.my_share{
  display:none !important;
}

/* SONG INFO IN PLAYER */
.my_songinfo{
  display:none !important;
}

/* COVER IN PLAYER */
.my_cover {
    z-index:99999 !important;
}


/* PLAY BUTTON */
.my_play{

  background:url("/img/play.png") no-repeat center !important;
  background-size:75% !important;
}

.my_playing{
  background-image:url("/img/pause.png") !important;
    animation: pulsePlay 2s infinite;

}

@keyframes pulsePlay {

  0%,100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }

}

.my_player_adaptive .my_timer {
    margin: 0px !important;
    margin-right: 3px !important;
    color: #ddd !important;
    width: 66px !important;
    font: 26px Arial !important;
    line-height: 55px !important;
}

.my_artist {
	position: relative !important;
    color: #fff !important;
}

/* VOLUME */
.my_volumeplayer{
  width:55px !important;

  background:url("/img/volume.png") no-repeat center !important;
  background-size:45% !important;

  opacity:.35 !important;
  cursor:pointer !important;

  position:relative;
}

.my_volumeplayer:hover{
  opacity:1 !important;
  z-index:9999 !important;
}

/* volume popup */
.jp-volume-bar{
  position:absolute !important;

  top:-75px !important;
  left:58px !important;

  width:30px !important;
  height:80px !important;
  pointer-events:auto;
  z-index:99999 !important;
}


/* === ПЛЕЙЛИСТ КОНТЕЙНЕР === */
.playlist {
  width: 95%;
  max-width: 377px;
  margin: 10px auto;
  padding: 8px;

  background: linear-gradient(180deg, #0a0a0a, #000);
  border: 3px solid #2a2a2a;
  border-radius: 10px;

  box-shadow:
    inset 0 0 12px rgba(255,255,255,0.06),
    0 0 20px rgba(0,0,0,0.9);
}

.my_lastsongs {
  background: linear-gradient(180deg, #111, #000);
  border-radius: 10px;
  padding: 5px;
  box-shadow: inset 0 0 10px rgba(255,255,255,0.05);
}


/* === СТРОКА === */
.song-item {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);

  position: relative;

  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;

  will-change: transform;
}

.song-item:hover {

  background: rgba(255,255,255,.03);

  transform: translateX(2px);

}

.song-item:last-child {
  border-bottom: none;
}

/* === ОБЛОЖКА === */
.song-cover {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  border-radius: 6px;
  overflow: hidden;

  background: #111;

  position: relative;

  z-index: 1;

  transform-origin: center center;

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

.song-cover:hover {

  transform: scale(1.9);

  z-index: 999;

  box-shadow:
    0 10px 25px rgba(0,0,0,.85),
    0 0 18px rgba(255,215,0,.45);
}

.my_lastsong_cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === ИНФА === */
.song-info {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

/* время */
.song-time {
  color: #777;
  font-size: 13px;
  min-width: 45px;
  transition: opacity 0.2s ease;
}

/* название */
/* ОБЫЧНЫЕ ТРЕКИ */
.song-name {

  display: flex;
  flex-direction: column;

  line-height: 1.15;

  overflow: hidden;

  transition:
    color 0.25s ease,
    font-size 0.2s ease;
}

/* артист */
.artist-name {

  color: #d4af37;

  font-size: 13px;

  font-weight: bold;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* песня */
.track-name {

  color: #ddd;

  font-size: 12px;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.song-item:not(.active) .artist-name {
  color: #d4af37;
  font-weight: bold;
}

/* === АКТИВНЫЙ ТРЕК === */
/* === ACTIVE TRACK как на ПК === */

.song-item.active {
  background: linear-gradient(
    90deg,
    rgba(255,215,0,.25),
    transparent
  ) !important;


  box-shadow: 0 0 12px rgba(255,215,0,.2) !important;
  backdrop-filter: blur(2px);
}

.song-item.active::after {

  content: "";

  position: absolute;

  left: 0;

  top: 4%;
  height: 92%;

  width: 3px;

  border-radius: 3px;

  background: linear-gradient(
    180deg,
    #fff3a0 0%,
    #ffd700 50%,
    #b8860b 100%
  );

  box-shadow:
    0 0 4px rgba(255,215,0,.45),
    1px 0 2px rgba(0,0,0,.35);
}

/* отключаем старую мобильную линию */
.song-item::before {
  display: none !important;
}

.song-item.active .song-time {
  display: none !important;
}

.song-item.active .song-name {

  position: relative;

  display: flex;
  flex-direction: column;

  padding-left: 18px !important;

  line-height: 1.15;

  overflow: hidden;
}

/* ACTIVE ARTIST */
.song-item.active .artist-name {

  color: #ffd700 !important;

  font-size: 15px;

  font-weight: bold;

  text-shadow:
    0 1px 1px rgba(0,0,0,.85),
    0 0 6px rgba(255,215,0,.18);

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

/* ACTIVE TRACK */
.song-item.active .track-name {

  color: #ffd700 !important;

  font-size: 14px;

  font-weight: bold;

  text-shadow:
    0 1px 1px rgba(0,0,0,.85),
    0 0 6px rgba(255,215,0,.12);

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.song-item.active .song-name::before {

  content: "▶";

  position: absolute;

  left: 0;

  top: 50%;
  transform: translateY(-50%);

  color: #ffd700;

  font-size: 11px;
}

/* визуализатор справа, если есть */
.song-item.active .song-visual span {
  opacity: 1;
  animation: equalizer 1s infinite ease-in-out;
}

.song-item.active .song-visual span:nth-child(2) {
  animation-delay: 0.2s;
}

.song-item.active .song-visual span:nth-child(3) {
  animation-delay: 0.4s;
}

.song-item.active .song-visual span:nth-child(4) {
  animation-delay: 0.6s;
}

@keyframes equalizer {
  0%, 100% {
    height: 6px;
  }

  50% {
    height: 16px;
  }
}

/* =========================================
   HOME NAV
========================================= */

.home-nav{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:10px auto;
}

.home-nav-btn{
  padding:8px 14px;

  background:#111;
  color:#ffd400;

  border:1px solid #333;
  border-radius:10px;

  text-decoration:none;
  font-size:13px;
  font-weight:bold;

  cursor:pointer;
}

.home-nav-btn:hover{
  border-color:#ffd400;
  color:#fff;
}
  
/* ФУТЕР */
.footer {
  width: 90%;
  max-width: 377px;
  opacity: .92;
  margin: -7px auto;
  padding: 10px 10px 14px; /* чуть больше снизу */

  border-radius: 10px;

  background: linear-gradient(
    180deg,
    #2a2a2a 0%,
    #111 50%,
    #000 100%
  );

  border: 1px solid #333;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.15),
    inset 0 -3px 6px rgba(0,0,0,0.9),
    0 3px 10px rgba(0,0,0,0.8);

  position: relative;
}

/* металлическая линия */
.footer::after {
  content:"";
  position:absolute;

  left:-7%;
  width:114%;

  bottom:6px;
  height:2px;

  background:linear-gradient(
    90deg,
    transparent,
    #aaa,
    #fff,
    #aaa,
    transparent
  );

  border-radius:2px;

  box-shadow:
    0 0 6px rgba(255,255,255,.3);
}

/* текст */
.footer-text{
  text-align:center;
  font-size:12px;
  color:#999;
  letter-spacing:.6px;

  text-shadow:
    0 1px 1px #000;
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}

.footer-link-btn{
  display:inline-block;

  background:none;
  border:none;

  color:#ffd400;
  text-decoration:none;

  font-size:12px;
  font-weight:bold;

  cursor:pointer;
  padding:0;

  text-shadow:
    0 0 4px rgba(255,212,0,.25);

  transition:.2s;
}

.footer-link-btn:hover{
  color:#fff;

  text-shadow:
    0 0 8px rgba(255,212,0,.6);
}


/* =================================
   ADAPTIVE
================================= */

/* планшеты и небольшие телефоны */
@media (max-width: 480px) {

  .app {

    width: 100%;
    padding: 0 0px;

  }

  .app::before,
  .app::after {

    width: 42px;

  }

  .app::before {

    left: 6px;

  }

  .app::after {

    right: 6px;

  }

  .header {

    height: 105px;

  }

  .playlist {

    width: 100%;

  }

  .footer {

    width: 100%;

  }

}

@media screen and (max-width: 700px) {

  .my_player_adaptive .my_timer {

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

  }

  .my_player_adaptive .my_volumeplayer {

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

  }
}

/* маленькие телефоны */
@media (max-width: 390px) {

  .app::before,
  .app::after {

    width: 48px;

  }

  .header {

    height: 95px;

  }

  .side-icons img {

    width: 28px;
    height: 28px;

  }

  .donate-btn {

    width: 30px;
    height: 30px;

    font-size: 12px;

  }

  .song-name {

    font-size: 12px;

  }

  .song-item.active .song-name {

    font-size: 13px;

  }

  .player-row {

    gap: 6px;

  }

}

/* очень маленькие */
@media (max-width: 340px) {

  .app {


    transform-origin: top center;

  }

  .app::before,
  .app::after {

    width: 30px;

  }

}

@media (max-width: 340px) {

  .app {

    transform-origin: top center;

  }

  .app::before,
  .app::after {

    width: 30px;

  }

}

/* FIX OLD ANDROID MULTI ACTIVE */
.song-item:not(:first-of-type).active {
  background: transparent !important;
  box-shadow: none !important;
}

.song-item:not(:first-of-type).active::after {
  display: none !important;
}