/* ═══════════════════════════════════════════════
   Spicy AMLL Player WEB — Global Styles
   ═══════════════════════════════════════════════ */

/* Google Fonts (fallback for Georgian, CJK, Cyrillic, Devanagari, etc.) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@400;500;600;700;800;900&display=swap');

/* ── Local Fonts: SF Pro (Latin) & SF Arabic ── */
@font-face {
  font-family: 'SF Pro';
  src: url('../fonts/sfpro.woff2') format('woff2'),
    url('../fonts/sfpro.ttf') format('truetype');
  font-weight: 100 1200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Arabic';
  src: url('../fonts/sfarabic.woff2') format('woff2'),
    url('../fonts/sfarabic.ttf') format('truetype');
  font-weight: 100 1200;
  font-style: normal;
  font-display: swap;
}

/* ── Reset ── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  background: #000000;
  color: #ffffff;
  font-family: 'SF Pro', 'SF Arabic', Inter, "Noto Sans Georgian", "Vazirmatn", sans-serif;

  font-weight: 700;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
  -webkit-user-drag: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font-family: inherit;
}

/* ── CSS Custom Properties ── */
:root {
  /* Background */
  --bg-rotation-degree: 258deg;
  --spice-main: #000000;
  --spice-sidebar: #000000;
  --spice-text: #ffffff;
  --spice-button: #1db954;

  /* Lyrics sizing */
  --DefaultLyricsSize: clamp(1.85rem, calc(1cqw * 7), 3.5rem);
  --SpicyLyrics-LineSpacing: 1cqw 0;

  /* Glow definitions */
  --TextGlowDef: rgba(255, 255, 255, 0.15) 0px 0px 6px;
  --ActiveTextGlowDef: rgba(255, 255, 255, 0.4) 0px 0px 14px;
  --StrongTextGlowDef: rgba(255, 255, 255, 0.553) 0px 0px 16.4px;
  --StrongerTextGlowDef: rgba(255, 255, 255, 0.508) 0px 0px 16px;

  /* Scrollbar */
  --Simplebar-Scrollbar-Color: rgba(255, 255, 255, 0.6);

  /* NowBar sizing (Apple Music Layout) */
  --NowBarWidth: 34cqw;
  /* Compact panel */
  --NowBarRightSpacing: 4cqw;
  --NowBarLeftSpacing: 6cqw;

  /* Lyrics padding */
  --LyricsLeftSidePadding: calc(var(--NowBarWidth) + var(--NowBarLeftSpacing) + var(--NowBarRightSpacing));
  --LyricsRightSidePadding: 6cqw;

  /* Font */
  --spicy-font-family: 'SF Pro', 'SF Arabic', Inter, "Noto Sans Georgian", "Vazirmatn", sans-serif;

  /* Default font size for content */
  --default-font-size: clamp(0.5rem, calc(1cqw * 3), 2.4rem);

  /* SLM property */
  --SLM_GradientPosition: -50%;
}

@property --SLM_GradientPosition {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -50%;
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ── Utility Classes ── */
.hidden {
  display: none !important;
}

.WaitingForHeight {
  opacity: 0 !important;
}

/* ── Branding ── */
.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.logo-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
}

.back-button .logo-icon {
  width: 20px;
  height: 20px;
}