/* ========================================================================== */
/* MATCHES GRID / MATCH CARD — SINGLE STANDARD                                */
/* ========================================================================== */

.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 0;
  padding: 16px;
  box-sizing: border-box;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(0,40,44,.55), rgba(0,20,24,.65));
  border: 1px solid rgba(0,255,255,.25);
  border-radius: 14px;
  box-shadow: inset 0 0 22px rgba(0,255,255,.12), 0 14px 36px rgba(0,0,0,.55);
}

.match-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 224px;
  max-width: 230px;
  padding: 12px 10px 10px;
  text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,255,255,.14), transparent 55%),
    linear-gradient(180deg, #022f34, #021f23);
  border: 1px solid rgba(0,255,255,.35);
  border-radius: 14px;
  box-shadow: inset 0 0 16px rgba(0,255,255,.14), 0 10px 26px rgba(0,0,0,.55);
  transition: transform .18s ease, box-shadow .18s ease;
  box-sizing: border-box;
}

.match-card:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 22px rgba(0,255,255,.22), 0 16px 36px rgba(0,0,0,.65);
}

.match-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: 14px 14px 0 0;
}

.match-card.win::before { background: linear-gradient(90deg, #00ff99, #00c97a); }
.match-card.loss::before { background: linear-gradient(90deg, #ff5a5a, #c93030); }
.match-card.draw::before { background: linear-gradient(90deg, #ffd24d, #c9a63a); }
.match-card.pending::before { background: linear-gradient(90deg, #8aa, #677); }

.match-card img {
  width: 56px;
  height: 56px;
  margin: 6px auto;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,255,255,.35), 0 0 14px rgba(0,255,255,.45);
}

.match-card .mode {
  margin-top: 2px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.match-card.win .mode { color: #00ff99; }
.match-card.loss .mode { color: #ff6b6b; }
.match-card.draw .mode { color: #ffd24d; }
.match-card.pending .mode { color: #8aa; }

.match-card .win-loss {
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 700;
  opacity: .9;
}

.match-card .rating {
  margin-top: 4px;
  font-size: .85rem;
  font-weight: 800;
}

.match-card.win .rating { color: #00ff99; }
.match-card.loss .rating { color: #ff6b6b; }

.match-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  min-height: 34px;
  padding: 0 10px;
  color: #d9f6f8;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(0,255,255,.45);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,120,130,.55), rgba(0,60,70,.65));
  box-shadow: inset 0 0 0 1px rgba(0,255,255,.18), 0 4px 12px rgba(0,0,0,.45);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-sizing: border-box;
}

.match-card a:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(0,255,255,.35), 0 6px 16px rgba(0,0,0,.55);
}

.matches-grid .empty {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7fa;
  opacity: .6;
  background: linear-gradient(180deg, #021f23, #021417);
  border: 1px dashed rgba(0,255,255,.25);
  border-radius: 14px;
}

/* ========================================================================== */
/* MATCH DETAILS — SINGLE STANDARD                                            */
/* ========================================================================== */

.match-details {
  width: min(1120px, calc(100vw - 40px));
  max-width: 1120px;
  margin: 12px auto 0;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,255,255,.20);
  background:
    radial-gradient(140% 120% at 50% 0%, rgba(0,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,64,70,.50), rgba(0,22,26,.70));
  box-shadow: inset 0 0 18px rgba(0,255,255,.08), 0 14px 40px rgba(0,0,0,.45);
  box-sizing: border-box;
}

.match-title {
  margin: 0;
  text-align: center;
  font-size: clamp(1rem, .96rem + .35vw, 1.4rem);
  font-weight: 900;
  letter-spacing: .35px;
  color: #bffcff;
  text-shadow: 0 0 12px rgba(0,255,255,.18);
}

.match-date {
  margin: 6px 0 0;
  text-align: center;
  font-size: .92rem;
  color: rgba(204,238,255,.84);
}

.team-columns-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 12px;
}

.team-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  font-weight: 900;
  letter-spacing: .35px;
  color: #cfffff;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,64,70,.55), rgba(0,34,38,.62));
  border: 1px solid rgba(0,255,255,.22);
  border-radius: 10px;
  box-shadow: inset 0 0 16px rgba(0,255,255,.08), 0 10px 22px rgba(0,0,0,.35);
}

.team-name { font-size: 1rem; }
.team-result { font-size: .98rem; }

.team-title.win {
  color: #00ff88;
  border-color: rgba(0,255,136,.28);
}

.team-title.loss {
  color: #ff6666;
  border-color: rgba(255,102,102,.28);
}

.party-group {
  padding: 8px;
  background:
    radial-gradient(120% 120% at 35% 0%, rgba(0,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,64,70,.42), rgba(0,34,38,.55));
  border: 1px solid rgba(0,255,255,.16);
  border-radius: 12px;
  box-shadow: inset 0 0 14px rgba(0,255,255,.05), 0 8px 20px rgba(0,0,0,.26);
}

.party-group + .party-group {
  margin-top: 2px;
}

.party-group.is-user-party {
  border-color: rgba(0,255,200,.38);
  box-shadow:
    inset 0 0 0 1px rgba(0,255,200,.18),
    inset 0 0 14px rgba(0,255,200,.10),
    0 8px 20px rgba(0,0,0,.26);
}

.party-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  padding: 0 2px;
}

.party-badge,
.party-count {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
}

.party-badge {
  color: #cfffff;
  background: rgba(0,160,160,.16);
  border: 1px solid rgba(0,255,255,.30);
}

.party-count {
  color: rgba(204,238,255,.92);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(0,255,255,.14);
}

.player-card {
  margin-top: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(0,52,58,.62), rgba(0,28,32,.62));
  border: 1px solid rgba(0,255,255,.14);
  border-radius: 10px;
  box-shadow: inset 0 0 14px rgba(0,255,255,.05), 0 8px 18px rgba(0,0,0,.24);
  box-sizing: border-box;
}

.player-card:first-of-type { margin-top: 0; }
.player-card-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.hero-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  max-width: 52px;
  max-height: 52px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,255,255,.24), 0 0 16px rgba(0,255,255,.20);
}

.player-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.player-topline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.player-name {
  min-width: 0;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  text-align: left;
  line-height: 1.1;
  font-size: .92rem;
  font-weight: 900;
  color: #89f3ff;
  background: rgba(0,61,70,.92);
  border: 1px solid rgba(0,255,255,.16);
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  box-sizing: border-box;
  overflow: hidden;
}

.player-name a {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-name a:hover { text-decoration: underline; }

.player-rating {
  min-width: 46px;
  text-align: right;
  font-size: 1.05rem;
  font-weight: 900;
  line-height: 1;
}

.rating-positive { color: #2bff9c; }
.rating-negative { color: #ff6767; }

.player-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}

.hero-name-compact {
  min-width: 0;
  font-size: .80rem;
  color: #dff8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.player-role-badge,
.player-afk-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}

.player-role-badge {
  color: #bafcff;
  background: rgba(0,130,150,.18);
  border: 1px solid rgba(0,255,255,.22);
}

.player-afk-badge {
  color: #ffd8d8;
  background: rgba(180,40,40,.22);
  border: 1px solid rgba(255,120,120,.26);
}

.player-afk-badge.is-ok {
  color: #d8fff0;
  background: rgba(0,140,90,.20);
  border: 1px solid rgba(40,255,170,.22);
}

.player-stats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.kda-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 20px;
  padding: 0 7px;
  font-size: .76rem;
  color: #e9fbff;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(0,255,255,.12);
  border-radius: 999px;
}

.kda-chip b {
  font-size: .82rem;
  line-height: 1;
}

.stat-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 14px;
}

.afk-yes { color: #ff7b7b; font-weight: 900; }
.afk-no { color: #7CFF8A; font-weight: 900; }

.no-players {
  margin-top: 8px;
  text-align: center;
  font-size: .82rem;
  color: #aaa;
}

/* ========================================================================== */
/* TARGETED FIXES FOR CURRENT SCREENSHOTS                                     */
/* ========================================================================== */

.filters-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 220px));
  gap: 12px;
  align-items: end;
  justify-content: start;
  width: 100%;
  margin-bottom: 14px;
}

.filter-group {
  min-width: 0;
  width: 100%;
  gap: 6px;
}

.filter-select {
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 0 12px;
  box-sizing: border-box;
}

.hero-detail-top {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(300px, 540px);
  justify-content: start;
  align-items: start;
  gap: 18px;
  padding: 14px 16px;
}

.hero-detail-top::before,
.hero-detail-top::after,
.hero-detail-top .hero-divider,
.hero-divider-img {
  display: none;
}

.hero-detail-left {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-areas:
    "portrait name"
    "portrait stats";
  align-items: start;
  column-gap: 14px;
  row-gap: 8px;
}

.hero-portrait {
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  margin: 0;
}

.hero-detail-left .hero-name {
  margin: 0;
  align-self: end;
  line-height: 1.12;
}

.hero-detail-left .hero-substats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
}

.hero-detail-center {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  align-self: start;
}

.hero-ratings-title {
  text-align: left;
  margin-bottom: 12px;
}

.hero-ratings-list {
  display: grid;
  row-gap: 10px;
}

.hero-ratings-list li {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  padding: 0;
}

.hero-ratings-list .mode-name {
  width: auto;
  min-width: 0;
  text-align: left;
  line-height: 1.15;
}

.hero-ratings-list .mode-rank {
  position: relative;
  display: grid;
  grid-template-columns: 18px 54px minmax(92px, max-content) max-content;
  column-gap: 10px;
  align-items: center;
  justify-content: start;
  white-space: nowrap;
  min-width: 0;
}

.hero-ratings-list .mode-rank::before {
  content: '';
  display: block;
  width: 14px;
  height: 36px;
  background: url('/stats/ico/rang/1.png') center center / contain no-repeat;
  opacity: .98;
  filter: drop-shadow(0 0 4px rgba(255,210,120,.90)) drop-shadow(0 0 8px rgba(255,190,90,.45));
}

.hero-ratings-list .mode-rank img {
  display: block;
  width: 54px;
  height: 54px;
  max-width: 54px;
  max-height: 54px;
  object-fit: contain;
}

.hero-ratings-list .mode-rank .rank-name,
.hero-ratings-list .mode-rank .rank-value {
  line-height: 1;
}

.hero-ratings-list .mode-rank .rank-name {
  font-weight: 700;
}

.hero-ratings-list .mode-rank .rank-value {
  font-weight: 800;
}

/* ========================================================================== */
/* RESPONSIVE                                                                  */
/* ========================================================================== */

@media (max-width: 1100px) {
  .match-details {
    width: min(980px, calc(100vw - 28px));
  }

  .team-columns-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .filters-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-detail-top {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 12px;
  }

  .hero-detail-left {
    grid-template-columns: 1fr;
    grid-template-areas:
      "portrait"
      "name"
      "stats";
    justify-items: start;
  }

  .hero-detail-left .hero-substats {
    justify-content: flex-start;
  }

  .hero-ratings-list li {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 8px 10px;
    background: rgba(0,64,70,.32);
    border: 1px solid rgba(0,255,255,.14);
    border-radius: 8px;
  }

  .hero-ratings-list .mode-rank {
    grid-template-columns: 16px 48px minmax(88px, max-content) max-content;
    column-gap: 8px;
  }

  .hero-ratings-list .mode-rank::before {
    width: 12px;
    height: 32px;
  }

  .hero-ratings-list .mode-rank img {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
  }
}

@media (max-width: 768px) {
  .matches-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
  }

  .match-card {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .player-card {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    min-height: auto;
    padding: 12px;
  }

  .hero-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    max-width: 72px;
    max-height: 72px;
  }

  .player-name {
    min-height: 36px;
    padding: 7px 10px;
    font-size: .94rem;
  }

  .stat-line {
    font-size: .92rem;
  }

  .stat-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}

@media (max-width: 560px) {
  .filters-form {
    grid-template-columns: 1fr;
  }

  .hero-detail-left {
    justify-items: center;
    text-align: center;
  }

  .hero-detail-left .hero-substats,
  .hero-ratings-title {
    justify-content: center;
    text-align: center;
  }

  .hero-ratings-list .mode-name,
  .hero-ratings-list .mode-rank {
    text-align: center;
    justify-content: center;
  }

  .hero-ratings-list .mode-rank {
    grid-template-columns: 14px 44px auto auto;
    column-gap: 8px;
  }

  .hero-ratings-list .mode-rank::before {
    width: 11px;
    height: 28px;
  }

  .hero-ratings-list .mode-rank img {
    width: 44px;
    height: 44px;
    max-width: 44px;
    max-height: 44px;
  }
}

@media (max-width: 520px) {
  .matches-grid {
    grid-template-columns: 1fr;
  }

  .party-header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ========================================================================== */
/* HERO RATING PANEL — COMPACT REALIGN + BACKGROUND DECOR                     */
/* ========================================================================== */

.hero-detail-top {
  grid-template-columns: minmax(250px, 300px) minmax(340px, 560px);
  gap: 22px;
  padding: 18px 22px;
  background-image:
    url('/stats/admin/ico/main_ico/mainnnnnnnnn-1.png'),
    url('/stats/admin/ico/main_ico/mainnnnnnnnnn.png');
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 220px auto, 270px auto;
}

.hero-detail-left {
  grid-template-columns: 88px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}

.hero-portrait {
  width: 88px;
  height: 88px;
  max-width: 88px;
  max-height: 88px;
}

.hero-detail-left .hero-name {
  align-self: center;
  font-size: 1.05rem;
}

.hero-detail-left .hero-substats {
  gap: 10px;
}

.hero-ratings-title {
  margin-bottom: 10px;
  font-size: 1rem;
}

.hero-ratings-list {
  row-gap: 8px;
}

.hero-ratings-list li {
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 14px;
}

.hero-ratings-list .mode-name {
  font-size: .96rem;
}

.hero-ratings-list .mode-rank {
  grid-template-columns: 12px 40px minmax(78px, max-content) max-content;
  column-gap: 8px;
}

.hero-ratings-list .mode-rank::before {
  width: 10px;
  height: 26px;
}

.hero-ratings-list .mode-rank img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.hero-ratings-list .mode-rank .rank-name,
.hero-ratings-list .mode-rank .rank-value {
  font-size: .95rem;
}

.hero-ratings-list .mode-rank .rank-name {
  font-weight: 700;
}

.hero-ratings-list .mode-rank .rank-value {
  font-weight: 800;
  min-width: 0;
}

@media (max-width: 900px) {
  .hero-detail-top {
    background-size: 170px auto, 210px auto;
    padding: 16px 14px;
  }

  .hero-ratings-list li {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .hero-ratings-list .mode-rank {
    grid-template-columns: 10px 36px auto auto;
  }

  .hero-ratings-list .mode-rank::before {
    width: 9px;
    height: 22px;
  }

  .hero-ratings-list .mode-rank img {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
  }
}

@media (max-width: 560px) {
  .hero-detail-top {
    background-size: 120px auto, 150px auto;
    background-position: center 58%, center 58%;
  }

  .hero-ratings-list .mode-rank {
    grid-template-columns: 8px 32px auto auto;
    column-gap: 6px;
  }

  .hero-ratings-list .mode-rank::before {
    width: 8px;
    height: 19px;
  }

  .hero-ratings-list .mode-rank img {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
  }

  .hero-ratings-list .mode-name,
  .hero-ratings-list .mode-rank .rank-name,
  .hero-ratings-list .mode-rank .rank-value {
    font-size: .9rem;
  }
}

/* ========================================================================== */
/* HERO DETAIL TOP — CENTERED BACKGROUND / COMPACT RANKS FIX                  */
/* ========================================================================== */

.hero-detail-top{
  position: relative;
  grid-template-columns: 150px minmax(520px, 760px);
  justify-content: center;
  align-items: start;
  gap: 24px;
  padding: 18px 26px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,46,50,.24), rgba(0,18,22,.16));
}

.hero-detail-top::before,
.hero-detail-top::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .22;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 430px auto;
}

.hero-detail-top::before{
  background-image: url('/stats/admin/ico/main_ico/mainnnnnnnnn-1.png');
  transform: translateX(-92px) scale(1.02);
}

.hero-detail-top::after{
  background-image: url('/stats/admin/ico/main_ico/mainnnnnnnnnn.png');
  transform: translateX(92px) scale(1.02);
}

.hero-detail-top > *{
  position: relative;
  z-index: 1;
}

.hero-detail-left{
  grid-template-columns: 84px minmax(0,1fr);
  grid-template-areas:
    "portrait name"
    "stats stats";
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
  max-width: 150px;
}

.hero-portrait{
  width: 84px;
  height: 84px;
  max-width: 84px;
  max-height: 84px;
}

.hero-detail-left .hero-name{
  margin: 0;
  font-size: 1rem;
  line-height: 1.1;
  align-self: center;
}

.hero-detail-left .hero-substats{
  justify-content: flex-start;
  gap: 8px;
  margin-top: 2px;
}

.hero-detail-left .hero-substats .hero-substat{
  min-width: 92px;
  padding: 7px 10px;
}

.hero-detail-center{
  width: 100%;
  min-width: 0;
  max-width: 760px;
  margin: 0 auto;
}

.hero-ratings-title{
  margin: 0 0 12px;
  text-align: center;
}

.hero-ratings-list{
  max-width: 760px;
  margin: 0 auto;
  row-gap: 10px;
}

.hero-ratings-list li{
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  padding: 3px 0;
}

.hero-ratings-list .mode-name{
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;
}

.hero-ratings-list .mode-rank{
  display: grid;
  grid-template-columns: 8px 30px minmax(92px,max-content) max-content;
  align-items: center;
  justify-content: start;
  column-gap: 14px;
  min-width: 0;
}

.hero-ratings-list .mode-rank::before{
  width: 6px;
  height: 30px;
  opacity: .62;
  justify-self: center;
}

.hero-ratings-list .mode-rank img{
  width: 30px;
  height: 30px;
  max-width: 30px;
  max-height: 30px;
  object-fit: contain;
}

.hero-ratings-list .mode-rank .rank-name{
  margin-left: 2px;
  font-size: .96rem;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-ratings-list .mode-rank .rank-value{
  margin-left: 2px;
  font-size: .98rem;
  line-height: 1.1;
  white-space: nowrap;
}

@media (max-width: 1100px){
  .hero-detail-top{
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 18px;
    padding: 16px 18px;
  }

  .hero-detail-top::before,
  .hero-detail-top::after{
    background-size: 360px auto;
    opacity: .20;
  }

  .hero-detail-top::before{
    transform: translateX(-72px) scale(1);
  }

  .hero-detail-top::after{
    transform: translateX(72px) scale(1);
  }

  .hero-ratings-list li{
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 14px;
  }

  .hero-ratings-list .mode-rank{
    grid-template-columns: 8px 28px minmax(84px,max-content) max-content;
    column-gap: 12px;
  }
}

@media (max-width: 760px){
  .hero-detail-top{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 16px;
    padding: 16px 12px;
  }

  .hero-detail-top::before,
  .hero-detail-top::after{
    background-size: 300px auto;
    opacity: .18;
  }

  .hero-detail-top::before,
  .hero-detail-top::after{
    transform: none;
  }

  .hero-detail-left{
    max-width: none;
    justify-self: center;
  }

  .hero-ratings-title{
    text-align: center;
  }

  .hero-ratings-list li{
    grid-template-columns: 1fr;
    row-gap: 6px;
    text-align: center;
  }

  .hero-ratings-list .mode-name{
    text-align: center;
  }

  .hero-ratings-list .mode-rank{
    justify-content: center;
    grid-template-columns: 8px 28px auto auto;
    column-gap: 10px;
  }
}


/* ========================================================================== */
/* FILTERS PANEL COMPACT OVERRIDE                                             */
/* ========================================================================== */

.filter-container{
  display:block;
  width:100%;
  min-width:0;
  white-space:normal;
}

.filters-form{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px, 220px));
  gap:12px;
  align-items:start;
  justify-content:start;
  width:100%;
  margin:0 0 14px;
}

.filter-group{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:6px;
  min-width:0;
  width:100%;
  height:auto;
  min-height:0;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  box-shadow:none;
}

.filter-group::before,
.filter-group::after{
  display:none;
  content:none;
}

.filter-label{
  display:block;
  margin:0 0 4px;
  padding:0 2px;
  line-height:1.15;
}

.filter-select{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  height:46px;
  min-height:46px;
  max-height:46px;
  line-height:46px;
  padding:0 38px 0 12px;
  margin:0;
  border-radius:8px;
  border:1px solid rgba(0,255,255,.28);
  background:
    linear-gradient(180deg, rgba(0,54,58,.92), rgba(0,28,32,.96));
  color:#dff7ff;
  font-size:0.98rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-shadow:
    inset 0 0 0 1px rgba(0,255,255,.08),
    0 6px 16px rgba(0,0,0,.24);
  cursor:pointer;
  outline:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(190,235,255,.72) 50%),
    linear-gradient(135deg, rgba(190,235,255,.72) 50%, transparent 50%),
    linear-gradient(180deg, rgba(0,54,58,.92), rgba(0,28,32,.96));
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px),
    0 0;
  background-size:5px 5px, 5px 5px, 100% 100%;
  background-repeat:no-repeat;
}

.filter-select:hover{
  filter:brightness(1.04);
}

.filter-select:focus{
  border-color:rgba(255,210,77,.62);
  box-shadow:
    inset 0 0 0 1px rgba(255,210,77,.22),
    0 0 0 2px rgba(255,210,77,.12),
    0 6px 16px rgba(0,0,0,.24);
}

.filter-select option{
  background:#082328;
  color:#dff7ff;
}
/* =========================================
   HERO RATINGS BACKGROUND
   ========================================= */

.hero-ratings-list{
    position:relative;
    z-index:2;
}

/* декоративный фон */

.hero-ratings-list::before{
    content:"";
    position:absolute;

    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    width:620px;
    height:420px;

    background-image:
        url("/stats/admin/ico/main_ico/mainnnnnnnnn-1.png"),
        url("/stats/admin/ico/main_ico/mainnnnnnnnnn.png");

    background-repeat:no-repeat,no-repeat;
    background-position:center center, center center;
    background-size:420px auto, 420px auto;

    opacity:0.22;

    pointer-events:none;
    z-index:0;
}

/* чтобы текст был поверх */

.hero-ratings-list li{
    position:relative;
    z-index:3;
}
@media (max-width: 900px){
  .filters-form{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px){
  .filters-form{
    grid-template-columns:1fr;
  }
}


/* ========================================================================== */
/* MATCH DETAILS — SCOREBOARD REDESIGN                                        */
/* ========================================================================== */

.compact-match-details {
  width: min(1180px, calc(100vw - 26px));
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 12px 12px 14px;
  border-radius: 18px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(0,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(0,66,72,.92), rgba(0,34,39,.92));
  border: 1px solid rgba(0,255,255,.18);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 22px rgba(0,255,255,.06),
    0 14px 30px rgba(0,0,0,.28);
}

.compact-match-head {
  margin-bottom: 10px;
  text-align: center;
}

.compact-match-head .match-title {
  margin: 0;
  color: #23f1ff;
  text-shadow: 0 0 10px rgba(0,255,255,.35);
}

.compact-match-head .match-date {
  margin-top: 6px;
  color: #d7f8ff;
  font-size: .98rem;
}

.ultra-compact-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.compact-team-column {
  min-width: 0;
}

.compact-team-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  min-height: 46px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,90,98,.82), rgba(0,48,54,.88));
  border: 1px solid rgba(0,255,255,.22);
  box-shadow: inset 0 0 16px rgba(0,255,255,.08);
}

.compact-team-title.win .team-title-state {
  color: #25ff99;
}

.compact-team-title.loss .team-title-state {
  color: #ff6565;
}

.team-title-name,
.team-title-state {
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1;
}

.compact-team-roster {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 2px 0 0;
}

.compact-match-row {
  position: relative;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, rgba(0,67,73,.56), rgba(0,39,44,.78));
  border: 1px solid rgba(0,255,255,.12);
  border-radius: 14px;
  box-shadow:
    inset 0 0 10px rgba(0,255,255,.05),
    0 8px 16px rgba(0,0,0,.14);
  box-sizing: border-box;
  min-height: 82px;
  overflow: hidden;
}

.compact-match-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(0,255,255,.08);
}

.compact-match-row.is-group-start {
  border-color: rgba(0,255,255,.22);
}

.compact-match-row.is-current-player {
  border-color: rgba(0,255,255,.34);
  box-shadow:
    inset 0 0 0 1px rgba(0,255,255,.18),
    inset 0 0 18px rgba(0,255,255,.09),
    0 8px 16px rgba(0,0,0,.14);
}

.compact-match-row.is-current-player::before {
  background: linear-gradient(180deg, #31feff, rgba(49,254,255,.22));
}

.compact-party-tag {
  position: absolute;
  top: -7px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 900;
  color: #d7ffff;
  background: rgba(0,118,128,.94);
  border: 1px solid rgba(0,255,255,.28);
  letter-spacing: .2px;
  z-index: 1;
}

.compact-party-tag.solo {
  background: rgba(13,95,104,.94);
}

.compact-match-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1.2fr) minmax(110px, .75fr) minmax(134px, .82fr) 56px;
  gap: 10px;
  align-items: center;
}

.compact-avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.compact-match-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  max-width: 52px;
  max-height: 52px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(0,255,255,.24);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.26),
    0 0 14px rgba(0,255,255,.16);
}

.compact-match-player {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.compact-match-login {
  min-width: 0;
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 0;
}

.compact-match-login a {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: #8ff5ff;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 0 6px rgba(0,255,255,.15);
}

.compact-match-login a:hover {
  text-decoration: underline;
}

.compact-match-subline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.compact-hero-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #dff8ff;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.15;
}

.compact-afk-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 900;
  color: #d8fff0;
  background: rgba(0,140,90,.18);
  border: 1px solid rgba(40,255,170,.20);
  line-height: 1;
  white-space: nowrap;
}

.compact-afk-badge.is-afk {
  color: #ffd8d8;
  background: rgba(180,40,40,.22);
  border-color: rgba(255,120,120,.24);
}

.compact-rank-block {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(0,255,255,.10);
}

.compact-rank-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}

.compact-rank-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.compact-rank-name,
.compact-rank-rating {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.05;
}

.compact-rank-name {
  color: #ffe8a3;
  font-size: .73rem;
  font-weight: 900;
}

.compact-rank-rating {
  color: rgba(223,248,255,.78);
  font-size: .7rem;
  font-weight: 700;
}

.compact-kda-inline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.compact-kda-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 800;
  color: #e9fbff;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(0,255,255,.14);
  box-shadow: inset 0 0 6px rgba(0,255,255,.05);
}

.compact-kda-item b {
  font-size: .95rem;
  font-weight: 900;
  line-height: 1;
}

.compact-kda-item .stat-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
}
.compact-match-delta-afk{
	width: 44px;
	height: 44px;
	max-width:44px;
	}
	
	
.compact-match-delta {
  min-width: 0;
  text-align: right;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}

.compact-match-delta.is-positive {
  color: #2bff9c;
  text-shadow: 0 0 8px rgba(43,255,156,.2);
}

.compact-match-delta.is-negative {
  color: #ff6767;
  text-shadow: 0 0 8px rgba(255,103,103,.2);
}

@media (max-width: 1180px) {
  .compact-match-details {
    width: min(1080px, calc(100vw - 22px));
  }

  .compact-match-main {
    grid-template-columns: 50px minmax(0, 1fr) minmax(98px, .72fr) minmax(124px, .78fr) 52px;
    gap: 8px;
  }

  .compact-match-login a {
    font-size: .94rem;
  }

  .compact-kda-item {
    padding: 0 6px;
  }
}

@media (max-width: 980px) {
  .ultra-compact-match-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .compact-match-details {
    width: min(100%, calc(100vw - 16px));
    padding: 10px 8px 12px;
  }

  .compact-match-row {
    min-height: auto;
    padding: 10px 8px;
  }

  .compact-match-main {
    grid-template-columns: 46px minmax(0, 1fr) 64px;
    grid-template-areas:
      "avatar player delta"
      "avatar rank rank"
      "kda kda kda";
    gap: 7px 8px;
  }

  .compact-avatar-wrap { grid-area: avatar; }
  .compact-match-player { grid-area: player; }
  .compact-rank-block { grid-area: rank; }
  .compact-kda-inline { grid-area: kda; }
  .compact-match-delta {
    grid-area: delta;
    align-self: start;
    font-size: 1.08rem;
  }

  .compact-match-avatar {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    max-width: 46px;
    max-height: 46px;
  }

  .compact-match-login a {
    font-size: .9rem;
  }

  .compact-hero-name {
    font-size: .78rem;
  }

  .compact-rank-block {
    grid-template-columns: 22px minmax(0, 1fr);
    padding: 5px 7px;
  }

  .compact-rank-icon {
    width: 22px;
    height: 22px;
  }

  .compact-kda-item {
    min-height: 28px;
    font-size: .82rem;
  }
}

@media (max-width: 520px) {
  .compact-team-title {
    padding: 9px 10px;
    min-height: 42px;
  }

  .team-title-name,
  .team-title-state {
    font-size: .95rem;
  }

  .compact-match-subline {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .compact-afk-badge {
    height: 18px;
    padding: 0 7px;
  }
}

/* === compact matches page: 10 cards per tab, smaller hero cards === */
.matches-grid{
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 12px;
  max-width: 1040px;
  margin: 10px auto 0;
}

.match-card{
  min-height: 192px;
  max-width: 188px;
  padding: 10px 8px 8px;
  border-radius: 12px;
}

.match-card img,
.match-card .match-hero{
  width: 46px;
  height: 46px;
  margin: 4px auto 5px;
  box-shadow: 0 0 0 2px rgba(0,255,255,.28), 0 0 10px rgba(0,255,255,.34);
}

.match-card .mode{
  font-size: .72rem;
  line-height: 1.15;
  margin-top: 1px;
}

.match-card .win-loss{
  font-size: .72rem;
  margin-top: 1px;
}

.match-card .rating{
  margin-top: 3px;
  font-size: .8rem;
}

.match-card .match-date{
  margin-top: 4px;
  font-size: .74rem;
}

.match-card a,
.match-card .card-details-btn{
  min-height: 30px;
  margin-top: 8px;
  padding: 0 8px;
  font-size: .74rem;
  border-radius: 9px;
}

@media (min-width: 1100px){
  .matches-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 820px){
  .matches-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }
  .match-card{
    max-width: none;
    min-height: 180px;
  }
}


@media (max-width: 640px) {
  .compact-match-topline {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }

  .compact-kda-row {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .compact-kda-item {
    min-height: 20px;
    padding: 0 7px;
    font-size: .78rem;
  }

  .compact-kda-item b {
    font-size: .88rem;
  }
}

/* ========================================================================== */
/* MATCH DETAILS — BOARD STYLE 1:1 ATTEMPT                                   */
/* ========================================================================== */

.pw-match-board{
  width:min(1160px,calc(100vw - 32px));
  padding:14px 14px 16px;
  border-radius:18px;
}

.pw-match-head .match-title{
  color:#28efff;
  font-size:clamp(1.25rem,1.05rem + .6vw,1.9rem);
  text-shadow:0 0 10px rgba(0,255,255,.35),0 0 18px rgba(0,255,255,.18);
}

.pw-mode-name{
  color:#95ffff;
  font-weight:800;
}

.pw-match-grid{
  gap:10px;
  margin-top:14px;
}

.pw-team-column .compact-team-title{
  min-height:40px;
  padding:8px 12px;
  border-radius:12px;
}

.pw-team-roster{
  gap:5px;
  margin-top:6px;
}

.pw-board-row{
  min-height:74px;
  padding:7px 10px 7px 12px;
  border-radius:10px;
  background:linear-gradient(180deg,rgba(0,83,90,.66),rgba(0,49,54,.86));
  border:1px solid rgba(0,255,255,.18);
  box-shadow:inset 0 0 10px rgba(0,255,255,.05),0 4px 14px rgba(0,0,0,.18);
}

.pw-board-row::before{
  width:2px;
  background:rgba(0,255,255,.10);
}

.pw-board-main{
  grid-template-columns:60px minmax(0,1fr) minmax(160px,.95fr) 70px;
  gap:10px;
  align-items:center;
}

.pw-avatar-wrap{
  position:relative;
  justify-content:flex-start;
}

.pw-match-avatar{
  width:54px;
  height:54px;
  min-width:54px;
  min-height:54px;
  max-width:54px;
  max-height:54px;
  border:2px solid rgba(114,238,255,.35);
  box-shadow:0 0 0 2px rgba(0,0,0,.24),0 0 10px rgba(0,255,255,.10);
}

.pw-rank-coin{
  position:absolute;
  left:-8px;
  top:80%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(0,0,0,.12) 42%,rgba(0,0,0,.5) 100%),linear-gradient(180deg,#476a76,#21363e);
  box-shadow:0 0 0 2px rgba(0,0,0,.35),0 0 8px rgba(255,214,92,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  overflow:hidden;
}

.pw-rank-coin-ring{
  position:absolute;
  inset:2px;
  border-radius:50%;
  border:1px solid rgba(255,225,132,.30);
  pointer-events:none;
}

.pw-rank-coin-icon{
  width:16px;
  height:16px;
  object-fit:contain;
  display:block;
}

.pw-rank-coin-score{
  position:absolute;
  left: 50%;
  bottom:-11px;
  transform:translateX(-50%);
  min-width:38px;
  height:14px;
  padding:0 4px;
  border-radius:999px;
  background:rgba(20,32,38,.95);
  color:#ffeeb4;
  font-size:.55rem;
  font-weight:900;
  line-height:12px;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}

.pw-name-stack{
  gap:3px;
}

.pw-board-login{
  min-height:auto;
}

.pw-board-login a{
 
  font-size:1rem;
  font-weight:900;
  text-shadow:0 0 6px rgba(0,0,0,.35);
}

.pw-board-subline{
  justify-content:flex-start;
  gap:6px;
}

.pw-board-hero{
  color:#d6d6d6;
  font-size:.92rem;
  font-weight:700;
}

.pw-board-stats{
  grid-template-columns:repeat(3,minmax(44px,1fr));
  gap:8px;
  align-items:center;
}

.pw-board-stats .compact-kda-item{
  min-height:26px;
  padding:0 6px;
  border-radius:999px;
  background:transparent;
  border:none;
  box-shadow:none;
  justify-content:flex-start;
  color:#f0fbff;
}

.pw-board-stats .compact-kda-item b{
  font-size:1rem;
}

.pw-board-stats .stat-icon{
  width:25px;
  height:25px;
  min-width:25px;
}

.pw-right-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:5px;
  min-width:0;
}
.compact-match-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.pw-right-meta .compact-match-delta{
  font-size:1.15rem;
}

.pw-rank-caption{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#ffe49a;
  font-size:.69rem;
  font-weight:900;
  text-align:right;
}

.pw-board-row .compact-party-tag{
  top:-6px;
  left:12px;
  height:15px;
  font-size:.58rem;
}

.pw-board-row .compact-afk-badge{
  height:16px;
  padding:0 6px;
  font-size:.55rem;
}

@media (max-width: 1080px){
  .pw-board-main{
    grid-template-columns:56px minmax(0,1fr) minmax(144px,.9fr) 62px;
    gap:8px;
  }

  .pw-board-login a{ font-size:.92rem; }
  .pw-board-hero{ font-size:.84rem; }
}

@media (max-width: 760px){
  .pw-match-board{
    width:min(100%,calc(100vw - 14px));
    padding:10px 8px 12px;
  }

  .pw-board-row{
    padding:9px 8px 10px 10px;
    overflow:visible;
  }

  .pw-board-main{
    grid-template-columns:54px minmax(0,1fr) 54px;
    grid-template-areas:
      "avatar names delta"
      "stats stats stats";
    gap:6px 8px;
  }

  .pw-avatar-wrap{ grid-area:avatar; }
  .pw-name-stack{ grid-area:names; }
  .pw-board-stats{ grid-area:stats; }
  .pw-right-meta{ grid-area:delta; align-items:flex-end; }

  .pw-board-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .pw-rank-caption{
    display:none;
  }

  .pw-rank-coin{
    left: 50px;
    width:26px;
    height:26px;
  }

  .pw-rank-coin-icon{
    width:14px;
    height:14px;
  }

  .pw-rank-coin-score{
    bottom:-10px;
    min-width:34px;
    font-size:.5rem;
  }
}


/* === match board tuning v2 === */
.pw-match-board{
  width:min(1380px, calc(100vw - 28px));
  padding:18px 16px 16px;
  border-radius:24px;
  border:1px solid rgba(0,255,255,.24);
  box-shadow:0 10px 28px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.03), 0 0 16px rgba(0,255,255,.09);
}

.pw-match-grid{
  gap:12px;
}

.pw-team-column{
  border-radius:18px;
  border:1px solid rgba(0,255,255,.22);
  overflow:hidden;
}

.pw-team-column .compact-team-title{
  min-height:40px;
  padding:10px 14px;
  border-bottom:1px solid rgba(0,255,255,.18);
}

.pw-team-column .team-title-name,
.pw-team-column .team-title-state{
  font-size:1.02rem;
}

.pw-board-row{
  min-height:76px;
  padding:12px 14px 12px 16px;
  border-radius:14px;
  overflow:visible;
}

.pw-board-main{
  grid-template-columns:60px minmax(0, 1.55fr) minmax(154px, .95fr) 72px;
  gap:12px;
}

.pw-avatar-wrap{
  position:relative;
}

.pw-match-avatar{
  width:60px;
  height:60px;
  min-width:60px;
  min-height:60px;
  max-width:60px;
  max-height:60px;
  border-width:2px;
}

.pw-rank-coin{
  left: 50px;
  width:24px;
  height:24px;
  border-width:1px;
  box-shadow:0 0 0 2px rgba(0,0,0,.38),0 0 10px rgba(255,214,92,.22);
}

.pw-rank-coin-icon{
  width:18px;
  height:18px;
}

.pw-rank-coin-score{
  bottom:-12px;
  min-width:32px;
  height:12px;
  font-size:.58rem;
  line-height:13px;
}

.pw-name-stack{
  gap:5px;
}

.pw-board-login a{
  font-size:1.12rem;
}

.pw-board-hero{
  font-size:1rem;
}

.pw-board-stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(32px, 42px));
  gap:12px;
  align-items:start;
  justify-content:start;
}

.pw-board-stats .compact-kda-item{
  min-height:auto;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  color:#f0fbff;
}

.pw-board-stats .compact-kda-item b{
  display:block;
  font-size:1.02rem;
  line-height:1;
  text-align:center;
  font-weight:900;
  margin:0;
  padding:0;
}

.pw-board-stats .stat-icon{
  display:block;
  width:26px;
  height:26px;
  min-width:26px;
  object-fit:contain;
  margin:0;
  padding:0;
}

.pw-right-meta .compact-match-delta{
  font-size:1.38rem;
}

.pw-rank-caption{
  display:none;
}

@media (max-width: 1220px){
  .pw-match-board{
    width:min(1180px, calc(100vw - 20px));
    padding:16px 12px 14px;
  }

  .pw-board-main{
    grid-template-columns:56px minmax(0, 1.35fr) minmax(142px, .9fr) 64px;
    gap:10px;
  }

  .pw-match-avatar{
    width:56px;
    height:56px;
    min-width:56px;
    min-height:56px;
    max-width:56px;
    max-height:56px;
  }

  .pw-board-login a{ font-size:1.02rem; }
  .pw-board-hero{ font-size:.94rem; }
}

@media (max-width: 760px){
  .pw-match-board{
    width:min(100%, calc(100vw - 12px));
    padding:10px 7px 12px;
  }

  .pw-board-row{
    padding:10px 8px 11px 11px;
  }

  .pw-board-main{
    grid-template-columns:56px minmax(0,1fr) 58px;
  }

  .pw-match-avatar{
    width:52px;
    height:52px;
    min-width:52px;
    min-height:52px;
    max-width:52px;
    max-height:52px;
  }

  .pw-rank-coin{
    left: 51px;
    width:20px;
    height:20px;
  }

  .pw-rank-coin-icon{
    width:16px;
    height:16px;
  }

  .pw-rank-coin-score{
    min-width:20px;
    font-size:.54rem;
  }

  .pw-board-login a{ font-size:.96rem; }
  .pw-board-hero{ font-size:.86rem; }

  .pw-board-stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(26px, 1fr));
    gap:10px;
    align-items:start;
    justify-content:start;
  }

  .pw-board-stats .compact-kda-item b{
    font-size:.92rem;
  }

  .pw-board-stats .stat-icon{
    width:24px;
    height:24px;
    min-width:24px;
  }
}