:root{
  --bg:#070A12;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.10);
  --text:#F5F7FF;
  --muted:rgba(245,247,255,.72);
  --line:rgba(255,255,255,.12);
  --blue:#0000FF;
  --sky:#3b6bff;
  --yellow:#FFE401;
  --gold:#FFE401;
  --mint:#55E3C6;
  --violet:#8B5CF6;
  --pink:#FF4D8D;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 28px;
  --max: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  /* Vibrant blue → yellow gradient (best-fit) */
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.28) 100%),
    radial-gradient(1100px 700px at 15% 10%, rgba(255,228,1,.22), transparent 60%),
    radial-gradient(1000px 650px at 85% 5%, rgba(59,107,255,.30), transparent 62%),
    radial-gradient(900px 600px at 50% 95%, rgba(0,0,255,.18), transparent 60%),
    linear-gradient(135deg, #0000FF 0%, #3b6bff 35%, #FFE401 100%);
  background-attachment: fixed;
  color:var(--text);
  overflow-x:hidden;
}


a{color:inherit; text-decoration:none}
.wrap{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.muted{color:var(--muted)}
.topbar{
  position:sticky; top:0; z-index:20;
  backdrop-filter: blur(14px);
  background: linear-gradient(to bottom, rgba(7,10,18,.86), rgba(7,10,18,.48));
  border-bottom:1px solid var(--line);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:12px; min-width: 280px}
.brand-logo{width:42px;height:42px; object-fit:contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.brand-name{font-weight:800; letter-spacing:.2px}
.brand-tag{font-size:12px; color:var(--muted); margin-top:2px}
.nav{display:flex; gap:14px; align-items:center}
.nav a{
  padding:10px 12px;
  border-radius:999px;
  color:rgba(245,247,255,.88);
  border:1px solid transparent;
}
.nav a:hover{
  border-color:rgba(255,228,1,.35);
  background:rgba(255,255,255,.05);
}
.userbox{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.pill{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}
.dot{width:9px;height:9px;border-radius:99px; display:inline-block}
.dot-gold{background:var(--gold); box-shadow: 0 0 18px rgba(255,228,1,.35), 0 0 22px rgba(59,107,255,.22)}
.dot-gray{background:rgba(255,255,255,.35)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  padding:10px 14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  font-weight:650;
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18)}
.btn:active{transform: translateY(0px)}
.btn-gold{
  /* WicketRush palette */
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
    linear-gradient(135deg, #0000FF 0%, #3b6bff 35%, #FFE401 100%);
  border-color: rgba(255,228,1,.55);
  color:#0b0b0b;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
}
.btn-ghost{background:transparent}
.main{padding:28px 0 38px}
.hero{
  border-radius: var(--radius2);
  padding: 34px 28px;
  background:
    radial-gradient(900px 260px at 20% 20%, rgba(255,228,1,.18), transparent 60%),
    radial-gradient(800px 260px at 80% 30%, rgba(85,227,198,.16), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; gap:18px;
  grid-template-columns: 1.2fr .8fr;
  align-items:center;
}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  width:fit-content;
  color:rgba(245,247,255,.86);
  font-size:13px;
}
.kicker .spark{width:10px;height:10px;border-radius:9px;background:var(--mint); box-shadow:0 0 16px rgba(85,227,198,.45)}
.h1{font-size:44px; line-height:1.06; margin:14px 0 8px; font-weight:900}
.sub{font-size:16px; color:var(--muted); max-width: 62ch}
.hero-actions{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.hero-card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(7,10,18,.35);
  padding:18px;
}
.hero-card h3{margin:0 0 8px; font-size:16px}
.tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.tag{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
  margin-top:18px;
}
.card{
  grid-column: span 4;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding:18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted)}
.card .meta{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(139,92,246,.14);
  border:1px solid rgba(139,92,246,.24);
}
.badge.gold{
  background:rgba(255,228,1,.14);
  border-color:rgba(59,107,255,.22);
}
.card a.stretch{
  position:absolute; inset:0; border-radius: var(--radius);
}
.lock{
  position:absolute; top:14px; right:14px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
}
.section-title{margin-top:28px; margin-bottom:10px; font-size:20px}
.panel{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:18px;
}
.form-row{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.input, textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,10,18,.35);
  padding: 12px 12px;
  color: var(--text);
  outline:none;
}
textarea{min-height:120px; resize:vertical}
.input:focus, textarea:focus{border-color:rgba(255,228,1,.55); box-shadow:0 0 0 4px rgba(255,228,1,.12)}
.help{font-size:12px; color:var(--muted); margin-top:6px}
.hr{height:1px; background:rgba(255,255,255,.12); margin:16px 0}
.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:16px;
}
.table th,.table td{
  padding:12px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:left;
  font-size:14px;
}
.table th{color:rgba(245,247,255,.85); font-weight:800; background:rgba(255,255,255,.04)}
.table tr:hover td{background:rgba(255,255,255,.03)}
.footer{
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(7,10,18,.62);
  backdrop-filter: blur(10px);
  padding: 22px 0 18px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:18px;
}
.footer-title{font-weight:900; margin-bottom:8px}
.footer-text{color:var(--muted); font-size:13px; line-height:1.5}
.footer-links{display:flex; flex-direction:column; gap:8px; font-size:13px}
.footer-links a{color:rgba(245,247,255,.82)}
.footer-links a:hover{color:var(--gold)}
.footer-bottom{display:flex; gap:10px; margin-top:12px; font-size:12px; color:rgba(245,247,255,.72)}
/* modal */
.modal{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
  z-index:50;
  padding:20px;
}
.modal.open{display:flex}
.modal-card{
  width:min(560px, 100%);
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
  position:relative;
}
.modal-x{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: var(--text);
  cursor:pointer;
  font-size:20px; line-height:1;
}
.modal-badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,228,1,.14);
  border:1px solid rgba(255,228,1,.24);
  color: rgba(245,247,255,.92);
  font-size:12px;
}
.modal-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
/* trivia */
.trivia-shell{display:grid; grid-template-columns: 1fr .55fr; gap:16px}
.trivia-box{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:18px;
}
.qtitle{font-weight:900; font-size:16px}
.timer{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
}
.bar{
  height:10px; border-radius:999px;
  background: rgba(255,255,255,.12);
  overflow:hidden;
  flex:1;
  margin-left:12px;
}
.bar > span{
  display:block; height:100%;
  width:100%;
  background: linear-gradient(90deg, rgba(59,107,255,.95), rgba(255,228,1,.95));
  transform-origin:left;
}
.opts{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:12px}
.opt{
  text-align:left;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(7,10,18,.35);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  min-height:50px;
}
.opt:hover{transform: translateY(-1px); border-color:rgba(85,227,198,.45); background: rgba(255,255,255,.05)}
.opt[disabled]{opacity:.55; cursor:not-allowed; transform:none}
.result{
  margin-top:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
}
.small{font-size:12px; color:var(--muted)}
.bg-orbs{position:fixed; inset:0; pointer-events:none; z-index:0}
.orb{position:absolute; filter: blur(26px); opacity:.6; border-radius:999px; animation: float 10s ease-in-out infinite}
.o1{width:260px;height:260px; left:-90px; top:140px; background:rgba(139,92,246,.35)}
.o2{width:320px;height:320px; right:-120px; top:260px; background:rgba(85,227,198,.28); animation-duration: 12s}
.o3{width:260px;height:260px; left:40%; bottom:-120px; background:rgba(255,77,141,.22); animation-duration: 14s}
@keyframes float{
  0%,100%{transform: translate(0,0)}
  50%{transform: translate(0,-18px)}
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .card{grid-column:span 6}
  .footer-grid{grid-template-columns:1fr}
  .trivia-shell{grid-template-columns:1fr}
}
@media (max-width: 620px){
  .nav{display:none}
  .h1{font-size:34px}
  .card{grid-column:span 12}
  .form-row{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
}

.lbRow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px; border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(0,0,0,.18); margin-top:10px}
.lbRank{font-weight:900; color:rgba(245,247,255,.88); width:48px}
.lbName{flex:1; color:rgba(245,247,255,.88); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lbPts{font-weight:900; color:rgba(255,228,1,.92)}