/* Tabasheer cheer: XP pill, combo flame, flying XP, confetti and the level-up card (see cheer.js).
   Colours come from the page's chapter world (--glow, --surface …) with violet/yellow fallbacks. Only transform and
   opacity animate. */
#cheer { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
#cheer .cf { position: absolute; width: 9px; height: 6px; border-radius: 2px; will-change: transform, opacity; }

.xp-fly {
  position: absolute; display: flex; align-items: center; gap: 6px; padding: 3px 12px 4px; border-radius: 99px;
  background: var(--glow, #ffd24a); color: var(--btn-ink, #2b1606); white-space: nowrap;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .3);
  font: 800 16px/1.3 'Baloo Bhaijaan 2', Tahoma, sans-serif; will-change: transform, opacity;
}
.xp-fly b { font-size: 18px; }
.xp-fly span { font-size: 13px; font-weight: 700; }

.cheer-combo {
  position: fixed; z-index: 79; left: 50%; top: calc(58px + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; gap: 5px; padding: 3px 12px 3px 10px; border-radius: 99px;
  background: linear-gradient(180deg, #ff9a3d, #ff5d2d); color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 22px rgba(255, 122, 40, .55), 0 8px 18px rgba(0, 0, 0, .3);
  font: 800 14px/1.3 'Baloo Bhaijaan 2', Tahoma, sans-serif; pointer-events: none;
  transform: translateX(-50%); opacity: 0; transition: opacity .35s ease;
}
.cheer-combo.on { opacity: 1; }
.cheer-combo svg { width: 18px; height: 18px; fill: #fff3c2; }
.cheer-combo b { font-size: 16px; }
.cheer-combo.hot svg { animation: flick .5s ease-in-out infinite alternate; }
@keyframes flick { to { transform: scale(1.18) rotate(-6deg); } }

.cheer-pill {
  --p: 0;
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 3px 10px 3px 4px; border-radius: 99px;
  background: var(--glass, rgba(41, 25, 90, .86)); color: var(--ink-light, var(--ink, #fff5e1));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--glow, #ffd24a) 28%, transparent), 0 6px 16px rgba(0, 0, 0, .3);
  font: 700 13px/1.25 'Baloo Bhaijaan 2', Tahoma, sans-serif; white-space: nowrap;
}
.cheer-pill .lv {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--glow, #ffd24a) calc(var(--p) * 360deg), rgba(255, 255, 255, .14) 0);
  font: 400 17px/1 Lalezar, 'Baloo Bhaijaan 2', sans-serif; color: var(--btn-ink, #2b1606); position: relative;
}
.cheer-pill .lv::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--glow, #ffd24a); }
.cheer-pill .lv bdi { position: relative; }
.cheer-pill .xp { display: grid; gap: 3px; }
.cheer-pill .nm { font-size: 12.5px; }
.cheer-pill .bar { width: 64px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.cheer-pill .bar i { display: block; height: 100%; width: calc(var(--p) * 100%); background: var(--glow, #ffd24a); border-radius: 3px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.cheer-pill .st { display: inline-flex; align-items: center; gap: 2px; color: #ffb36b; font-weight: 800; font-size: 14px; }
.cheer-pill .st svg { width: 16px; height: 16px; fill: #ff8a3d; }
.cheer-pill.compact { padding: 3px; gap: 0; }
.cheer-pill.compact .xp { display: none; }
.cheer-pill.compact .st { padding-inline: 4px 6px; }

.cheer-card {
  position: absolute; left: 50%; top: 34%; min-width: 220px; padding: 18px 26px 16px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, var(--surface-2, #36226f), var(--surface, #29195a)); color: var(--ink-light, #fff5e1);
  box-shadow: inset 0 0 0 2px var(--glow, #ffd24a), 0 0 40px color-mix(in srgb, var(--glow, #ffd24a) 40%, transparent), 0 20px 50px rgba(0, 0, 0, .5);
  transform: translate(-50%, -50%) scale(.7); opacity: 0; transition: transform .5s cubic-bezier(.2, 1.5, .4, 1), opacity .3s ease;
}
.cheer-card.on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cheer-card .badge {
  width: 74px; height: 74px; margin: -52px auto 6px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff6c9, var(--glow, #ffd24a) 55%, #d89a12); color: #3a2205;
  font: 400 40px/1 Lalezar, sans-serif; box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 10px 24px rgba(0, 0, 0, .35);
}
.cheer-card .k { margin: 0; font: 700 15px/1.4 'Baloo Bhaijaan 2', sans-serif; color: var(--muted-light, #cbbbe9); }
.cheer-card .t { margin: 2px 0 0; font: 400 28px/1.3 Lalezar, sans-serif; color: var(--glow, #ffd24a); }

@media (prefers-reduced-motion: reduce) {
  .cheer-combo.hot svg { animation: none; }
  .cheer-card { transition: opacity .01ms; }
}