.ec-wrap{
  background: radial-gradient(1200px 500px at 20% 10%, rgba(77,208,255,0.16), transparent 55%),
              radial-gradient(900px 450px at 85% 20%, rgba(255,209,102,0.10), transparent 60%),
              linear-gradient(180deg, #0b1220, #0a1020 60%, #070c18);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}

.ec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.ec-title{
  color:#eaf2ff;
  font-weight:800;
  letter-spacing:0.4px;
  margin:0;
}

.ec-sub{
  color: rgba(234,242,255,0.75);
  font-size: 0.92rem;
  margin: 0;
}

.ec-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.ec-table thead th{
  color: rgba(159,179,255,0.85);
  font-weight:700;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.10em;
  border:0;
  padding: 10px 12px;
}

.ec-row{
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ec-row:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
  border-color: rgba(77,208,255,0.28);
}

.ec-table tbody td{
  border:0;
  padding: 14px 12px;
  color: rgba(234,242,255,0.92);
  vertical-align: middle;
}

.ec-rank{
  width: 56px;
  font-weight:900;
  font-size: 1.05rem;
  color:#ffd166;
}

.ec-player{
  font-weight:700;
  color:#ffffff;
}

.ec-score{
  font-weight:900;
  font-size: 1.25rem;
  color:#4dd0ff;
}

.ec-meta{
  font-size:0.90rem;
  color: rgba(234,242,255,0.75);
}

.ec-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing:0.03em;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}

.ec-badge.ec-mastery{ color:#4cd964; border-color: rgba(76,217,100,0.35); }
.ec-badge.ec-developing{ color:#ffc107; border-color: rgba(255,193,7,0.35); }
.ec-badge.ec-needs{ color:#ff5252; border-color: rgba(255,82,82,0.35); }

.ec-top1{
  background: radial-gradient(900px 300px at 15% 20%, rgba(255,209,102,0.22), transparent 60%),
              linear-gradient(90deg, rgba(255,209,102,0.18), rgba(255,255,255,0.06));
  border-color: rgba(255,209,102,0.28);
}

.ec-top2{
  background: radial-gradient(900px 300px at 15% 20%, rgba(200,210,230,0.20), transparent 60%),
              linear-gradient(90deg, rgba(200,210,230,0.12), rgba(255,255,255,0.06));
  border-color: rgba(200,210,230,0.22);
}

.ec-top3{
  background: radial-gradient(900px 300px at 15% 20%, rgba(205,127,50,0.22), transparent 60%),
              linear-gradient(90deg, rgba(205,127,50,0.14), rgba(255,255,255,0.06));
  border-color: rgba(205,127,50,0.22);
}

.ec-cell-tight{ white-space: nowrap; }


.heroGame{
  background-size: cover;
}

#hero.heroGame:before{
  background: rgba(20, 22, 137, 0.55) !important;
}

#hero.heroGame{
  background:
    linear-gradient(
      rgba(246, 127, 255, 0.05),
      rgba(246, 127, 255, 0.05)
    ),
    url('img/bg.png') center center no-repeat;
    
}

#hero .hero-img img{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#hero .hero-img img + img{
  margin-top: 18px;
}


.retro-card {
  background: linear-gradient(
    171deg,
    rgba(99, 4, 214, 1) 8%,
    rgba(194, 58, 135, 1) 100%
  );
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(99, 4, 214, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

.retro-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 14px 38px rgba(194, 58, 135, 0.65);
}

.retro-card-frame {
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 12px;
  padding: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.retro-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.6));
}

.retro-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}

.retro-card-body {
  padding-top: 12px;
  text-align: center;
}

.retro-card-title {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.retro-card-desc {
  font-family: "Play", sans-serif;
  font-size: 1.0em;
  color: #f2f2f2;
  line-height: 1.2;
  opacity: 0.95;
}



.retro-card-hero {
  background: linear-gradient(
    165deg,
    rgb(88, 30, 127) 10%,
    rgba(194, 58, 135, 1) 100%
  );
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 14px 36px rgba(0, 140, 255, 0.45);
}

.retro-card-body-hero {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  text-align: center;
}

.retro-card-title-hero {
  font-family: "Play", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.retro-card-desc-hero {
  font-family: "Play", sans-serif;
  font-size: 1.2em;
  color: #f2f2f2;
  line-height: 1.2;
  max-width: 760px;
  margin: 0 auto;
  opacity: 0.95;
}