/* ═══════════════════════════════════════════════════════════════
   base.css — Foundation styles
   - CSS variables, reset, body
   - Animated background (orbs, staff lines, floating notes)
   - Layout, Header, Stats Row, XP Bar
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;900&family=Bungee+Shade&display=swap');

  :root {
    --bg-deep: #0d0221;
    --bg-mid: #150535;
    --bg-card: rgba(30, 10, 60, 0.7);
    --bg-card-solid: #1e0a3c;
    --bg-card-hover: rgba(40, 15, 80, 0.8);
    --pink: #ff2d78;
    --pink-glow: rgba(255, 45, 120, 0.4);
    --cyan: #00e5ff;
    --cyan-glow: rgba(0, 229, 255, 0.35);
    --yellow: #ffe156;
    --yellow-glow: rgba(255, 225, 86, 0.35);
    --orange: #ff8c42;
    --lime: #7dff6b;
    --lime-glow: rgba(125, 255, 107, 0.3);
    --purple: #b24dff;
    --purple-glow: rgba(178, 77, 255, 0.35);
    --text: #f0e6ff;
    --text-dim: #9b8abf;
    --border: rgba(178, 77, 255, 0.15);
    --glass: rgba(255, 255, 255, 0.04);
    --radius: 18px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'Heebo', sans-serif;
    background: var(--bg-deep);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    direction: rtl;
  }

  /* ─── Animated Background ─── */
  .bg-layer {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  }

  /* Gradient orbs */
  .bg-orb {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.3;
    animation: orbFloat 20s ease-in-out infinite;
  }
  .bg-orb.o1 { width: 500px; height: 500px; background: var(--pink); top: -10%; right: -5%; animation-delay: 0s; }
  .bg-orb.o2 { width: 400px; height: 400px; background: var(--cyan); bottom: -10%; left: -5%; animation-delay: -7s; }
  .bg-orb.o3 { width: 350px; height: 350px; background: var(--purple); top: 40%; left: 30%; animation-delay: -14s; }
  @keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.1); }
    66% { transform: translate(-20px, 30px) scale(0.9); }
  }

  /* Musical staff lines */
  .staff-lines {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04;
  }
  .staff-line {
    position: absolute; width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--text) 20%, var(--text) 80%, transparent 100%);
  }

  /* Floating musical notes */
  .floating-note {
    position: absolute; font-size: 24px; opacity: 0;
    animation: noteSlide linear infinite;
    filter: drop-shadow(0 0 8px currentColor);
  }
  @keyframes noteSlide {
    0% {
      transform: translateX(0) translateY(0) rotate(0deg) scale(0.5);
      opacity: 0;
    }
    8% { opacity: 0.7; transform: translateX(-8vw) translateY(-15px) rotate(-10deg) scale(1); }
    25% { transform: translateX(-25vw) translateY(10px) rotate(5deg) scale(1.1); }
    50% { transform: translateX(-50vw) translateY(-20px) rotate(-8deg) scale(0.9); opacity: 0.6; }
    75% { transform: translateX(-75vw) translateY(15px) rotate(10deg) scale(1); }
    92% { opacity: 0.5; }
    100% {
      transform: translateX(-105vw) translateY(-5px) rotate(-5deg) scale(0.8);
      opacity: 0;
    }
  }

  /* ─── Layout ─── */
  .app {
    position: relative; z-index: 1;
    max-width: 960px; margin: 0 auto;
    padding: 20px 16px 80px;
  }

  /* ─── Header ─── */
  .header {
    text-align: center; padding: 24px 12px 20px;
    margin-bottom: 20px;
  }
  .logo {
    font-family: 'Bungee Shade', cursive;
    font-size: 32px; letter-spacing: 2px;
    background: linear-gradient(135deg, var(--pink), var(--yellow), var(--cyan));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px var(--pink-glow));
    line-height: 1.3;
  }
  .logo-note { display: inline-block; animation: logoBounce 2s ease-in-out infinite; }
  .logo-note:nth-child(2) { animation-delay: 0.15s; }
  .logo-note:nth-child(3) { animation-delay: 0.3s; }
  @keyframes logoBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }
  .logo-sub {
    font-size: 13px; color: var(--text-dim); margin-top: 4px;
    font-weight: 500;
  }

  /* ─── Stats Row ─── */
  .stat-row {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    margin-bottom: 16px;
  }
  .stat-pill {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 100px; padding: 8px 16px;
    font-size: 14px; font-weight: 700;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer; user-select: none;
  }
  .stat-pill:hover { transform: translateY(-2px); }
  .stat-pill .s-icon { font-size: 18px; }
  .stat-pill.sp-xp { color: var(--yellow); border-color: rgba(255,225,86,0.2); }
  .stat-pill.sp-xp:hover { box-shadow: 0 4px 20px var(--yellow-glow); }
  .stat-pill.sp-coin { color: var(--orange); border-color: rgba(255,140,66,0.2); }
  .stat-pill.sp-combo { color: var(--cyan); border-color: rgba(0,229,255,0.15); }
  .stat-pill.sp-combo:hover { box-shadow: 0 4px 20px var(--cyan-glow); }
  .stat-pill.sp-streak { color: var(--pink); border-color: rgba(255,45,120,0.15); }

  /* ─── XP Bar ─── */
  .xp-section {
    background: var(--bg-card); backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: var(--radius); padding: 16px 20px;
    margin-bottom: 16px;
  }
  .xp-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
  }
  .level-badge { font-size: 18px; font-weight: 900; color: var(--yellow); }
  .level-title { font-size: 12px; color: var(--text-dim); display: block; margin-top: 2px; }
  .xp-nums { font-size: 13px; color: var(--text-dim); font-weight: 500; }
  .xp-nums b { color: var(--yellow); }

  .xp-track {
    height: 18px; border-radius: 100px; overflow: hidden; position: relative;
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(178,77,255,0.2);
  }
  .xp-fill {
    height: 100%; border-radius: 100px;
    background: linear-gradient(90deg, var(--pink), var(--orange), var(--yellow));
    transition: width 0.6s cubic-bezier(.22,.68,0,.98);
    position: relative;
    box-shadow: 0 0 20px var(--pink-glow);
  }
  .xp-fill::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.3) 0%, transparent 50%);
    border-radius: 100px;
  }
  /* Sliding note on XP bar */
  .xp-note {
    position: absolute; top: -8px; font-size: 16px;
    transition: right 0.6s cubic-bezier(.22,.68,0,.98);
    filter: drop-shadow(0 0 6px var(--yellow-glow));
    animation: xpNoteBounce 1s ease-in-out infinite;
    z-index: 2;
  }
  @keyframes xpNoteBounce {
    0%, 100% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-4px) rotate(10deg); }
  }