/* ============================================================
   AGORA — STATS STYLES  v2.0
   Stats page, Player Profile, Graphs, Badges, Weapons Table
   ============================================================ */

/* ---- 22.b Stats page ------------------------------------- */
.stats-flash {
  margin-top: var(--sp-3); display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid rgba(35,193,107,0.35); background: rgba(35,193,107,0.08);
  color: #c0f3d8; border-radius: var(--r-sm); padding: 10px 14px; font-size: 0.9375rem;
}
.stats-flash[hidden] { display: none !important; }

.stats-shell { display: grid; gap: var(--sp-5); }

.stats-profile-card {
  display: flex; align-items: center; gap: var(--sp-4);
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 50%), var(--bg-800);
  border: 1px solid var(--line-500); border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.stats-profile-card__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-500); }
.stats-profile-card__label { font-size: 0.75rem; color: var(--text-300); text-transform: uppercase; letter-spacing: 0.08em; }
.stats-profile-card__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.stats-profile-card__sync { font-size: 0.875rem; color: var(--text-300); }

.stats-state-panel, .stats-data-view {
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent 50%), var(--bg-800);
  border: 1px solid var(--line-500); border-radius: var(--r-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-md);
}
.stats-state-panel h2 { margin-bottom: var(--sp-2); }
.stats-state-panel p { color: var(--text-300); }

.stats-state-panel--empty {
  position: relative; overflow: hidden;
  border-color: rgba(255,107,44,0.2);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,107,44,0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.01), transparent),
    var(--bg-800);
}

.stats-empty-hero { display: grid; gap: var(--sp-3); }
.stats-empty-hero__badge {
  display: inline-flex; width: fit-content; align-items: center; gap: var(--sp-2);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ffd7c2; border: 1px solid rgba(255,107,44,0.3); background: rgba(255,107,44,0.08);
  border-radius: var(--r-pill); padding: 7px 12px;
}
.stats-empty-hero h2 { margin: 0; max-width: 28ch; }
.stats-empty-hero p { margin: 0; max-width: 58ch; }

.stats-empty-steps {
  margin-top: var(--sp-5); border: 1px solid var(--line-500); border-radius: var(--r-sm);
  background: rgba(6,10,19,0.5); padding: var(--sp-4);
}
.stats-empty-steps__title { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--text-100); }
.stats-empty-steps__list {
  margin: var(--sp-3) 0 0; padding-left: 1.15rem; display: grid; gap: var(--sp-2);
  color: var(--text-300); font-size: 0.9375rem; list-style: decimal;
}
.stats-empty-steps__list li::marker { color: var(--brand-500); }
.stats-actions-row--empty { margin-top: var(--sp-5); }
.stats-actions-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }

.stats-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.stats-kpi-card {
  border: 1px solid var(--line-500); border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255,255,255,0.008), transparent), var(--bg-700);
  padding: var(--sp-4); transition: border-color var(--t-smooth), transform var(--t-smooth);
}
.stats-kpi-card:hover { border-color: rgba(255,107,44,0.15); transform: translateY(-2px); }
.stats-kpi-card__label { color: var(--text-300); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; }
.stats-kpi-card__value { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.35rem); line-height: 1; margin-top: var(--sp-2); }

.stats-summary-row {
  margin-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; color: var(--text-300);
}
.stats-summary-row strong { color: var(--text-100); }
.stats-conversion-banner { margin-top: var(--sp-5); }

/* ---- Player Profile Page ------------------------------- */
.player-profile-loading, .player-profile-error { padding-block: var(--sp-8) var(--sp-6); }
.player-profile-loading__text { color: var(--text-300); text-align: center; font-size: 1rem; }

.player-profile-hero { padding-block: var(--sp-7) var(--sp-4); }
.player-profile-hero__inner {
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 50%), var(--bg-800);
  border: 1px solid var(--line-500); border-radius: var(--r-lg); padding: var(--sp-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.player-profile-hero__inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,107,44,0.2), transparent);
}

.player-profile-hero__identity { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }

.player-profile-hero__avatar, .player-profile-hero__avatar-fallback {
  width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--line-500); flex-shrink: 0;
}
.player-profile-hero__avatar[hidden], .player-profile-hero__avatar-fallback[hidden] { display: none !important; }
.player-profile-hero__avatar { object-fit: cover; background: var(--bg-700); }
.player-profile-hero__avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.875rem; color: var(--text-100);
  background: linear-gradient(135deg, var(--bg-700), rgba(255,107,44,0.15));
}
.player-profile-hero__label { margin: 0; color: var(--text-300); text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.08em; }
.player-profile-hero__name { margin: 0; max-width: 32ch; word-break: break-word; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.player-profile-hero__meta { margin: var(--sp-2) 0 0; color: var(--text-300); font-size: 0.9375rem; }
.player-profile-hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Badges */
.badge-item {
  position: relative; padding: var(--sp-4); background: var(--bg-700);
  border: 2px solid var(--line-500); border-radius: var(--r-sm);
  transition: transform var(--t-smooth), border-color var(--t-smooth), opacity var(--t-smooth), box-shadow var(--t-smooth);
  display: flex; flex-direction: column; gap: var(--sp-3); min-height: 210px;
}
.badge-item--unlocked {
  border-color: var(--brand-400);
  background: linear-gradient(135deg, var(--bg-700), rgba(0,255,136,0.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.badge-item--locked { opacity: 0.6; filter: grayscale(40%); }
.badge-item:hover {
  transform: translateY(-3px); border-color: var(--brand-300);
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
}
.badge-item__head { display: flex; align-items: center; gap: var(--sp-3); }
.badge-item__title-wrap { min-width: 0; }
.badge-item__icon {
  font-size: 1.9rem; line-height: 1; width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-500); background: var(--bg-800);
}
.badge-item__name { margin: 0; font-family: var(--font-display); font-size: 1rem; color: var(--text-100); }
.badge-item__rarity-pill {
  margin: var(--sp-1) 0 0; display: inline-flex; align-items: center;
  border-radius: var(--r-pill); padding: 2px 8px; text-transform: uppercase;
  font-size: 0.6875rem; letter-spacing: 0.06em; font-weight: 700;
  border: 1px solid var(--line-500); color: var(--text-300);
}
.badge-item__meta { margin: var(--sp-1) 0 0; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-400); }
.badge-item__desc { margin: var(--sp-2) 0 0; font-size: 0.8125rem; color: var(--text-300); line-height: 1.45; flex: 1; }
.badge-item__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: 0.75rem; color: var(--text-400); }
.badge-item__state { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.badge-item--unlocked .badge-item__state { color: #6bffb2; }
.badge-item__unlock-date { color: var(--text-300); }

.badge-item[data-rarity="common"] .badge-item__rarity-pill { border-color: #8f96a3; color: #c3c9d3; }
.badge-item[data-rarity="uncommon"] .badge-item__rarity-pill { border-color: #4caf50; color: #86d78a; }
.badge-item[data-rarity="rare"] .badge-item__rarity-pill { border-color: #2f8de4; color: #78bcff; }
.badge-item[data-rarity="epic"] .badge-item__rarity-pill { border-color: #b86dff; color: #d4abff; }
.badge-item[data-rarity="legendary"] .badge-item__rarity-pill { border-color: #ff9d3a; color: #ffd19e; }

.profile-share-toast {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 260;
  background: var(--bg-800); border: 1px solid var(--line-500); border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4); color: var(--text-100); box-shadow: var(--shadow-lg);
}

/* ---- Stats Progression Graphs ---------------------------- */
.stats-graphs-section {
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent 50%), var(--bg-800);
  border: 1px solid var(--line-500); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.stats-graphs-section__title {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: var(--sp-4); color: var(--text-100);
  display: flex; align-items: center; gap: 0.45em;
}

.stats-graphs-period-tabs {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); padding: var(--sp-1);
  background: var(--bg-700); border-radius: var(--r-sm); width: fit-content;
  border: 1px solid var(--line-500);
}
.stats-graphs-period-tab {
  padding: var(--sp-2) var(--sp-4); font-size: 0.875rem; font-weight: 600;
  color: var(--text-300); background: transparent; border: none; border-radius: var(--r-xs);
  cursor: pointer; transition: all var(--t-smooth); font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.stats-graphs-period-tab:hover { color: var(--text-100); background: var(--bg-600); }
.stats-graphs-period-tab:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.stats-graphs-period-tab.active {
  color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}

.stats-graphs-canvas-wrapper {
  position: relative; min-height: 300px;
  background: var(--bg-700); border-radius: var(--r-sm);
  padding: var(--sp-4); border: 1px solid var(--line-600);
}
.stats-graphs-loading, .stats-graphs-error {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text-300); font-size: 0.9375rem; text-align: center; width: 100%; padding: var(--sp-4);
}
.stats-graphs-error { color: var(--text-400); }
#statsChart { max-height: 400px; width: 100%; }
.stats-graphs-section__note { margin-top: var(--sp-3); font-size: 0.8125rem; color: var(--text-400); text-align: center; }

@media (max-width: 767px) {
  .stats-graphs-period-tabs { width: 100%; justify-content: center; }
  .stats-graphs-period-tab { flex: 1; padding: var(--sp-2) var(--sp-3); font-size: 0.8125rem; }
  .stats-graphs-canvas-wrapper { min-height: 250px; }
  #statsChart { max-height: 300px; }
}

/* ---- Badges/Achievements Section ------------------------- */
.stats-badges-section {
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent 50%), var(--bg-800);
  border: 1px solid var(--line-500); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.stats-badges-section__title {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: var(--sp-2); color: var(--text-100);
  display: flex; align-items: center; gap: 0.45em;
}
.stats-badges-section__summary { font-size: 0.9375rem; color: var(--text-300); margin-bottom: var(--sp-5); font-weight: 600; }
.stats-badges-loading, .stats-badges-error { text-align: center; padding: var(--sp-5); color: var(--text-300); font-size: 0.9375rem; }
.stats-badges-error { color: var(--text-400); }

.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }

.badge-card {
  position: relative; padding: var(--sp-4); background: var(--bg-700);
  border: 2px solid var(--line-500); border-radius: var(--r-sm);
  text-align: center; transition: all var(--t-smooth); overflow: hidden;
}
.badge-card--unlocked {
  border-color: var(--brand-400);
  background: linear-gradient(135deg, var(--bg-700), rgba(0,255,136,0.04));
}
.badge-card--locked { opacity: 0.6; filter: grayscale(45%); }
.badge-card:hover { transform: translateY(-3px); border-color: var(--brand-300); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.badge-card--locked:hover { opacity: 0.75; }

.badge-card--common { border-color: var(--line-500); }
.badge-card--common.badge-card--unlocked { border-color: #9e9e9e; }
.badge-card--uncommon.badge-card--unlocked { border-color: #4caf50; }
.badge-card--rare.badge-card--unlocked { border-color: #2196f3; }
.badge-card--epic.badge-card--unlocked { border-color: #9c27b0; }
.badge-card--legendary.badge-card--unlocked { border-color: #ff9800; }

.badge-card__icon { font-size: 3rem; margin-bottom: var(--sp-2); line-height: 1; }
.badge-card__name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text-100); margin-bottom: var(--sp-2); line-height: 1.2; }
.badge-card__desc { font-size: 0.8125rem; color: var(--text-300); margin-bottom: var(--sp-2); line-height: 1.4; }
.badge-card__rarity {
  display: inline-block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: var(--sp-1) var(--sp-2); background: var(--bg-600); border-radius: var(--r-xs);
  color: var(--text-400); font-weight: 600;
}
.badge-card--unlocked .badge-card__rarity { background: linear-gradient(135deg, var(--brand-400), var(--brand-600)); color: #fff; }
.badge-card__progress { margin-top: var(--sp-2); font-size: 0.75rem; color: var(--text-400); font-style: italic; }
.badge-card__date { margin-top: var(--sp-2); font-size: 0.75rem; color: var(--brand-300); }
.stats-badges-section__note { margin-top: var(--sp-3); font-size: 0.8125rem; color: var(--text-400); text-align: center; }

@media (max-width: 767px) {
  .badges-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .badge-card__icon { font-size: 2.5rem; }
  .badge-card__name { font-size: 0.9375rem; }
}

/* ---- Weapon Stats Table ---------------------------------- */
.stats-weapons-section {
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent 50%), var(--bg-800);
  border: 1px solid var(--line-500); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.stats-weapons-section__title {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: var(--sp-4); color: var(--text-100);
  display: flex; align-items: center; gap: 0.45em;
}
.stats-weapons-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats-weapons-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.stats-weapons-table thead {
  background: rgba(255,255,255,0.015); border-bottom: 1px solid var(--line-500);
}
.stats-weapons-table th {
  padding: var(--sp-3) var(--sp-4); text-align: left; font-weight: 600;
  color: var(--text-200); text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.05em;
}
.stats-weapons-table tbody tr {
  border-bottom: 1px solid var(--line-600); transition: background var(--t-fast);
}
.stats-weapons-table tbody tr:hover { background: rgba(255,107,44,0.02); }
.stats-weapons-table td { padding: var(--sp-3) var(--sp-4); color: var(--text-100); }
.stats-weapons-table__weapon { font-weight: 600; color: var(--brand-400); }
.stats-weapons-table__kills, .stats-weapons-table__deaths { font-family: var(--font-display); font-size: 1.05rem; }
.stats-weapons-table__hs, .stats-weapons-table__accuracy { color: var(--text-300); }
.stats-weapons-section__note { margin-top: var(--sp-3); font-size: 0.8125rem; color: var(--text-400); text-align: center; }