@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #1b1e26;
  font-family: "Inter", "Arial", sans-serif;
  font-size: 13px;
  color: #b8bfc9;
  padding: 8px 12px;
}

/* ========================================
   TABLE
   ======================================== */
table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(10, 12, 18, 0.82);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* Header */
thead tr {
  border-bottom: 1px solid #2a2e38;
}

thead th {
  color: #8a94a6;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 10px 10px;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

th.left-align {
  text-align: left !important;
}

thead th:first-child {
  text-align: center;
  width: 35px;
}

/* Body Rows */
tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

tbody td {
  padding: 5px 10px;
  text-align: center;
  color: #c0c7d2;
  /* Default stats color previously .sk */
  font-weight: 500;
  font-size: 13px;
  vertical-align: middle;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Player Name column formatting */
/* Top 10 Tables: Player name is the 3rd column */
table tr th:nth-child(3),
table tr td:nth-child(3) {
  text-align: left !important;
}

table tr td:nth-child(3) {
  color: #e8ecf2;
  font-weight: 600;
}

/* Top Faca Table: Player name is the 2nd column */
/* However, we can't easily differentiate tables globally unless we rely on the specific TH structure or a wrapper class. */
/* Wait, I can just use the .left-align class on the TH and keep the TD rules explicit! We already have .left-align on the TH */
th.left-align {
  text-align: left !important;
}

/* For Top Faca (where 2nd child is left-aligned JOGADOR) */
/* For Top 10 (where 3rd child is left-aligned JOGADOR) */
/* And Top Patente... */

/* I'll add .pn and .sk back into the CSS, but just single letter aliases .p and .s */
.p {
  color: #e8ecf2;
  font-weight: 600;
  text-align: left !important;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.s {
  color: #c0c7d2;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

tbody td:first-child {
  text-align: center;
  color: #9ca3af;
  font-weight: 700;
  font-size: 13px;
  width: 35px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ========================================
   BADGES (CS2 Premier Style)
/* Cores por Rank (Fundo Escuro Gradiente + Texto Neon) - Agora agrupadas com as regras base da tag .rt para economizar bytes HTML */

.r-grey,
.r-lblue,
.r-blue,
.r-purple,
.r-pink,
.r-red,
.r-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 4px 20px;
  font-weight: 800;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.5px;
  min-width: 96px;
  height: 28px;
  line-height: 1;
  position: relative;
  transform: skewX(-15deg);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.r-grey::before,
.r-lblue::before,
.r-blue::before,
.r-purple::before,
.r-pink::before,
.r-red::before,
.r-yellow::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: 3px;
  background: currentColor;
  box-shadow: 5px 0 0 currentColor;
  opacity: 0.5;
}

/* Grey (0 - 4,999) */
.r-grey {
  background: linear-gradient(180deg, #4b5057 0%, #25282e 100%);
  color: #cbd0d8;
  text-shadow: 0 0 8px rgba(203, 208, 216, 0.3);
}

/* Light Blue (5,000 - 9,999) */
.r-lblue {
  background: linear-gradient(180deg, #24586e 0%, #0e2733 100%);
  color: #7cefff;
  text-shadow: 0 0 8px rgba(124, 239, 255, 0.4);
}

/* Blue (10,000 - 14,999) */
.r-blue {
  background: linear-gradient(180deg, #24356e 0%, #0e1433 100%);
  color: #7c9eff;
  text-shadow: 0 0 8px rgba(124, 158, 255, 0.4);
}

/* Purple (15,000 - 19,999) */
.r-purple {
  background: linear-gradient(180deg, #44246e 0%, #1b0e33 100%);
  color: #b67cff;
  text-shadow: 0 0 8px rgba(182, 124, 255, 0.4);
}

/* Pink (20,000 - 24,999) */
.r-pink {
  background: linear-gradient(180deg, #6e245a 0%, #330e28 100%);
  color: #ff7ce0;
  text-shadow: 0 0 8px rgba(255, 124, 224, 0.4);
}

/* Red (25,000 - 29,999) */
.r-red {
  background: linear-gradient(180deg, #6e2424 0%, #330e0e 100%);
  color: #ff7c7c;
  text-shadow: 0 0 8px rgba(255, 124, 124, 0.4);
}

/* Yellow/Gold (30,000+) */
.r-yellow {
  background: linear-gradient(180deg, #6e5b24 0%, #332a0e 100%);
  color: #ffe67c;
  text-shadow: 0 0 8px rgba(255, 230, 124, 0.4);
}

/* ========================================
   PLAYER NAME
   ======================================== */
.pn {
  color: #e8ecf2;
  font-weight: 600;
  font-size: 13px;
  text-align: left !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ========================================
   STAT COLUMNS
   ======================================== */
.sk {
  color: #c0c7d2;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ========================================
   PATENTE IMAGE (small badge on the right)
   ======================================== */
#ico2 {
  width: auto;
  height: 28px;
  vertical-align: middle;
}

#ico {
  width: 22px;
  height: 22px;
}

#ico3 {
  width: 22px;
  height: 22px;
}

/* ========================================
   RANK DASHBOARD (/rank menu)
   ======================================== */
.dash-container {
  display: flex;
  gap: 15px;
  width: 100%;
}

.dash-panel {
  background: rgba(10, 12, 18, 0.82);
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  flex: 1;
}

.dash-header {
  font-size: 14px;
  color: #8a94a6;
  text-transform: uppercase;
  font-weight: 800;
  border-bottom: 1px solid #2a2e38;
  padding-bottom: 8px;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.dash-stat {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500;
}

.dash-stat:last-child {
  border-bottom: none;
}

.dash-stat span {
  color: #c8ced8;
  font-weight: 700;
}

.dash-stat span.hl {
  color: #ebc863;
}

.dash-progress-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin: 10px 0;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.dash-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff7c7c, #ffe67c);
  border-radius: 3px;
}

.dash-profile {
  text-align: center;
  margin-bottom: 15px;
}

.dash-profile img {
  height: 50px;
  margin: 10px 0;
}

.dash-profile .pn {
  font-size: 18px;
  margin-bottom: 4px;
  display: block;
}

.dash-profile .sub {
  color: #8a94a6;
  font-size: 12px;
}

/* Minified Aliases for 1536 Byte Limit Bypass */
.a {
  display: flex;
  gap: 15px;
  width: 100%
}

/* dash-container */
.b {
  background: rgba(10, 12, 18, .82);
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
  flex: 1
}

/* dash-panel */
.c {
  font-size: 14px;
  color: #8a94a6;
  text-transform: uppercase;
  font-weight: 800;
  border-bottom: 1px solid #2a2e38;
  padding-bottom: 8px;
  margin-bottom: 12px;
  letter-spacing: 1px
}

/* dash-header */
.d {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  color: #9ca3af;
  font-size: 13px;
  font-weight: 500
}

/* dash-stat */
.d:last-child {
  border-bottom: none
}

.d span {
  color: #c8ced8;
  font-weight: 700
}

.d span.hl {
  color: #ebc863
}

.e {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, .1);
  border-radius: 3px;
  margin: 10px 0;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5)
}

/* dash-progress-bg */
.f {
  height: 100%;
  background: linear-gradient(90deg, #ff7c7c, #ffe67c);
  border-radius: 3px
}

/* dash-progress-fill */
.g {
  text-align: center;
  margin-bottom: 15px
}

/* dash-profile */
.g img {
  height: 50px;
  margin: 10px 0
}

.g .pn {
  font-size: 18px;
  margin-bottom: 4px;
  display: block
}

.h {
  color: #8a94a6;
  font-size: 12px
}

/* sub */