.level-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 14px;
  padding: 6px 2px;
}

.level-card {
  aspect-ratio: 1;
  min-height: 80px;
  background: var(--glass-3d-card-bg);
  border: 1px solid var(--glass-3d-card-border);
  border-top: 1px solid var(--liquid-glass-border-top);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.12s ease;
  box-shadow: var(--glass-3d-card-shadow);
}

.level-card:hover {
  background: var(--liquid-glass-bg-hover);
  border-color: var(--theme-accent);
  box-shadow: var(--glass-3d-card-hover-shadow);
  transform: translateY(-2px);
}

.level-card.active {
  border-color: var(--color-cyan);
  box-shadow: 0 0 14px var(--theme-accent-glow);
}

.level-card.locked {
  opacity: 0.35;
  cursor: not-allowed;
}

.level-card .num {
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-dotdigital);
  color: var(--color-ice-highlight);
}

.level-card .state {
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font-aeonikpro);
  color: var(--color-moon-mist);
  text-transform: uppercase;
}

.level-card.cleared .state {
  color: var(--color-green);
}