.container{max-width:var(--max); margin:0 auto; padding:0 16px}
.section{padding:18px 0}
.grid{display:grid; gap:14px}
@media(min-width:980px){
  .grid-2{grid-template-columns: 1.25fr .75fr}
  .grid-3{grid-template-columns: repeat(3,1fr)}
  .grid-4{grid-template-columns: repeat(4,1fr)}
}

/* ---------- Header (modern + differentiative) ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(135deg, #0b1220 0%, #1b0b3a 45%, #0b1220 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.topbar::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 420px at 20% 10%, rgba(59,130,246,.22), transparent 60%),
              radial-gradient(900px 420px at 80% 0%, rgba(109,40,217,.22), transparent 60%);
  pointer-events:none;
}
.topbar .nav{ position:relative; }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:12px;
}
.brand{display:flex; gap:10px; align-items:center; font-weight:950; letter-spacing:.2px; color:#fff}
.brandMark{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:#fff;
  color:#0b1220;
  box-shadow: var(--shadow2);
}
.navlinks{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.navlinks a{
  padding:9px 10px; border-radius:12px;
  color: rgba(255,255,255,.78);
  border:1px solid transparent;
}
.navlinks a:hover{
  color:#fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; gap:8px; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  cursor:pointer;
  box-shadow: var(--shadow2);
  user-select:none;
}
.btn:hover{transform:translateY(-1px); transition:.15s ease}
.btn{
  font-weight: 900;
}

.btn.primary{
  background:#4c1d95;  /* darker violet */
  color:#fff;
  border-color: transparent;
}
.btn.cyan{
  background:#0e7490;  /* darker cyan */
  color:#fff;
  border-color: transparent;
}
.btn.pink{
  background:#9d174d;  /* darker pink */
  color:#fff;
  border-color: transparent;
}
.btn.dark{
  background:#0b1220;
  color:#fff;
  border-color: transparent;
}
.btn.ghost{background:#fff}

/* ---------- Cards ---------- */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding:16px;
}
.muted{color:var(--muted)}
.h1{font-size:32px; margin:0; letter-spacing:-.4px; line-height:1.05}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* --- Strong tactile button shadow (all devices) --- */
.btn{
  position: relative;
  box-shadow:
    0 3px 0 rgba(0,0,0,.28),     /* hard bottom edge */
    0 4px 10px rgba(0,0,0,.18);  /* soft depth shadow */
}

/* Pressed state */
.btn:active{
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.32),
    0 2px 6px rgba(0,0,0,.18);
}

/* ---------- Tabs (vibrant + eye-catching) ---------- */
.tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  padding:8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow2);
}
.tab{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:#f3f4f6;
  color:#111827;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}
.tab.on{background:#0b1220;color:#fff;border-color:#0b1220}

/* ---------- Vibrant pills ---------- */
.pills{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 11px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  letter-spacing:.25px;
  border:1px solid transparent;
  white-space:nowrap;
}
.pill.violet{background:rgba(109,40,217,.10); color:var(--violet); border-color: rgba(109,40,217,.18)}
.pill.cyan{background:rgba(8,145,178,.10); color:var(--cyan); border-color: rgba(8,145,178,.18)}
.pill.pink{background:rgba(219,39,119,.10); color:var(--pink); border-color: rgba(219,39,119,.18)}
.pill.green{background:rgba(21,128,61,.10); color:var(--green); border-color: rgba(21,128,61,.18)}
.pill.red{background:rgba(225,29,72,.10); color:var(--red); border-color: rgba(225,29,72,.18)}
.pill.amber{background:rgba(180,83,9,.10); color:var(--amber); border-color: rgba(180,83,9,.18)}

/* ---------- Competition cards (equal height) ---------- */
.compCard{
  padding:16px;
  border-radius: var(--r);
  border:1px solid var(--line);
  background:#fff;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  height:100%;
}
.compHead{display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
.compName{
  margin:0;
  font-weight:950;
  font-size:19px;
  letter-spacing:-.2px;
  line-height:1.15;
}

.compMeta{margin-top:3px; color:var(--muted); font-size:13px}
.compRight{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.compBody{margin-top:12px; flex:1}
.badgesRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.compActions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-start}

/* Prize highlight box (just show the values) */
.prizeBox{
  margin-top:12px;
  border-radius: 14px;
  border:1px solid rgba(180,83,9,.18);
  background:#fff7ed;
  padding:10px 12px;
  font-weight:950;
  color:#7c2d12;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* ---------- Stats tiles (colored + engaging) ---------- */
.statGrid{display:grid; gap:12px}
@media(min-width:980px){ .statGrid{grid-template-columns:repeat(3,1fr)} }

.stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.stat::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background:#111827;
}
.stat.violet::before{background: var(--violet)}
.stat.cyan::before{background: var(--cyan)}
.stat.pink::before{background: var(--pink)}

.statTop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.statNum{font-weight:950; font-size:22px; letter-spacing:-.2px}
.statLabel{color:var(--muted); font-size:13px}
.statIcon{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:#f3f4f6;
  font-size:18px;
}

/* ---------- Footer (reusable for all pages) ---------- */
.footer{
  margin-top:18px;
  background:#0b1220;
  border-top:1px solid rgba(255,255,255,.10);
  color:#fff;
}
.footerInner{
  padding:16px 0;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footerLinks{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.footerLinks a{
  padding:9px 10px;
  border-radius:12px;
  color:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.footerLinks a:hover{color:#fff;background: rgba(255,255,255,.08)}
.footerNote{color:rgba(255,255,255,.65); font-size:12px}

/* Mobile polish */
@media(max-width:520px){
  .h1{font-size:28px}
  .compHead{flex-direction:column}
  .compRight{justify-content:flex-start}
}
@media (max-width: 640px){
  .navlinks{
    gap:8px;
  }
  .navlinks a{
    padding:8px 10px;
  }
}

/* -------------------- MOBILE BURGER NAV -------------------- */
.burgerBtn{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22);
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow2);
}
.burgerBtn:active{ transform: scale(.98); }

.burgerIcon{
  width:18px; height:14px;
  display:grid;
  gap:4px;
}
.burgerIcon span{
  display:block;
  height:2px;
  border-radius:999px;
  background:#fff;
}

/* Drawer + overlay */
.drawerOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease;
  z-index:1000;
}
.drawer{
  position:fixed; top:0; left:0;
  width:min(86vw, 320px);
  height:100%;
  background: linear-gradient(180deg, rgba(11,18,32,0.98), rgba(27,11,58,0.98));
  border-right: 1px solid rgba(255,255,255,.10);
  transform: translateX(-102%);
  transition: transform .25s ease;
  z-index:1001;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.drawerBrand{
  display:flex; gap:10px; align-items:center;
  color:#fff; font-weight:950;
}
.drawerBrandMark{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background:#fff;color:#0b1220;
}
.drawerClose{
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
}
.drawerLinks{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:6px;
}
.drawerLinks a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-weight:900;
}
.drawerLinks a:hover{
  background: rgba(255,255,255,.08);
  color:#fff;
}
.drawerLinks a .hint{
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.65);
}

.drawerFooter{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.65);
  font-size:12px;
  line-height:1.35;
}

/* Open state */
.nav-open .drawerOverlay{
  opacity:1;
  pointer-events:auto;
}
.nav-open .drawer{
  transform: translateX(0);
}

/* Mobile behavior: hide inline nav links, show burger */
@media (max-width: 720px){
  .navlinks{ display:none; }
  .burgerBtn{ display:inline-flex; }
}
/* Section title spacing (all devices) */
.sectionTitle{
  margin-bottom: 12px;
}
.socialLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.social{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
  font-weight:900;
}
.social:hover{
  background: rgba(255,255,255,.08);
  color:#fff;
}
.social svg{opacity:.95}
@media (max-width: 640px){
  .socialLinks{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  .social{
    justify-content:center;
    width:100%;
  }
}

/* --- Minimal footer: icons only, blends with page --- */
.footer.footerLight{
  background: transparent;          /* merges with page */
  border-top: 1px solid var(--line);
  padding: 14px 0;
  margin-top: 18px;
}

.footerIconsRow{
  display:flex;
  justify-content:center;
  gap:14px;
  align-items:center;
}

.iconBtn{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;                 /* same as cards */
  display:grid;
  place-items:center;
  color:#0f172a;                   /* clean dark icon */
  box-shadow: var(--shadow2);
}

.iconBtn:hover{
  transform: translateY(-1px);
  transition: .15s ease;
}

/* Mobile: slightly smaller icons */
@media (max-width: 640px){
  .footerIconsRow{ gap:12px; }
  .iconBtn{ width:38px; height:38px; border-radius:14px; }
}
/* Extra spacing between section title and tabs */
.sectionTitle .tabs{
  margin-top: 12px;   /* increase/decrease as you like */
}
@media (max-width: 640px){
  .sectionTitle .tabs{
    margin-top: 14px;
  }
}
/* Ensure header brand text stays white and clickable */
.topbar .brandLink{
  color:#ffffff !important;
  text-decoration:none;
}
.topbar .brandLink:hover{ opacity:.92; }

/* ===== HOME card tweaks ===== */

/* space below pills before comp name */
.compCard .pills{
  margin-bottom:10px;
}

/* make comp_date more visible */
.compCard .dateLine{
  margin-top:8px;
  font-weight:1000;
  color:#111827;
  font-size:14px;
}
.compCard .dateLine small{
  font-weight:900;
  color:rgba(15,23,42,.55);
  margin-right:6px;
}

/* smaller inline golden prizes worth */
.prizeInline{
  margin-top:8px;
  font-size:12.5px;
  font-weight:950;
  color:#b8860b;
}
.prizeInline b{
  color:rgba(15,23,42,.55);
  font-weight:900;
  margin-right:6px;
}

/* ===== Header Account Icon Button ===== */
.authIconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:#fff;
  text-decoration:none;
  margin-left:6px;
  transition:transform .08s ease, background .12s ease, border-color .12s ease;
}
.authIconBtn:hover{
  transform:translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.25);
}
.authIcon{ font-size:18px; line-height:1; }

#hdrAuthBtn[data-state="linked"]{ border-color:rgba(34,197,94,.55); }
#hdrAuthBtn[data-state="unlinked"]{ border-color:rgba(59,130,246,.45); }

#drawerAuthLink{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  margin:10px 10px 6px;
  background:rgba(255,255,255,.06);
}
#drawerAuthLink .hint{ opacity:.85; }

/* ===== Disabled Primary Button (Home & Competitions) ===== */
.btn.primary.disabled,
.btn.primary:disabled {
  background: linear-gradient(135deg, #d78aa5, #c77a98);
  color: #ffffff;
  border: none;
  cursor: not-allowed;
  opacity: 1;              /* keep full color */
  box-shadow: none;
  transform: none;
}

/* Remove hover effects */
.btn.primary.disabled:hover,
.btn.primary:disabled:hover {
  background: linear-gradient(135deg, #d78aa5, #c77a98);
  transform: none;
  box-shadow: none;
}

/* Optional softer pill look */
.btn.primary.disabled {
  border-radius: 14px;
  padding: 12px 22px;
  font-weight: 700;
}

/* Gradient ring for header auth button */
.authIconBtn.navAuthBtn{
  position: relative;
  overflow: hidden;
}
.authIconBtn.navAuthBtn::before{
  content:"";
  position:absolute; inset:-1px;
  background: linear-gradient(135deg, rgba(59,130,246,.55), rgba(109,40,217,.55), rgba(16,185,129,.35));
  opacity:.55;
  filter: blur(8px);
  pointer-events:none;
}
.authIconBtn.navAuthBtn > *{ position:relative; }