/* ================================================================
   PROFILE PAGE – TecksoTM
   ================================================================ */

/* ---------- tokens ---------- */
.profile-page {
  --_card: var(--card, #151a21);
  --_border: var(--border, #222a33);
  --_accent: var(--accent, #5b8cff);
  --_bg: var(--bg, #0b0e12);
  --_fg: var(--fg, #e6e9ef);
  --_muted: var(--muted, #9aa6b2);
  --_radius: var(--radius-lg, 14px);
  --_radius-xl: var(--radius-xl, 16px);
  --_font-sm: var(--fs-4, .88rem);
}

.profile-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  position: relative;
  border-radius: var(--_radius-xl);
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  min-height: 150px;
  z-index: 10;
}
.hero-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--_radius-xl);
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--_accent) 40%, var(--_bg)) 0%,
      color-mix(in oklab, var(--_accent) 10%, var(--_bg)) 100%);
}
.hero-body {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 2.5rem;
  position: relative;
  width: 100%;
}
.hero-avatar {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 4px solid var(--_card);
  background: var(--_bg);
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
  overflow: hidden;
  flex-shrink: 0;
}
.hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.hero-text-group {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex: 1;
  min-width: 0;
}
.hero-text {
  padding-bottom: .3rem;
  min-width: 0;
}
.hero-text h1 {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: var(--fw-black, 800);
  color: var(--_fg);
  line-height: 1.15;
  word-break: break-word;
}
#heroSubBadge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-sub-badge {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}
.hero-sub-tier {
  display: inline-flex;
  align-items: center;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: color-mix(in oklab, var(--_accent) 22%, transparent);
  color: var(--_accent);
  border: 1px solid color-mix(in oklab, var(--_accent) 35%, transparent);
  white-space: nowrap;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--_accent) 15%, transparent);
  color: var(--_accent);
  font-size: var(--_font-sm);
  font-weight: 600;
}
.hero-card-bg {
  background: var(--_card);
  border: 1px solid var(--_border);
  border-radius: var(--_radius-xl);
}

/* search */
.hero-search {
  margin-left: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1000;
}
.hero-search form {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,.3);
  border: 1px solid color-mix(in oklab, var(--_accent) 30%, var(--_border));
  border-radius: 999px;
  transition: border-color .2s, box-shadow .2s;
}
.hero-search form:focus-within {
  border-color: var(--_accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--_accent) 20%, transparent);
}
.hero-search input {
  background: none;
  border: none;
  outline: none;
  padding: .55rem 1rem;
  color: var(--_fg);
  font-size: var(--_font-sm);
  font-family: inherit;
  width: 180px;
  border-radius: 999px 0 0 999px;
}
.hero-search input::placeholder { color: color-mix(in oklab, var(--_muted) 70%, transparent); }
.hero-search button {
  background: var(--_accent);
  border: none;
  padding: .55rem .9rem;
  margin-right: 2px;
  cursor: pointer;
  color: #fff;
  font-size: .85rem;
  display: flex;
  align-items: center;
  border-radius: 0 999px 999px 0;
  transition: background .2s;
}
.hero-search button:hover { background: color-mix(in oklab, var(--_accent) 80%, white); }

/* suggestions dropdown */
.search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--_card);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 1000;
  display: none;
}
.search-dropdown.open { display: block; }
.search-suggestion {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .85rem;
  cursor: pointer;
  font-size: var(--_font-sm);
  transition: background .15s;
  text-decoration: none;
  color: var(--_fg);
}
.search-suggestion:hover,
.search-suggestion.focused {
  background: color-mix(in oklab, var(--_accent) 10%, transparent);
}
.search-sug-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--_card) 60%, var(--_border));
}
.search-sug-avatar-ph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--_card) 60%, var(--_border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  flex-shrink: 0;
}
.search-sug-name { font-weight: 600; }
.search-sug-login { font-size: .78rem; color: var(--_muted); margin-left: auto; }

/* ================================================================
   KPI STRIP
   ================================================================ */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--_border);
  border-radius: var(--_radius-xl);
  overflow: hidden;
  margin-bottom: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.kpi {
  background: var(--_card);
  padding: 1.2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.kpi-icon { font-size: 1.3rem; line-height: 1; }
.kpi-value {
  font-size: 1.35rem;
  font-weight: var(--fw-bold, 700);
  color: var(--_accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kpi-label {
  font-size: .75rem;
  color: var(--_muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 600;
}
.kpi-rank {
  font-size: var(--_font-sm);
  color: var(--_muted);
  font-variant-numeric: tabular-nums;
}

/* ================================================================
   DETAIL CARDS
   ================================================================ */
.details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.detail-card {
  background: var(--_card);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  padding: 1.25rem 1.4rem;
  transition: border-color .25s, box-shadow .25s;
}
.detail-card:hover {
  border-color: color-mix(in oklab, var(--_accent) 35%, var(--_border));
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
}
.detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .9rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--_border);
}
.detail-card-title {
  font-size: .95rem;
  font-weight: var(--fw-bold, 700);
  color: var(--_fg);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.detail-card-rank {
  font-size: var(--_font-sm);
  font-weight: 600;
  color: var(--_accent);
  background: color-mix(in oklab, var(--_accent) 12%, transparent);
  padding: .15rem .55rem;
  border-radius: 999px;
}
.detail-rows { display: flex; flex-direction: column; }
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 0;
  font-size: .95rem;
}
.detail-row + .detail-row {
  border-top: 1px solid color-mix(in oklab, var(--_border) 50%, transparent);
}
.detail-row-label { color: var(--_muted); font-size: var(--_font-sm); }
.detail-row-value {
  font-weight: var(--fw-bold, 700);
  color: var(--_fg);
  font-variant-numeric: tabular-nums;
}
.detail-hint {
  font-size: .82rem;
  color: var(--_muted);
  margin-top: .6rem;
  display: none;
}

/* neighbors */
.neighbors {
  margin-top: .6rem;
  padding: .55rem .75rem;
  background: color-mix(in oklab, var(--_card) 55%, var(--_bg));
  border: 1px solid var(--_border);
  border-radius: var(--radius-md, 10px);
  display: none;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--_font-sm);
}
.neighbor-row {
  display: flex;
  justify-content: space-between;
  color: var(--_muted);
}
.neighbor-row b { color: var(--_fg); font-weight: 600; margin: 0 3px; }

/* ================================================================
   PODIUM
   ================================================================ */
.podium-section {
  margin-bottom: 2.5rem;
  padding: 2rem 1.5rem 1.5rem;
  background: var(--_card);
  border: 1px solid var(--_border);
  border-radius: var(--_radius-xl);
}
.podium-title {
  text-align: center;
  margin: 0 0 .3rem;
  font-size: 1.3rem;
  font-weight: var(--fw-bold, 700);
  color: var(--_fg);
}
.podium-subtitle {
  text-align: center;
  font-size: var(--_font-sm);
  color: var(--_muted);
  margin: 0 0 1.5rem;
}
.podium-layout {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
}

.podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 250px;
  padding-top: 1rem;
  flex-shrink: 0;
}
.podium-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 120px;
  position: relative;
}
.podium-step.rank-1 { order: 2; z-index: 2; }
.podium-step.rank-2 { order: 1; z-index: 1; }
.podium-step.rank-3 { order: 3; z-index: 1; }

.podium-step .p-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--_bg);
  border: 3px solid var(--_border);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
  transition: transform .3s;
}
.podium-step:hover .p-avatar { transform: translateY(-4px) scale(1.03); }
.podium-step.rank-1 .p-avatar { width: 72px; height: 72px; border-color: #FFD700; }
.podium-step.rank-2 .p-avatar { border-color: #c0c0c0; }
.podium-step.rank-3 .p-avatar { border-color: #CD7F32; }

.p-bar {
  width: 100%;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.4rem;
  color: rgba(0,0,0,.45);
}
.podium-step.rank-1 .p-bar {
  height: 130px;
  background: linear-gradient(to top, #b8860b, #FFD700 50%, #ffe66d);
  box-shadow: 0 0 30px rgba(255,215,0,.2);
}
.podium-step.rank-2 .p-bar {
  height: 92px;
  background: linear-gradient(to top, #999, #d4d4d4 50%, #efefef);
}
.podium-step.rank-3 .p-bar {
  height: 68px;
  background: linear-gradient(to top, #7a4e1e, #CD7F32 50%, #dfa05b);
}

.p-info { text-align: center; margin-top: .5rem; width: 100%; }
.p-name {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  color: var(--_fg);
  text-decoration: none;
}
.p-name:hover { color: var(--_accent); }
.p-name--empty { color: var(--_muted); font-weight: 400; }
.podium-empty .p-avatar {
  background: color-mix(in oklab, var(--_border) 60%, var(--_bg));
  color: var(--_muted);
  font-size: 1.4rem;
  border-style: dashed;
  opacity: .6;
}
.p-reward {
  font-size: .78rem;
  color: var(--_accent);
  display: block;
  margin-top: 2px;
}

/* ---- Runner-ups table (places 4–10) ---- */
.runner-ups {
  flex: 1;
  min-width: 200px;
  max-width: 300px;
  align-self: center;
}

.runner-ups-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
}

.runner-ups-table thead th {
  text-align: left;
  padding: .4rem .6rem;
  font-size: .75rem;
  color: var(--_muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  border-bottom: 1px solid var(--_border);
}

.runner-ups-table tbody tr {
  transition: background .15s;
}

.runner-ups-table tbody tr:hover {
  background: color-mix(in oklab, var(--_accent) 6%, transparent);
}

.runner-ups-table td {
  padding: .5rem .6rem;
  border-bottom: 1px solid color-mix(in oklab, var(--_border) 40%, transparent);
  vertical-align: middle;
}

.runner-ups-table tbody tr:last-child td {
  border-bottom: none;
}

.ru-rank {
  font-weight: 700;
  color: var(--_muted);
  width: 28px;
  font-variant-numeric: tabular-nums;
}

.ru-player {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ru-player a {
  color: var(--_fg);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ru-player a:hover {
  color: var(--_accent);
}

.ru-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--_bg);
}

.ru-avatar-ph {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--_card) 65%, var(--_border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  flex-shrink: 0;
}

.ru-reward {
  color: var(--_accent);
  font-weight: 600;
  white-space: nowrap;
  font-size: .82rem;
}

/* ================================================================
   RANKINGS – single box with category + period tabs
   ================================================================ */
.rankings-section { margin-bottom: 3rem; }
.rankings-section > h2 {
  text-align: center;
  font-size: var(--fs-2, 1.45rem);
  font-weight: var(--fw-bold, 700);
  color: var(--_fg);
  margin: 0 0 1.25rem;
}
.rankings-box {
  background: var(--_card);
  border: 1px solid var(--_border);
  border-radius: var(--_radius-xl);
  overflow: hidden;
}

/* Category tabs */
.cat-tabs {
  display: flex;
  background: color-mix(in oklab, var(--_card) 80%, var(--_accent));
  border-bottom: 1px solid var(--_border);
}
.cat-tab {
  flex: 1;
  border: none;
  background: none;
  padding: .85rem .5rem;
  color: var(--_muted);
  cursor: pointer;
  font-size: .9rem;
  font-family: inherit;
  font-weight: 600;
  border-bottom: 2.5px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
}
.cat-tab:hover {
  color: var(--_fg);
  background: color-mix(in oklab, var(--_accent) 6%, transparent);
}
.cat-tab.active {
  color: var(--_accent);
  border-bottom-color: var(--_accent);
}

/* Period sub-tabs */
.period-tabs {
  display: flex;
  border-bottom: 1px solid var(--_border);
  background: color-mix(in oklab, var(--_card) 92%, var(--_bg));
}
.period-tab {
  flex: 1;
  border: none;
  background: none;
  padding: .6rem .5rem;
  color: var(--_muted);
  cursor: pointer;
  font-size: var(--_font-sm);
  font-family: inherit;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.period-tab:hover { color: var(--_fg); }
.period-tab.active {
  color: var(--_accent);
  border-bottom-color: var(--_accent);
  font-weight: 600;
}
.period-tab:disabled { opacity: .5; cursor: not-allowed; }

.ranking-hint {
  font-size: .82rem;
  color: var(--_muted);
  padding: .4rem 1rem;
  display: none;
}

/* List */
.rank-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--_border) transparent;
}
.rank-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid color-mix(in oklab, var(--_border) 40%, transparent);
  font-size: var(--_font-sm);
  transition: background .15s;
}
.rank-row:last-child { border-bottom: none; }
.rank-row:hover { background: color-mix(in oklab, var(--_accent) 4%, transparent); }
.rank-row.me {
  background: color-mix(in oklab, var(--_accent) 10%, transparent);
  border-left: 3px solid var(--_accent);
}
.rank-pos {
  width: 36px;
  flex-shrink: 0;
  font-weight: var(--fw-bold, 700);
  color: var(--_muted);
  font-variant-numeric: tabular-nums;
}
.rank-pos.gold   { color: #FFD700; }
.rank-pos.silver { color: #c0c0c0; }
.rank-pos.bronze { color: #CD7F32; }
.rank-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--_bg);
  flex-shrink: 0;
}
.rank-avatar-ph {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--_card) 65%, var(--_border));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  flex-shrink: 0;
}
.rank-user { flex: 1; min-width: 0; }
.rank-user a {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  color: var(--_fg);
  text-decoration: none;
}
.rank-user a:hover { color: var(--_accent); }
.rank-val {
  flex-shrink: 0;
  color: var(--_muted);
  font-variant-numeric: tabular-nums;
}
.rank-empty {
  padding: 2rem;
  text-align: center;
  color: var(--_muted);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .hero { min-height: 160px; }
  .hero-body { padding: 1.5rem 1.25rem; gap: 1rem; }
  .hero-avatar { width: 80px; height: 80px; }
  .hero-text h1 { font-size: 1.3rem; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .details-grid { grid-template-columns: 1fr; }
  .podium-layout {
    flex-direction: column;
    align-items: center;
  }
  .runner-ups {
    max-width: 100%;
    width: 100%;
  }
  .podium-step { width: 95px; }
  .podium-step .p-avatar { width: 52px; height: 52px; }
  .podium-step.rank-1 .p-avatar { width: 58px; height: 58px; }
  .podium-step.rank-1 .p-bar { height: 100px; }
  .podium-step.rank-2 .p-bar { height: 72px; }
  .podium-step.rank-3 .p-bar { height: 54px; }
  .cat-tab { font-size: .8rem; padding: .7rem .3rem; }
}

@media (max-width: 480px) {
  .hero-body { flex-direction: column; align-items: center; text-align: center; }
  .hero-avatar { width: 72px; height: 72px; }
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-search { margin-left: 0; width: 100%; }
  .hero-search input { width: 100%; flex: 1; }
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ---- Info icon + tooltip ---- */
.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  color: var(--_muted);
  cursor: default;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
}
.info-icon:hover .info-tooltip,
.info-icon:focus .info-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.info-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--_card);
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  padding: 7px 12px;
  font-size: .78rem;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--_fg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 200;
}
.info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--_border);
}

.hero, .kpi-strip, .detail-card, .podium-section, .rankings-box {
  animation: fadeUp .45s ease both;
}
.kpi-strip { animation-delay: .06s; }
.detail-card:nth-child(1) { animation-delay: .1s; }
.detail-card:nth-child(2) { animation-delay: .15s; }
.detail-card:nth-child(3) { animation-delay: .2s; }
.detail-card:nth-child(4) { animation-delay: .25s; }
.podium-section { animation-delay: .3s; }
.rankings-box { animation-delay: .35s; }