/* ============================================================
   Player stats page: search, identity panel with full-body
   skin, the Season/Daily/Weekly/Lifetime table, recent games.
   ============================================================ */

.stp-search-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3.4vw, 40px);
}
.stp-search-wrap {
  position: relative;
  flex: 0 1 480px;
}
.stp-search-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-mute); pointer-events: none;
}
.stp-search {
  width: 100%; height: 46px; padding: 0 14px 0 42px;
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--bg-2); color: var(--text);
  font: inherit; font-size: 15px;
}
.stp-search::placeholder { color: var(--text-faint); }
.stp-search-btn { padding: 12px 22px; }

/* ---- layout ---- */
.stp-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 24px;
  align-items: start;
}
/* The `hidden` attribute must win over the grid display above, otherwise the
   whole results panel shows before a search has been made. */
.stp-layout[hidden], .stp-page [hidden] { display: none !important; }
@media (max-width: 940px) { .stp-layout { grid-template-columns: 1fr; } }

/* ---- identity panel ---- */
.stp-id { text-align: center; padding: 26px 22px; }
.stp-name { font-size: 26px; overflow-wrap: anywhere; }
.stp-hyprank { font-size: 18px; font-weight: 800; vertical-align: 2px; }
.stp-hyprank.hr-green { color: #55ff55; }
.stp-hyprank.hr-aqua { color: #55ffff; }
.stp-hyprank.hr-gold { color: #ffaa00; }
.stp-hyprank.hr-red { color: #ff5555; }
.stp-nick { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.stp-skin { display: flex; justify-content: center; padding: 18px 0 8px; }
.stp-skin img { height: 190px; image-rendering: auto; filter: drop-shadow(0 12px 22px rgba(0,0,0,.45)); }
.stp-facts { margin-top: 14px; text-align: left; }
.stp-fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 2px; border-top: 1px solid var(--hairline);
}
.stp-fact dt {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute);
}
.stp-fact dd { font-size: 14px; font-weight: 700; color: var(--text); }
.stp-fact dd.dim { color: var(--text-mute); font-weight: 600; }

/* ---- stats table ---- */
.stp-table-card { padding: 8px 6px; }
.stp-scroll { overflow-x: auto; }
.stp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.stp-table th, .stp-table td {
  padding: 13px 14px; text-align: center; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stp-table thead th {
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-mute); border-bottom: 1px solid var(--hairline);
}
.stp-table tbody th {
  text-align: left; font-size: 13px; font-weight: 700; color: var(--text-dim);
}
.stp-table tbody tr + tr th, .stp-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.stp-table td { font-size: 14px; font-weight: 600; color: var(--text); }
.stp-table .up { color: var(--safe, #57d9a3); }
.stp-table .down { color: #ff8a8a; }
.stp-table .dim { color: var(--text-mute); font-weight: 500; }
.stp-rank {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700;
}
.stp-rank img { image-rendering: pixelated; }

/* ---- recent games ---- */
.stp-recent-h { font-size: 21px; margin: clamp(22px, 3vw, 32px) 0 14px; }
.stp-recent { display: flex; flex-direction: column; gap: 12px; }
.stp-game { padding: 16px 18px; }
.stp-g-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.stp-g-map { font-size: 14.5px; font-weight: 800; }
.stp-g-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.stp-g-meta .up { color: var(--safe, #57d9a3); }
.stp-g-meta .down { color: #ff8a8a; }
.stp-g-meta .dim { color: var(--text-mute); font-weight: 600; }
.stp-g-mvp {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(245,196,81,.15); color: #f5c451;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
}
.stp-g-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .stp-g-teams { grid-template-columns: 1fr; } }
.stp-g-team {
  border: 1px solid var(--hairline); border-radius: 10px;
  background: rgba(255,255,255,.02); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.stp-g-team.win { border-color: rgba(87,217,163,.35); background: rgba(87,217,163,.05); }
.stp-g-k {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute);
}
.stp-g-team.win .stp-g-k { color: var(--safe, #57d9a3); }
.stp-g-name {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.stp-g-name img { border-radius: 4px; image-rendering: pixelated; }