/* ========================================
   BRAWLSTARS — PREMIUM OVERHAUL
   HIGH-END GLASS UI
======================================== */

/* ========================================
   ROOT
======================================== */

:root {

  --accent:
    #00d4ff;

  --accent-2:
    #7c3aed;

  --success:
    #00ffb0;

  --danger:
    #ff5a5a;

  --glass:
    rgba(255,255,255,0.06);

  --glass-strong:
    rgba(255,255,255,0.10);

  --border:
    rgba(255,255,255,0.10);

  --shadow:
    0 18px 50px rgba(0,0,0,0.42);
}

/* ========================================
   GLOBAL
======================================== */

html,
body {

  margin: 0;
  padding: 0;

  min-height: 100%;

  font-family:
    Inter,
    Arial,
    sans-serif;

  color: white;

  overflow-x: hidden;

  scroll-behavior: smooth;
}

/* ========================================
   PAGE WRAPPER
======================================== */

.page {

  position: relative;
  z-index: 1;

  max-width: 1500px;

  margin: 0 auto;

  padding: 38px 24px 70px;
}

/* subtle ambient glow */
.page::before {

  content: "";

  position: fixed;

  inset: -20%;

  background:
    radial-gradient(
      circle at top,
      rgba(0,212,255,0.06),
      transparent 40%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(124,58,237,0.06),
      transparent 40%
    );

  pointer-events: none;

  z-index: -1;
}

/* ========================================
   TOPBAR
======================================== */

.topbar {

  text-align: center;

  margin-bottom: 42px;

  position: relative;
}

.title {

  margin: 0;

  margin-top: 30px;

  font-size:
    clamp(42px, 6vw, 72px);

  line-height: 0.96;

  letter-spacing: -2px;

  font-weight: 800;

  background:
    linear-gradient(
      90deg,
      #ffffff,
      #b8f5ff
    );

  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 30px rgba(255,255,255,0.08);
}

.subtitle {

  margin-top: 16px;

  font-size:
    clamp(16px, 2vw, 24px);

  line-height: 1.5;

  opacity: 0.78;
}

.description {

  margin:
    14px auto 0;

  max-width: 760px;

  font-size: 15px;

  line-height: 1.7;

  opacity: 0.62;
  margin-bottom: 30px;
}

.title,
.subtitle,
.description {
  text-align: center;
}

/* ========================================
   GRID
======================================== */

.stats-container {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 24px;

  max-width: 1450px;

  margin: 0 auto;

  align-items: start;
}

/* ========================================
   CARD
======================================== */

.card {

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.04)
    );

  border:
    1px solid rgba(255,255,255,0.10);

  border-radius: 26px;

  padding: 22px;

  display: flex;
  flex-direction: column;

  gap: 14px;

  backdrop-filter: blur(18px);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;

  will-change: transform, opacity;
}

/* glow layer */
.card::before {

  content: "";

  position: absolute;

  inset: -40%;

  background:
    radial-gradient(
      circle,
      rgba(0,212,255,0.12),
      transparent 60%
    );

  opacity: 0;

  transition: 0.4s ease;

  pointer-events: none;
}

.card:hover {

  transform:
    translateY(-8px);

  border-color:
    rgba(0,212,255,0.24);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.05)
    );

  box-shadow:
    0 0 28px rgba(0,212,255,0.10),
    0 20px 60px rgba(0,0,0,0.48);
}

.card:hover::before {
  opacity: 1;
}

/* ========================================
   NO TEXT SELECTION (PLAYER CARDS)
======================================== */

.card,
.block,
.rank,
.info,
.row,
.top-brawler,
.esports-banner {

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;     /* IE/Edge legacy */
  user-select: none;         /* modern browsers */

  -webkit-touch-callout: none; /* iOS long-press menu */
}

.card img {

  pointer-events: none;

  -webkit-user-drag: none;

  user-select: none;

  -webkit-user-select: none;
}

/* ========================================
   HEADER
======================================== */

.header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 14px;
}

.header h2 {

  margin: 0;

  font-size: 19px;

  font-weight: 700;

  letter-spacing: -0.3px;
}

/* ========================================
   BLOCK
======================================== */

.block {

  position: relative;

  overflow: hidden;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.06);

  padding: 16px;

  border-radius: 18px;

  display: flex;
  flex-direction: column;

  gap: 12px;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.block:hover {

  background:
    rgba(255,255,255,0.06);

  border-color:
    rgba(0,212,255,0.16);

  transform:
    translateY(-2px);
}

.block-title {

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 1.4px;

  opacity: 0.52;
}

/* ========================================
   RANK
======================================== */

.rank {

  display: flex;

  align-items: center;

  gap: 12px;
}

.rank img {

  width: 52px;
  height: 52px;

  object-fit: contain;

  display: block;

  filter:
    drop-shadow(
      0 0 10px rgba(255,255,255,0.08)
    );
}

.rank.highlight {

  filter:
    drop-shadow(
      0 0 14px rgba(255,200,0,0.65)
    );
}

/* ========================================
   PROGRESS
======================================== */

.progress {

  position: relative;

  height: 10px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255,255,255,0.08);

  border:
    1px solid rgba(255,255,255,0.04);
}

/* ========================================
   PREMIUM PROGRESS FILL
======================================== */

.fill {

  position: relative;

  overflow: hidden;

  height: 100%;

  width: 0%;

  border-radius: inherit;

  transition:
    width 1.2s cubic-bezier(.22,1,.36,1);

  background:
    linear-gradient(
      90deg,
      #7c3aed 0%,
      #4f7cff 45%,
      #00d4ff 100%
    );

  box-shadow:
    0 0 18px rgba(0,212,255,0.30),
    0 0 32px rgba(124,58,237,0.18);
}

/* animated glossy sweep */
.fill::after {

  content: "";

  position: absolute;

  top: -120%;
  left: -40%;

  width: 34%;
  height: 320%;

  transform:
    rotate(22deg);

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0),
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.38),
      rgba(255,255,255,0.12),
      rgba(255,255,255,0)
    );

  filter: blur(10px);

  animation:
    premium-shimmer 3.6s linear infinite;
}

/* gold variant */
.progress.gold .fill {

  background:
    linear-gradient(
      90deg,
      #ffcc33 0%,
      #ffb300 50%,
      #ff7a00 100%
    );

  box-shadow:
    0 0 20px rgba(255,190,0,0.35),
    0 0 34px rgba(255,120,0,0.18);
}

/* ========================================
   SHIMMER ANIMATION
======================================== */

@keyframes premium-shimmer {

  0% {

    transform:
      translateX(-220%)
      rotate(22deg);
  }

  100% {

    transform:
      translateX(520%)
      rotate(22deg);
  }
}

/* ========================================
   CARD ANIMATION
======================================== */

.card {
  opacity: 1;
  transform: translateX(-14px);
}

/* ========================================
   INFO
======================================== */

.info {

  display: flex;
  flex-direction: column;

  gap: 12px;
}

.row {

  font-size: 15px;

  line-height: 1.5;

  opacity: 0.88;
}

/* ========================================
   TROPHIES
======================================== */

.mode img {

  object-fit: contain;

  display: block;

  height: 28px;
  width: 28px;

  filter:
    drop-shadow(
      0 0 8px rgba(255,255,255,0.08)
    );
}

.trophy-header {

  display: flex;

  align-items: center;

  gap: 8px;
}

.trophy-header img {

  width: 20px;
  height: 20px;

  object-fit: contain;

  display: block;
}

/* ========================================
   ESPORTS BANNER
======================================== */

.esports-banner {

  position: relative;

  overflow: hidden;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  margin:
    20px auto 36px;

  max-width: 940px;

  padding:
    18px 22px;

  border-radius: 22px;

  background:
    linear-gradient(
      90deg,
      rgba(255,200,0,0.14),
      rgba(124,58,237,0.14)
    );

  border:
    1px solid rgba(255,255,255,0.10);

  text-decoration: none;

  color: white;

  backdrop-filter: blur(16px);

  box-shadow:
    0 14px 40px rgba(0,0,0,0.35);

  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease;

  z-index: 1;
}

.esports-banner::before {

  content: "";

  position: absolute;

  inset: -30%;

  background:
    radial-gradient(
      circle,
      rgba(0,212,255,0.10),
      transparent 60%
    );

  opacity: 0;

  transition: 0.4s ease;
}

.esports-banner:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(0,212,255,0.24);

  box-shadow:
    0 0 26px rgba(0,212,255,0.12),
    0 18px 50px rgba(0,0,0,0.42);
}

.esports-banner:hover::before {
  opacity: 1;
}

/* ========================================
   MODES
======================================== */

.modes {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 10px;
}

.mode {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 15px;

  opacity: 0.92;
}

.mode img {
  width: 20px;
}

/* ========================================
   TOP BRAWLER
======================================== */

.top-brawler {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 15px;

  opacity: 0.9;

  margin-top: 8px;

  padding-top: 12px;

  border-top:
    1px solid rgba(255,255,255,0.08);
}

.top-brawler img {

  width: 20px;
  height: 20px;

  object-fit: contain;

  display: block;
}

.brawler-inline {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  white-space: nowrap;
}

/*Prestige*/

.prestige-row {

  display: flex;

  align-items: center;

  gap: 10px;
}

.prestige-icon {

  position: relative;

  width: 34px;
  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;
}

.prestige-icon img {

  width: 34px;
  height: 34px;

  object-fit: contain;

  display: block;

  filter:
    drop-shadow(
      0 0 10px rgba(255,255,255,0.16)
    );
}

.prestige-level {

  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  font-family:
    "Lilita One",
    cursive;

  font-size: 14px;

  font-weight: 400;

  color: white;

  text-shadow:
    0 2px 0 rgba(0,0,0,0.9),
    0 0 8px rgba(0,0,0,0.6);

  letter-spacing: 0.3px;

  pointer-events: none;

  -webkit-text-stroke: 1px rgba(0,0,0,0.55);
}

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

@media (max-width: 1280px) {

  .stats-container {

    grid-template-columns:
      repeat(2, 1fr);
  }
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .page {

    padding:
      18px 14px 50px;
  }

  .title {

    font-size:
      clamp(38px, 12vw, 56px);

    letter-spacing: -1px;
  }

  .subtitle {

    font-size: 16px;
  }

  .description {

    font-size: 14px;
  }

  .stats-container {

    grid-template-columns: 1fr;

    gap: 16px;
  }

  .card {

    padding: 18px;

    border-radius: 22px;
  }

  .block {

    padding: 14px;
  }

  .row {

    font-size: 13px;
  }

  .modes {

    flex-direction: column;

    align-items: flex-start;
  }

  .esports-banner {

    flex-direction: column;

    align-items: flex-start;
  }
}

/* ========================================
   SMALL PHONES
======================================== */

@media (max-width: 420px) {

  .page {

    padding:
      14px 12px 40px;
  }

  .title {
    font-size: 34px;
  }

  .card {

    padding: 16px;

    border-radius: 20px;
  }

  .block {

    border-radius: 16px;
  }

  .header h2 {

    font-size: 17px;
  }

  .row {

    font-size: 12px;
  }

  .rank img {

    width: 44px;
    height: 44px;
  }
}