@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;800&display=swap');

:root {
  --glass-bg: rgba(255, 255, 255, 0.04);
  --accent1: linear-gradient(135deg, #7c3aed, #06b6d4);
  --neon: drop-shadow(0 0 8px rgba(124, 58, 237, 0.6)) drop-shadow(0 0 18px rgba(6, 182, 212, 0.2));
}

* {
  box-sizing: border-box
}

html, body {
  font-family: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(circle at 10% 10%, rgba(124, 58, 237, 0.12), transparent 10%), linear-gradient(180deg, #0b0520 0%, #0b1024 100%);
  color: white;
  min-height: 100vh
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.2rem
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.glow-title {
  font-weight: 800;
  font-size: 1.6rem;
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 1rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6)
}

.btn {
  padding: .7rem 1rem;
  border-radius: .8rem;
  border: none;
  font-weight: 700
}

.btn-primary {
  background: var(--accent1);
  box-shadow: 0 8px 30px rgba(124, 58, 237, 0.2);
  transform: translateZ(0);
  color: black
}

.btn-ghost {
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(90deg, #8b5cf6, #06b6d4);
  background-clip: text;
  color: transparent
}

.card {
  border-radius: .9rem;
  padding: .8rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.03)
}

.team-pill {
  background: linear-gradient(90deg, #7c3aed, #06b6d4);
  padding: .4rem .6rem;
  border-radius: .6rem;
  font-weight: 700
}

.input {
  width: 100%;
  padding: .8rem;
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
  color: #fff
}

.leader-num {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: linear-gradient(135deg, #06b6d4, #7c3aed)
}

@media (max-width:640px) {
  .glow-title {
    font-size: 1.2rem
  }
}