/* =========================================================================
   xp.css — XP / დონის ბარი (ზემოთ შუაში ჩამოდის, როცა მოთამაშეს XP ემატება)
   პოზიცია: --xp-top · სიგანე: --xp-width
   ========================================================================= */
#xp-root {
  --xp-top: 22px; --xp-width: 460px;
  --xp-c: #ff4747; --xp-c2: #ff9f43; --xp-glow: rgba(255, 71, 71, .38);
  position: fixed; top: var(--xp-top); left: 50%; transform: translateX(-50%);
  width: var(--xp-width); max-width: calc(100vw - 24px);
  z-index: 9500; pointer-events: none;
  font-family: 'Rajdhani', 'Noto Sans Georgian', 'Manrope', 'Segoe UI', Arial, sans-serif; color: #eaeaea;
}
/* როცა XP ბარი ჩანს, ნოტიფიკაციები ქვემოთ ჩამოდის */
#nt-root { transition: top .45s cubic-bezier(.2, .9, .3, 1); }
body.xp-on #nt-root { --nt-top: 128px; }

.xp-card {
  position: relative; display: grid; grid-template-columns: 62px 1fr 38px; align-items: center; gap: 14px;
  padding: 14px 18px 14px 14px; overflow: hidden; border-radius: 18px;
  border: 1px solid rgba(234, 234, 234, .1);
  background: linear-gradient(135deg, rgba(22, 22, 26, .94), rgba(9, 9, 11, .95));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .55), 0 0 28px var(--xp-glow), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateY(-190px) scale(.94);
  transition: transform .7s cubic-bezier(.18, 1.15, .32, 1), opacity .35s ease, box-shadow .4s;
}
.xp-card.show { opacity: 1; transform: translateY(0) scale(1); }
.xp-card.out  { opacity: 0; transform: translateY(-120px) scale(.96); transition: transform .5s cubic-bezier(.5, 0, .8, .4), opacity .4s ease .1s; }
.xp-card::before {            /* ზედა მბზინავი ხაზი */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--xp-c), var(--xp-c2), transparent); opacity: .9;
}

/* დონის ბეჯი */
.xp-lv { position: relative; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; }
.xp-lv svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-lv .hex-bg { fill: rgba(255, 255, 255, .04); stroke: rgba(234, 234, 234, .16); stroke-width: 2; }
.xp-lv .hex-fg { fill: none; stroke: var(--xp-c); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--xp-c)); }
.xp-lv-num { position: relative; font: 700 26px/1 'Rajdhani', sans-serif; letter-spacing: .02em; text-shadow: 0 0 12px var(--xp-glow); }
.xp-lv small { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); padding: 1px 7px; border-radius: 8px; background: #0b0b0d; border: 1px solid rgba(234, 234, 234, .14);
  font: 700 9px/14px 'Manrope', sans-serif; letter-spacing: .18em; color: rgba(234, 234, 234, .7); }
.xp-lv.pop { animation: xpLvPop .7s cubic-bezier(.2, 1.4, .4, 1); }

/* შუა ნაწილი */
.xp-mid { min-width: 0; }
.xp-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.xp-title { font: 700 13px 'Rajdhani', sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(234, 234, 234, .65); }
.xp-gain { font: 700 20px 'Rajdhani', sans-serif; color: var(--xp-c2); text-shadow: 0 0 14px var(--xp-glow); }
.xp-gain.bump { animation: xpBump .45s cubic-bezier(.2, 1.5, .4, 1); }

.xp-bar { position: relative; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(234, 234, 234, .08); overflow: hidden; }
.xp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 8px;
  background: linear-gradient(90deg, #b81d1d, var(--xp-c) 55%, var(--xp-c2));
  box-shadow: 0 0 14px var(--xp-glow); transition: width .9s cubic-bezier(.22, .9, .25, 1); }
.xp-fill.instant { transition: none; }
.xp-fill::after {             /* მბზინავი სვლა */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); background-size: 200% 100%; animation: xpShine 1.5s linear infinite;
}
.xp-fill::before {            /* წვერზე ნათება */
  content: ''; position: absolute; right: -1px; top: -3px; bottom: -3px; width: 8px; border-radius: 6px; background: #fff; filter: blur(3px); opacity: .85; z-index: 1;
}
.xp-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0, 0, 0, .55) calc(10% - 2px) 10%); pointer-events: none; }

.xp-bot { display: flex; justify-content: space-between; margin-top: 7px; font: 700 14px 'Rajdhani', sans-serif; letter-spacing: .06em; }
.xp-cur b { color: #fff; font-size: 16px; } .xp-cur span { color: rgba(234, 234, 234, .55); }
.xp-left { color: rgba(234, 234, 234, .55); font-weight: 600; } .xp-left b { color: var(--xp-c2); }

/* შემდეგი დონე */
.xp-next { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font: 700 17px 'Rajdhani', sans-serif; color: rgba(234, 234, 234, .55); border: 1px dashed rgba(234, 234, 234, .22); background: rgba(255, 255, 255, .03); }

/* დონის აწევა */
.xp-banner { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 12, 6, .9), rgba(60, 44, 8, .94), rgba(14, 12, 6, .9)); opacity: 0; z-index: 2; }
.xp-card.lvlup { --xp-c: #ffb81f; --xp-c2: #ffe066; --xp-glow: rgba(255, 196, 40, .5); border-color: rgba(255, 210, 61, .45); }
.xp-card.lvlup .xp-banner { animation: xpBanner 1.9s ease both; }
.xp-banner span { font: 700 24px 'Rajdhani', 'Noto Sans Georgian', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 0 20px rgba(255, 196, 40, .9); transform: scale(.7); animation: xpBannerTx 1.9s cubic-bezier(.2, 1.3, .4, 1) both; }
.xp-card.flash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 31px 50%, rgba(255, 224, 102, .75), transparent 60%); animation: xpFlash .9s ease-out both; pointer-events: none; }
.xp-ring { position: absolute; left: 14px; top: 50%; width: 62px; height: 62px; margin-top: -31px; border-radius: 50%; border: 2px solid var(--xp-c2); opacity: 0; pointer-events: none; }
.xp-card.flash .xp-ring { animation: xpRing 1s ease-out both; }

@keyframes xpShine  { to { background-position: -200% 0; } }
@keyframes xpBump   { 0% { transform: scale(.6); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
@keyframes xpLvPop  { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-6deg); } 100% { transform: scale(1); } }
@keyframes xpFlash  { from { opacity: 1; } to { opacity: 0; } }
@keyframes xpRing   { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }
@keyframes xpBanner { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes xpBannerTx { 0% { transform: scale(.7); } 20%, 75% { transform: scale(1); } 100% { transform: scale(1.1); } }