/* ===   === */
/*body {
    font-family: 'HeliosCond-bold', Arial, sans-serif;
    color: #e0e0e0;
    margin: 0;
    padding: 20px;
    background-image: url('/stats/ico/bodytop_bc.jpg');
    background-size: cover, cover;
    background-position: top, bottom;
    background-repeat: no-repeat, no-repeat;
}*/

/* ==========================================================================
   LAYER HELPERS
   ========================================================================== */

:root{
  --z-base:1;
  --z-content:5;
  --z-floating:20;
  --z-overlay:1000;
  --z-modal:1010;
  --z-toast:1020;
}

/* ===============================
   STATS CARDS  FIXED & CENTERED
   =============================== */

.stats-frame {
  background-color: rgba(0, 64, 70, 0.88);
  width: 100%;
  max-width: 360px;
  min-height: 84px;
  padding: 10px 14px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(0,255,255,.35);
  box-shadow:
    inset 0 0 10px rgba(0,255,255,.25),
    0 6px 18px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2px;
}

.stats-frame p {
  margin: 0;
  font-size: 14px;
  line-height: 1.15;
  color: #cceeff;
}

.stats-frame p:first-child {
  font-weight: 700;
  color: #eaffff;
  margin-bottom: -2px;
}

/* content area structure */
.tab-content{
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: var(--z-content);
}

.tab-content > div{
  display: none;
  padding: 1px;
  min-width: 0;
}

.tab-content > div.active{
  display: block;
}

/* ===============================
   GRID TRACK VARIABLES
   =============================== */
/* layout tracks */
:root{
  --track-left: 360px;
  --track-mid: 420px;
  --track-right: 360px;
  --sep: 28px;
  --sep-color: transparent;
}

/* ===============================
   STATS SUMMARY  DENSE VERSION
   =============================== */

.stats-summary {
  display: grid;
  grid-template-columns:
    var(--track-left)
    var(--sep)
    var(--track-mid)
    var(--sep)
    var(--track-right);
  width: 100%;
  max-width: calc(
    var(--track-left) +
    var(--track-mid) +
    var(--track-right) +
    2 * var(--sep)
  );
  margin: 12px auto 0;
  align-items: stretch;
  justify-content: center;
  position: relative;
  z-index: var(--z-content);
}

.stats-summary > :nth-child(1){ grid-column: 1; }
.stats-summary > :nth-child(2){ grid-column: 3; }
.stats-summary > :nth-child(3){ grid-column: 5; }
.stats-summary > :nth-child(4){ grid-column: 3; }

/* ===== BASE CARD ===== */
.stats-summary > div {
  position: relative;
  background:
    linear-gradient(
      180deg,
      rgba(10,70,76,.88),
      rgba(4,34,38,.95)
    );
  border-radius: 16px;
  border: 1px solid rgba(0,255,255,.32);
  padding: 10px 16px;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  box-shadow:
    0 6px 18px rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: var(--z-content);
}

/* subtle glow line */
.stats-summary > div::after {
  content: "";
  position: absolute;
  inset: auto 14px 0 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,255,255,.6),
    transparent
  );
  opacity: .6;
}

/* ===== TEXT ===== */
.stats-summary > div p {
  margin: 0;
  line-height: 1.05;
}

/* label */
.stats-summary > div p:first-child {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #8fe9ef;
  opacity: .9;
  margin-bottom: -2px;
}

/* value */
.stats-summary > div p:last-child {
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0,255,255,.5);
}

/* ===== CENTER (ACCOUNT RATING) ===== */
.stats-summary-accrang,
.stats-summary > div:nth-child(4) {
  margin-top: 22px;
  background:
    linear-gradient(
      180deg,
      rgba(0,145,155,.96),
      rgba(0,80,86,.96)
    );
  border-color: rgba(0,255,255,.6);
  box-shadow:
    0 12px 30px rgba(0,255,255,.35),
    0 8px 24px rgba(0,0,0,.65);
  transform: translateY(-4px);
}

.stats-summary > div:nth-child(4) p:last-child {
  font-size: 1.8rem;
  line-height: 1.05;
  text-shadow:
    0 0 14px rgba(0,255,255,.8);
}

/* ===== HOVER ===== */
.stats-summary > div:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.65);
}

.stats-summary > div:nth-child(4):hover {
  transform: translateY(-4px);
}

/* ===============================
   GRID COLUMNS  CENTERED
   =============================== */

.left-section{
  grid-column: 3;
  max-width: var(--track-mid);
  padding-left: 0;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  position: relative;
  z-index: var(--z-content);
}

.win-loss-chart{
  grid-column: 5;
  width: var(--track-right);
  height: var(--track-right);
  margin: 0;
  justify-self: center;
  position: relative;
  z-index: var(--z-content);
}

/* canvas */
.win-loss-chart canvas{
  width: min(100%, 360px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
}

/* ===============================
   CONTENT ALIGNMENT
   =============================== */

.profile-title h2{
  color: #00ffff;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0 0 5px #00ffff;
}

/*   */
.favorite-hero-container{
  background-color: rgba(0, 64, 70, 0.85);
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #00ffff44;
  box-shadow: 0 0 8px #00ffff33 inset;
  width: 100%;
  max-width: 350px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: var(--z-content);
}

/*   */
.rank-img{
  width: 20px;
  height: auto;
  vertical-align: middle;
  margin-left: 6px;
}

/* =====   (   ) ===== */
.favorite-hero {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 76px;
  text-align: center;
}

.left-section > .stats-frame .hero-img,
.favorite-hero .hero-img{
  grid-column: 1;
  justify-self: end;
  border-radius: 8px;
}

.left-section > .stats-frame .hero-info,
.favorite-hero .hero-info{
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.25;
  margin: 0;
}

.left-section > .stats-frame .hero-info p,
.favorite-hero .hero-info p{
  margin: 2px 0;
  white-space: normal;
  word-break: break-word;
}

/* ===== Favorites box:  " " ==== */
.favorites-on-main {
  width: min(260px, 100%);
  background: rgba(0,64,70,.90);
  border: 1px solid rgba(0,255,255,.35);
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  backdrop-filter: blur(1px);
  margin: 10px 0;
  position: relative;
  z-index: var(--z-content);
}

.favorites-on-main .fav-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom: 6px;
  position: relative;
}

.favorites-on-main .fav-header .username{
  color:#00ffff;
  font-weight:700;
  text-align:center;
  width:100%;
  text-shadow: 0 0 3px rgba(0,255,255,.35);
  font-size: 18px;
}

.favorites-on-main .fav-clear-btn{
  position:absolute;
  right:8px;
  top:8px;
  padding:4px 8px;
  border-radius:6px;
  border:1px solid rgba(0,255,255,.35);
  background:#003e44;
  color:#cceeff;
  cursor:pointer;
  font-size:.85rem;
}

.favorites-on-main .fav-clear-btn:hover{ filter:brightness(1.06); }

.favorites-on-main .fav-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.favorites-on-main .fav-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:#002b30;
  border:1px solid rgba(0,255,255,.18);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 0;
}

.favorites-on-main .fav-card .fav-link{
  color:#cceeff;
  font-weight:600;
  text-decoration:none;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:block;
  min-width:0;
  flex:1 1 auto;
}

.favorites-on-main .fav-card .fav-remove{
  background:#5a0b0b;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius: 8px;
  padding: 2px 6px;
  line-height:1;
  cursor:pointer;
  font-weight:700;
}

.favorites-on-main .fav-card .fav-remove:hover{ background:#7a0f0f; }

/* ==================     ================== */
.left-section > .stats-frame{
  padding-right: 20px;
  padding-left: 20px;
}

/* ======== HERO DETAILS  REWORKED BLOCK ======== */

/* link wrapper */
.hero-card-link{
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ===============================
   HERO SECTION (small panels)
   =============================== */
.hero-section{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,64,70,.60), rgba(0,34,38,.66));
  border: 1px solid rgba(0,255,255,.20);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
  box-shadow:
    inset 0 0 18px rgba(0,255,255,.08),
    0 10px 26px rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

/* title */
.hero-section-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  color:#bffcff;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(0,255,255,.15);
}

/* hint icon (optional) */
.hero-section-title::after{
  content:"?";
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,.22);
  background: rgba(0,40,45,.55);
  color: rgba(200,240,255,.9);
  font-size: 12px;
  font-weight: 900;
  opacity: .55;
}

/* stats list */
.hero-stats{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 14px;
}

/* stat row */
.hero-stats li{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0, 20, 24, .28);
  border: 1px solid rgba(0,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
}

.hero-stats .stat-name{
  color: rgba(170,238,238,.95);
  font-weight: 800;
  letter-spacing: .2px;
}

.hero-stats .stat-val{
  color:#fff;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(0,255,255,.10);
}

/* ===============================
   HERO SKILLS
   =============================== */
.hero-detail-skills{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.hero-detail-skills--empty{
  color:#88a;
  font-style: italic;
  padding: 8px 10px;
  background: rgba(0,20,24,.22);
  border: 1px dashed rgba(0,255,255,.18);
  border-radius: 10px;
}

.hero-skill-caption{
  font-weight: 900;
  color:#bffcff;
  letter-spacing: .3px;
  text-shadow: 0 0 10px rgba(0,255,255,.12);
}

.hero-skill-item{
  background:
    linear-gradient(180deg, rgba(0,52,58,.85), rgba(0,34,38,.85));
  border: 1px solid rgba(0,255,255,.18);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow:
    inset 0 0 16px rgba(0,255,255,.07),
    0 8px 18px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease;
}

.hero-skill-item:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.hero-skill-name{
  font-weight: 900;
  color:#fff;
  margin-bottom: 4px;
  letter-spacing: .2px;
}

.hero-skill-text{
  color:#cceeff;
  font-size: .95rem;
  line-height: 1.35;
  opacity: .95;
}

/* ===============================
   HERO HISTORY  HUD TABLE + SORT + K/D/A (ALIGNED)
   =============================== */

.hero-detail-history.hero-history-panel{
  margin-top: 12px;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(0,64,70,.55), rgba(0,34,38,.62));
  border: 1px solid rgba(0,255,255,.20);
  border-radius: 14px;
  padding: 12px;
  box-shadow:
    inset 0 0 18px rgba(0,255,255,.08),
    0 10px 28px rgba(0,0,0,.40);
}

/* head */
.hero-history-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin: 0 4px 10px;
}

.hero-history-title{
  font-weight: 900;
  letter-spacing: .4px;
  color:#bffcff;
  text-shadow: 0 0 10px rgba(0,255,255,.15);
}

.hero-history-sub{
  font-size: .82rem;
  color: rgba(204,238,255,.75);
}

/* wrapper */
.hero-history-table{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* row base  : 6  ( ,   ) */
.hero-history-row{
  display:grid;
  grid-template-columns: 92px 170px 170px 140px 130px 130px;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
  overflow: hidden;
}

/* header row */
.hero-history-row--head{
  background: rgba(0, 30, 35, 0.85);
  border-color: rgba(0,255,255,.18);
}

/* header buttons */
.hero-history-row--head .hh-head{
  all: unset;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:8px;
  color: rgba(180,245,250,.95);
  font-size: .86rem;
  font-weight: 900;
  letter-spacing: .3px;
  padding: 4px 6px;
  border-radius: 8px;
  user-select:none;
  white-space: nowrap;
  transition: background .15s ease, filter .15s ease;
}

.hero-history-row--head .hh-head:hover{
  background: rgba(0,255,255,.08);
  filter: brightness(1.05);
}

.hero-history-row--head .hh-head:focus-visible{
  outline: 2px solid rgba(0,255,255,.35);
  outline-offset: 2px;
}

/* KDA header align right */
.hero-history-row--head .hh-head--kda{
  justify-content:flex-end;
}

/* tiny arrow */
.hh-sort-ico{
  width: 10px;
  height: 10px;
  display:inline-block;
  opacity: .65;
  transform: translateY(1px);
  background: conic-gradient(from 180deg, rgba(180,245,250,.0), rgba(180,245,250,.95));
  clip-path: polygon(50% 85%, 0 15%, 100% 15%);
}

.hh-sort.is-active .hh-sort-ico{ opacity: 1; }
.hh-sort.is-desc .hh-sort-ico{ transform: translateY(1px) rotate(180deg); }

/* win/loss rows */
.hero-history-row.is-win{
  background: linear-gradient(90deg, rgba(0, 90, 80, 0.55), rgba(0, 70, 75, 0.35));
}

.hero-history-row.is-loss{
  background: linear-gradient(90deg, rgba(120, 0, 35, 0.55), rgba(70, 0, 25, 0.35));
}

.hero-history-row:not(.hero-history-row--head):hover{
  filter: brightness(1.06);
  border-color: rgba(0,255,255,.22);
}

/* cells */
.hero-history-row .col-match,
.hero-history-row .col-date,
.hero-history-row .col-mode,
.hero-history-row .col-outcome,
.hero-history-row .col-delta,
.hero-history-row .col-kda{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* match link */
.hero-history-row .match-link{
  color:#8ff6ff;
  font-weight: 900;
  text-decoration:none;
}

.hero-history-row .match-link:hover{
  text-decoration: underline;
  text-shadow: 0 0 10px rgba(0,255,255,.18);
}

/* outcome badge */
.outcome-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 8px rgba(0,0,0,.25);
}

.outcome-badge.win{
  background: rgba(0, 255, 160, 0.14);
  color: #baffea;
  border-color: rgba(0,255,170,.25);
}

.outcome-badge.loss{
  background: rgba(255, 70, 90, 0.14);
  color: #ffd0d6;
  border-color: rgba(255,90,110,.22);
}

/* rating delta */
.delta.zero{
  color:#cceeff;
  text-shadow:none;
  opacity:.95;
}

/* K/D/A (, ,    ) */
.col-kda{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  font-weight: 900;
  letter-spacing: .2px;
}

.col-kda .k{ color:#7CFF8A; text-shadow: 0 0 10px rgba(124,255,138,.18); }
.col-kda .d{ color:#FF6B6B; text-shadow: 0 0 10px rgba(255,107,107,.18); }
.col-kda .a{ color:#FFD27A; text-shadow: 0 0 10px rgba(255,210,120,.16); }
.col-kda .sep{ opacity:.55; color:#cceeff; }

/* empty state */
.hero-history-empty{
  padding: 12px 10px;
  color: rgba(204,238,255,.75);
}

/* responsive scroll */
@media (max-width: 900px){
  .hero-detail-history.hero-history-panel{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hero-history-table{
    min-width: 820px;
  }
}

/* ===== HERO SUBSTATS under hero name ===== */

.hero-substats{
  margin-top: 9px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
}

/* pill */
.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(0,255,255,.14), rgba(0,120,140,.08));
  border: 1px solid rgba(0,255,255,.26);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.25) inset,
    0 0 18px rgba(0,255,255,.12);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  line-height: 1;
  user-select:none;
  transform: translateZ(0);
}

.hero-pill__label{
  font-size: 12px;
  color: rgba(204,238,255,.92);
  letter-spacing: .2px;
}

.hero-pill__value{
  font-size: 13px;
  font-weight: 900;
  color:#ffffff;
  text-shadow: 0 0 10px rgba(0,255,255,.18);
}

.hero-pill__ico{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(0,255,255,.22);
  flex: 0 0 auto;
}

.hero-pill__ico--wins{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(0,255,170,.80), rgba(0,0,0,0));
  box-shadow: 0 0 14px rgba(0,255,170,.35);
}

.hero-pill__ico--games{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(0,170,255,.75), rgba(0,0,0,0));
  box-shadow: 0 0 14px rgba(0,170,255,.28);
}

.hero-pill__ico--wr{
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,210,120,.70), rgba(0,0,0,0));
  box-shadow: 0 0 14px rgba(255,210,120,.22);
}

.hero-pill--wins{ border-color: rgba(0,255,170,.34); }
.hero-pill--games{ border-color: rgba(0,170,255,.30); }
.hero-pill--wr{ border-color: rgba(255,210,120,.22); }

/* mobile */
@media (max-width: 560px){
  .hero-substats{ gap:6px; }
  .hero-pill{ padding: 6px 10px; }
  .hero-pill__label{ font-size: 11px; }
  .hero-pill__value{ font-size: 12px; }
}

/*       */ /*   abs   */

.server-tops-on-main{
  position:absolute;
  top:150px;
  left:20px;
  width:min(340px, 28vw);
  z-index:var(--z-floating);
}

.server-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  margin-bottom:24px;
}

.server-top-art{
  position:relative;
  width: 220px;
  height: 86px;
}

.server-top-bar{
  position:absolute;
  inset:0;
  width:100%;
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.server-top-crown{
  position:absolute;
  width:72px;
  height:auto;
  left:50%;
  transform:translateX(-50%);
  top:-14px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.server-top-caption{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-left: 4px;
}

.server-top-title{
  font-weight:800;
  color:#cceeff;
  text-shadow:0 0 6px rgba(0,255,255,.35);
  letter-spacing:.5px;
  font-size:0.92rem;
}

.server-top-nick{ color:#00ffff; font-weight:700; text-decoration:none; }
.server-top-nick:hover{ text-decoration:underline; }
.server-top-sub{ color:#a8c6d1; font-size:.9rem; }

/* =========================================================
   WEEKLY TOP  PRIME WORLD (GOLD / SILVER / BRONZE)
   ========================================================= */

/* ===============================
   CONTAINER
   =============================== */
.weekly-top {
  width: 300px;
  margin-left: 18px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #08383d, #05282c);
  box-shadow:
    inset 0 0 18px rgba(0,255,255,.15),
    0 10px 26px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: var(--z-content);
}

/* ===============================
   HEADER
   =============================== */
.weekly-top-header {
  text-align: center;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 8px;
  color: #bffcff;
  text-shadow: 0 0 6px rgba(0,255,255,.6);
}

.weekly-top-header span {
  display: block;
  font-size: .7rem;
  opacity: .7;
}

/* ===============================
   TABS
   =============================== */
.weekly-top-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.weekly-top-tabs button {
  flex: 1;
  font-size: .75rem;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid rgba(0,255,255,.25);
  background: #043136;
  color: #cceeff;
  cursor: pointer;
  transition: all .15s ease;
}

.weekly-top-tabs button.active {
  background: linear-gradient(180deg, #0a6b73, #05555c);
  box-shadow: 0 0 8px rgba(0,255,255,.5);
  color: #ffffff;
}

/* ===============================
   LIST
   =============================== */
.weekly-top-list {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: visible;
  padding-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 4px;
}

/* ===============================
   ITEM BASE
   =============================== */
.weekly-top-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: .75rem;
  background: rgba(0,0,0,.25);
  box-shadow: inset 0 0 6px rgba(0,255,255,.15);
  color: #eaffff;
}

/* ===============================
   RANK / NAME / VALUE
   =============================== */
.weekly-top-rank {
  width: 28px;
  text-align: center;
  font-weight: 900;
  color: #9ff;
}

.weekly-top-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.weekly-top-value {
  font-weight: 800;
  color: #ffd277;
}

/* ===============================
   TOP 1  GOLD
   =============================== */
.weekly-top-item.top-1 {
  background: linear-gradient(90deg, #4a3a00, #cfa83a);
  box-shadow:
    0 0 14px rgba(255,215,0,.6),
    inset 0 0 10px rgba(255,235,150,.35);
  color: #fffbe6;
}

.weekly-top-item.top-1 .weekly-top-rank {
  color: #ffd700;
}

/* ===============================
   TOP 2  SILVER
   =============================== */
.weekly-top-item.top-2 {
  background: linear-gradient(90deg, #2f3236, #bfc3c7);
  box-shadow:
    0 0 12px rgba(192,192,192,.5),
    inset 0 0 8px rgba(255,255,255,.25);
  color: #ffffff;
}

.weekly-top-item.top-2 .weekly-top-rank {
  color: #e0e0e0;
}

/* ===============================
   TOP 3  BRONZE
   =============================== */
.weekly-top-item.top-3 {
  background: linear-gradient(90deg, #3a2414, #cd7f32);
  box-shadow:
    0 0 10px rgba(205,127,50,.45),
    inset 0 0 8px rgba(255,220,180,.25);
  color: #fff3e6;
}

.weekly-top-item.top-3 .weekly-top-rank {
  color: #ffb36b;
}

/* ===============================
    CROWNS (PNG, SMALL, ANGLED)
   =============================== */
.weekly-top-item.top-1::before,
.weekly-top-item.top-2::before,
.weekly-top-item.top-3::before {
  content: "";
  position: absolute;
  top: -28px;
  left: -12px;
  width: 42px;
  height: 42px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: rotate(-22deg);
  opacity: 0.95;
  filter:
    drop-shadow(0 6px 6px rgba(0,0,0,.6))
    drop-shadow(0 0 8px rgba(255,255,255,.25));
  pointer-events: none;
  z-index: 2;
}

.weekly-top-item.top-1::before {
  background-image: url('/stats/ico/tops/gold-crown.png');
}

.weekly-top-item.top-2::before {
  background-image: url('/stats/ico/tops/silver-crown.png');
}

.weekly-top-item.top-3::before {
  background-image: url('/stats/ico/tops/bronz-crown.png');
}

/*===============================
   HOVER (NOT TOP 3)
   =============================== */
.weekly-top-item:not(.top-1):not(.top-2):not(.top-3):hover {
  background: rgba(0,255,255,.08);
}

.achievement-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg, #00383f, #002a30);
  border: 1px solid rgba(0,255,255,.45);
  border-radius: 12px;
  padding: 12px 16px;
  color: #dffcff;
  box-shadow:
    0 0 20px rgba(0,255,255,.35),
    inset 0 0 8px rgba(0,255,255,.25);
  opacity: 0;
  transform: translateY(20px);
  transition: .35s ease;
  z-index: var(--z-toast);
}

.achievement-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.achievement-toast img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
}

.achievement-toast .t-title {
  font-weight: 700;
  color: #00ffff;
}

.achievement-toast .t-name {
  font-size: .9rem;
  opacity: .9;
}

/* ===== OVERLAY ===== */
.nick-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 15, 18, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
}

/* ===== PANEL ===== */
.nick-panel {
  width: 360px;
  padding: 16px 18px 18px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #0e3a40, #07262a);
  border: 1px solid rgba(0, 255, 255, 0.35);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.4),
    inset 0 0 25px rgba(0,255,255,.15),
    0 18px 40px rgba(0,0,0,.6);
  animation: nickPop .25s ease-out;
  position: relative;
  z-index: var(--z-modal);
}

@keyframes nickPop {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ===== TITLE ===== */
.nick-title {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #e6ffff;
  margin-bottom: 10px;
  text-shadow: 0 0 6px rgba(0,255,255,.6);
}

/* ===== INPUT ===== */
.nick-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f3f6f7, #cfdede);
  border: 1px solid #bcd2d6;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2b2e;
  outline: none;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.35);
}

.nick-input::placeholder {
  color: #6b7f84;
  font-weight: 500;
}

.nick-input:focus {
  border-color: #00ffff;
  box-shadow:
    0 0 8px rgba(0,255,255,.6),
    inset 0 1px 3px rgba(0,0,0,.3);
}

.nick-input.error {
  border-color: #ff5555;
  box-shadow: 0 0 8px rgba(255,80,80,.6);
}

/* ===== ACTIONS ===== */
.nick-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

/* ===== SAVE BUTTON ===== */
.btn-save {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  border: 1px solid #ffe08a;
  background:
    linear-gradient(180deg, #f7e08a, #cfa542);
  color: #3a2a00;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 3px 8px rgba(0,0,0,.4);
}

.btn-save:hover {
  filter: brightness(1.08);
}

/* ===== CANCEL BUTTON ===== */
.btn-cancel {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  border: 1px solid #00cfa5;
  background:
    linear-gradient(180deg, #1ed3a8, #0a7f66);
  color: #eafff8;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 3px 8px rgba(0,0,0,.4);
}

.btn-cancel:hover {
  filter: brightness(1.08);
}

/* ===== TYPING ANIMATION ===== */
.nick-input.typing {
  animation: inputPulse .25s ease-out;
}

@keyframes inputPulse {
  0%   { box-shadow: 0 0 0 rgba(0,255,255,0); }
  50%  { box-shadow: 0 0 10px rgba(0,255,255,.55); }
  100% { box-shadow: 0 0 0 rgba(0,255,255,0); }
}

/* =====================================================
   ACCOUNT SWITCH  GAME HUD
   ===================================================== */

.as-wrap {
  margin: 14px 0 10px;
  display: flex;
  justify-content: center;
}

.as-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, #0b3b40, #06262a);
  border: 1px solid rgba(0,255,255,.35);
  box-shadow:
    inset 0 0 20px rgba(0,255,255,.18),
    0 12px 28px rgba(0,0,0,.5);
}

/* ===== TEXT ===== */
.as-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #d9f6f8;
  text-shadow: 0 0 6px rgba(0,255,255,.35);
  white-space: nowrap;
}

.as-text b {
  color: #00ffff;
  font-weight: 700;
}

/* ===== BUTTON (ACTION) ===== */
.as-btn {
  height: 38px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1px solid #ffe08a;
  background:
    linear-gradient(180deg, #f7e08a, #cfa542);
  color: #3a2a00;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 4px 12px rgba(0,0,0,.45);
  transition:
    transform .12s ease,
    filter .12s ease,
    box-shadow .12s ease;
}

.as-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.as-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.35);
}

/*   " " */
.as-btn:empty {
  display: none !important;
}

.audit-help-btn {
  all: unset;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: rgba(0,80,90,.6);
  border: 1px solid #00ffff55;
}

.audit-help-btn img {
  width: 30px;
  height: 30px;
}

/* === AUDIT TABS === */
.audit-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.audit-tab {
  all: unset;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #003a40;
  color: #cceeff;
  border: 1px solid #00ffff33;
}

.audit-tab.active {
  background: #008b94;
  color: #ffffff;
}

/* === PANELS === */
.audit-panel {
  display: none;
}

.audit-panel.active {
  display: block;
}

/* === IMAGES === */
.audit-img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 10px auto;
  border-radius: 8px;
  border: 1px solid #00ffff33;
}

/* =========================================================
   SEARCH FORM    ( )
   ========================================================= */

.search-form input[type="text"] {
  height: 42px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #00ffff44;
  background: rgba(0, 40, 45, 0.9);
  color: #dbefff;
  font-size: 0.95rem;
  outline: none;
}

.search-form input[type="text"]::placeholder {
  color: #9adfe6;
}

/* ===  === */
.search-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  cursor: pointer;
  user-select: none;
  border-radius: 10px;
  border: 1px solid rgba(255, 210, 77, .55);
  background: linear-gradient(
    180deg,
    rgba(0,120,120,.35),
    rgba(0,60,60,.35)
  );
  color: #dbefff;
  font-family: HeliosCond, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .4px;
  box-shadow:
    0 0 2px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(0,255,255,.18);
  transition: filter .12s ease, box-shadow .12s ease, transform .06s ease;
}

.search-btn:hover {
  filter: brightness(1.08);
  box-shadow:
    0 0 0 2px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(0,255,255,.28),
    0 10px 20px rgba(0,0,0,.28);
}

.search-btn:active {
  transform: translateY(1px);
}

/* =========================================================
   MATCHES PAGINATION (DESKTOP + MOBILE)
   ========================================================= */

.matches-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 6px;
  user-select: none;
}

.match-nav {
  all: unset;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #dbefff;
  background: radial-gradient(circle at top,
    rgba(0,120,120,.55),
    rgba(0,60,60,.65)
  );
  border: 1px solid rgba(0,255,255,.35);
  box-shadow:
    inset 0 0 10px rgba(0,255,255,.25),
    0 6px 18px rgba(0,0,0,.5);
  transition: transform .12s ease, filter .12s ease;
}

.match-nav:hover:not(:disabled) {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.match-nav:active:not(:disabled) {
  transform: translateY(1px);
}

.match-nav:disabled {
  opacity: .35;
  cursor: default;
}

.page-indicator {
  color: #9feeff;
  font-weight: 600;
  font-size: .95rem;
}

/* =========================================================
   MATCH FILTERS  MODERN UI
   ========================================================= */

.filters-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  width: 100%;
  margin-bottom: 10px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 140px;
}

.filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #00ffff;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* === SELECT === */
.filter-select {
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,255,255,.35);
  background:
    linear-gradient(
      180deg,
      rgba(0,50,55,.95),
      rgba(0,25,30,.95)
    );
  color: #dbefff;
  font-size: 0.9rem;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px rgba(0,255,255,.15),
    0 4px 12px rgba(0,0,0,.4);
  transition: filter .12s ease, box-shadow .12s ease;
}

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

.filter-select:focus {
  outline: none;
  border-color: rgba(255,210,77,.7);
  box-shadow:
    inset 0 0 0 1px rgba(255,210,77,.35),
    0 0 0 2px rgba(0,0,0,.3);
}

/* =========================================================
HIDE SCROLLBARS FOR STATS PANELS
========================================================= */

.weekly-top-list::-webkit-scrollbar,
.builder-shell::-webkit-scrollbar,
.server-tops-on-main .tops-scroll::-webkit-scrollbar,
.top-players-list::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
}

/* ========================================================================== */
/* [100] ACHIEVEMENTS / INFO PAGE RESPONSIVE PATCH                            */
/* ========================================================================== */

@media (min-width: 1600px) {
  body .container {
    width: min(1560px, 92vw);
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1280px) {
  body .container {
    width: 96%;
    padding: 16px;
  }
}

@media (max-width: 1100px) {
}

@media (max-width: 700px) {
  body {
    background-position: center top;
    background-size: cover;
  }
}

/* ==========================================================================
   CLEANUP / MOBILE SAFETY PATCH
   ========================================================================== */

.left-section,
.favorite-hero-container,
.stats-frame,
.favorites-on-main,
.weekly-top,
.server-top{
  min-width: 0;
}

.favorite-hero{
  column-gap: clamp(14px, 4vw, 76px);
}

.favorite-hero .hero-img,
.left-section > .stats-frame .hero-img{
  width: clamp(54px, 8vw, 72px);
  height: auto;
}

.hero-info,
.favorite-hero .hero-info,
.left-section > .stats-frame .hero-info{
  min-width: 0;
}

.hero-info p,
.favorite-hero .hero-info p,
.left-section > .stats-frame .hero-info p{
  overflow-wrap: anywhere;
}

@media (max-width: 1280px){
  :root{
    --track-left: minmax(0, 320px);
    --track-mid: minmax(0, 380px);
    --track-right: minmax(0, 320px);
    --sep: 18px;
  }

  .stats-summary{
    max-width: 100%;
  }
}

@media (max-width: 992px){
  :root{
    --sep: 12px;
  }

  .stats-summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 100%;
  }

  .stats-summary > :nth-child(1),
  .stats-summary > :nth-child(2),
  .stats-summary > :nth-child(3),
  .stats-summary > :nth-child(4){
    grid-column: auto;
  }

  .stats-summary > div:nth-child(4),
  .stats-summary-accrang{
    margin-top: 0;
    transform: none;
  }

  .stats-summary > div:nth-child(4):hover{
    transform: translateY(-2px);
  }

  .left-section,
  .win-loss-chart{
    grid-column: auto;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .favorite-hero-container,
  .stats-frame{
    max-width: 100%;
  }

  .favorites-on-main{
    width: 100%;
    max-width: 100%;
  }

  .server-tops-on-main{
    position: static;
    width: 100%;
    margin: 14px 0 0;
  }
}

@media (max-width: 700px){
  .favorite-hero{
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 8px;
    justify-items: start;
    text-align: left;
  }

  .favorite-hero .hero-img,
  .left-section > .stats-frame .hero-img{
    grid-column: 1;
    justify-self: start;
    margin-bottom: 0;
  }

  .favorite-hero .hero-info,
  .left-section > .stats-frame .hero-info{
    grid-column: 2;
    align-items: flex-start;
    text-align: left;
  }

  .stats-summary{
    grid-template-columns: 1fr;
  }

  .stats-summary > div{
    min-height: 64px;
    padding: 10px 12px;
  }

  .weekly-top-list{
    max-height: none;
  }
}
/* =========================================
   PROFILE HEADER COMPACT FIX
   ========================================= */

.profile-header,
.profile-header.profile-header--with-report{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  min-height:auto;
  margin-bottom:10px;
  background:rgba(0,30,33,.72);
  border:1px solid rgba(0,255,255,.16);
  border-radius:10px;
  box-sizing:border-box;
}

.profile-header-left{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}

.profile-header .username{
  display:flex !important;
  align-items:center;
  gap:8px;
  margin:0;
  line-height:1.1;
  font-size:clamp(1.15rem, 1rem + .35vw, 1.45rem);
  min-width:0;
  flex-wrap:wrap;
}

.profile-header .username > span{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-header .clan{
  margin:0;
  padding-right:0 !important;
  font-size:clamp(.92rem, .88rem + .12vw, 1.02rem);
  line-height:1.15;
  color:#00e7ff;
  white-space:nowrap;
}

.profile-header > div:last-child{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  flex:0 0 auto;
  min-width:max-content;
}

.fav-btn{
  flex:0 0 auto;
  width:32px;
  height:32px;
  min-width:32px;
  line-height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 768px){
  .profile-header,
  .profile-header.profile-header--with-report{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:10px 12px;
  }

  .profile-header > div:last-child{
    width:100%;
    justify-content:flex-start;
    min-width:0;
  }

  .profile-header .username{
    font-size:1.1rem;
  }

  .profile-header .clan{
    white-space:normal;
  }
}

/* ========================================================================== */

/* ========================================================================== */
/* ACHIEVEMENTS NOTE                                                           */
/* Achievement visual styles moved to site-heroes-achievements.css.           */
/* This file keeps only shared page/layout rules to avoid deadlock overrides. */
/* ========================================================================== */

/* achievements rules moved to site-heroes-achievements.css */

.achievements-grid .ach-bottom-badge,
.achievements-grid .ach-bottom-badge.is-unique{
  pointer-events:none;
}

/* ========================================================================== */
/* NOTE  badge geometry/crop is controlled in site-heroes-achievements.css   */
/* ========================================================================== */