/* =================================================================== «Моя волна» — живая сфера без блока */
.wave-hero {
  position: relative; height: 470px; margin: 0 0 12px; background: none !important; border-radius: 0; overflow: visible; isolation: isolate;
}
.wave-hero .blobs { display: none; }

/* сфера: перетекающие цвета обложки + фирменные, края растворяются в фоне */
.orb { position: absolute; left: 50%; top: 50%; width: 400px; height: 400px; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.orb-glow {
  position: absolute; inset: -35%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--acc-rgb), .42), rgba(var(--acc-rgb), .12) 55%, transparent 72%);
  filter: blur(30px); animation: orbBreath 7s ease-in-out infinite; transition: background 1.2s;
}
.orb-core {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden; filter: blur(34px) saturate(1.35);
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 52%, rgba(0, 0, 0, .55) 74%, transparent 100%);
  animation: orbSpin 26s linear infinite;
}
.orb-core i { position: absolute; width: 62%; height: 62%; border-radius: 46% 54% 58% 42% / 44% 46% 54% 56%; mix-blend-mode: screen; opacity: .95; }
.orb-core i:nth-child(1) { left: 6%; top: 8%; background: radial-gradient(circle at 40% 40%, rgb(var(--acc-rgb)), transparent 70%); animation: orbA 11s ease-in-out infinite; transition: background 1.2s; }
.orb-core i:nth-child(2) { right: 4%; top: 14%; background: radial-gradient(circle at 50% 50%, #ff2bd6, transparent 70%); animation: orbB 13s ease-in-out infinite; }
.orb-core i:nth-child(3) { left: 18%; bottom: 2%; background: radial-gradient(circle at 50% 50%, #ffb02e, transparent 68%); animation: orbC 15s ease-in-out infinite; }
.orb-core i:nth-child(4) { right: 10%; bottom: 8%; background: radial-gradient(circle at 50% 50%, #6a3bff, transparent 70%); animation: orbA 17s ease-in-out infinite reverse; }
.orb-core i:nth-child(5) { left: 30%; top: 30%; width: 40%; height: 40%; background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 70%); animation: orbB 9s ease-in-out infinite reverse; }
/* тонкие кольца-«волны», расходятся во время игры */
.orb-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .14); opacity: 0; }

@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbBreath { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes orbA { 0%, 100% { transform: translate(0, 0) scale(1) rotate(0); } 33% { transform: translate(18%, 12%) scale(1.15) rotate(40deg); } 66% { transform: translate(-10%, 16%) scale(.9) rotate(-20deg); } }
@keyframes orbB { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22%, 14%) scale(1.2); } }
@keyframes orbC { 0%, 100% { transform: translate(0, 0) scale(1.05); } 40% { transform: translate(14%, -20%) scale(.88); } 75% { transform: translate(-12%, -6%) scale(1.15); } }
@keyframes orbRing { 0% { transform: scale(.75); opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } }

/* играет — сфера оживает: быстрее, ярче, расходятся кольца */
.wave-hero.playing .orb-core { animation-duration: 9s; filter: blur(30px) saturate(1.6); }
.wave-hero.playing .orb-core i:nth-child(1) { animation-duration: 5s; }
.wave-hero.playing .orb-core i:nth-child(2) { animation-duration: 6s; }
.wave-hero.playing .orb-core i:nth-child(3) { animation-duration: 7s; }
.wave-hero.playing .orb-core i:nth-child(4) { animation-duration: 8s; }
.wave-hero.playing .orb-glow { animation-duration: 2.6s; }
.wave-hero.playing .orb-ring { animation: orbRing 3.2s cubic-bezier(.2, .6, .3, 1) infinite; }
.wave-hero.playing .orb-ring.r2 { animation-delay: 1.6s; }
.wave-hero.busy .orb-core { animation-duration: 4s; }

/* текст поверх сферы */
.wave-center { gap: 12px; padding: 0 20px; }
.wave-play { font-size: clamp(34px, 4.6vw, 56px); text-shadow: 0 6px 40px rgba(0, 0, 0, .45); }
.wave-play #waveIcon svg { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .35)); }
.wave-now { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: min(520px, 88%); min-height: 40px; white-space: normal; }
.wave-now b, .wave-now span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wave-now b { font-weight: 800; font-size: 16px; color: #fff; }
.wave-now span { font-size: 14px; color: rgba(255, 255, 255, .78); font-weight: 600; }
.wave-tune-btn { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

.tile small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =================================================================== иконки: увереннее */
svg { stroke-width: 2.05; }
.tile-ic svg, .sheet-extra svg, .mini svg, .menu button svg { stroke-width: 2.2; }
.side nav a svg { stroke-width: 2.1; }
.side nav a.on svg, .tabbar a.on svg { fill: rgba(var(--acc-rgb), .28); }

@media (max-width: 700px) {
  .tabbar a { color: #8d8894; }
  .tabbar a svg { stroke-width: 2.15; }
  .tabbar a.on { color: #fff; }
  .tabbar a.on svg { color: var(--acc); stroke-width: 2.3; }
  .tabbar a.on span { font-weight: 800; }
  .tr .more svg { width: 20px; height: 20px; }
  .wave-hero { height: 380px; margin: 0 -16px 8px; }
  .orb { width: 300px; height: 300px; }
  .wave-play { font-size: 36px; }
  .wave-now { max-width: 86%; }
  .wave-now b { font-size: 15px; }
  .wave-now span { font-size: 13px; }
}