:root{
  --bg-1:#0e1116;
  --bg-2:#141820;
  --accent-left-start:#00b4d8;
  --accent-left-end:#48cae4;
  --accent-right-start:#8b5cf6;
  --accent-right-end:#a78bfa;
  --muted:#9ca3af;
  --goal:1000;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;width:100%;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;}
body{
  background: radial-gradient(800px 400px at 10% 20%, rgba(72,202,228,0.03), transparent 8%),
              radial-gradient(700px 300px at 90% 80%, rgba(139,92,246,0.03), transparent 8%),
              linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:#e6eef8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

/* soft animated background */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,0.012), rgba(255,255,255,0.006));
  z-index:0;
  pointer-events:none;
}

/* main wrap */
.wrap{position:relative;z-index:1;width:100%;max-width:980px;padding:28px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 12px 40px rgba(2,6,23,0.6);}

/* header */
.top{text-align:center;margin-bottom:20px}
.top h1{font-size:20px;margin:0;color:#f8fafc;font-weight:700}
.top .lead{margin:6px 0 0;color:var(--muted);font-size:13px}

/* race rows */
.race{display:flex;flex-direction:column;gap:18px;padding:6px 6px}
.row{display:flex;align-items:center;gap:18px;border-radius:10px;padding:8px 10px;transition:background 240ms ease}
.left{width:260px;display:flex;align-items:center;gap:14px}
.logo{width:68px;height:68px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);padding:6px}
.ch-name{font-size:15px;color:#dbeafe;font-weight:600}

/* right area with bar and number */
.right{flex:1;display:flex;align-items:center}
.bar-wrap{width:100%;display:flex;align-items:center;gap:14px}
.bar-bg{flex:1;height:16px;background:rgba(255,255,255,0.035);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:999px;transition:width 1100ms cubic-bezier(.2,.9,.2,1), box-shadow 300ms}
.count{width:72px;text-align:right;font-weight:700;font-size:18px;color:#e6eef8;min-width:72px;}

/* left & right bar styles */
#bar-left{background:linear-gradient(90deg,var(--accent-left-start),var(--accent-left-end));box-shadow:0 6px 28px rgba(72,202,228,0.1)}
#bar-right{background:linear-gradient(90deg,var(--accent-right-start),var(--accent-right-end));box-shadow:0 6px 28px rgba(167,139,250,0.1)}

/* winner badge */
.badge{display:inline-block;margin-left:10px;background:rgba(255,255,255,0.03);padding:4px 8px;border-radius:999px;font-size:12px;color:var(--muted);}

/* hover subtle highlight */
.row:hover{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));}

/* responsive */
@media (max-width:720px){
  .left{width:160px}
  .count{font-size:16px;min-width:64px}
  .logo{width:56px;height:56px}
}