/* Neon Drift Game — no gray UI; uses only white/black + --pink/--blue */
.ndg{
  --pink:#f66399;
  --blue:#55ffff;
  --white:#ffffff;
  --black:#000000;
  width:min(980px, 100%);
  margin:0 auto;
}

.ndg__frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--pink) 22%, transparent), color-mix(in oklab, var(--blue) 18%, transparent));
  box-shadow: 0 0 0 3px var(--black), 0 0 0 6px var(--white);
}

.ndg__canvas{
  display:block;
  width:100%;
  height:100%;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in oklab, var(--blue) 14%, transparent), rgba(0,0,0,.78) 60%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.70));
}

/* HUD */
.ndg__hud{
  position:absolute;
  left:0; right:0; top:0;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(8px);
  border-bottom:3px solid var(--white);
}

.ndg__brand{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:1000;
  letter-spacing:.6px;
  color:var(--white);
  text-transform:uppercase;
}

.ndg__dot{
  width:12px;height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--blue));
  box-shadow:0 0 14px var(--blue), 0 0 14px var(--pink);
}

.ndg__stats{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  color:var(--white);
  font-weight:950;
}

.ndg__pill{
  border:3px solid var(--white);
  border-radius:999px;
  padding:6px 10px;
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 3px var(--black) inset;
}

.ndg__btn{
  border:3px solid var(--white);
  border-radius:14px;
  padding:8px 10px;
  background:var(--white);
  color:var(--black);
  font-weight:1000;
  cursor:pointer;
  user-select:none;
}
.ndg__btn:hover{ background:var(--pink); }
.ndg__btn--blue{ background:var(--blue); }
.ndg__btn--blue:hover{ background:var(--pink); }

/* Overlay */
.ndg__overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(0,0,0,.20);
}

.ndg__panel{
  width:min(560px, 92%);
  border:3px solid var(--white);
  border-radius:18px;
  padding:16px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 0 0 3px var(--black) inset;
  text-align:center;
}

.ndg__title{
  font-size:28px;
  font-weight:1100;
  margin:0 0 8px;
  letter-spacing:.5px;
  background:linear-gradient(90deg,var(--pink),var(--blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 22px color-mix(in oklab, var(--blue) 25%, transparent);
}

.ndg__sub{
  margin:0 0 14px;
  font-weight:950;
  color:var(--white);
  line-height:1.35;
}

.ndg__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.ndg__how{
  margin-top:12px;
  text-align:left;
  color:var(--white);
  font-weight:900;
}

.ndg__list{
  margin:0;
  padding-left:18px;
}