/* =============================================================
   TOPBAR
   ============================================================= */
#topbar {
  /* Real-Flow-Flex-Item (kein position:fixed mehr) — klebt durch das
     body { display:flex; flex-direction:column } automatisch oben am
     Viewport. Macht die Topbar immun gegen iOS-PWA-Quirks von
     position:fixed.                                                       */
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: max(env(safe-area-inset-top), 14px) 18px 14px;
}
.topbar-row { display: flex; align-items: center; gap: var(--s-3); }
.topbar-logo {
  font-family: var(--font-display);
  font-size: 20px; letter-spacing: 0.05em;
  color: var(--primary);
  flex-shrink: 0;
}
.topbar-xp {
  flex: 1; display: flex; flex-direction: column; gap: var(--s-1);
}
.xp-track {
  height: 6px; border-radius: 0 4px 4px 0; background: var(--border); overflow: hidden;
  position: relative;
}
.xp-fill {
  height: 100%; background: var(--primary);
  transition: width 700ms var(--ease);
  position: relative;
}
.xp-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 6px;
  background: var(--xp); border-radius: 0 4px 4px 0;
  box-shadow: 0 0 6px color-mix(in srgb, var(--xp) 60%, transparent);
}
.xp-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro); color: var(--muted); letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
}
.streak-pill {
  display: flex; align-items: center; gap: var(--s-1);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 5px 10px; flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.streak-pill:hover, .streak-pill:focus-visible {
  background: var(--surface3);
  border-color: var(--border-strong);
  outline: none;
}
/* Inline-Wrapper fuer die Streak-Zahl, damit num-flip (translateY) wirkt —
   transform braucht ein block/inline-block-Element. */
.topbar-streak-num { display: inline-block; }

/* ── Streak-Feier-Animation ──────────────────────────────────────────────────
   Pille poppt auf (groesser → kleiner) mit warmem Glow; das Eis-Icon morpht
   ueber ein body-level Overlay zu einer Flamme, begleitet von Funken. */
.streak-pill.streak-celebrate {
  /* Von rechts skalieren, damit der Pop nicht am Bildschirmrand abgeschnitten
     wird (die Pille sitzt ganz rechts in der Topbar). */
  transform-origin: right center;
  animation: streak-pop 850ms cubic-bezier(0.18, 1.3, 0.4, 1);
  border-color: #f97316;
}
@keyframes streak-pop {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(249,115,22,0); }
  22%  { transform: scale(1.42); box-shadow: 0 0 18px 3px rgba(249,115,22,0.55); }
  44%  { transform: scale(0.9);  box-shadow: 0 0 12px 2px rgba(249,115,22,0.4); }
  64%  { transform: scale(1.14); box-shadow: 0 0 9px 1px rgba(249,115,22,0.3); }
  82%  { transform: scale(0.98); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

.streak-cel-layer {
  position: fixed; z-index: 999; width: 0; height: 0;
  pointer-events: none; transform: translateZ(0);
}
.streak-cel-layer > span {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
}
.streak-cel-ice, .streak-cel-fire { font-size: 18px; line-height: 1; }
.streak-cel-ice {
  animation: cel-ice 640ms var(--ease) forwards;
}
@keyframes cel-ice {
  0%   { transform: translate(-50%,-50%) scale(1)   rotate(0deg);   opacity: 1; filter: drop-shadow(0 0 5px #7dd3fc); }
  45%  { transform: translate(-50%,-50%) scale(1.25) rotate(-28deg); opacity: 1; filter: drop-shadow(0 0 7px #7dd3fc); }
  100% { transform: translate(-50%,-50%) scale(0)   rotate(200deg); opacity: 0; filter: drop-shadow(0 0 0 #7dd3fc); }
}
.streak-cel-fire {
  opacity: 0;
  animation: cel-fire 880ms var(--ease-spring) 340ms forwards;
}
@keyframes cel-fire {
  0%   { transform: translate(-50%,-50%) scale(0)    rotate(14deg);  opacity: 0; }
  40%  { transform: translate(-50%,-50%) scale(1.5)  rotate(-7deg);  opacity: 1; filter: drop-shadow(0 0 9px #fb923c); }
  68%  { transform: translate(-50%,-50%) scale(0.88) rotate(4deg);   opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1.05) rotate(0deg);   opacity: 1; filter: drop-shadow(0 0 5px #f97316); }
}
.streak-cel-glow {
  width: 44px; height: 44px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, #f97316 60%, transparent) 0%, transparent 70%);
  animation: cel-glow 980ms ease-out 300ms forwards;
}
@keyframes cel-glow {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scale(0.3); }
  35%  { opacity: 0.9; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.7); }
}
.streak-cel-ring {
  width: 22px; height: 22px; border-radius: 50%; opacity: 0;
  border: 2px solid #fbbf24;
  animation: cel-ring 680ms ease-out 340ms forwards;
}
@keyframes cel-ring {
  0%   { opacity: 0.9; transform: translate(-50%,-50%) scale(0.4); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(2.6); }
}
.streak-cel-spark {
  width: 5px; height: 5px; border-radius: 50%; opacity: 0;
  background: var(--c, #fbbf24);
  animation: cel-spark 720ms ease-out 340ms forwards;
}
@keyframes cel-spark {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(0)        scale(1); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .streak-pill.streak-celebrate { animation: none; }
}