:root{
  --bg:#0f1724;
  --card:#071126;
  --muted:#9aa7b2;
  --accent:#8de1ff;
  --accent-2:#ffd166;
  --p1:#7efcb0;
  --p2:#ffd28a;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.04);
  --glow: 0 8px 30px rgba(137, 227, 255, .06);
  --glass-border: rgba(255,255,255,0.04);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, #071129 0%, #07142b 55%, #02111a 100%);
  color:#e6f3fb;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
}

/* wrapper */
.wrap{
  width:1100px;
  max-width:96%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:14px;
  box-shadow: 0 12px 40px rgba(2,8,23,0.6);
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.03);
}

/* topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:20px 26px;
  gap:20px;
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.title{
  display:flex;
  gap:14px;
  align-items:center;
}
.title .emoji{
  font-size:36px;
  transform:translateY(-2px);
}
.title h1{margin:0;font-size:20px}
.title .subtitle{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* controls */
.controls-row{display:flex;align-items:center;gap:18px}
.controls .btn{
  background:transparent;
  color:var(--accent);
  border:1px solid rgba(141,225,255,0.08);
  padding:8px 12px;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:all .16s ease;
}
.controls .btn:hover{transform:translateY(-2px)}
.controls .btn.primary{
  background:linear-gradient(90deg,var(--accent),#6bf0f7);
  color:#012028;
  box-shadow: 0 8px 28px rgba(0,160,200,0.12);
  border:1px solid rgba(255,255,255,0.06);
}
.controls .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

.toggles{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
.label-inline{display:flex;gap:8px;align-items:center;user-select:none}

/* arena */
.arena{padding:24px 30px 36px;display:flex;flex-direction:column;gap:18px}
.track{
  height:120px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  align-items:center;
  padding:18px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.02);
  gap:10px;
  overflow:hidden;
  position:relative;
}

/* bulbs as track steps */
.track .step{
  width:calc((100% - 60px) / 20); /* JS sets number of steps to 20, CSS width uses calc fallback */
  min-width:26px;
  height:26px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,0.06);
  font-size:12px;
  border:1px solid rgba(255,255,255,0.02);
  transition:all .12s linear;
  box-shadow: inset 0 -6px 16px rgba(0,0,0,0.25);
  position:relative;
}
.track .step.lit{
  color:#02131a;
  background: linear-gradient(180deg, rgba(142,241,255,1), rgba(125,238,219,0.85));
  transform:scale(1.16) translateY(-2px);
  box-shadow: 0 8px 28px rgba(141,225,255,0.12);
}
.track .step.player1.lit{
  background: linear-gradient(180deg,var(--p1), rgba(125,238,219,0.9));
}
.track .step.player2.lit{
  background: linear-gradient(180deg,var(--p2), rgba(255,210,130,0.9));
}

/* obstacle */
.track .step.obstacle::after{
  content:"❗";
  position:absolute;
  top:-6px;right:-6px;
  font-size:14px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.6));
}

/* players area */
.players{display:flex;align-items:center;justify-content:space-between;padding:8px 2px}
.player-card{width:320px;background:var(--glass);border-radius:12px;padding:12px;display:flex;gap:12px;align-items:center;border:1px solid var(--glass-border);backdrop-filter: blur(6px)}
.player-card .avatar{width:84px;height:84px;border-radius:10px;overflow:hidden;position:relative;flex-shrink:0;border:1px solid rgba(255,255,255,0.04)}
.player-card img{width:100%;height:100%;object-fit:cover;display:block}
.player-card .player__label{position:absolute;left:8px;bottom:6px;background:rgba(0,0,0,0.28);padding:6px 8px;border-radius:8px;font-weight:700;font-size:12px}
.player-card .stats{flex:1;color:var(--muted);font-size:13px}
.player-card .stats .progress{font-weight:700;color:var(--accent);margin-bottom:6px}

/* VS */
.vs{font-weight:900;font-size:18px;color:var(--muted)}

/* info */
.info{display:flex;justify-content:space-between;align-items:center;padding:0 2px;color:var(--muted);font-size:13px}
.legend{display:flex;gap:12px;align-items:center}
.legend-item{display:flex;gap:8px;align-items:center}
.bulb.mini{width:12px;height:12px;border-radius:6px;display:inline-block;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.03)}
.bulb.mini.lit{background:linear-gradient(180deg,var(--accent),#6bf0f7);box-shadow:0 6px 18px rgba(107,240,247,0.12)}

/* footer */
.footer{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid rgba(255,255,255,0.02);font-size:13px;color:var(--muted)}
.footer .back{color:var(--muted);text-decoration:none}

/* responsive */
@media (max-width:900px){
  .wrap{width:100%}
  .player-card{width:45%}
  .vs{display:none}
  .track{height:90px}
}