/* ==========================================
   Cubeology Rankings — Dark Modern UI (Mobile First)
   Matches your HTML classes exactly.
   ========================================== */

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.12);

  --text:#EAF0FF;
  --muted: rgba(234,240,255,0.72);

  --brand:#7C3AED;   /* purple */
  --brand2:#22D3EE;  /* cyan */
  --good:#22C55E;
  --bad:#EF4444;

  --shadow: 0 18px 60px rgba(0,0,0,0.55);

  --r12:12px;
  --r16:16px;
  --r20:20px;

  --max: 1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);

  /* Cleaner, friendlier background (no harsh purple slab) */
  background:
    radial-gradient(900px 600px at 12% 12%, rgba(124,58,237,0.18), transparent 60%),
    radial-gradient(900px 600px at 88% 18%, rgba(34,211,238,0.14), transparent 62%),
    radial-gradient(900px 600px at 50% 100%, rgba(255,255,255,0.05), transparent 60%),
    linear-gradient(180deg, #070A12 0%, #0B1020 100%);
}

/* App container */
#app{
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 14px 34px;
}

/* ========= Header ========= */
.pageHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  overflow:hidden;
  position: relative;
}
.pageHeader::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(135deg,
    rgba(124,58,237,0.30),
    rgba(34,211,238,0.18),
    rgba(255,255,255,0.02)
  );
  filter: blur(28px);
  opacity: 0.45;
  pointer-events:none;
}
.pageHeader > *{ position:relative; }

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.2px;
  color: rgba(234,240,255,0.86);
}
.kicker .dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--brand2));
  box-shadow: 0 0 18px rgba(34,211,238,0.55);
}

.pageTitle{
  margin:10px 0 0;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: 0.3px;
}
.pageSub{
  margin:8px 0 0;
  color: var(--muted);
  font-weight: 650;
}

.storeBtn{
  text-decoration:none;
  color: var(--text);
  font-weight: 950;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.storeBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(34,211,238,0.40);
}

/* ========= Segmented buttons ========= */
.segRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 14px 0;
}
.segRow.small{ margin:0; }

.segBtn{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 950;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.segBtn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
}
.segBtn.active{
  border-color: rgba(124,58,237,0.55);
  background: linear-gradient(135deg, rgba(124,58,237,0.22), rgba(34,211,238,0.14));
}

/* ========= Cards ========= */
.card{
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow);
  overflow:hidden;
}

/* ========= Toolbar ========= */
.toolbar{
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.toolbarTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap:wrap;
}

.searchWrap{
  flex: 1 1 320px;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
}
.searchWrap .icon{ opacity: 0.9; }
.searchWrap input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  color: var(--text);
  font-weight: 750;
  font-size: 14px;
}

.miniBtn{
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 950;
  cursor:pointer;
  transition: background .12s ease, transform .12s ease;
}
.miniBtn:hover{ background: rgba(255,255,255,0.09); transform: translateY(-1px); }

/* ========= Event tabs ========= */
.eventTabsWrap{ margin-top: 12px; }
.eventTabsTitle{
  font-weight: 950;
  color: rgba(234,240,255,0.86);
  margin-bottom: 8px;
}
.eventTabs{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.eventBtn{
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 950;
  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.eventBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,0.08); }
.eventBtn.active{
  border-color: rgba(34,211,238,0.55);
  background: rgba(34,211,238,0.14);
}

/* ========= Status box ========= */
.statusBox{
  margin: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.22);
  color: rgba(234,240,255,0.90);
}

/* ========= Rankings table ========= */
.rankWrap{ width:100%; }

.rankRow{
  display:grid;
  grid-template-columns: 60px 1fr 110px;
  gap: 10px;
  padding: 14px 14px;
  align-items:center;

  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(255,255,255,0.06);

  transition: background .15s ease, transform .12s ease;
}

.rankRow:hover{
  background: rgba(255,255,255,0.045);
  transform: translateY(-1px);
}
.rankHeader{
  position: sticky;
  top: 0;
  z-index: 5;

  background: rgba(7,10,18,0.88);
  backdrop-filter: blur(10px);

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

  font-weight: 950;
}
.rankCellRight{ text-align:right; font-weight: 950; }

.rankName{
  color: var(--text);
  font-weight: 950;
  text-decoration: none;
}
.rankName:hover{ text-decoration: underline; }
.rankCompLine{
  margin-top: 3px;
  color: var(--muted);
  font-weight: 750;
  font-size: 12px;
}

/* ========= Lists (Participants / Competitions) ========= */
/* Participants + Competitions rows (correct class) */
.rowItem{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

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

  background: rgba(255,255,255,0.02);
  text-decoration:none;
  color:var(--text);

  transition: background .15s ease, transform .12s ease;
}
.rowItem:hover{
  background: rgba(255,255,255,0.045);
  transform: translateY(-1px);
}

/* Your JS uses .listCard as container; keep it block not flex */
.listCard{
  display:block;
}

/* ========= Footer ========= */
.foot{
  margin-top: 18px;
  text-align:center;
  color: var(--muted);
  font-weight: 750;
}

/* ========= Pager ========= */
.pagerBar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding: 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.pagerInfo{
  color: var(--muted);
  font-weight: 850;
}
.pagerBtn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 950;
  cursor:pointer;
}
.pagerBtn:hover{ background: rgba(255,255,255,0.09); }
.pagerBtn:disabled{ opacity: 0.45; cursor: not-allowed; }

/* ========= Profile placeholders ========= */
.profileHead{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  padding: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.profileTitle{ margin:0; }
.badgeId{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight: 950;
}

/* ========= Mobile tuning ========= */
@media (max-width: 720px){
  #app{ padding: 14px 12px 28px; }
  .pageHeader{ padding: 16px 14px; }
  .pageTitle{ font-size: 28px; }
  .storeBtn{ padding: 10px 12px; }
  .rankRow{ grid-template-columns: 44px 1fr 92px; }
  .toolbarTop{ gap: 10px; }
  .searchWrap{ flex: 1 1 100%; }
  .segRow.small{ width: 100%; }
}
/* Hard stop: no gradients inside rows */
.rankRow,
.rowItem{
  background-image: none !important;
}