/* progression/ui/progression.css
   Styles for all progression HUD widgets and panels. Loaded once;
   each ui/*.js file only builds markup, this file makes it look right. */

.prog-widget {
  position: fixed;
  z-index: 9000;
  font-family: inherit;
  color: #fff;
  background: rgba(10, 12, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  user-select: none;
}

/* ---- XP bar ---- */
.prog-xp-widget {
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  min-width: 260px;
}
.prog-xp-level { font-weight: 700; font-size: 13px; white-space: nowrap; }
.prog-xp-track { flex: 1; height: 10px; border-radius: 6px; background: rgba(255,255,255,0.12); overflow: hidden; }
.prog-xp-fill { height: 100%; width: 0%; background: linear-gradient(90deg,#5be3ff,#7a5bff); border-radius: 6px; }
.prog-xp-text { font-size: 11px; opacity: 0.8; white-space: nowrap; }

/* ---- Coin / trophy counters ---- */
.prog-coin-widget { top: 14px; right: 14px; padding: 8px 14px; font-weight: 700; }
.prog-trophy-widget { top: 60px; right: 14px; padding: 8px 14px; font-weight: 700; }

.prog-coin-float {
  position: absolute; right: 8px; top: 4px; font-size: 12px; font-weight: 700;
  color: #ffd24a; opacity: 0; transform: translateY(0);
  transition: transform 0.9s ease-out, opacity 0.9s ease-out;
  pointer-events: none;
}
.prog-coin-float-go { opacity: 1; transform: translateY(-26px); }

@keyframes prog-pulse-kf { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
.prog-pulse { animation: prog-pulse-kf 380ms ease-out; }

/* ---- Reward toasts ---- */
#prog-reward-popup-layer {
  position: fixed; top: 90px; left: 50%; transform: translateX(-50%);
  z-index: 9500; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.prog-reward-toast {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(20, 16, 40, 0.9); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-weight: 700; font-size: 13px;
  opacity: 0; transform: translateY(-12px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.prog-reward-toast-in { opacity: 1; transform: translateY(0) scale(1); }
.prog-reward-toast-out { opacity: 0; transform: translateY(-12px) scale(0.9); }
.prog-reward-icon { font-size: 18px; }

/* ---- Menu toggle + slide-out panel ---- */
#prog-menu-toggle {
  bottom: 14px; left: 14px; padding: 10px 16px; cursor: pointer;
  font-weight: 700; font-size: 13px;
}
.prog-menu {
  position: fixed; bottom: 60px; left: 14px; z-index: 9000;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 70vh; overflow-y: auto;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.prog-menu-closed { opacity: 0; pointer-events: none; transform: translateY(10px); }
.prog-menu-open { opacity: 1; pointer-events: auto; transform: translateY(0); }

.prog-panel {
  background: rgba(10, 12, 20, 0.85); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 10px; min-width: 220px; color: #fff;
}
.prog-panel-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.6; margin-bottom: 6px; }

.prog-world-btn, .prog-difficulty-btn {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 8px;
  border: 1px solid var(--portal-color, rgba(255,255,255,0.15));
  background: rgba(255,255,255,0.05); color: #fff; font-weight: 600; cursor: pointer;
}
.prog-world-btn.prog-active, .prog-difficulty-btn.prog-active { background: rgba(255,255,255,0.18); }
.prog-locked { opacity: 0.45; cursor: not-allowed; }

.prog-chest-row { display: flex; flex-wrap: wrap; gap: 8px; }
.prog-chest-icon {
  width: 42px; height: 42px; border-radius: 8px; font-size: 20px; cursor: pointer;
  background: var(--chest-color, #8b5a2b); border: 1px solid var(--chest-glow, #c98a4b);
  box-shadow: 0 0 10px var(--chest-glow, transparent);
}
.prog-empty { font-size: 12px; opacity: 0.6; }

/* ---- Game-over screen trophy result (filled by CGTrophies.renderMatchResult) ---- */
.prog-match-trophies {
  margin-top: 10px; font-weight: 700; font-size: 16px; color: #ffd24a;
}
.prog-match-trophies-total { font-weight: 400; opacity: 0.7; font-size: 12px; }
.prog-match-milestone {
  margin-top: 4px; font-size: 13px; color: #7af0a0; font-weight: 600;
}

@media (max-width: 640px) {
  .prog-xp-widget { min-width: 70vw; }
  .prog-trophy-widget { top: 56px; }
}